:root {
  --paper:#f8f7f0; --panel:#fffef9; --ink:#18251d; --soft:#4b5a4e; --muted:#617066;
  --line:#d8dfd2; --wash:#e9eee3; --green:#285640; --dark:#12251e; --lime:#d5f4a0;
  --accent:#285640; --accent-ink:#173c2a; --tint:#e9eee3;
  --max:1190px; --gutter:clamp(1.2rem,4vw,3.2rem);
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  color:var(--ink); background:var(--paper); font-synthesis:none;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-padding-top:5.6rem; scroll-behavior:smooth; }
body { margin:0; min-width:0; }
[hidden] { display:none!important; }
h1,h2,h3,p,figure,dl,dd { margin:0; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; }
img { display:block; max-width:100%; height:auto; }
:focus-visible { outline:3px solid #9a5729; outline-offset:4px; }
.wrap { width:min(calc(100% - 2 * var(--gutter)),var(--max)); margin-inline:auto; }
.sr,.skip:not(:focus) { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
.skip:focus { position:fixed; top:1rem; left:1rem; z-index:10; background:white; padding:0.7rem 1rem; }
.top { position:sticky; top:0; z-index:5; background:#f8f7f0f5; border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.top-inner { min-height:70px; display:flex; justify-content:space-between; align-items:center; gap:1.25rem; }
.brand { display:flex; align-items:center; gap:.75rem; font-weight:780; font-size:1.03rem; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--accent); color:white; font-size:1rem; font-weight:760; }
.brand img { border-radius:10px; }
.brand small { margin-left:.7rem; color:var(--muted); font-weight:540; font-size:.76rem; }
nav { display:flex; align-items:center; gap:clamp(.7rem,2.5vw,2.2rem); font-size:.88rem; color:var(--soft); white-space:nowrap; }
nav a:hover,.crumb:hover { color:var(--accent); text-decoration:underline; text-underline-offset:.22em; }
.nav-link { color:var(--ink); font-weight:700; }
.hero { position:relative; padding:clamp(3.5rem,7vw,6.9rem) 0; }
.hero-gallery { background:radial-gradient(ellipse at 88% 15%,#29493a 0%,transparent 57%),linear-gradient(133deg,#12251e,#10211b 73%); color:#f8faef; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr); gap:clamp(1.75rem,5vw,5.2rem); align-items:center; }
.eyebrow { color:var(--accent); font-size:.82rem; font-weight:750; letter-spacing:.10em; line-height:1.6; }
.hero-gallery .hero-text .eyebrow,.contact .eyebrow { color:#d5f4a0; }
.hero-text .eyebrow span { display:inline-block; width:.5rem; height:.5rem; border-radius:50%; background:var(--lime); margin-right:.35rem; vertical-align:2px; }
h1 { font-size:clamp(2.75rem,5.35vw,5.2rem); line-height:1.13; letter-spacing:-.07em; font-weight:850; margin:1rem 0 1.4rem; overflow-wrap:break-word; }
h1 em { font-style:normal; color:var(--accent); }
.hero-gallery h1 { font-size:clamp(2.3rem,4.65vw,4.5rem); }
.hero-gallery h1 em { color:var(--lime); }
.hero-summary { max-width:34rem; color:var(--soft); font-size:clamp(1.05rem,1.75vw,1.25rem); line-height:1.85; }
.hero-gallery .hero-summary { color:#e2e9df; }
.actions { margin-top:1.85rem; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:48px; padding:.7rem 1.12rem; border:1px solid transparent; border-radius:.62rem; font-weight:750; line-height:1.35; text-align:center; font-size:.92rem; transition:transform 160ms,background 160ms; }
.button:hover { transform:translateY(-2px); }
.button-lime { background:var(--lime); color:#18271a; }
.button-lime:hover { background:#e2ffc3; }
.button-outline-light { border-color:#889f8e; color:#f5faeb; }
.button-outline-light:hover { background:#ffffff15; }
.button-primary { background:var(--accent); color:#fff; }
.button-primary:hover { background:var(--accent-ink); }
.button-plain { color:var(--accent-ink); border-color:var(--line); background:var(--panel); }
.button-plain:hover { background:var(--tint); }
.flow-demo { border-radius:1.25rem; overflow:hidden; background:#f4f7e9; color:var(--ink); border:1px solid #eaf3e44f; box-shadow:0 1.6rem 4rem #09150e74; transform:rotate(-1deg); }
.flow-top { display:flex; align-items:center; gap:1rem; background:#e3ead8; color:#354d3c; padding:.8rem 1.2rem; border-bottom:1px solid #d2ddc8; font-size:.78rem; font-weight:700; }
.flow-dots { color:#66836c; font-size:.57rem; letter-spacing:.2em; }
.flow-inner { padding:clamp(1.1rem,2.5vw,1.75rem); }
.flow-inner h2 { font-size:clamp(1.35rem,2.1vw,1.9rem); letter-spacing:-.055em; margin:.28rem 0 1.05rem; }
.flow-list { display:grid; gap:.48rem; }
.flow-step { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.75rem; border:1px solid #dce4d0; background:#fffef9; padding:.58rem .7rem; border-radius:.58rem; }
.flow-step:hover { background:#e9f2dd; border-color:#a6bca4; }
.step-num { font-variant-numeric:tabular-nums; background:#dee9d4; color:#244637; display:grid; place-items:center; border-radius:.38rem; width:2.1rem; height:2.1rem; font-weight:780; font-size:.76rem; }
.flow-step strong { display:block; font-size:.89rem; }
.flow-step small { display:block; color:var(--soft); font-size:.74rem; margin-top:.12rem; }
.flow-arrow { font-size:.88rem; color:var(--accent); }
.flow-note { font-size:.72rem; line-height:1.6; margin-top:.85rem; color:var(--muted); }
.quick-count { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }
.quick-count div { display:flex; gap:.7rem; align-items:baseline; justify-content:center; padding:clamp(1.25rem,3vw,1.9rem) .5rem; }
.quick-count div + div { border-left:1px solid var(--line); }
.quick-count strong { font-family:system-ui,sans-serif; color:var(--green); font-weight:770; font-size:clamp(1.55rem,3.4vw,2.55rem); letter-spacing:-.05em; line-height:1; }
.quick-count span { font-size:.87rem; color:var(--soft); }
.section { padding:clamp(3.5rem,7vw,6.3rem) 0; }
.section-head { margin-bottom:clamp(1.6rem,3.7vw,2.7rem); }
.section-head h2,.contact h2 { font-size:clamp(1.95rem,4.1vw,3.5rem); line-height:1.18; letter-spacing:-.065em; font-weight:810; margin:.55rem 0 .8rem; }
.section-head > p:last-child:not(.eyebrow),.contact p:not(.eyebrow) { color:var(--soft); line-height:1.75; max-width:46rem; }
.catalog-controls { display:flex; justify-content:space-between; align-items:center; gap:.8rem 1.5rem; flex-wrap:wrap; }
.filters { display:flex; flex-wrap:wrap; gap:.45rem; }
.filters button,.demo-tabs button { background:transparent; color:var(--soft); border:1px solid var(--line); padding:.54rem .82rem; border-radius:.5rem; font-weight:650; font-size:.88rem; }
.filters button:hover,.demo-tabs button:hover { border-color:var(--accent); }
.filters button[aria-pressed=true],.demo-tabs button[aria-pressed=true] { background:var(--accent); border-color:var(--accent); color:#fff; }
.search { display:flex; align-items:center; gap:.6rem; padding:.22rem .82rem; border:1px solid var(--line); border-radius:.55rem; background:var(--panel); min-width:13rem; }
.search span:not(.sr) { font-size:1.25rem; color:var(--accent); }
.search input { padding:.46rem 0; border:0; background:transparent; color:var(--ink); width:100%; min-width:0; }
.search input:focus { outline:none; }
.search:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.search-status { min-height:1.1rem; margin:.8rem 0 0; color:var(--muted); font-size:.77rem; }
.empty { margin:2rem 0 0; padding:1.4rem; border:1px solid var(--line); border-radius:.6rem; background:var(--panel); }
.catalog-group { margin-top:2.6rem; }
.catalog-group-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.8rem 1rem; margin-bottom:1.2rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line); }
.group-index { display:grid; place-items:center; width:2.8rem; height:2.8rem; background:#dce9d5; color:var(--green); border-radius:.7rem; font-family:system-ui,sans-serif; font-weight:760; font-size:1.2rem; }
[data-group-section=B] .group-index { background:#f1e4d1; color:#784927; }
[data-group-section=C] .group-index { background:#dce8ee; color:#235171; }
.catalog-group-head h3 { font-size:clamp(1.22rem,2.3vw,1.65rem); letter-spacing:-.045em; }
.catalog-group-head p:not(.group-index) { color:var(--muted); font-size:.87rem; line-height:1.6; margin-top:.18rem; }
.group-count { color:var(--muted); font-weight:650; font-size:.83rem; }
.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.product-card { border:1px solid var(--line); border-radius:.7rem; background:var(--panel); transition:transform 160ms,box-shadow 160ms,border-color 160ms; }
.product-card:hover { transform:translateY(-3px); border-color:#9fb29f; box-shadow:0 .5rem 1.2rem #25382911; }
.product-card a { height:100%; display:flex; flex-direction:column; padding:1.2rem; border-radius:.7rem; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.8rem; color:var(--muted); font-family:system-ui,sans-serif; font-size:.77rem; font-weight:740; }
.product-card h3 { font-size:1.16rem; line-height:1.4; letter-spacing:-.035em; }
.product-card p { margin:.45rem 0 1rem; color:var(--soft); line-height:1.65; font-size:.87rem; }
.card-link { margin-top:auto; display:flex; justify-content:space-between; gap:.65rem; align-items:center; color:var(--accent); border-top:1px solid #e5e9df; padding-top:.7rem; font-size:.80rem; font-weight:720; }
.card-link b,.mini-tile b { font-weight:750; }
.mini-section,.related-section { background:var(--wash); }
.mini-grid,.shot-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.mini-tile { padding:clamp(1.45rem,4vw,2.4rem); border:1px solid var(--line); border-radius:1rem; background:var(--panel); }
.mini-tile:hover { box-shadow:0 .5rem 1.2rem #25382915; }
.mini-tile > div { display:flex; gap:.8rem; align-items:center; color:var(--soft); font-size:.78rem; font-weight:670; }
.mini-tile img { border-radius:10px; }
.mini-tile .brand-mark { width:44px; height:44px; background:#2a53ba; }
.mini-tile h3 { font-size:clamp(1.65rem,3vw,2.4rem); letter-spacing:-.05em; margin:.9rem 0 .25rem; }
.mini-tile p { color:var(--soft); margin-bottom:1rem; }
.mini-tile b { color:var(--accent); font-size:.87rem; }
.mini-micro { background:#f5faec; }
.mini-lesson { background:#f2f5fc; }
.contact { background:var(--dark); color:#f6f9ef; }
.contact-inner { display:flex; justify-content:space-between; align-items:center; gap:1rem 3rem; }
.contact-inner .button { white-space:nowrap; }
.contact p:not(.eyebrow) { color:#d9e7da; }
.footer { background:#f1f2e9; color:var(--soft); border-top:1px solid var(--line); }
.footer-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; min-height:85px; padding-block:1rem; font-size:.81rem; }
.footer-inner a:first-child { display:flex; align-items:center; gap:.65rem; color:var(--ink); }
.footer-inner .brand-mark { width:30px; height:30px; border-radius:8px; font-size:.84rem; }
.footer a:hover { text-decoration:underline; text-underline-offset:.2em; }

.detail-hero { background:var(--tint); padding:1.5rem 0 clamp(3rem,7vw,6.5rem); border-bottom:1px solid var(--line); }
.detail-hero.theme-B { --accent:#7b4824; --accent-ink:#653917; --tint:#f4eadb; }
.detail-hero.theme-C { --accent:#23536b; --accent-ink:#163e51; --tint:#e7eff2; }
.detail-hero .hero-grid { padding-top:clamp(2rem,6vw,5rem); }
.crumb { color:var(--soft); font-size:.86rem; }
.index-mark { border:1px solid currentColor; color:var(--accent); border-radius:.35rem; font-size:.69rem; letter-spacing:0; padding:.16rem .46rem; margin-left:.5rem; white-space:nowrap; }
.detail-hero h1 { font-size:clamp(2.15rem,4.55vw,4.2rem); margin:.85rem 0 .75rem; line-height:1.18; }
.detail-hero h2 { font-size:clamp(1.15rem,2vw,1.6rem); line-height:1.55; letter-spacing:-.036em; margin-bottom:.75rem; color:var(--accent-ink); }
.example { background:var(--panel); border:1px solid var(--line); border-radius:1rem; padding:clamp(1.25rem,3vw,2rem); box-shadow:0 .7rem 2.1rem #25382912; }
.example-unit { margin-top:1.05rem; padding-top:1rem; border-top:1px solid var(--line); line-height:1.65; }
.example-unit small { display:block; color:var(--muted); font-size:.72rem; font-weight:750; margin-bottom:.27rem; }
.example-unit p { color:var(--soft); }
.example-foot { margin-top:1.15rem; color:var(--muted); font-size:.74rem; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem 1.65rem; }
.feature { padding:1.05rem 0 0; border-top:2px solid var(--line); }
.feature-num { display:inline-block; color:var(--accent); background:var(--tint); padding:.24rem .48rem; border-radius:.38rem; font-family:system-ui,sans-serif; font-size:.75rem; font-weight:760; margin-bottom:.75rem; }
.feature h3 { font-size:1.25rem; letter-spacing:-.036em; margin-bottom:.55rem; }
.feature p { color:var(--soft); line-height:1.75; }
.scope-note { margin-top:2rem; border-left:3px solid var(--accent); padding:.65rem 1rem; background:var(--tint); color:var(--soft); line-height:1.72; }
.scope-note strong { color:var(--accent-ink); margin-right:.65rem; }
.evidence { margin:2rem 0 0; padding:1rem; border:1px solid var(--line); border-radius:.8rem; background:var(--panel); }
.evidence img { max-height:33rem; width:auto; margin:auto; border-radius:.35rem; }
.evidence figcaption,.image-note { color:var(--muted); font-size:.8rem; line-height:1.55; margin-top:.65rem; text-align:center; }
.related-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
.related-list a { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.5rem; background:var(--panel); border:1px solid var(--line); border-radius:.55rem; padding:.85rem .75rem; font-size:.88rem; }
.related-list a:hover { border-color:var(--accent); }
.related-list span,.related-list b { color:var(--accent); font-size:.75rem; }

.micro { --paper:#f8faf3; --accent:#25663d; --accent-ink:#18482a; --tint:#e6f2df; --line:#d7e2d0; --wash:#edf4e8; }
.lesson { --paper:#f8f9fd; --accent:#2b54bc; --accent-ink:#203e87; --tint:#e8effc; --line:#d7e0f2; --wash:#edf2fb; --dark:#172849; --lime:#dce9ff; }
.micro .top,.lesson .top { background:var(--paper); }
.micro .promo-hero { background:radial-gradient(ellipse at 80% 33%,#d5eac3,transparent 52%),linear-gradient(115deg,#f8faf3 20%,#e7f2e2); }
.lesson .promo-hero { background:radial-gradient(ellipse at 75% 30%,#dfe8ff,transparent 56%),linear-gradient(115deg,#f8f9fd 20%,#e9effd); }
.promo-hero h1 { font-size:clamp(2.5rem,5.1vw,4.8rem); line-height:1.14; }
.promo-note { color:var(--accent-ink); font-size:.81rem; margin-top:1rem; font-weight:650; }
.micro-demo { background:#fbfdf8; border:1px solid #c7d9bf; border-radius:1.2rem; overflow:hidden; box-shadow:0 1.2rem 3rem #3052321b; }
.demo-top { display:flex; gap:.55rem; align-items:center; padding:1rem 1.15rem; border-bottom:1px solid var(--line); }
.demo-top strong { font-size:1.02rem; }
.demo-live { display:inline-block; width:.52rem; height:.52rem; border-radius:100%; background:#387c4c; }
.demo-top small { margin-left:auto; color:var(--muted); font-size:.70rem; }
.demo-tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin:1.05rem 1.15rem 0; }
.demo-tabs button { font-size:.77rem; padding:.35rem .55rem; }
.voice-message { display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:center; margin:1.05rem 1.15rem; background:#e4f1dd; padding:.85rem; border-radius:.65rem; color:#20492d; min-height:5.8rem; }
.voice-message p { font-weight:650; font-size:.98rem; line-height:1.6; }
.wave { display:flex; gap:3px; align-items:center; }
.wave i { display:block; width:3px; height:11px; border-radius:2px; background:#387c4c; }
.wave i:nth-child(2n) { height:18px; }
.wave i:nth-child(3n) { height:25px; }
.receipt { margin:0 1.15rem 1.15rem; padding:1rem; border:1px solid var(--line); border-radius:.65rem; background:var(--panel); }
.receipt > p { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-weight:750; font-size:.91rem; margin-bottom:.5rem; }
.receipt > p span { color:#205635; background:#e2f1dc; padding:.2rem .35rem; border-radius:.3rem; font-size:.72rem; }
.receipt dl div { display:grid; grid-template-columns:4rem minmax(0,1fr); align-items:baseline; padding:.43rem 0; border-top:1px solid #e7ede3; }
.receipt dt { color:var(--muted); font-size:.8rem; }
.receipt dd { font-weight:680; text-align:right; }
.lesson .contact .eyebrow { color:#dce9ff; }
.lesson .button-lime:hover { background:#f0f5ff; }
.lesson-visual { max-width:31rem; margin-inline:auto; }
.lesson-visual img { border-radius:1.1rem; box-shadow:0 1.2rem 3rem #24366324; border:1px solid #dce5f6; }
.lesson-visual figcaption { margin-top:.55rem; color:var(--muted); text-align:center; font-size:.78rem; }
.micro .shot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.shot-grid figure { padding:.72rem; border:1px solid var(--line); border-radius:.8rem; background:var(--panel); }
.shot-grid img { width:100%; border-radius:.42rem; }
.shot-grid figcaption { display:grid; gap:.33rem; padding:.8rem .26rem .4rem; font-size:.9rem; line-height:1.5; color:var(--soft); }
.shot-grid figcaption strong { color:var(--ink); font-size:1rem; }
.lesson .shot-grid { max-width:880px; }
.copy-status { margin-top:.55rem; min-height:1.5rem; font-size:.79rem; }

@media (max-width:900px) {
  .catalog-grid,.related-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-grid { gap:2rem; }
}
@media (max-width:680px) {
  html { scroll-padding-top:5rem; }
  .top-inner { min-height:59px; gap:.6rem; }
  .brand { gap:.45rem; font-size:.91rem; }
  .brand small { display:none; }
  .brand-mark,.brand img { width:31px; height:31px; border-radius:8px; }
  nav { gap:.7rem; font-size:.76rem; }
  .hero { padding:2.8rem 0 3.2rem; }
  .hero-grid { grid-template-columns:1fr; gap:1.7rem; }
  .hero-gallery h1 { font-size:clamp(2.05rem,8.7vw,3.45rem); margin:.72rem 0 .9rem; }
  .hero-summary { font-size:1rem; }
  .actions { margin-top:1.25rem; }
  .button { min-height:45px; font-size:.84rem; padding:.65rem .8rem; }
  .flow-demo { transform:none; }
  .quick-count div { flex-direction:column; align-items:center; gap:.45rem; }
  .quick-count span { font-size:.72rem; text-align:center; }
  .section { padding:3.3rem 0; }
  .search { flex:1 1 100%; }
  .catalog-group-head { gap:.55rem; }
  .catalog-group-head p:not(.group-index) { font-size:.76rem; }
  .group-index { width:2rem; height:2rem; font-size:.96rem; }
  .catalog-grid { gap:.6rem; }
  .product-card a { padding:.8rem; }
  .product-card h3 { font-size:1rem; }
  .product-card p { font-size:.79rem; }
  .card-head { flex-wrap:wrap; align-content:start; }
  .feature-grid,.contact-inner { grid-template-columns:1fr; }
  .contact-inner { flex-direction:column; align-items:flex-start; }
  .feature-grid { gap:1.2rem; }
  .detail-hero .hero-grid { padding-top:1.8rem; }
  .detail-hero h1 { margin-top:.55rem; }
  .promo-hero h1 { margin:.8rem 0 1rem; }
  .micro .shot-grid { grid-template-columns:1fr; }
}
@media (max-width:370px) {
  nav { gap:.48rem; font-size:.72rem; }
  .promo-hero h1 { font-size:2.15rem; }
  .catalog-grid,.related-list,.mini-grid,.shot-grid { grid-template-columns:1fr; }
  .mini-tile { padding:1.2rem; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; }
}

/* Product navigation and expanded page content */
.top-nav { gap:1.2rem; }
.header-products { display:flex; gap:.5rem; padding-left:1rem; border-left:1px solid var(--line); }
.header-cta { display:inline-flex; align-items:center; justify-content:center; gap:.65rem; padding:.65rem 1.05rem; border-radius:.5rem; background:var(--accent); color:white; font-size:.85rem; font-weight:760; border:1px solid var(--accent); }
.header-cta:hover { color:white; text-decoration:none; filter:brightness(.95); }
.header-micro { background:#25663d; border-color:#25663d; }
.header-lesson { background:#2b54bc; border-color:#2b54bc; }
.back-link { font-weight:650; font-size:.82rem; }
.mini-section { padding-block:3.1rem; }
.mini-section .section-head { display:flex; align-items:baseline; gap:1rem; margin-bottom:1.3rem; }
.mini-section .section-head h2 { font-size:1.8rem; margin:0; }
.mini-tile { display:grid; grid-template-columns:minmax(0,1fr) 145px; align-items:center; gap:1.1rem; overflow:hidden; border-color:#c9d5c2; }
.mini-lesson { border-color:#c9d5ed; }
.mini-tile > div { display:block; }
.mini-tile .mini-brand { display:flex; align-items:center; gap:.7rem; font-weight:700; font-size:.79rem; }
.mini-tile .mini-copy h3 { margin:.65rem 0 .5rem; }
.mini-tile .mini-copy p { font-size:.9rem; max-width:19rem; line-height:1.7; margin-bottom:1.15rem; }
.mini-button { display:inline-flex; padding:.64rem .9rem; background:#25663d; color:white; border-radius:.5rem; font-size:.83rem; font-weight:760; }
.mini-lesson .mini-button { background:#2b54bc; }
.mini-tile .mini-visual { display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; padding:1.1rem; background:#ffffffbd; border:1px solid #d2ddc9; border-radius:.75rem; box-shadow:0 .7rem 1.3rem #283c2710; transform:rotate(4deg); }
.mini-visual > span { font-size:.7rem; padding-bottom:.65rem; border-bottom:1px solid var(--line); width:100%; }
.mini-visual > strong { font-size:1.05rem; color:#173c2a; }
.mini-visual > small { font-size:.7rem; padding-top:.5rem; }
.mini-tile .mini-visual > b { font-size:1.8rem; color:#173c2a; font-variant-numeric:tabular-nums; }
.mini-tile .mini-schedule { border-color:#c9d5ed; transform:rotate(-4deg); }
.mini-schedule > strong { color:#2b54bc; }
.mini-schedule > small { padding:0 0 .2rem; }
.product-detail.theme-B { --accent:#7b4824; --accent-ink:#653917; --tint:#f4eadb; --wash:#f4efe6; }
.product-detail.theme-C { --accent:#23536b; --accent-ink:#163e51; --tint:#e7eff2; --wash:#e8eef0; }
.chapters { background:var(--panel); border-bottom:1px solid var(--line); font-size:.86rem; }
.chapters .wrap { display:flex; flex-wrap:wrap; gap:1.8rem; padding-block:1rem; }
.chapters a { color:var(--soft); font-weight:680; }
.chapters a:hover { color:var(--accent); }
.process-section { background:var(--wash); }
.process-section > .wrap { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:3rem; align-items:start; }
.process-section .section-head { position:sticky; top:7rem; }
.step-list { list-style:none; margin:0; padding:0; }
.step-list li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:1rem; padding:1.8rem 0; border-top:1px solid #c4d0c0; }
.step-list li:first-child { padding-top:0; border-top:0; }
.step-list li:last-child { padding-bottom:0; }
.step-list li > span { color:var(--accent); font-weight:800; font-size:.86rem; line-height:1.5; min-width:1.7rem; padding-top:.2rem; }
.step-list h3 { font-size:clamp(1.1rem,2vw,1.5rem); margin-bottom:.6rem; letter-spacing:-.025em; }
.step-list p { color:var(--soft); line-height:1.85; max-width:36rem; }
.result-section > .wrap { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:2rem 3.5rem; align-items:center; }
.result-section .section-head { margin:0; }
.result-preview { background:var(--panel); border:1px solid var(--line); border-radius:1rem; overflow:hidden; box-shadow:0 1rem 2.5rem #2334280b; }
.result-preview figcaption { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 1.4rem; background:var(--tint); border-bottom:1px solid var(--line); }
.result-preview figcaption strong { font-size:1rem; }
.result-preview figcaption > span { font-size:.71rem; white-space:nowrap; color:var(--muted); }
.result-preview dl { padding:.5rem 1.4rem; }
.result-preview dl > div { display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:.7rem; padding:1rem 0; border-bottom:1px solid var(--line); line-height:1.75; }
.result-preview dl > div:last-child { border-bottom:0; }
.result-preview dt { color:var(--muted); font-size:.85rem; }
.result-preview dd { font-size:.92rem; font-weight:620; overflow-wrap:anywhere; }
.result-section .evidence { grid-column:1/-1; margin-top:1rem; width:100%; }
.result-section .evidence img { max-height:30rem; }
.questions-section { background:var(--panel); }
.questions-section > .wrap { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:1.8rem 3rem; }
.questions-section .section-head { margin:0; }
.faq-list { min-width:0; }
.faq-list details { border-top:1px solid var(--line); padding:1.1rem 0; }
.faq-list details:last-child { border-bottom:1px solid var(--line); }
.faq-list summary { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; list-style:none; cursor:pointer; font-size:1.02rem; font-weight:720; line-height:1.7; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { flex:none; width:1rem; height:1rem; margin-top:.35rem; position:relative; }
.faq-list summary span::before,.faq-list summary span::after { content:""; position:absolute; background:var(--accent); width:12px; height:1.5px; top:7px; left:1px; }
.faq-list summary span::after { transform:rotate(90deg); }
.faq-list details[open] summary span::after { display:none; }
.faq-list details p { color:var(--soft); line-height:1.85; margin:.75rem 1.8rem 0 0; font-size:.93rem; }
.questions-section .scope-note { grid-column:2; margin-top:0; font-size:.85rem; }
.scenario-section .feature { border-color:var(--accent); }
.lesson .shot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:none; }
.lesson-balance .demo-tabs { margin:1rem 1.4rem .5rem; }
.lesson-balance dl > div { grid-template-columns:1fr auto; }
.lesson-balance dd { font-size:1.3rem; color:var(--accent); }
.lesson-balance dl > div:last-child dd { font-size:1.7rem; }
@media (max-width:900px) {
  .top-nav { gap:.7rem; }
  .header-products { padding-left:.65rem; }
  .header-cta { padding:.6rem .8rem; }
  .mini-tile { grid-template-columns:minmax(0,1fr) 110px; gap:.7rem; padding:1.3rem; }
  .mini-tile .mini-visual { padding:.8rem; }
  .process-section > .wrap,.result-section > .wrap,.questions-section > .wrap { gap:1.8rem; }
}
@media (max-width:680px) {
  html { scroll-padding-top:7.7rem; }
  .top-inner { flex-wrap:wrap; padding-block:.65rem; gap:.7rem; }
  .top-nav { display:flex; flex:1 1 100%; justify-content:space-between; gap:.5rem; }
  .top-nav .nav-secondary { font-size:.78rem; }
  .header-products { margin-left:auto; padding-left:.6rem; gap:.38rem; }
  .header-cta { font-size:.79rem; padding:.55rem .72rem; min-height:36px; }
  .micro .top-inner,.lesson .top-inner { flex-wrap:wrap; }
  .micro .top-nav,.lesson .top-nav { flex:1 1 100%; }
  .micro .top-nav .nav-secondary,.lesson .top-nav .nav-secondary { font-size:.75rem; }
  .back-link { margin-left:auto; font-size:.75rem; }
  .mini-grid { grid-template-columns:1fr; }
  .mini-tile { padding:1.35rem; grid-template-columns:minmax(0,1fr) 118px; }
  .mini-tile .mini-copy h3 { font-size:1.85rem; }
  .mini-section .section-head { display:block; }
  .mini-section .section-head h2 { margin-top:.5rem; }
  .chapters .wrap { gap:1.1rem; padding-block:.8rem; font-size:.76rem; }
  .process-section > .wrap,.result-section > .wrap,.questions-section > .wrap { grid-template-columns:1fr; gap:1.5rem; }
  .process-section .section-head { position:static; margin:0; }
  .step-list li { padding:1.3rem 0; }
  .step-list p { font-size:.94rem; }
  .questions-section .scope-note { grid-column:1; }
  .result-preview figcaption { padding:.95rem; }
  .result-preview dl { padding:.3rem .95rem; }
  .result-preview dl > div { grid-template-columns:5.3rem minmax(0,1fr); gap:.6rem; padding:.8rem 0; }
  .result-preview dl > div dd { font-size:.86rem; }
  .lesson-balance dl > div { grid-template-columns:1fr auto; }
  .lesson-balance dl > div dd { font-size:1.3rem; }
  .lesson .shot-grid { grid-template-columns:1fr; }
  .lesson .shot-grid figure { max-width:450px; margin-inline:auto; }
}
@media (max-width:370px) {
  .header-cta { padding:.5rem .54rem; font-size:.74rem; }
  .top-nav .nav-secondary { font-size:.72rem; }
  .mini-tile { grid-template-columns:minmax(0,1fr) 95px; padding:1rem; }
  .mini-copy p { max-width:11rem; }
  .chapters .wrap { gap:.8rem; }
}

/* Shared home navigation, dedicated cooperation page and mini-program codes */
.nav-home { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:44px; padding:.65rem 1rem; border:1px solid #adc67f; border-radius:.6rem; background:#d5f4a0; color:#193323; font-size:.9rem; font-weight:820; box-shadow:0 3px 0 #1c3e2521; }
.nav-home svg { width:19px; height:19px; flex:none; }
.nav-home:hover { color:#193323; text-decoration:none; background:#c8ec88; }
.nav-home[aria-current=page] { border-color:#6c8c45; }
.nav-contact { font-weight:700; }
.nav-contact[aria-current=page] { color:var(--accent); text-decoration:underline; text-underline-offset:.3em; }
.cooperation-hero { background:var(--dark); color:#f6f9ef; padding-block:clamp(3rem,6vw,6rem); }
.cooperation-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.cooperation-hero .eyebrow,.cooperation-hero h1 em { color:var(--lime); }
.cooperation-hero h1 { font-size:clamp(2.7rem,5.2vw,4.9rem); }
.cooperation-hero .hero-summary { color:#dbe6d9; max-width:30rem; }
.cooperation-back { display:inline-block; margin-top:1.6rem; font-size:.9rem; font-weight:700; color:var(--lime); }
.cooperation-back:hover { text-decoration:underline; text-underline-offset:.25em; }
.email-card { background:var(--panel); color:var(--ink); border:1px solid #ffffff50; border-radius:1.1rem; padding:clamp(1.4rem,3.5vw,2.6rem); box-shadow:0 1.4rem 3rem #0002; }
.email-card .eyebrow { color:var(--accent); }
.email-card h2 { font-size:clamp(1.5rem,2.5vw,2rem); letter-spacing:-.05em; margin:.7rem 0 1.2rem; }
.email-address { display:block; width:fit-content; color:var(--accent); font-size:clamp(1.15rem,2.2vw,1.75rem); font-weight:800; letter-spacing:-.025em; padding-bottom:1rem; overflow-wrap:anywhere; }
.email-address:hover { text-decoration:underline; text-underline-offset:.2em; }
.email-card > p:not(.eyebrow) { font-size:.92rem; color:var(--soft); line-height:1.8; margin-bottom:1.5rem; }
.cooperation-directions { padding-block:3.5rem; }
.cooperation-directions .section-head h2 { font-size:clamp(1.7rem,3.5vw,2.6rem); }
.cooperation-topics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
.cooperation-topics article { padding-top:1.3rem; border-top:2px solid var(--line); }
.cooperation-topics h3 { font-size:1.2rem; margin-bottom:.65rem; }
.cooperation-topics p { color:var(--soft); font-size:.95rem; line-height:1.8; }
.scan-section { background:var(--tint); border-top:1px solid var(--line); }
.scan-layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:2rem 5rem; align-items:center; }
.scan-copy h2 { font-size:clamp(2rem,4.3vw,3.6rem); letter-spacing:-.065em; margin:.7rem 0 1.2rem; line-height:1.2; }
.scan-copy > p:not(.eyebrow) { color:var(--soft); line-height:1.9; font-size:1.05rem; }
.scan-availability { display:inline-flex; gap:.5rem; align-items:center; margin-top:1.7rem; font-size:.85rem; color:var(--accent); font-weight:700; }
.scan-availability > span { width:7px; height:7px; border-radius:50%; background:var(--accent); }
.scan-card { background:#fff; border:1px solid var(--line); border-radius:1rem; padding:1.6rem; text-align:center; box-shadow:0 1rem 2.5rem #2334280b; }
.scan-card a { display:block; width:258px; max-width:100%; margin-inline:auto; border-radius:.25rem; }
.scan-card img { width:258px; height:auto; aspect-ratio:1; }
.scan-card figcaption { margin-top:1rem; }
.scan-card figcaption strong { display:block; font-size:1.2rem; color:var(--ink); }
.scan-card figcaption span { display:block; font-size:.9rem; margin-top:.4rem; color:var(--soft); }
.scan-card figcaption small { display:block; font-size:.73rem; color:var(--muted); margin-top:.5rem; }
@media (max-width:1000px) {
  .brand small { display:none; }
  .top-nav { gap:.8rem; }
}
@media (max-width:800px) {
  html { scroll-padding-top:8rem; }
  .top-inner,.micro .top-inner,.lesson .top-inner { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.65rem 1rem; padding-block:.65rem; }
  .brand { grid-column:1; grid-row:1; }
  .top-nav,.micro .top-nav,.lesson .top-nav { display:contents; }
  .nav-home { grid-column:2; grid-row:1; min-height:39px; padding:.5rem .8rem; font-size:.84rem; }
  .nav-contact { grid-column:1; grid-row:2; width:fit-content; }
  .header-products { grid-column:2; grid-row:2; padding-left:0; border:0; margin:0; justify-content:flex-end; gap:.5rem; }
  .header-cta { min-height:36px; font-size:.8rem; padding:.5rem .8rem; }
  .cooperation-grid { grid-template-columns:1fr; gap:2rem; }
  .cooperation-hero h1 { font-size:clamp(2.7rem,7.5vw,4rem); }
  .email-card { max-width:34rem; }
  .cooperation-topics { grid-template-columns:1fr; gap:1.4rem; }
  .scan-layout { grid-template-columns:minmax(0,1fr) 300px; gap:2rem; }
  .scan-card { padding:1.2rem; }
}
@media (max-width:680px) {
  .scan-layout { grid-template-columns:minmax(0,1fr); gap:2rem; }
  .scan-card { min-width:0; width:min(100%,330px); justify-self:center; padding:1.4rem; }
  .scan-copy > p:not(.eyebrow) { font-size:.96rem; }
  .cooperation-directions { padding-block:3rem; }
}
@media (max-width:370px) {
  .nav-home { font-size:.8rem; gap:.4rem; padding:.5rem .65rem; }
  .nav-home svg { width:17px; height:17px; }
  .header-cta { padding:.5rem .7rem; font-size:.77rem; }
  .email-card { padding:1.3rem; }
}