/* 呼吸法指南页（/haptic-calm-guide-*.html）：接在 haptic-calm.css 后面，配色、字体、FAQ、页脚都用它的。 */
.site-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;color:var(--ink2)}
.site-brand img{border-radius:10px}
.lang-switch{display:flex;gap:12px;font-size:14px}
.lang-switch a{text-decoration:none;color:var(--ink3)}.lang-switch a[aria-current]{color:var(--accent)}
.guide-page .site-header{flex-wrap:wrap}
.crumbs{padding-top:10px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px;font-size:13px;color:var(--ink3)}
.crumbs li+li::before{content:'›';margin-right:10px;color:var(--line)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink2)}
.guide-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:start;padding-block:30px 20px}
.guide-hero h1{font-size:clamp(38px,5vw,62px)}
.lang-zh .guide-hero h1{font-size:clamp(34px,4.6vw,56px)}
.guide-hero .lead{font-size:20px;color:var(--ink2);max-width:36em}
.guide-intro{color:var(--ink3);font-size:16px;max-width:38em}
.guide-byline{font-size:13px;color:var(--ink3);line-height:1.7;margin-top:16px}
.guide-byline time{color:var(--ink2)}
.guide-byline a{color:var(--ink2)}
.app-note{margin-top:26px;border:1px solid var(--line);border-radius:18px;overflow:hidden;max-width:40em}
.app-note p{margin:0;padding:14px 18px;font-size:15px;color:var(--ink2);background:var(--card)}
.app-note p+p{border-top:1px solid var(--line);background:rgba(95,224,208,.05)}
.app-note strong{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.lang-zh .app-note strong{letter-spacing:.04em}
.glance{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px 24px 18px}
.glance h2{font-size:22px}
.glance dl{margin:12px 0 0}
.glance dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.glance dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);padding-top:3px}
.lang-zh .glance dt{font-size:13px;letter-spacing:.02em;padding-top:1px}
.glance dd{margin:0;font-size:15px}
.tier{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;padding:2px 10px;border-radius:999px;border:1px solid rgba(95,224,208,.5);color:var(--accent)}
.tier.pro{border:0;background:linear-gradient(135deg,#F8D88A,#E2A866);color:#2A1C08}
.rhythm{margin-top:72px}
.rhythm figure{margin:22px 0 0;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px 18px 16px}
.rhythm-svg{width:100%;height:auto;display:block}
.rhythm-legend{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;color:var(--ink2)}
.rhythm-legend li{display:flex;align-items:center;gap:8px}
.rhythm-legend i{display:block;width:22px;height:8px;border-radius:4px}
.rhythm figcaption{font-size:14px;color:var(--ink3);margin-top:8px;max-width:48em}
#steps{margin-top:80px}
.guide-steps{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
.guide-step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 26px 22px 20px;scroll-margin-top:20px}
.step-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(95,224,208,.14);color:var(--accent);font-weight:600;font-size:18px}
.step-no{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.guide-step h3{font-size:22px;margin-top:2px}
.how{margin:10px 0 0;padding-left:1.1em;color:var(--ink2);font-size:16px;display:grid;gap:4px}
.step-tip{margin-top:12px;border-radius:12px;background:rgba(242,198,109,.07);border:1px solid rgba(242,198,109,.25);padding:10px 14px;font-size:14px;color:#F3D9A4}
.step-tip strong{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.guide-tips{margin-top:80px;display:grid;gap:16px}
.guide-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.guide-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px 26px 22px}
.guide-card h2{font-size:26px}
.guide-card dl{margin:12px 0 0}.guide-card dl>div{padding:10px 0;border-top:1px solid var(--line)}
.guide-card dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.guide-card dd{margin:4px 0 0;color:var(--ink2);font-size:15px}
.marks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;color:var(--ink2);font-size:15px}
.marks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px}
.marks li::before{content:'✕';color:#FF8A8A;font-size:13px;padding-top:3px}
.marks.safety li::before{content:'!';display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(242,198,109,.16);color:var(--gold);font-size:12px;margin-top:4px;padding:0}
.safety-card{border-color:rgba(242,198,109,.3)}
.guide-page .faq{margin-top:88px}
.about-guide{margin-top:72px;max-width:860px}
.about-guide h2{font-size:clamp(24px,2.6vw,30px)}
.about-guide p{color:var(--ink2)}
.sources{margin:14px 0 0;padding-left:1.2em;color:var(--ink3);font-size:14px;display:grid;gap:8px}
.sources a{color:var(--ink2)}
.sources cite{font-style:italic}
.guide-app{margin-top:80px;margin-bottom:56px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px 28px;align-items:center;background:linear-gradient(135deg,#0D2230,#0A1622);border:1px solid var(--line);border-radius:28px;padding:34px 38px}
.guide-app img{border-radius:20px}
.guide-app h2{font-size:clamp(24px,2.8vw,32px)}
.guide-app p{color:var(--ink2);max-width:40em}
.app-button{display:inline-flex;align-items:center;gap:8px;margin-top:18px;background:var(--accent);color:#04201E;text-decoration:none;font-weight:600;padding:12px 22px;border-radius:999px}
.app-button:hover{background:var(--accent2)}
.guide-more{margin-top:72px}
.guide-more h2{font-size:clamp(24px,2.6vw,30px)}
.guide-links{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.guide-links a{display:grid;gap:4px;align-content:start;height:100%;box-sizing:border-box;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px;text-decoration:none;color:var(--ink)}
.guide-links a:hover{border-color:rgba(95,224,208,.5)}
.guide-links b{font-weight:600;font-size:17px}
.guide-links span{font-size:14px;color:var(--ink3)}
.guide-links .tier{justify-self:start;margin-top:4px}
.guide-links .hub a{align-content:center;grid-template-columns:minmax(0,1fr) auto;align-items:center;background:rgba(95,224,208,.06);border-color:rgba(95,224,208,.35)}
.guide-links .hub b{color:var(--accent)}.guide-links .hub span{color:var(--accent);font-size:18px}
.hub-hero{grid-template-columns:minmax(0,1fr)}
.hub-hero .hero-text{max-width:900px}
.hub-methods{margin-top:40px}
.hub-methods h2,.hub-choose h2{font-size:clamp(26px,3vw,36px)}
.hub-table td:nth-child(3){white-space:nowrap;color:var(--ink2)}
.hub-choose{margin-top:80px}
.choose{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.choose li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:6px 36px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 26px}
.choose .when{margin:0;padding-top:3px;font-size:16px;color:var(--ink2)}
.choose h3{font-size:22px;margin:0}
.choose h3 a{color:inherit;text-decoration:underline;text-decoration-color:rgba(95,224,208,.45);text-decoration-thickness:1px;text-underline-offset:4px}
.choose li div>p{margin:6px 0 0;color:var(--ink2);font-size:15px}
.hub-safety{margin-top:72px}
@media (max-width:820px){
 .guide-hero{grid-template-columns:minmax(0,1fr);gap:22px}
 .guide-two{grid-template-columns:minmax(0,1fr)}
 .guide-step{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px}
 .step-n{width:36px;height:36px;font-size:16px}
 .glance dl>div{grid-template-columns:96px minmax(0,1fr)}
 .guide-app{grid-template-columns:minmax(0,1fr);padding:26px 22px}
 .guide-app img{width:64px;height:64px}
 .lang-switch{width:100%}
 .choose li{grid-template-columns:minmax(0,1fr);padding:18px 20px}
 .hub-table td.nopace{display:none}
 .choose .when{font-size:14px;color:var(--ink3)}
}
