/* Reading-first type scale. Keep these shared rules after the legacy layout styles.
   Body copy: 18px desktop / 17px mobile. Supporting copy: at least 14px.
   Use rem so visitor font settings remain effective; do not shrink copy to fit grids. */
:root { --muted: #555d55; --copy: 1.125rem; --support: .9375rem; }
body { font-size: var(--copy); line-height: 1.85; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, td, th { overflow-wrap: break-word; }
.desktop-nav a, .header-cta, .language-button { font-size: 1rem; }
.desktop-nav { gap: 24px; margin-right: 12px; }
.header-actions { gap: 20px; }
.header-cta { gap: 18px; }
.language-button { min-height: 44px; }
.eyebrow, .section-label, .card-kicker, .hero-baseline, .tag, .step-tag, .footer-motto,
.card-number, .step-index, .section-topline > span {
    font-family: inherit; font-size: .875rem; letter-spacing: .02em; line-height: 1.6;
}
.hero-copy > .eyebrow, .philosophy-panel > .eyebrow, .closing-section > .eyebrow { font-size: .9375rem; letter-spacing: .03em; }
.hero { gap: clamp(32px, 5vw, 76px); padding-block: 80px; }
.hero h1 { font-size: clamp(48px, 5vw, 76px); letter-spacing: -.055em; }
.hero h1 > span { color: var(--ink); }
.hero-description { font-size: var(--copy); max-width: 32em; line-height: 1.9; }
.hero-philosophy, html[lang=zh-CN] .hero-philosophy { font-size: 1.25rem; letter-spacing: 0; }
.button, .text-link { font-size: 1rem; line-height: 1.6; }
.text-link { text-align: left; background: transparent; border: 0; border-bottom: 1px solid currentColor; }
.button-primary { background: var(--ink); }
.button-primary:hover { background: var(--blue); transform: none; }
.hero-baseline > span:nth-child(2) { font-size: .9375rem; }
.section-heading { grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr); }
.heading-sub, .evolution-card > p:last-child, .feature-card p, .section-end p,
.smart-steps p, .human-checkpoint p, .outcome-row p, .vision-teaser-bottom p,
.philosophy-panel > p:last-child, .flow-list p, .prose p, .prose li,
.solution-card > p, .solution-card > .muted, .solution-detail p {
    font-size: var(--copy); line-height: 1.85;
}
.heading-sub { max-width: 42em; }
.evolution-card h3, .feature-card h3 { font-size: 1.5rem; line-height: 1.35; }
.evolution-card > p:last-child { max-width: none; }
.evolution-flow { font-size: .9375rem; white-space: normal; flex-wrap: wrap; }
.evolution-flow > span { min-width: 0; padding: 10px 7px; }
.evolution-flow i { font-size: 1rem; }
.manual-steps { grid-template-columns: 1fr; }
.manual-steps li, .smart-steps strong, .human-checkpoint strong, .feature-card h4,
.solution-detail summary { font-size: 1rem; line-height: 1.65; }
.step-tag { font-size: .875rem; white-space: normal; }
.smart-steps > div > div { min-width: 0; }
.example-note, .page-hero > p:not(.eyebrow):not(.lead), .closing-section > p:last-of-type,
.footer-top p, .footer-bottom, .footer-links { font-size: var(--support); line-height: 1.8; }
.lead { font-size: 1.375rem; line-height: 1.8; }
.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.feature-card, .feature-card + .feature-card { border: 0; border-top: 1px solid var(--line); padding: 32px 32px 32px 0; background: transparent; }
.feature-card:nth-child(even) { padding-left: 32px; }
.card-arrow, .capability-icon, .mini-art, .closing-watermark, .footer-motto,
.section-topline > span { display: none; }
.capability-top { margin-bottom: 18px; }
.philosophy-grid { margin-top: 30px; }
.philosophy-panel { padding-top: 20px; }
.philosophy-panel h2 { font-size: clamp(36px, 4vw, 56px); }
.vision-teaser h2 > span { color: #53614b; }
.vision-teaser-bottom p { max-width: 650px; }
.outcome-row { grid-template-columns: 36px 1fr 1.5fr 30px; }
.section-end, .vision-teaser-bottom { flex-wrap: wrap; }
.footer-links { flex-wrap: wrap; max-width: 700px; gap: 16px 26px; justify-content: flex-start; }
.footer-top { align-items: flex-start; }
.contact-layout form > p, .contact-layout form div > p, .contact-layout input[type=checkbox] + label,
.field-validation-error, .validation-summary-errors { font-size: var(--support); line-height: 1.8; }
.contact-layout label { font-size: 1rem; }
.contact-layout input:not([type=checkbox]):not([type=hidden]), .contact-layout textarea { font-size: 1.0625rem; }
.contact-layout input[type=checkbox] { margin-top: 6px; }
.home-work-example { border-top: 2px solid var(--ink); padding: 26px 0; min-width: 0; }
.home-work-example h2 { font-size: clamp(25px, 2.3vw, 34px); letter-spacing: -.03em; margin: 16px 0 26px; }
.home-work-example ol { list-style: none; padding: 0; margin: 0 0 20px; }
.home-work-example li { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.home-work-example li > span { font-size: 1rem; font-weight: 500; }
.home-work-example li > p { font-size: 1rem; line-height: 1.8; color: var(--muted); }
.home-work-example .text-link { font-size: 1rem; }
.reading-invitation { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); max-width: 900px; }
.reading-invitation p { margin-bottom: 14px; }
/* No atmospheric looping or off-screen content hiding: movement explains a change. */
.organic-field, .flow-pulse { animation: none; }
.reveal, .reveal.is-pending { opacity: 1; transform: none; transition: none; }

/* Long-form editorial: continuous argument, not a grid of marketing cards. */
.article-page { --reading-width: 780px; }
.article-page .container { max-width: 1120px; }
.article-hero { padding-block: 88px 70px; }
.article-kicker { font-size: 1rem; color: var(--muted); margin-bottom: 24px; }
.article-hero h1 { max-width: 950px; font-size: clamp(42px, 5.6vw, 76px); line-height: 1.16; letter-spacing: -.045em; }
.article-lead { font-size: 1.375rem; line-height: 1.8; max-width: var(--reading-width); margin-block: 28px; }
.essay-copy { max-width: var(--reading-width); font-size: 1.125rem; line-height: 1.95; color: #404940; }
.essay-copy p + p, .essay-copy h3 + p { margin-top: 20px; }
.essay-copy h3 { margin-top: 40px; font-size: 1.5rem; line-height: 1.5; }
.article-thesis { font-size: clamp(25px, 2.8vw, 36px); line-height: 1.6; letter-spacing: -.02em; border-left: 3px solid var(--blue); padding-left: 28px; max-width: 900px; margin-block: 40px 26px; }
.article-note { font-size: 1rem; line-height: 1.85; color: var(--muted); max-width: var(--reading-width); margin-top: 25px; }
.article-contents { border-block: 1px solid var(--line); padding-block: 22px; display: flex; flex-wrap: wrap; gap: 14px 32px; }
.article-contents a { font-size: 1rem; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: #a2a99b; }
.article-contents a:hover { color: var(--blue); }
.essay-section { padding-block: 80px; border-bottom: 1px solid var(--line); }
.essay-heading { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.3; letter-spacing: -.035em; max-width: 900px; margin-bottom: 26px; }
.essay-section > .essay-copy + .essay-copy { margin-top: 22px; }
.essay-panel { padding: 32px; background: #eeefe9; margin-block: 30px; min-width: 0; }
.essay-panel h3, .responsibility-column h3 { font-size: 1.375rem; line-height: 1.5; margin-bottom: 20px; }
.essay-panel p { font-size: 1.125rem; line-height: 1.9; }
.essay-panel p + p { margin-top: 20px; }
.essay-panel-tinted { background: #e9eee5; }
.plain-flow { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.plain-flow li { position: relative; background: var(--paper); border: 1px solid #c8cec1; padding: 18px; font-size: 1rem; line-height: 1.7; min-width: 0; }
.plain-flow li:not(:last-child)::after { content: '→'; position: absolute; left: calc(100% + 7px); top: 50%; transform: translateY(-50%); color: #616e57; font-size: 1rem; }
.repeated-tasks { margin-block: 35px; border-block: 1px solid var(--line); }
.repeat-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 25px; padding: 26px 0; }
.repeat-row + .repeat-row { border-top: 1px dashed #bfc5b7; }
.repeat-row h3 { font-size: 1.25rem; line-height: 1.7; }
.repeat-row p { color: var(--muted); font-size: 1.125rem; }
.editorial-quote { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.65; max-width: 870px; margin: 40px 0 28px; letter-spacing: -.02em; }
.responsibility-grid, .essay-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-block: 32px; }
.responsibility-column { border-top: 2px solid #b8c1b1; padding-top: 24px; min-width: 0; }
.responsibility-column .plain-flow { grid-template-columns: 1fr; gap: 25px; }
.responsibility-column .plain-flow li:not(:last-child)::after { content: '↓'; top: 100%; left: 24px; transform: none; }
.responsibility-column:last-child .plain-flow li { border-style: dashed; }
.essay-split .essay-panel { margin: 0; }
.method-sequence { list-style: none; margin: 35px 0; padding: 0; counter-reset: method; }
.method-step { counter-increment: method; padding: 28px 0 28px 76px; border-top: 1px solid var(--line); position: relative; }
.method-step::before { content: counter(method); position: absolute; left: 0; top: 26px; font-size: 1.5rem; color: #5c6954; }
.method-step h3 { font-size: 1.5rem; margin-bottom: 15px; line-height: 1.45; }
.method-step p { max-width: var(--reading-width); color: var(--muted); }
.flow-transformation { padding: 40px 0; border-block: 1px solid var(--line); margin-top: 45px; }
.flow-transformation h3 { font-size: 1.75rem; line-height: 1.4; margin-bottom: 35px; }
.flow-transformation h4 { font-size: 1.125rem; margin-top: 32px; line-height: 1.6; }
.flow-transformation .plain-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.flow-transformation .plain-flow li { padding: 18px 12px; }
.flow-transformation .plain-flow li::after { left: calc(100% + 3px); }
.transform-source li { border-style: dashed; }
.transform-target li { background: #e9eee5; border-color: #9ba991; }
.flow-transformation .text-link { margin-top: 24px; }
.flow-transformation.is-enhanced.is-transformed .transform-target li { animation: settle-workflow 850ms both ease; }
.flow-transformation.is-enhanced:not(.is-transformed) .transform-target li:nth-child(odd) { transform: translateY(-12px); }
.flow-transformation.is-enhanced:not(.is-transformed) .transform-target li:nth-child(even) { transform: translateY(12px); }
.flow-transformation.is-transformed .transform-target li:nth-child(2) { animation-delay: 100ms; }
.flow-transformation.is-transformed .transform-target li:nth-child(3) { animation-delay: 200ms; }
.flow-transformation.is-transformed .transform-target li:nth-child(4) { animation-delay: 300ms; }
.flow-transformation.is-transformed .transform-target li:nth-child(5) { animation-delay: 400ms; }
@keyframes settle-workflow {
    from { transform: translateY(-26px); border-color: #aaa; background: var(--paper); }
    to { transform: translateY(0); border-color: #9ba991; background: #e9eee5; }
}
.architecture { margin-block: 36px; text-align: center; }
.architecture-entry, .architecture-brain, .architecture-result { max-width: 680px; margin-inline: auto; padding: 30px; position: relative; }
.architecture-entry { border-top: 1px solid var(--line); }
.architecture-brain { border: 1px solid #9daea0; background: #e9eee5; margin-top: 30px; }
.architecture h3 { font-size: 1.5rem; line-height: 1.45; margin-bottom: 15px; }
.architecture p { font-size: 1.0625rem; line-height: 1.8; color: #495346; }
.architecture-brain::before, .architecture-result::before { content: ''; width: 1px; height: 31px; background: #9daea0; position: absolute; bottom: 100%; left: 50%; }
.architecture-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 55px; position: relative; }
.architecture-branches::before { content: ''; position: absolute; top: -28px; height: 1px; left: 16.666%; right: 16.666%; background: #9daea0; }
.architecture-branch { position: relative; text-align: left; border: 1px solid var(--line); padding: 25px; }
.architecture-branch::before { content: ''; position: absolute; width: 1px; height: 28px; bottom: 100%; left: 50%; background: #9daea0; }
.architecture-branch:nth-child(2)::before { height: 55px; }
.architecture-branch h4 { font-size: 1.25rem; line-height: 1.5; margin-bottom: 15px; }
.architecture-result { border: 1px solid #9daea0; margin-top: 31px; background: #eeefe9; }
.measurement-list { padding: 0; margin: 32px 0; list-style: none; max-width: 850px; }
.measurement-list li { border-top: 1px solid var(--line); padding: 22px 0; line-height: 1.9; }
.measurement-list strong { font-weight: 600; }
.oversight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-block: 35px; }
.oversight-card { border-top: 3px solid #a5b79b; padding-top: 22px; min-width: 0; }
.oversight-card:nth-child(2) { border-color: #8599b3; }
.oversight-card:nth-child(3) { border-color: #8f8778; }
.oversight-card h3 { font-size: 1.375rem; line-height: 1.5; margin-bottom: 20px; }
.oversight-card p { font-size: 1.0625rem; line-height: 1.9; }
.comparison-wrap { margin-top: 35px; }
.comparison-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 1.0625rem; line-height: 1.85; }
.comparison-table caption { text-align: left; font-size: 1rem; color: var(--muted); padding-bottom: 20px; }
.comparison-table th, .comparison-table td { vertical-align: top; padding: 24px; text-align: left; border-bottom: 1px solid var(--line); font-weight: 400; }
.comparison-table thead th { background: #e7eae0; font-weight: 500; border-top: 1px solid #b7c0ad; }
.comparison-table tr > :first-child { width: 22%; padding-left: 0; font-weight: 500; }
.comparison-table thead tr > :first-child { padding-left: 18px; }
.comparison-table tbody td:last-child { background: #eef1e9; }
.takeaways { margin-top: 55px; border-top: 2px solid var(--ink); padding-top: 25px; max-width: 880px; }
.takeaways p { padding-block: 15px; font-size: 1.25rem; line-height: 1.7; }
.article-cta { border-bottom: 0; padding-block: 90px; }
.article-cta > .text-link { background: var(--ink); color: var(--paper); padding: 16px 25px; border: 0; }

@media (max-width: 1150px) {
    .desktop-nav { display: none; }
    .menu-toggle { display: block; }
    .header-actions { margin-left: auto; }
    .evolution-grid { grid-template-columns: 1fr; gap: 20px; }
    .evolution-card { padding: 28px; }
    .evolution-flow { max-width: 540px; }
    .home-work-example li { grid-template-columns: 1fr; gap: 5px; }
}
@media (max-width: 900px) {
    .architecture-branches, .oversight-grid { grid-template-columns: 1fr; gap: 28px; }
    .architecture-branches { max-width: 680px; margin-inline: auto; }
    .architecture-branches::before { display: none; }
    .architecture-branch:nth-child(2)::before { height: 28px; }
    .plain-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flow-transformation .plain-flow { grid-template-columns: 1fr; gap: 24px; }
    .flow-transformation .plain-flow li:not(:last-child)::after { content: '↓'; left: 24px; top: 100%; transform: none; }
    .hero { grid-template-columns: 1fr; gap: 48px; }
    .hero h1 { font-size: clamp(48px, 8vw, 72px); }
    .hero-description { max-width: 640px; }
    .home-work-example li { grid-template-columns: 135px minmax(0, 1fr); gap: 20px; }
    .workflow-comparison { grid-template-columns: 1fr; }
    .workflow-before { border-right: 0; border-bottom: 1px solid var(--line); }
    .footer-top { display: block; }
    .footer-links { max-width: none; margin-top: 30px; }
}
@media (max-width: 640px) {
    .article-hero { padding-block: 50px; }
    .article-hero, .essay-section:has(> .editorial-quote), .article-cta { min-height: calc(100svh - 72px); }
    .article-hero h1 { font-size: clamp(36px, 9vw, 48px); letter-spacing: -.03em; }
    .article-lead { font-size: 1.1875rem; }
    .essay-copy, .essay-panel p, .repeat-row p { font-size: 1.0625rem; }
    .article-thesis { padding-left: 18px; margin-block: 32px; font-size: 1.625rem; }
    .article-note { font-size: .9375rem; }
    .article-contents { display: grid; gap: 16px; }
    .essay-section { padding-block: 56px; }
    .essay-heading { font-size: 1.875rem; line-height: 1.45; }
    .essay-panel { padding: 25px 20px; }
    .essay-split, .responsibility-grid { grid-template-columns: 1fr; }
    .plain-flow { grid-template-columns: 1fr; gap: 24px; }
    .plain-flow li:not(:last-child)::after { content: '↓'; left: 24px; top: 100%; transform: none; }
    .repeat-row { grid-template-columns: 1fr; gap: 8px; }
    .editorial-quote { font-size: 1.5rem; }
    .method-step { padding-left: 38px; }
    .method-step h3 { font-size: 1.375rem; }
    .architecture-entry, .architecture-brain, .architecture-result { padding: 24px 18px; }
    .architecture-branch { padding: 24px 20px; }
    .comparison-table, .comparison-table tbody, .comparison-table tr, .comparison-table th, .comparison-table td { display: block; width: 100%; }
    /* Keep the column headings in the accessibility tree; labels are repeated visually per cell. */
    .comparison-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .comparison-table tr { margin-bottom: 28px; border-top: 2px solid #a8b59e; }
    .comparison-table tr > :first-child { width: 100%; padding: 16px; }
    .comparison-table td { padding: 18px 16px; }
    .comparison-table td::before { content: attr(data-label); display: block; font-size: .9375rem; color: #4b5847; margin-bottom: 10px; font-weight: 600; }
    .takeaways p { font-size: 1.125rem; }
    .article-cta { padding-block: 65px; }
    :root { --copy: 1.0625rem; --support: .9375rem; }
    .hero { padding-block: 48px; }
    .hero h1 { font-size: clamp(43px, 11vw, 64px); }
    .hero-philosophy, html[lang=zh-CN] .hero-philosophy { font-size: 1.1875rem; }
    .hero-copy > .eyebrow { font-size: .875rem; }
    .header-actions { gap: 10px; }
    .language-button { font-size: .9375rem; }
    .hero-baseline { font-size: .875rem; flex-wrap: wrap; }
    .section-heading { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: 1fr; }
    .feature-card, .feature-card:nth-child(even) { padding: 28px 0; }
    .home-work-example li { grid-template-columns: 1fr; gap: 6px; }
    .home-work-example h2 { font-size: 1.75rem; }
    .home-work-example li > p { font-size: var(--copy); }
    .outcome-row { grid-template-columns: 23px minmax(0, 1fr) 22px; }
    .outcome-row p { grid-column: 2; }
    .step-tag { display: none; }
    .philosophy-panel, .philosophy-panel:first-child, .philosophy-panel:last-child { min-height: 350px; }
    .lead { font-size: 1.1875rem; }
    .footer-bottom { flex-wrap: wrap; }
    .footer-links { font-size: 1rem; }
    .footer-top p { font-size: var(--copy); }
}

@media (prefers-reduced-motion: reduce) {
    .flow-transformation.is-enhanced.is-transformed .transform-target li { animation: none; }
}
@media print {
    .article-contents, [data-replay-flow] { display: none; }
    .essay-section, .article-hero { padding-block: 24px; }
    .transform-target li { animation: none !important; }
}