@font-face {
  font-family: "Cowe Display";
  src: url("display.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* light-dark(浅色, 深色)：跟随 color-scheme，手动切换只改 data-theme */
  color-scheme: light dark;
  --paper: light-dark(#fff9dc, #191b16);
  --ink: light-dark(#222a33, #ece8d4);
  --blue: light-dark(#244bd2, #93a9ff);
  --orange: light-dark(#f07543, #f58a5e);
  --green: light-dark(#476343, #9cbf8f);
  --lime: light-dark(#daec9e, #39431f);
  --white: light-dark(#fffdf4, #23261f);
  --soft: light-dark(#5c645d, #a9ae9e);
  --line: light-dark(#c9c9ae, #4b4e40);
  --tint-green: light-dark(#eaf0cc, #2b3222);
  --tint-orange: light-dark(#ffead4, #3a2b20);
  --tint-connect: light-dark(#f0f4dc, #262b1e);
  --shadow: light-dark(#cdd49d, #3d4723);
  --dash: light-dark(#8c9678, #6d7660);
  --blue-a16: light-dark(#244bd229, #93a9ff29);
  --blue-a10: light-dark(#244bd21a, #93a9ff1a);
  --display: "Cowe Display", "PingFang SC", sans-serif;
  --sans: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Menlo, monospace;
  --brand-orange: var(--orange);
  --brand-green: var(--green);
  --brand-lime: var(--lime);
  --svc-paper: var(--paper);
  --svc-ink: var(--ink);
  --svc-accent: var(--blue);
  --svc-soft: var(--soft);
  --svc-highlight: var(--lime);
  --svc-secondary: light-dark(#d9e8b1, #344022);
  --svc-card: var(--white);
  --svc-line: var(--ink);
  --svc-display: var(--display);
  --svc-learning: var(--tint-green);
  --svc-learning-ink: var(--ink);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body.platform-page { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.8; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; touch-action: manipulation; }
img { display: block; max-width: 100%; }
button, a, input, select, summary { -webkit-tap-highlight-color: var(--blue-a16); }
:is(a, button, input, select, summary):focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
[hidden] { display: none !important; }
.wrap, .svc-wrap { width: min(1240px, calc(100% - 88px)); margin-inline: auto; }
.eyebrow { display: block; font: 11px/1.8 var(--mono); letter-spacing: .09em; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 94px; border-bottom: 1px solid var(--ink); }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { width: auto; height: 44px; }
/* 深色底换深色版组合标志（头部提亮、文字浅色）；url 不能用 light-dark()，只好按两种触发方式各写一次 */
:root[data-theme="dark"] .brand img { content: url("logo-lockup-dark.svg"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand img { content: url("logo-lockup-dark.svg"); } }
.nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 5px 0; }
.nav a:hover, .nav a.active, .nav a[aria-current="page"] { color: var(--blue); }
.nav a.active, .nav a[aria-current="page"] { box-shadow: inset 0 -2px var(--blue); }
.theme-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ink); background: var(--white); font-size: 18px; line-height: 1; }
.theme-toggle:hover { color: var(--blue); border-color: var(--blue); }
.skip-link { position: absolute; z-index: 20; left: 20px; top: 12px; padding: 10px 18px; background: var(--white); border: 1px solid var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.page-heading { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 46px; padding-block: 55px 48px; }
.page-heading-copy, .page-heading-art, .page-heading-copy > * { min-width: 0; }
.page-heading .eyebrow { margin-bottom: 20px; color: var(--blue); }
.page-heading-copy > a.eyebrow { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 12px; }
.page-heading h1 { font: 400 clamp(48px, 5.4vw, 76px)/1.2 var(--display); letter-spacing: -.025em; }
.page-heading h1 span { color: var(--blue); }
.page-heading-copy > p { max-width: 585px; margin-top: 22px; font-size: 16px; color: var(--soft); }
.page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 27px; }
.brand-equation { display: inline-block; margin-top: 25px; color: var(--blue); font: italic 21px/1.5 Georgia, serif; }
.page-heading-art { position: relative; margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.page-heading-art > img { width: 100%; height: 355px; object-fit: contain; }
.home-page .page-heading-art > img { height: 380px; }
.page-heading-art figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; align-self: stretch; gap: 18px; padding: 10px 15px; margin-top: 8px; border: 1px solid var(--ink); background: var(--white); box-shadow: 3px 3px 0 var(--lime); }
.page-heading-art figcaption b { min-width: 0; font: 400 25px/1.4 var(--display); }
.page-heading-art figcaption span { font-size: 11px; color: var(--soft); }
.route-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--shadow); margin-bottom: 66px; }
.route-card { display: flex; flex-direction: column; align-items: start; gap: 16px; min-width: 0; min-height: 245px; padding: 27px 30px; background: var(--lime); border-right: 1px solid var(--ink); }
.route-card:nth-child(2) { background: var(--white); }
.route-card:nth-child(3) { background: var(--blue); color: var(--white); }
.route-card:nth-child(4) { background: var(--tint-orange); border-right: 0; }
.route-number { font: 11px/1.7 var(--mono); letter-spacing: .05em; }
.route-card h2 { font: 400 29px/1.35 var(--display); }
.route-card p { font-size: 16px; line-height: 1.8; }
.route-arrow { display: flex; align-items: center; justify-content: space-between; align-self: stretch; gap: 12px; min-height: 44px; border-top: 1px solid currentColor; margin-top: auto; padding-top: 7px; font-size: 14px; }
.route-arrow i { font-size: 24px; font-style: normal; }
.route-card:hover h2 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.route-card:nth-child(3):focus-visible { outline-color: var(--orange); }
.home-section { padding-block: 66px; border-top: 1px solid var(--ink); }
.home-section-head { display: flex; align-items: end; justify-content: space-between; gap: 45px; margin-bottom: 32px; }
.home-section-head > div, .home-section-head > p { min-width: 0; }
.home-section-head h2 { margin-top: 15px; font: 400 clamp(32px, 3.1vw, 45px)/1.35 var(--display); letter-spacing: -.025em; }
.home-section-head > p, .section-heading-side { max-width: 355px; font-size: 16px; color: var(--soft); }
.section-heading-side .svc-link { color: var(--ink); margin-top: 12px; }
.home-app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.home-app-card .svc-product-cover { height: auto; min-height: 265px; }
.home-app-card .svc-cover-workspace img { height: 225px; max-width: 45%; border: 0; }
.home-app-card h3 { font: 400 28px/1.4 var(--display); }
.home-course { display: grid; grid-template-columns: .78fr 1.22fr; border: 1px solid var(--ink); background: var(--white); box-shadow: 6px 6px 0 var(--shadow); }
.home-course-art { padding: 27px 30px; border-right: 1px solid var(--ink); background: var(--lime); display: flex; flex-direction: column; align-items: start; }
.home-course-art h3 { font: 400 37px/1.35 var(--display); margin-top: 16px; }
.home-course-art img { width: 100%; height: 235px; margin: 20px auto 12px; object-fit: contain; }
.home-course-art figcaption { font-size: 12px; margin-top: auto; }
.home-course-copy { padding: 35px 38px; min-width: 0; }
.home-course-copy h3 { font: 400 33px/1.4 var(--display); margin: 20px 0 16px; }
.home-course-copy > p { font-size: 16px; color: var(--soft); }
.course-steps, .community-steps { counter-reset: step; list-style: none; padding: 0; margin: 26px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.course-steps li, .community-steps li { counter-increment: step; border-top: 1px solid var(--ink); padding-top: 10px; font-size: 14px; }
.course-steps li::before, .community-steps li::before { content: "0" counter(step); display: block; color: var(--blue); font: italic 21px/1.5 Georgia, serif; margin-bottom: 4px; }
.home-course-copy .svc-outcome { padding: 14px 17px; background: var(--tint-green); border: 1px dashed var(--dash); margin-bottom: 24px; }
.section-note { font-size: 12px !important; color: var(--soft); line-height: 1.8; margin-top: 18px; }
.home-community { display: grid; grid-template-columns: .92fr 1.08fr; border: 1px solid var(--ink); background: var(--white); }
.home-community-art { align-self: stretch; padding: 38px 25px 25px; border-right: 1px solid var(--ink); background: var(--tint-green); display: flex; flex-direction: column; justify-content: center; }
.home-community-art img { width: 100%; height: 315px; object-fit: contain; }
.home-community-art figcaption { font-size: 12px; text-align: center; margin-top: 18px; }
.home-community-copy { min-width: 0; padding: 34px 35px; }
.home-community-copy h3 { font: 400 33px/1.4 var(--display); margin: 19px 0 16px; }
.home-community-copy > p { color: var(--soft); font-size: 16px; }
.community-directions { margin: 24px 0 0; }
.community-directions > div { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 11px 0; border-top: 1px dashed var(--line); }
.community-directions dt { font-size: 14px; color: var(--blue); }
.community-directions dd { margin: 0; font-size: 16px; }
.community-steps { margin-block: 22px; }
.creator-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.creator-role { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ink); background: var(--white); padding: 26px; }
.creator-role:nth-child(2) { background: var(--tint-green); }
.creator-role:nth-child(3) { background: var(--tint-orange); }
.creator-role h3 { font: 400 29px/1.4 var(--display); margin: 20px 0 16px; }
.creator-role p { font-size: 16px; color: var(--soft); margin-bottom: 20px; }
.creator-role .svc-link { margin-top: auto; }
.home-about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; }
.brand-manifesto > p { color: var(--soft); font-size: 16px; margin-bottom: 22px; }
.brand-manifesto .manifesto-line { color: var(--blue); font: 400 33px/1.4 var(--display); margin: 30px 0; }
.home-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.home-role-card { min-width: 0; padding: 18px 12px; border: 1px solid var(--ink); background: var(--lime); }
.home-role-card:nth-child(2) { background: var(--tint-orange); }
.home-role-card img { width: 100%; height: 225px; object-fit: contain; }
.home-role-card figcaption { display: flex; flex-direction: column; gap: 5px; text-align: center; margin-top: 12px; }
.home-role-card figcaption b { font: 400 28px/1.4 var(--display); }
.home-role-card figcaption span { font-size: 11px; }
.site-footer { display: flex; justify-content: space-between; align-items: end; gap: 38px; padding-block: 35px 38px; border-top: 1px solid var(--ink); }
.footer-manifesto p { color: var(--soft); font-size: 14px; margin: 12px 0 14px; }
.footer-manifesto > small { color: var(--soft); font-size: 10px; }
.footer-actions { display: flex; align-items: end; flex-direction: column; gap: 19px; }
.footer-actions nav { display: flex; flex-wrap: wrap; gap: 23px; font-size: 13px; }
.footer-actions nav a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-actions nav a:hover { color: var(--blue); }
.next-step { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 35px; border: 1px solid var(--ink); background: var(--lime); padding: 30px 33px; margin-block: 20px 55px; }
.next-step-copy { min-width: 0; }
.next-step-copy h2 { font: 400 33px/1.4 var(--display); margin-bottom: 13px; }
.next-step-copy p { color: var(--soft); font-size: 16px; max-width: 760px; }
.next-step > .svc-button { justify-self: end; }
.next-step .page-actions { margin-top: 0; }
.creator-label { display: block; font: 11px/1.8 var(--mono); letter-spacing: .06em; color: var(--blue); }
.role-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-block: 17px 22px; }
.role-tags span { border: 1px solid var(--ink); padding: 3px 8px; font-size: 11px; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.faq-grid details { min-width: 0; border: 1px solid var(--ink); background: var(--white); padding: 18px 23px; }
.faq-grid summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; list-style: none; cursor: pointer; font-size: 18px; line-height: 1.6; }
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary::after { content: "+"; font-size: 24px; color: var(--blue); flex-shrink: 0; }
.faq-grid details[open] summary::after { content: "−"; }
.faq-grid p { font-size: 16px; color: var(--soft); margin-top: 15px; }
.work-grid, .cooperation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.work-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ink); background: var(--white); box-shadow: 5px 5px 0 var(--shadow); }
.work-cover { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 245px; padding: 26px; border-bottom: 1px solid var(--ink); }
.work-cover-app { background: var(--blue); color: var(--white); }
.work-cover-course { background: var(--lime); }
.work-cover-notes { background: var(--tint-orange); }
.work-cover > span { font: 11px/1.8 var(--mono); letter-spacing: .05em; }
.work-cover > b { font: 400 34px/1.35 var(--display); }
.work-cover > small { font-size: 12px; line-height: 1.8; border-top: 1px solid currentColor; padding-top: 12px; }
.work-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 26px; }
.work-body .svc-planning { align-self: start; font-size: 12px; color: var(--soft); }
.work-body h3 { font: 400 28px/1.4 var(--display); margin-block: 19px 15px; }
.work-body > p { font-size: 16px; color: var(--soft); }
.work-author { display: flex; flex-wrap: wrap; gap: 5px 10px; padding-top: 13px; margin-block: 23px 14px; border-top: 1px dashed var(--line); }
.work-author > span { font-size: 12px; color: var(--blue); }
.work-author > small { font-size: 12px; color: var(--soft); }
.work-body .svc-link { margin-top: auto; }
.section-heading-side > .svc-planning + p { margin-top: 14px; }
.cooperation-card { display: flex; flex-direction: column; min-width: 0; padding: 26px; background: var(--white); border: 1px solid var(--ink); }
.cooperation-card:nth-child(2) { background: var(--tint-green); }
.cooperation-card:nth-child(3) { background: var(--tint-orange); }
.cooperation-card > .eyebrow { color: var(--blue); }
.cooperation-card h3 { font: 400 28px/1.4 var(--display); margin-block: 20px 15px; }
.cooperation-card > p { font-size: 16px; color: var(--soft); }
.cooperation-card dl { margin-block: 24px 18px; }
.cooperation-card dl > div { padding-block: 13px; border-top: 1px dashed var(--line); }
.cooperation-card dt { font-size: 12px; color: var(--blue); }
.cooperation-card dd { margin: 5px 0 0; font-size: 16px; }
.cooperation-card > .svc-link { margin-top: auto; }

/* The existing services stylesheet owns filtering and dialog components. */
.svc-section { padding-block: 65px; }
.svc-section-head { position: relative; padding-left: 91px; min-height: 77px; }
.svc-section-head::before { content: "01"; position: absolute; left: 0; top: 0; width: 65px; height: 76px; background: var(--blue); color: var(--white); display: grid; place-items: center; font: 38px/1 Georgia, serif; }
.svc-creators .svc-section-head::before { content: "02"; }
.svc-section-head h2 { font-size: 46px; }
.svc-section :is(a, button, input, select):focus-visible, .svc-dialog :is(a, button):focus-visible { outline-color: var(--blue); }
.svc-filter-buttons button, .svc-button, .svc-dialog { border-radius: 0; }
.svc-button { min-height: 46px; }
.svc-button-light { color: var(--ink) !important; }
.svc-planning { white-space: normal; }
.svc-state, .svc-card-meta, .svc-catalog-caption, .svc-course-footer > span, .svc-outcome > span, .svc-circle-channel, .svc-circle dt, .svc-course-author { font-size: 12px; }
.svc-search input, .svc-search select { background: var(--white); border-color: var(--ink); }
.svc-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.svc-product { border: 1px solid var(--ink); background: var(--white); }
.svc-card-body { padding: 25px 27px 27px; }
.svc-card-body > p { font-size: 16px; }
.svc-card-body > h3 { font: 400 28px/1.4 var(--display); }
.svc-product-cover { height: auto; overflow-wrap: anywhere; }
.svc-cover-workspace { background: var(--tint-green); color: var(--ink); }
.svc-cover-workspace, .svc-cover-companion { flex-wrap: wrap; row-gap: 4px; }
.svc-cover-workspace b { font-family: var(--display); font-size: 41px; }
.svc-cover-workspace small { color: var(--soft); }
.svc-cover-hub { background: var(--blue); color: var(--white); }
.svc-cover-hub b { font-family: var(--display); font-size: 35px; }
.apps-page .svc-product-cover:not(.svc-cover-companion) { height: auto; min-height: 265px; }
.svc-cover-ledger { background: var(--tint-orange); color: var(--ink); }
.svc-cover-depart { background: var(--lime); color: var(--ink); }
.svc-cover-ledger > b, .svc-cover-depart > b, .svc-cover-companion b { font: 400 35px/1.3 var(--display); }
.app-cover-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; font: 12px/1.5 var(--mono); }
.app-cover-chips > span { padding: 5px 10px; border: 1px solid currentColor; }
.app-cover-chips > i { font-style: normal; }
.svc-product-cover > small { position: static; margin-top: 16px; font-size: 12px; }
.svc-cover-workspace > small, .svc-cover-companion > small { flex-basis: 100%; margin-top: 0; }
.svc-product-case { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
.apps-page .svc-cover-companion { height: auto; }
.svc-cover-companion { min-height: 310px; flex-direction: row; align-items: center; gap: 20px; background: var(--tint-orange); border-bottom: 0; border-right: 1px solid var(--ink); }
.svc-cover-companion > div { flex: 1; min-width: 0; }
.svc-cover-companion > div > span { display: block; font: 10px/1.8 var(--mono); margin-bottom: 16px; }
.svc-cover-companion img { width: 44%; height: 210px; object-fit: contain; }
.home-private-case { margin-top: 22px; margin-bottom: 0; }
.svc-idea { display: grid; grid-template-columns: 195px 1fr; }
.svc-idea-heading { height: auto; min-height: 235px; border-right: 1px solid var(--ink); border-bottom: 0; background: var(--lime); }
.svc-idea-heading b { font-size: 26px; }
.svc-learning-path { background: var(--white); border: 1px solid var(--ink); }
.svc-learning-path span { font-family: var(--mono); font-size: 13px; }
.svc-learning-path small { color: var(--blue); }
.svc-course-grid { grid-template-columns: 1fr; gap: 22px; }
.svc-course { display: grid; grid-template-columns: 265px 1fr; border: 1px solid var(--ink); box-shadow: 5px 5px 0 var(--shadow); }
.svc-course-cover { height: auto; min-height: 325px; padding: 27px; border-right: 1px solid var(--ink); border-bottom: 0; }
.svc-course-cover b { font-family: var(--display); font-size: 37px; line-height: 1.35; }
.svc-course-cover > span { border-bottom: 1px dashed currentColor; padding-bottom: 16px; }
.course-brand-art { width: 110px; height: 110px; align-self: end; object-fit: contain; margin-block: 10px; }
.svc-course .svc-card-body { padding: 29px 33px; }
.svc-course .svc-card-body > h3 { font: 400 28px/1.4 var(--display); }
.svc-outcome { background: var(--lime); border: 1px dashed var(--dash); padding: 14px 17px; }
.svc-outcome > b { font-size: 16px; }
.svc-learning-support { border: 1px solid var(--ink); padding: 25px 28px; background: var(--white); }
.svc-circle-grid { grid-template-columns: 1fr; gap: 20px; }
.svc-circle { display: grid; grid-template-columns: 160px 1fr 305px; gap: 8px 28px; padding: 0; background: var(--white); border: 1px solid var(--ink); box-shadow: 5px 5px 0 var(--shadow); }
.svc-circle:nth-child(2), .svc-circle:nth-child(3) { background: var(--white); }
.svc-circle-index { grid-column: 1; grid-row: 1 / 4; align-self: stretch; margin: 0; padding: 24px; background: var(--blue); color: var(--white); display: flex; align-items: center; font: 11px/1.9 var(--mono); }
.svc-circle h3 { grid-column: 2; grid-row: 1; margin: 25px 0 0; font: 400 29px/1.4 var(--display); }
.svc-circle-channel { grid-column: 2; grid-row: 2; }
.svc-circle > p { grid-column: 2; grid-row: 3; margin: 0 0 25px; font-size: 16px; }
.svc-circle dl { grid-column: 3; grid-row: 1 / 3; width: auto; margin: 22px 25px 0 0; }
.svc-circle > .svc-button { grid-column: 3; grid-row: 3; width: auto; max-width: calc(100% - 25px); justify-self: start; align-self: end; margin: 0 25px 25px 0; }
.svc-join-path { padding: 27px; margin-top: 28px; border: 1px solid var(--ink); background: var(--lime); }
.svc-creators { background: var(--lime); }
.svc-creator { border-color: var(--ink); box-shadow: 5px 5px 0 var(--shadow); }
.svc-creator-type { height: 185px; background: var(--white); background-image: repeating-linear-gradient(0deg, transparent, transparent 26px, var(--blue-a10) 26px, var(--blue-a10) 27px); }
.svc-creator-type > span { font-family: var(--display); font-style: normal; font-size: 43px; }
.svc-avatar { background: var(--lime); color: var(--ink); border-radius: 0; border: 1px solid var(--ink); }
.svc-person-name h3 { font-family: var(--display); font-size: 29px; font-weight: 400; }
.svc-profile-fields { border-top-style: dashed; }
.svc-contribute { border-color: var(--ink); background: var(--white); }
.svc-about { background: var(--blue); color: var(--white); }
.svc-about .svc-button { background: var(--paper); color: var(--ink) !important; border-color: var(--paper); }
.svc-about .svc-eyebrow { color: var(--white); }
.svc-about h2 { font-family: var(--display); font-weight: 400; }
.svc-dialog h2 { font-family: var(--display); font-weight: 400; }
.svc-dialog-head { border-bottom-style: dashed; }
.svc-close { line-height: 1; }
.svc-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.svc-detail-grid > :is(dl, section) { min-width: 0; margin: 0; padding: 20px; background: var(--white); border: 1px solid var(--ink); }
.svc-detail-grid h3 { font: 400 24px/1.4 var(--display); margin-bottom: 13px; }
.svc-detail-grid dt { color: var(--soft); font-size: 11px; margin-top: 13px; }
.svc-detail-grid dt:first-child { margin-top: 0; }
.svc-detail-grid dd { font-size: 16px; margin: 4px 0 0; }
.svc-detail-grid ul { padding-left: 20px; margin-block: 12px 0; font-size: 16px; }
.svc-dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 25px; }
.svc-contact-body .contact-help { font-size: 13px; margin-top: 16px; }
.contact-save { margin-block: 4px 12px; }
.svc-about :is(a, button):focus-visible { outline-color: var(--orange); }
.brand-companion { display: grid; grid-template-columns: 114px 1fr auto; gap: 25px; align-items: center; margin: 0 0 27px; padding: 14px 23px; border: 1px solid var(--ink); background: var(--white); }
.brand-companion > img { width: 114px; height: 114px; object-fit: contain; }
.brand-mini { display: block; font: 10px/1.8 var(--mono); letter-spacing: .05em; }
.companion-mobile-break { display: none; }
.brand-companion h3, .svc-section .brand-companion h3 { font: 400 27px/1.4 var(--display); margin: 7px 0; }
.brand-companion p { font-size: 16px; color: var(--soft); }
.brand-companion .svc-button { flex-shrink: 0; }
.brand-companion-build { border-left: 7px solid var(--orange); }
.brand-companion-learn { border-left: 7px solid var(--blue); }
.brand-companion-connect { border-left: 7px solid var(--green); background: var(--tint-connect); }

.product-heading h1 { font-size: clamp(44px, 4.6vw, 65px); }
.product-category { display: block; margin-block: 5px 17px; font: 12px/1.8 var(--mono); color: var(--blue); }
.product-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-block: 0 45px; border: 1px solid var(--ink); background: var(--white); }
.product-facts > div { min-width: 0; padding: 20px 25px; border-right: 1px solid var(--ink); }
.product-facts > div:last-child { border-right: 0; }
.product-facts dt { font-size: 12px; color: var(--blue); }
.product-facts dd { margin: 6px 0 0; font-size: 16px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.feature-grid > article { min-width: 0; padding: 27px; border: 1px solid var(--ink); background: var(--white); }
.feature-grid > article:nth-child(2) { background: var(--tint-green); }
.feature-grid > article:nth-child(3) { background: var(--tint-orange); }
.feature-grid h3 { font: 400 28px/1.4 var(--display); margin-block: 14px; }
.feature-grid p { color: var(--soft); font-size: 16px; }
.feature-number { font: 14px/1.8 var(--mono); color: var(--blue); }
.feature-art { width: 100%; height: 190px; object-fit: contain; margin-bottom: 16px; }
.app-screens { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; }
/* 素材只截了手机屏幕上半段，照 旅行记账官网做成从卡片底部探出的手机，底边直接截断 */
.app-screen-phone { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 26px 26px 0; overflow: hidden; border: 1px solid var(--ink); background: var(--white); box-shadow: 5px 5px 0 var(--shadow); }
.app-screen-phone img { width: 100%; max-width: 340px; height: auto; aspect-ratio: 760 / 1060; object-fit: cover; object-position: top; border: 6px solid #1d1d1f; border-bottom: 0; border-radius: 36px 36px 0 0; }
.app-screen-phone figcaption { order: -1; margin: 0 0 18px; }
/* 两列并排时卡片随右列拉高，手机填满剩余高度、只裁底部；窄到右列折行变高时改上下排，避免左右裁切 */
@media (min-width: 1201px) { .app-screen-phone img { flex: 1 1 0; min-height: 0; max-width: 400px; aspect-ratio: auto; } }
.app-screen-phone figcaption, .app-screen-watches figcaption { margin-top: 12px; text-align: center; font-size: 12px; color: var(--soft); }
@media (max-width: 1200px) { .app-screens { grid-template-columns: 1fr; gap: 32px; } }
.app-screen-copy { display: grid; gap: 24px; min-width: 0; }
.app-screen-copy article { padding-top: 18px; border-top: 1px solid var(--ink); }
.app-screen-copy h3 { font: 400 28px/1.4 var(--display); margin-block: 6px 10px; }
.app-screen-copy p { color: var(--soft); font-size: 16px; }
.app-screen-watches { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); gap: 20px; }
.app-screen-watches figure { margin: 0; min-width: 0; }
.app-screen-watches img { width: 100%; height: auto; border: 1px solid var(--ink); border-radius: 26px; }
.use-steps { list-style: none; counter-reset: use-step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.use-steps > li { min-width: 0; counter-increment: use-step; padding: 24px; border: 1px solid var(--ink); background: var(--white); }
.use-steps > li::before { content: "0" counter(use-step); display: block; color: var(--blue); font: 400 35px/1.4 var(--display); margin-bottom: 15px; }
.use-steps h3, .use-steps b { font: 400 25px/1.4 var(--display); }
.use-steps p { color: var(--soft); margin-top: 14px; font-size: 16px; }
.product-story { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; align-items: start; }
.product-story h2 { font: 400 39px/1.4 var(--display); margin-block: 14px; }
.product-story p { font-size: 16px; color: var(--soft); }
.product-story > div { min-width: 0; }
.product-story ul { padding-left: 20px; margin-block: 0 22px; }
.product-story li { margin-bottom: 8px; }
.product-story .svc-planning { margin-bottom: 17px; }
.product-scene { min-width: 0; padding: 27px; border: 1px solid var(--ink); background: var(--tint-orange); }
.product-scene h3 { font: 400 28px/1.4 var(--display); margin-block: 16px; }
.product-scene .svc-button { margin-top: 24px; }
.product-support-note { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); }
.guide-entry { display: grid; grid-template-columns: 1.25fr .75fr; border: 1px solid var(--ink); background: var(--white); box-shadow: 5px 5px 0 var(--shadow); }
.guide-entry-copy { min-width: 0; padding: 34px; }
.guide-entry h3 { font: 400 33px/1.4 var(--display); margin-block: 20px 16px; }
.guide-entry-copy > p { color: var(--soft); font-size: 16px; }
.guide-entry figure { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 28px; background: var(--lime); border-left: 1px solid var(--ink); }
.guide-entry figure img { width: 100%; height: 260px; object-fit: contain; }
.guide-entry figcaption { text-align: center; font-size: 12px; margin-top: 18px; }
.guide-entry .svc-outcome { background: var(--tint-green); border: 1px dashed var(--dash); padding: 14px 17px; }
.lab-entry { margin-top: 30px; }
.lab-entry figure { background: var(--tint-orange); }
.lab-demo { display: block; width: 100%; height: 960px; border: 1px solid var(--ink); margin-block: 24px; background: var(--paper); }
.lesson-hero h1 { margin-top: 20px; font-size: clamp(39px, 4.4vw, 61px); line-height: 1.3; }
.lesson-hero .svc-state, .product-heading .svc-state { display: table; margin-block: 5px 15px; }
.content-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 42px; align-items: start; padding-bottom: 58px; }
.content-toc { position: sticky; top: 24px; padding: 22px; border: 1px solid var(--ink); background: var(--lime); }
.content-toc .eyebrow { margin-bottom: 15px; color: var(--blue); }
.content-toc a { display: flex; align-items: center; min-height: 48px; border-top: 1px dashed var(--dash); font-size: 14px; }
.content-toc a:hover { color: var(--blue); }
.lesson-body { min-width: 0; }
.lesson-body > .lesson-example, .lesson-download { padding: 30px; background: var(--white); border: 1px solid var(--ink); }
.lesson-body > .lesson-example { background: var(--tint-orange); }
.lesson-body h2 { font: 400 32px/1.4 var(--display); margin-block: 12px 20px; }
.lesson-body h3 { font: 400 25px/1.5 var(--display); margin-block: 18px 15px; }
.lesson-body p { font-size: 16px; margin-block: 15px; }
.lesson-body ul { padding-left: 22px; margin-block: 16px; }
.lesson-body li { margin-bottom: 10px; }
.lesson-step { padding-block: 38px; border-bottom: 1px solid var(--ink); }
.lesson-step .eyebrow { color: var(--blue); }
.lesson-step .lesson-example { padding: 20px 25px; margin-block: 24px; border-left: 4px solid var(--blue); background: var(--tint-green); }
.lesson-step .lesson-example h3 { margin-top: 0; }
.lesson-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; }
.lesson-copy .svc-link { min-height: 44px; }
.lesson-copy [role="status"] { font-size: 14px; }
.lesson-copy + .lesson-prompt { margin-top: 8px; }
.lesson-prompt { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.9 var(--mono); padding: 25px; margin-block: 20px; border: 1px solid var(--ink); background: var(--white); user-select: text; }
.lesson-download { margin-top: 35px; }
.lesson-checklist { min-width: 0; margin: 28px 0 0; padding: 0; border: 0; }
.lesson-checklist legend { font: 400 25px/1.4 var(--display); margin-bottom: 16px; }
.lesson-checklist label { display: flex; align-items: start; gap: 14px; padding-block: 15px; min-height: 48px; border-top: 1px dashed var(--line); cursor: pointer; }
.lesson-checklist input { width: 22px; height: 22px; margin: 4px 0 0; flex-shrink: 0; accent-color: var(--blue); }

@media (max-width: 1050px) {
  .wrap, .svc-wrap { width: calc(100% - 56px); }
  .page-heading { gap: 28px; }
  .page-heading h1 { font-size: 58px; }
  .page-heading-art > img, .home-page .page-heading-art > img { height: 325px; }
  .page-heading-art figcaption { flex-direction: column; align-items: start; gap: 4px; }
  .route-card { padding: 23px; }
  .route-card h2 { font-size: 26px; }
  .home-section-head { gap: 28px; }
  .home-section-head > p, .section-heading-side { max-width: 290px; }
  .home-course-copy, .home-community-copy { padding: 28px; }
  .home-course-art { padding: 25px; }
  .home-course-art h3 { font-size: 32px; }
  .home-community-art { padding: 28px 20px; }
  .home-community-art img { height: 280px; }
  .course-steps, .community-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-about-grid { gap: 30px; }
  .home-role-card img { height: 185px; }
  .creator-role { padding: 23px; }
  .svc-course { grid-template-columns: 220px 1fr; }
  .svc-course .svc-card-body { padding: 25px; }
  .svc-course-cover { padding: 25px 22px; }
  .svc-course-cover b { font-size: 31px; }
  .svc-idea { display: flex; }
  .svc-idea-heading { border-right: 0; border-bottom: 1px solid var(--ink); min-height: 150px; }
  .svc-circle { grid-template-columns: 135px 1fr 255px; gap: 8px 20px; }
  .svc-circle-index { padding: 20px; }
  .svc-cover-workspace b { font-size: 33px; }
  .brand-companion { grid-template-columns: 99px 1fr; gap: 16px 20px; }
  .brand-companion > img { width: 99px; height: 99px; grid-row: 1 / 3; }
  .brand-companion .svc-button { grid-column: 2; justify-self: start; }
}

@media (max-width: 850px) {
  .product-facts > div { padding: 18px; }
  .feature-grid, .use-steps { gap: 15px; }
  .feature-grid > article, .use-steps > li { padding: 20px; }
  .feature-grid h3 { font-size: 25px; }
  .guide-entry { grid-template-columns: 1fr .65fr; }
  .guide-entry-copy { padding: 25px; }
  .guide-entry figure { padding: 20px; }
  .guide-entry figure img { height: 210px; }
  .guide-entry h3 { font-size: 28px; }
  .content-layout { grid-template-columns: 1fr; gap: 25px; }
  .content-toc { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
  .content-toc .eyebrow { grid-column: 1 / -1; }
  .product-story { gap: 25px; }
  .nav { gap: 20px; }
  .page-heading { gap: 23px; padding-block: 40px; }
  .page-heading h1 { font-size: 49px; }
  .page-heading-art > img, .home-page .page-heading-art > img { height: 280px; }
  .page-heading-art figcaption b { font-size: 23px; }
  .route-card { padding: 22px 20px; min-height: 255px; }
  .route-card h2 { font-size: 24px; }
  .route-number { font-size: 10px; letter-spacing: 0; }
  .home-section-head { display: block; }
  .home-section-head > p, .section-heading-side { max-width: 630px; margin-top: 20px; }
  .home-section-head h2 { font-size: 38px; }
  .home-app-card .svc-product-cover { min-height: 230px; padding: 22px; }
  .home-app-card .svc-cover-workspace img { height: 185px; }
  .home-course { grid-template-columns: .7fr 1.3fr; }
  .home-course-art h3 { font-size: 30px; }
  .home-course-copy h3, .home-community-copy h3 { font-size: 28px; }
  .home-community { grid-template-columns: .75fr 1.25fr; }
  .home-community-art img { height: 235px; }
  .creator-role-grid { grid-template-columns: 1fr; }
  .creator-role { display: grid; grid-template-columns: 215px 1fr; gap: 8px 25px; }
  .creator-role .eyebrow { grid-column: 1; }
  .creator-role h3 { grid-column: 1; margin: 9px 0; }
  .creator-role p { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .creator-role .svc-link { grid-column: 2; justify-self: start; margin-top: 10px; }
  .home-about-grid { grid-template-columns: 1fr; gap: 30px; }
  .home-role-grid { max-width: 560px; }
  .home-role-card img { height: 235px; }
  .svc-section-head { display: block; }
  .svc-section-head h2 { font-size: 39px; }
  .svc-section-head > p { max-width: 650px; margin-top: 18px; }
  .svc-course-grid { grid-template-columns: 1fr; }
  .svc-circle { grid-template-columns: 130px 1fr; }
  .svc-circle-index { grid-row: 1 / 6; }
  .svc-circle h3, .svc-circle-channel, .svc-circle > p, .svc-circle dl, .svc-circle > .svc-button { grid-column: 2; grid-row: auto; }
  .svc-circle > p { margin: 6px 25px 0 0; }
  .svc-circle dl { margin: 7px 25px 0 0; }
  .svc-circle > .svc-button { margin-top: 6px; }
  .svc-avatar { left: auto; top: auto; }
  .work-grid, .cooperation-grid { grid-template-columns: 1fr; }
  .work-card { display: grid; grid-template-columns: 240px 1fr; }
  .work-cover { border-right: 1px solid var(--ink); border-bottom: 0; padding: 23px; }
  .work-cover > b { font-size: 27px; }
  .work-body { padding: 25px; }
  .cooperation-card { display: grid; grid-template-columns: 210px 1fr; gap: 0 30px; }
  .cooperation-card > .eyebrow { grid-column: 1; grid-row: 1; }
  .cooperation-card h3 { grid-column: 1; grid-row: 2; margin-block: 10px 13px; }
  .cooperation-card > p { grid-column: 1; grid-row: 3; }
  .cooperation-card dl { grid-column: 2; grid-row: 1 / 4; margin: 0 0 16px; }
  .cooperation-card > .svc-link { grid-column: 2; grid-row: 4; justify-self: start; }
  .next-step { grid-template-columns: 1fr; gap: 25px; padding: 27px; }
  .next-step > .svc-button { justify-self: start; }
}

@media (max-width: 600px) {
  .app-screen-phone { padding: 20px 20px 0; }
  .feature-art { height: 170px; }
  .product-heading h1 { font-size: 42px; }
  .product-facts { grid-template-columns: 1fr; margin-bottom: 30px; }
  .product-facts > div { padding: 17px 23px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .product-facts > div:last-child { border-bottom: 0; }
  .feature-grid, .use-steps, .product-story, .guide-entry { grid-template-columns: 1fr; }
  .feature-grid > article, .use-steps > li { padding: 24px; }
  .product-story h2 { font-size: 32px; }
  .guide-entry figure { border-left: 0; border-top: 1px solid var(--ink); }
  .guide-entry figure img { height: 200px; }
  .lesson-hero h1 { font-size: 38px; }
  .content-toc { padding: 21px; gap: 0 13px; }
  .content-toc a { font-size: 13px; }
  .lesson-body > .lesson-example, .lesson-download { padding: 23px; }
  .lesson-body h2 { font-size: 29px; }
  .lesson-step { padding-block: 30px; }
  .lesson-step .lesson-example { padding: 18px 20px; }
  .lesson-prompt { padding: 20px; font-size: 13px; }
  .lab-demo { height: 1200px; }
  .lesson-checklist legend { font-size: 24px; }
  .wrap, .svc-wrap { width: calc(100% - 40px); }
  .site-header { flex-wrap: wrap; gap: 4px; min-height: 0; padding-block: 15px 9px; }
  .brand img { height: 38px; }
  .nav { width: 100%; justify-content: space-between; gap: 8px; font-size: 13px; }
  .page-heading { grid-template-columns: 1fr; gap: 25px; padding-block: 32px 38px; }
  .page-heading .eyebrow { margin-bottom: 17px; }
  .page-heading h1 { font-size: 44px; line-height: 1.25; }
  .page-heading-copy > p { margin-top: 20px; font-size: 16px; }
  .page-actions { gap: 11px; margin-top: 23px; }
  .brand-equation { font-size: 20px; margin-top: 22px; }
  .page-heading-art > img, .home-page .page-heading-art > img { height: 250px; }
  .page-heading-art figcaption { flex-direction: row; align-items: center; gap: 13px; padding: 10px 12px; }
  .page-heading-art figcaption b { font-size: 23px; }
  .page-heading-art figcaption span { font-size: 10px; }
  .route-grid { grid-template-columns: 1fr; margin-bottom: 44px; box-shadow: 4px 4px 0 var(--shadow); }
  .route-card { gap: 11px; min-height: 0; padding: 23px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .route-card:last-child { border-bottom: 0; }
  .route-card h2 { font-size: 28px; }
  .route-card p { font-size: 16px; }
  .route-arrow { margin-top: 5px; }
  .home-section, .svc-section { padding-block: 44px; }
  .home-section-head { margin-bottom: 26px; }
  .home-section-head h2 { font-size: 33px; line-height: 1.4; }
  .home-section-head > p, .section-heading-side { margin-top: 19px; font-size: 16px; }
  .home-app-grid, .svc-product-grid { grid-template-columns: 1fr; gap: 20px; }
  .svc-product-case { grid-template-columns: 1fr; }
  .svc-cover-companion { min-height: 235px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .svc-cover-companion b, .svc-cover-ledger > b, .svc-cover-depart > b { font-size: 31px; }
  .svc-cover-companion img { height: 180px; }
  .home-app-card .svc-product-cover { min-height: 235px; padding: 23px; }
  .home-app-card .svc-cover-workspace img { height: 190px; }
  .home-course, .home-community { grid-template-columns: 1fr; box-shadow: 4px 4px 0 var(--shadow); }
  .home-course-art, .home-community-art { border-right: 0; border-bottom: 1px solid var(--ink); padding: 24px; }
  .home-course-art h3 { font-size: 34px; }
  .home-course-art img { height: 220px; margin: 18px auto 8px; }
  .home-course-copy, .home-community-copy { padding: 24px; }
  .home-course-copy h3, .home-community-copy h3 { font-size: 28px; }
  .course-steps li, .community-steps li { font-size: 16px; }
  .home-community-art img { height: 230px; }
  .home-community-art figcaption { margin-top: 10px; }
  .community-directions > div { grid-template-columns: 1fr; gap: 3px; }
  .community-directions dt, .community-directions dd { font-size: 16px; }
  .creator-role { display: flex; gap: 0; padding: 24px; }
  .creator-role h3 { font-size: 28px; margin: 17px 0 14px; }
  .creator-role p { margin-bottom: 15px; }
  .creator-role .svc-link { margin-top: 3px; }
  .home-about-grid { gap: 29px; }
  .brand-manifesto .manifesto-line { font-size: 29px; }
  .home-role-grid { gap: 12px; }
  .home-role-card { padding: 15px 9px; }
  .home-role-card img { height: 165px; }
  .home-role-card figcaption b { font-size: 26px; }
  .home-role-card figcaption span { font-size: 10px; }
  .site-footer { flex-direction: column; align-items: start; gap: 22px; padding-block: 30px; }
  .footer-manifesto p { font-size: 16px; }
  .footer-actions { align-items: start; width: 100%; gap: 13px; }
  .footer-actions nav { justify-content: space-between; width: 100%; gap: 16px; }
  .next-step { grid-template-columns: 1fr; padding: 24px; gap: 22px; margin-block: 15px 40px; }
  .next-step-copy h2 { font-size: 29px; }
  .next-step > .svc-button { justify-self: start; }
  .faq-grid, .svc-detail-grid { grid-template-columns: 1fr; }
  .faq-grid details { padding: 18px 22px; }
  .svc-detail-grid > :is(dl, section) { padding: 19px; }
  .svc-dialog-actions { align-items: stretch; }
  .role-tags span { font-size: 12px; }
  .svc-section-head { padding-left: 68px; min-height: 62px; }
  .svc-section-head::before { width: 48px; height: 60px; font-size: 30px; }
  .svc-section-head h2 { font-size: 33px; }
  .svc-section-head > p { margin-left: -68px; margin-top: 23px; font-size: 16px; }
  .svc-card-body { padding: 23px; }
  .svc-card-body > h3 { font-size: 26px; }
  .svc-card-body > p, .svc-circle dd, .svc-contact-body p, .svc-contact-body strong, .svc-syllabus p { font-size: 16px; }
  .svc-cover-workspace b { font-size: 32px; }
  .svc-cover-hub b { font-size: 32px; }
  .svc-course-grid { grid-template-columns: 1fr; }
  .svc-course { grid-template-columns: 1fr; box-shadow: 3px 3px 0 var(--shadow); }
  .svc-course-cover { border-right: 0; border-bottom: 1px solid var(--ink); min-height: 220px; padding: 24px; }
  .svc-course-cover b { font-size: 37px; }
  .svc-course .svc-card-body { padding: 24px; }
  .svc-course .svc-card-body > h3 { font-size: 25px; }
  .svc-course-footer { flex-wrap: wrap; }
  .svc-learning-support { padding: 23px; }
  .svc-circle { display: flex; padding: 24px; gap: 0; box-shadow: 3px 3px 0 var(--shadow); }
  .svc-circle-index { align-self: start; padding: 6px 10px; font-size: 10px; }
  .svc-circle h3 { font-size: 31px; margin: 20px 0 12px; }
  .svc-circle > p { font-size: 16px; margin: 16px 0; }
  .svc-circle dl { width: 100%; margin: 0 0 20px; }
  .svc-circle > .svc-button { max-width: none; width: 100%; margin: 0; }
  .svc-join-path { padding: 23px; }
  .svc-join-path li { font-size: 16px; }
  .svc-creator-type { height: auto; min-height: 140px; }
  .svc-avatar { top: 35px; left: auto; bottom: auto; }
  .svc-contribute { padding: 24px; }
  .svc-dialog h2 { font-size: 33px; }
  .brand-companion { grid-template-columns: 78px 1fr; gap: 12px 15px; padding: 18px 17px; }
  .brand-companion > img { width: 78px; height: 78px; grid-row: 1; }
  .brand-companion h3, .svc-section .brand-companion h3 { font-size: 23px; }
  .companion-mobile-break { display: inline; }
  .brand-companion .svc-button { grid-column: 1 / -1; margin-top: 2px; }
  .work-card { display: flex; box-shadow: 3px 3px 0 var(--shadow); }
  .work-cover { border-right: 0; border-bottom: 1px solid var(--ink); min-height: 225px; padding: 24px; }
  .work-cover > b { font-size: 32px; }
  .work-body { padding: 24px; }
  .cooperation-card { display: flex; gap: 0; padding: 24px; }
  .cooperation-card h3 { font-size: 28px; margin-block: 18px 14px; }
  .cooperation-card dl { margin-block: 23px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Recent applications reuse the existing catalog and product layouts. */
.svc-cover-translation { background: var(--tint-green); color: var(--ink); }
.svc-cover-guojia { background: var(--paper); color: var(--ink); }
.svc-cover-iphone { background: var(--tint-orange); color: var(--ink); }
.svc-cover-translation > b, .svc-cover-guojia > b, .svc-cover-iphone > b { font: 400 35px/1.3 var(--display); }
.guojia-series-nav { margin-bottom: 24px; }
.guojia-series-nav a { padding: 8px 12px; border: 1px solid var(--ink); color: var(--ink); background: var(--white); }
.guojia-series article { scroll-margin-top: 100px; }

/* 服务与合作页：四种合作方式 */
.offer-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 8px; border: 1px solid var(--ink); background: var(--white); }
.offer-picker a { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 44px; padding: 18px 22px; border-left: 1px solid var(--ink); }
.offer-picker a:first-child { border-left: 0; }
.offer-picker a:hover, .offer-picker a:focus-visible { background: var(--lime); }
.offer-picker span { font-size: 13px; color: var(--soft); }
.offer-picker b { font: 400 22px/1.4 var(--display); }
.offer-picker b::after { content: " ↓"; color: var(--blue); }
.offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.offer-card { display: flex; flex-direction: column; min-width: 0; padding: 30px; background: var(--white); border: 1px solid var(--ink); box-shadow: 5px 5px 0 var(--shadow); scroll-margin-top: 24px; }
.offer-card:nth-child(2) { background: var(--tint-green); }
.offer-card:nth-child(3) { background: var(--tint-orange); }
.offer-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.offer-card-head .eyebrow { color: var(--blue); }
.offer-state { padding: 3px 9px; border: 1px solid var(--ink); background: var(--paper); font-size: 12px; }
.offer-card h3 { font: 400 34px/1.35 var(--display); margin-block: 18px 10px; }
.offer-lead { font-size: 17px; }
.offer-card dl { margin-block: 22px 24px; }
.offer-card dl > div { display: grid; grid-template-columns: 88px 1fr; gap: 14px; padding-block: 12px; border-top: 1px dashed var(--line); }
.offer-card dt { font-size: 13px; color: var(--blue); }
.offer-card dd { margin: 0; font-size: 15px; color: var(--soft); }
.offer-card dd a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.offer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: auto; }
.offer-process { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0; list-style: none; border: 1px solid var(--ink); background: var(--white); }
.offer-process li { min-width: 0; padding: 22px; border-left: 1px solid var(--ink); }
.offer-process li:first-child { border-left: 0; }
.offer-process span { display: block; font: italic 400 26px/1.2 Georgia, serif; color: var(--blue); }
.offer-process b { display: block; margin-block: 12px 6px; font-size: 18px; }
.offer-process p { font-size: 14px; color: var(--soft); }
.offer-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.offer-proof a { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 26px; border: 1px solid var(--ink); background: var(--lime); }
.offer-proof a:hover, .offer-proof a:focus-visible { box-shadow: 5px 5px 0 var(--ink); }
.offer-proof b { font: 400 46px/1.1 var(--display); color: var(--blue); }
.offer-proof span { font-size: 15px; }
.offer-final { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 40px; margin-block: 10px 66px; border: 1px solid var(--ink); background: var(--blue); color: var(--paper); }
.offer-final .eyebrow { color: var(--lime); }
.offer-final h2 { margin-block: 10px; font: 400 clamp(30px, 3vw, 42px)/1.35 var(--display); }
.offer-final .svc-button { background: var(--paper); color: var(--ink) !important; border-color: var(--paper); flex-shrink: 0; }
@media (max-width: 1050px) {
  .offer-picker, .offer-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-picker a:nth-child(3) { border-left: 0; }
  .offer-picker a:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .offer-process li:nth-child(odd) { border-left: 0; }
  .offer-process li:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .offer-grid, .offer-proof { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .offer-picker, .offer-process { grid-template-columns: 1fr; }
  .offer-picker a, .offer-process li { border-left: 0; }
  .offer-picker a + a, .offer-process li + li { border-top: 1px solid var(--ink); }
  .offer-card { padding: 22px; }
  .offer-card h3 { font-size: 29px; }
  .offer-card dl > div { grid-template-columns: 1fr; gap: 4px; }
  .offer-final { flex-direction: column; align-items: flex-start; padding: 26px; }
}

/* 服务页申请表 */
.brief-form { display: grid; gap: 24px; padding: 32px; border: 1px solid var(--ink); background: var(--white); box-shadow: 5px 5px 0 var(--shadow); scroll-margin-top: 24px; }
.brief-types { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.brief-types legend { margin-bottom: 12px; font-size: 13px; color: var(--blue); }
.brief-types label { position: relative; }
.brief-types input { position: absolute; opacity: 0; }
.brief-types span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--ink); cursor: pointer; }
.brief-types input:checked + span { background: var(--ink); color: var(--paper); }
.brief-types input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.brief-fields, .brief-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.brief-group { grid-column: 1 / -1; }
.brief-group[hidden] { display: none; }
.brief-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-size: 14px; }
.brief-wide { grid-column: 1 / -1; }
.brief-field input, .brief-field select, .brief-field textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--sans); }
.brief-field textarea { resize: vertical; }
.brief-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.brief-error { color: var(--orange); font-size: 14px; }
.brief-result { display: grid; gap: 12px; justify-items: start; padding-top: 22px; border-top: 1px dashed var(--line); }
.brief-result[hidden] { display: none; }
.brief-result .brief-field { width: 100%; }
.brief-status { font-size: 14px; color: var(--green); }
@media (max-width: 600px) {
  .brief-form { padding: 22px; }
  .brief-fields, .brief-group { grid-template-columns: 1fr; }
}

/* 首页事实条与四个入口 */
.home-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 28px; }
.home-proof b { font-size: 38px; }
@media (max-width: 1050px) {
  .route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-card:nth-child(2) { border-right: 0; }
  .route-card:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .home-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .route-grid { grid-template-columns: 1fr; }
  .route-card:nth-child(2) { border-right: 0; }
  .route-card:nth-child(n+3) { border-top: 0; }
  .home-proof { gap: 12px; }
  .home-proof a { padding: 18px; }
  .home-proof b { font-size: 30px; }
}

/* 学习页：试学 → 训练营 → 共创会员 */
.learn-ladder { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 22px; align-items: stretch; padding: 0; list-style: none; }
.learn-step { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 28px; border: 1px solid var(--ink); background: var(--white); }
.learn-step-main { background: var(--lime); box-shadow: 6px 6px 0 var(--ink); }
.learn-step-index { font: 11px/1.8 var(--mono); letter-spacing: .06em; color: var(--blue); }
.learn-step h3 { font: 400 32px/1.35 var(--display); }
.learn-step > p { font-size: 16px; color: var(--soft); }
.learn-step-main > p { color: var(--ink); }
.learn-step ul { display: grid; gap: 8px; margin: 4px 0 8px; padding: 0; list-style: none; }
.learn-step li { padding-left: 20px; position: relative; font-size: 15px; }
.learn-step li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); }
.learn-step .learn-step-note { font-size: 13px; color: var(--soft); }
.learn-step > .svc-link, .learn-step > .svc-button { margin-top: auto; align-self: start; }
@media (max-width: 1050px) { .learn-ladder { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .learn-step { padding: 22px; } .learn-step h3 { font-size: 28px; } }

/* 共创页：会员方案与首批创作者墙 */
.member-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.member-card { min-width: 0; padding: 26px; border: 1px solid var(--ink); background: var(--white); }
.member-card:nth-child(2) { background: var(--lime); }
.member-card > .eyebrow { color: var(--blue); margin-bottom: 14px; }
.member-card ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.member-card li { font-size: 15px; color: var(--soft); }
.member-card li b { display: block; margin-bottom: 3px; font-size: 17px; color: var(--ink); }
.member-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.member-steps li { display: flex; gap: 14px; align-items: baseline; padding-block: 12px; border-top: 1px dashed var(--dash); font-size: 16px; color: var(--ink); }
.member-steps li:first-child { border-top: 0; padding-top: 0; }
.member-steps span { font: italic 400 22px/1 Georgia, serif; color: var(--blue); }
.creator-slots { display: grid; grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 26px; border: 1px solid var(--ink); background: var(--white); }
.creator-slots-head { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 22px; background: var(--ink); color: var(--paper); }
.creator-slots-head b { font: 400 24px/1.4 var(--display); }
.creator-slots-head span { font-size: 13px; opacity: .8; }
.creator-slots a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 150px; padding: 18px; border-left: 1px dashed var(--dash); text-align: center; }
.creator-slots a:hover, .creator-slots a:focus-visible { background: var(--lime); }
.creator-slots i { display: grid; place-items: center; width: 52px; height: 52px; border: 1px dashed var(--ink); border-radius: 50%; font: 400 26px/1 var(--sans); font-style: normal; color: var(--blue); }
.creator-slots span { font-size: 15px; }
.creator-slots small { font-size: 12px; color: var(--soft); }
@media (max-width: 1050px) {
  .member-grid { grid-template-columns: 1fr; }
  .creator-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .creator-slots-head { grid-column: 1 / -1; }
  .creator-slots a:nth-child(2) { border-left: 0; }
}
@media (max-width: 600px) {
  .creator-slots { grid-template-columns: 1fr; }
  .creator-slots a { flex-direction: row; justify-content: flex-start; min-height: 0; border-left: 0; border-top: 1px dashed var(--dash); text-align: left; gap: 12px; }
  .creator-slots i { width: 40px; height: 40px; font-size: 20px; }
}

/* 页尾站点地图 */
.site-footer { flex-wrap: wrap; align-items: start; }
.footer-manifesto { flex: 0 1 300px; }
.footer-map { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 10px 46px; flex: 1 1 560px; justify-content: center; }
.footer-map div { display: flex; flex-direction: column; min-width: 0; }
.footer-map b { margin-bottom: 6px; font: 11px/1.8 var(--mono); letter-spacing: .08em; color: var(--blue); }
.footer-map a { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; }
.footer-map a:hover, .footer-map a:focus-visible { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.footer-actions { align-self: start; }
@media (max-width: 850px) {
  .footer-manifesto, .footer-map { flex: none; }
  .footer-map { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 20px; justify-content: stretch; width: 100%; }
  .footer-map a { min-height: 44px; font-size: 14px; }
}
@media (max-width: 600px) { .footer-map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; } }