/* roulang page: index */
:root{
  --mk-rose:#C89C94;
  --mk-rose-deep:#A66A5C;
  --mk-ink:#2E2420;
  --mk-bg:#FAF6F2;
  --mk-card:#FFFFFF;
  --mk-gold:#BE9365;
  --mk-green:#3E5F57;
  --mk-body:#5C534E;
  --mk-muted:#9B8F87;
  --mk-line:rgba(158,110,96,.14);
  --mk-line-deep:rgba(255,255,255,.16);
  --mk-shadow:0 10px 30px rgba(46,36,32,.08);
  --mk-shadow-lg:0 14px 36px rgba(46,36,32,.13);
  --mk-radius-xl:20px;
  --mk-radius-md:14px;
  --mk-radius-pill:999px;
  --mk-section:clamp(4rem,9vw,7rem);
  --mk-nav-h:76px;
}
html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--mk-bg);
  color:var(--mk-body);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit}
h1,h2,h3,h4,h5,h6{color:var(--mk-ink);line-height:1.35;margin:0 0 .5em;font-weight:800}
p{margin:0 0 1em}
:focus-visible{outline:3px solid rgba(200,156,148,.45);outline-offset:3px;border-radius:6px}
::selection{background:rgba(200,156,148,.35)}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:24px}
.section{padding-block:clamp(3.6rem,8vw,6.2rem)}
.section-head{max-width:760px;margin-bottom:2.4rem}
.section-kicker{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--mk-rose-deep);font-size:.9rem;letter-spacing:.05em;margin-bottom:.7rem}
.section-kicker::before{content:"";width:22px;height:2px;background:var(--mk-gold);display:inline-block}
.section-title{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:.4em}
.section-desc{color:var(--mk-body);font-size:.98rem;max-width:720px}

/* 按钮 */
.btn{border-radius:var(--mk-radius-pill);font-weight:700;padding:.82rem 2rem;transition:all .25s ease;border-width:1px;display:inline-flex;align-items:center;gap:.5rem;justify-content:center}
.btn-mk-primary{background:var(--mk-rose-deep);border-color:var(--mk-rose-deep);color:#fff;box-shadow:0 8px 22px rgba(166,106,92,.25)}
.btn-mk-primary:hover{background:#8f584d;border-color:#8f584d;color:#fff;transform:scale(1.02);box-shadow:0 10px 28px rgba(166,106,92,.35)}
.btn-mk-dark{background:var(--mk-ink);border-color:var(--mk-ink);color:#fff}
.btn-mk-dark:hover{background:#422d24;color:#fff;transform:translateY(-2px)}
.btn-mk-ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.btn-mk-ghost:hover{background:rgba(255,255,255,.13);color:#fff;border-color:#fff}
.btn-mk-soft{background:transparent;border-color:var(--mk-rose);color:var(--mk-rose-deep)}
.btn-mk-soft:hover{background:rgba(200,156,148,.12);border-color:var(--mk-rose-deep);color:var(--mk-rose-deep);transform:translateY(-2px)}
.text-link{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:var(--mk-rose-deep)}
.text-link i{transition:transform .25s}
.text-link:hover i{transform:translateX(4px)}

/* 顶部导航 */
.top-header{position:fixed;top:0;left:0;right:0;z-index:1030;height:var(--mk-nav-h);background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--mk-line)}
.header-inner{height:var(--mk-nav-h);display:flex;align-items:center;justify-content:space-between;gap:1.25rem}
.brand{display:inline-flex;align-items:center;gap:.65rem;color:var(--mk-ink)}
.brand-mark{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--mk-rose),var(--mk-rose-deep));color:#fff;font-weight:900;font-size:1.08rem;letter-spacing:-.04em;box-shadow:0 6px 16px rgba(166,106,92,.32)}
.brand-copy{display:flex;flex-direction:column;line-height:1.2}
.brand-copy strong{font-size:1.18rem;color:var(--mk-ink);letter-spacing:.01em}
.brand-copy small{font-size:.7rem;color:var(--mk-muted);letter-spacing:.16em}
.site-nav ul{display:flex;align-items:center;gap:.2rem;list-style:none;margin:0;padding:0}
.site-nav a{display:inline-flex;align-items:center;justify-content:center;padding:.6rem .9rem;color:#33251f;font-weight:600;position:relative;border-radius:999px;transition:background .25s,color .25s}
.site-nav a:hover{background:rgba(200,156,148,.13);color:var(--mk-rose-deep)}
.site-nav a.active{color:var(--mk-rose-deep)}
.site-nav a.active::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:16px;height:3px;border-radius:99px;background:var(--mk-gold)}
.site-nav a{letter-spacing:.02em}
.header-cta .btn{padding:.6rem 1.4rem;font-size:.92rem}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--mk-line);background:rgba(255,255,255,.75);color:var(--mk-ink);font-size:1.15rem;transition:.25s}
.nav-toggle:hover{border-color:var(--mk-rose);color:var(--mk-rose-deep)}
.mobile-nav-panel{display:none}
@media (max-width:991.98px){
  .site-nav,.header-cta{display:none}
  .nav-toggle{display:inline-flex}
  .mobile-nav-panel.mobile-nav-panel-open{display:block}
  .mobile-nav-panel{position:fixed;top:var(--mk-nav-h);left:0;right:0;z-index:1025;background:#fff;border-bottom:1px solid var(--mk-line);box-shadow:0 18px 32px rgba(46,36,32,.08)}
  .mobile-nav-list{list-style:none;margin:0;padding:.5rem 1rem 1rem;display:flex;flex-direction:column;gap:.15rem}
  .mobile-nav-list a{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-radius:12px;color:var(--mk-ink);font-weight:700;border-bottom:1px solid rgba(158,110,96,.08)}
  .mobile-nav-list a:hover,.mobile-nav-list a.active{background:rgba(200,156,148,.13);color:var(--mk-rose-deep)}
}
@media (min-width:992px){
  .mobile-nav-panel{display:none!important}
}

/* Hero */
.hero-sec{position:relative;padding-top:calc(var(--mk-nav-h) + clamp(3rem,7vw,5rem));padding-bottom:clamp(3rem,7vw,5rem);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;background-image:linear-gradient(102deg,rgba(40,27,22,.88) 0%,rgba(60,38,31,.72) 42%,rgba(166,106,92,.2) 100%),url('/assets/images/backpic/back-1.webp');background-size:cover;background-position:center}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,54%) minmax(0,46%);align-items:center;gap:clamp(2rem,5vw,4rem)}
.hero-kicker{display:inline-flex;align-items:center;gap:.55rem;color:#f1d7ce;background:rgba(255,255,255,.13);padding:.4rem 1rem;border-radius:999px;font-size:.88rem;font-weight:600;border:1px solid rgba(255,255,255,.18)}
.hero-copy h1{font-size:clamp(2.25rem,5vw,3.9rem);line-height:1.28;color:#fff;margin:1.6rem 0 1.2rem;letter-spacing:.005em}
.mk-accent{color:#F1D3C8;text-shadow:0 2px 14px rgba(0,0,0,.28)}
.hero-copy .lead{color:rgba(255,255,255,.84);font-size:1.06rem;max-width:520px;margin-bottom:2rem}
.hero-btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2rem}
.hero-promise{display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;border-top:1px solid rgba(255,255,255,.2);padding-top:1.2rem}
.hero-promise span{color:rgba(255,255,255,.72);font-size:.88rem;display:inline-flex;align-items:center;gap:.45rem}
.hero-promise i{color:#E7C1B1}
.hero-media{display:block;position:relative}
.hero-tile{position:relative;border-radius:28px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.28);transform:rotate(1.6deg)}
.hero-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(46,28,22,.35))}
.hero-tile img{width:100%;height:440px;object-fit:cover}
.hero-tile .tile-label{position:absolute;left:1rem;bottom:1rem;z-index:3;background:rgba(46,36,32,.72);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.2);padding:.45rem .9rem;border-radius:999px;font-size:.8rem}
.hero-float{position:absolute;right:-14px;bottom:34px;background:#fff;border-radius:16px;box-shadow:var(--mk-shadow-lg);padding:.9rem 1.15rem;z-index:4;display:flex;align-items:center;gap:.6rem;animation:floatY 4s ease-in-out infinite}
.hero-float strong{color:var(--mk-ink)}
.hero-float span{font-size:.8rem;color:var(--mk-muted);display:block}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:991.98px){
  .hero-sec{padding-bottom:clamp(2.5rem,7vw,4rem)}
  .hero-grid{grid-template-columns:1fr}
  .hero-media{display:none}
}

/* 错位卖点卡 */
.insight-sec{background:var(--mk-bg);position:relative}
.insight-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.insight-card{position:relative;padding:2.2rem;border-radius:var(--mk-radius-xl);min-height:270px;transition:transform .3s,box-shadow .3s;overflow:hidden}
.insight-card:hover{transform:translateY(-5px);box-shadow:var(--mk-shadow-lg)}
.insight-card-1{background:var(--mk-ink);color:rgba(255,255,255,.72);grid-column:span 5}
.insight-card-2{background:#fff;color:var(--mk-body);border:1px solid var(--mk-line);grid-column:span 4;top:20px}
.insight-card-3{background:linear-gradient(145deg,#C89C94,#A66A5C);color:rgba(255,255,255,.85);grid-column:span 3;top:40px}
.insight-card h3{font-size:1.3rem;margin-bottom:.8em;position:relative;z-index:2}
.insight-card-1 h3{color:#fff}
.insight-card-2 h3{color:var(--mk-ink)}
.insight-card-3 h3{color:#fff}
.insight-card p{font-size:.92rem;margin-bottom:1.2em;position:relative;z-index:2}
.insight-num{font-family:Georgia,'Times New Roman',serif;font-size:3.2rem;line-height:1;font-weight:700;display:block;margin-bottom:1.1rem;position:relative;z-index:2}
.insight-card-1 .insight-num{color:rgba(200,156,148,.75)}
.insight-card-2 .insight-num{color:rgba(190,147,101,.65)}
.insight-card-3 .insight-num{color:rgba(255,255,255,.5)}
.insight-card::after{content:"";position:absolute;right:-48px;bottom:-48px;width:150px;height:150px;border-radius:50%;border:22px solid rgba(255,255,255,.06);pointer-events:none}
@media(max-width:1199px){
  .insight-card-1{grid-column:span 7}
  .insight-card-2{grid-column:span 5;top:0}
  .insight-card-3{grid-column:span 12;top:0;min-height:220px}
}
@media(max-width:767px){
  .insight-grid{grid-template-columns:1fr}
  .insight-card{grid-column:span 1!important;min-height:0;top:0!important}
}

/* 最新动态 */
.latest-sec{background:#fff;border-block:1px solid var(--mk-line)}
.latest-layout{display:grid;grid-template-columns:minmax(0,34%) minmax(0,66%);gap:clamp(2rem,5vw,4rem);align-items:start}
.latest-intro .section-title{margin-bottom:.6rem}
.latest-intro p{color:var(--mk-muted);font-size:.95rem}
.latest-meta{display:flex;flex-direction:column;gap:.55rem;margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--mk-line)}
.latest-meta span{display:flex;gap:.6rem;align-items:center;color:var(--mk-body);font-size:.9rem}
.latest-meta i{color:var(--mk-rose-deep)}
.news-list{border-top:1px solid var(--mk-line)}
.news-item{display:grid;grid-template-columns:92px 126px 1fr 40px;gap:20px;align-items:center;padding:1.05rem .2rem;border-bottom:1px solid var(--mk-line);transition:background .22s,padding-left .22s;border-radius:8px}
.news-item:hover{background:rgba(200,156,148,.07);padding-left:.8rem}
.news-date{color:var(--mk-muted);font-size:.84rem;line-height:1.5;display:inline-flex;flex-direction:column}
.news-date strong{font-size:1.6rem;font-weight:800;color:var(--mk-ink);font-family:Georgia,serif;line-height:1}
.news-cat{display:inline-flex;align-self:center;justify-self:start;padding:.26rem .8rem;border-radius:6px;background:rgba(200,156,148,.14);color:var(--mk-rose-deep);font-size:.8rem;font-weight:700;white-space:nowrap}
.news-main h3{font-size:1.03rem;font-weight:700;margin:0 0 .24rem}
.news-main h3 a{color:var(--mk-ink)}
.news-main h3 a:hover{color:var(--mk-rose-deep)}
.news-main p{color:var(--mk-muted);font-size:.86rem;margin:0;line-height:1.7;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.news-arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--mk-line);display:grid;place-items:center;color:var(--mk-rose-deep);transition:.25s}
.news-item:hover .news-arrow{background:var(--mk-ink);border-color:var(--mk-ink);color:#fff}
.news-empty{background:#faf6f2;border:1px dashed var(--mk-line);border-radius:16px;padding:2.6rem;text-align:center;color:var(--mk-muted);font-size:.95rem}
.news-empty i{font-size:2.2rem;color:var(--mk-rose);display:block;margin-bottom:.7rem}
@media(max-width:991.98px){
  .latest-layout{grid-template-columns:1fr}
  .news-item{grid-template-columns:1fr auto}
  .news-date,.news-cat{display:none}
  .news-main p{-webkit-line-clamp:2}
}

/* 品牌故事 */
.story-sec{background:var(--mk-bg)}
.story-grid{display:grid;grid-template-columns:minmax(0,48%) minmax(0,52%);gap:clamp(2rem,6vw,5.4rem);align-items:center}
.story-media{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--mk-shadow-lg)}
.story-media img{width:100%;height:450px;object-fit:cover}
.story-media::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 50%,rgba(46,36,32,.5))}
.story-stamp{position:absolute;z-index:3;left:-28px;top:30px;background:#fff;border-radius:14px;padding:1rem 1.2rem;box-shadow:var(--mk-shadow-lg);border:1px solid rgba(158,110,96,.1)}
.story-stamp span{display:block;font-size:.76rem;color:var(--mk-muted)}
.story-stamp strong{font-family:Georgia,serif;font-size:1.7rem;color:var(--mk-ink);display:block;line-height:1.3}
.story-copy .section-title{margin-bottom:.7em}
.story-copy p{color:var(--mk-body);margin-bottom:1.2em}
.story-note{border-left:3px solid var(--mk-gold);background:#fff1ec;padding:.9rem 1.2rem;border-radius:0 12px 12px 0;color:#614639;font-size:.95rem}
.story-points{margin-top:1.6rem}
.story-points li{margin-bottom:.8rem;display:flex;gap:.7rem;font-size:.95rem}
.story-points i{color:var(--mk-rose-deep)}
@media(max-width:991.98px){
  .story-grid{grid-template-columns:1fr}
  .story-media img{height:300px}
}

/* 分类栏目卡 */
.channel-sec{background:#fff;border-top:1px solid var(--mk-line)}
.channel-list{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.channel-card{position:relative;border-radius:20px;overflow:hidden;background:#fff;box-shadow:var(--mk-shadow);transition:transform .3s,box-shadow .3s;display:block;border:1px solid var(--mk-line)}
.channel-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(46,36,32,.14)}
.channel-card img{width:100%;height:225px;object-fit:cover}
.channel-body{padding:1.5rem 1.6rem 1.7rem}
.channel-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:700;padding:.24rem .8rem;border-radius:99px;background:rgba(200,156,148,.14);color:var(--mk-rose-deep);margin-bottom:.8rem}
.channel-body h3{font-size:1.2rem;margin-bottom:.38rem}
.channel-body p{font-size:.88rem;color:var(--mk-muted);margin-bottom:0}
.channel-cta{margin-top:1rem;display:inline-flex;font-weight:700;font-size:.88rem;color:var(--mk-ink)}
.channel-cta i{transition:.25s}
.channel-card:hover .channel-cta i{transform:translateX(4px);color:var(--mk-rose-deep)}
.channel-card-1{grid-column:span 6}
.channel-card-2{grid-column:span 6}
.channel-card-3{grid-column:span 4}
.channel-card-4{grid-column:span 4}
.extra-cell{grid-column:span 4}
@media(max-width:1199px){
  .channel-card-1,.channel-card-2{grid-column:span 6}
  .channel-card-3,.channel-card-4,.extra-cell{grid-column:span 6}
  .extra-cell{min-height:0}
}
@media(max-width:767px){
  .channel-list{grid-template-columns:1fr}
  .channel-card-1,.channel-card-2,.channel-card-3,.channel-card-4,.extra-cell{grid-column:span 1}
  .channel-card img{height:200px}
}

/* 新手路径 */
.path-sec{background:#fff9f6;border-top:1px solid var(--mk-line)}
.path-card{height:100%;background:#fff;border:1px solid var(--mk-line);border-radius:20px;padding:1.8rem;position:relative;transition:.3s;box-shadow:var(--mk-shadow)}
.path-card:hover{transform:translateY(-4px);box-shadow:var(--mk-shadow-lg)}
.path-index{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--mk-ink);color:#fff;font-family:Georgia,serif;font-weight:800;font-size:1.15rem;margin-bottom:1.1rem}
.path-card:nth-child(2) .path-index{background:var(--mk-rose-deep)}
.path-card:nth-child(3) .path-index{background:var(--mk-gold)}
.path-card h3{font-size:1.15rem}
.path-card p{color:var(--mk-muted);font-size:.92rem;margin-bottom:.7rem}
.path-card .link-icon{font-size:.85rem;color:var(--mk-rose-deep);display:inline-flex;align-items:center;gap:.3rem}

/* FAQ */
.faq-sec{background:var(--mk-ink);overflow:hidden}
.faq-sec .section-title,.faq-sec .section-kicker h2{color:#fff}
.faq-sec .section-kicker{color:#E7C1B1}
.faq-sec .section-desc{color:rgba(255,255,255,.7)}
.faq-sec .section-kicker::before{background:var(--mk-rose)}
.faq-layout{display:grid;grid-template-columns:minmax(0,34%) minmax(0,66%);gap:clamp(2rem,5vw,4rem);align-items:start}
.faq-head p{color:rgba(255,255,255,.66);font-size:.95rem}
.faq-list{gap:1rem;display:flex;flex-direction:column}
.faq-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:0;transition:.28s}
.faq-item:hover{border-color:rgba(255,255,255,.28)}
.faq-item[open]{background:rgba(255,255,255,.09)}
.faq-q{list-style:none;display:flex;align-items:center;gap:.75rem;padding:.85rem 1.3rem;cursor:pointer;min-height:48px}
.faq-q::-webkit-details-marker{display:none}
.q-mark{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.35);color:#ffe6de;font-size:1rem;font-weight:800}
.faq-q-title{color:#fff;font-weight:700;font-size:1rem;line-height:1.6}
.faq-q-arrow{margin-left:auto;color:rgba(255,255,255,.6);transition:.3s;}
.faq-item[open] .faq-q-arrow{transform:rotate(180deg)}
.faq-a{color:rgba(255,255,255,.72);margin:.2rem 1.6rem 1.1rem 4.15rem;border-left:2px solid #C89C94;padding-left:1rem;font-size:.91rem;line-height:1.8}
@media(max-width:991.98px){
  .faq-layout{grid-template-columns:1fr}
}

/* CTA订阅 */
.cta-sec{background:var(--mk-bg)}
.cta-card{background:linear-gradient(110deg,#2E2420 60%,#4A342A);border-radius:28px;padding:clamp(2rem,6vw,4.2rem);overflow:hidden;position:relative}
.cta-card::before{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(200,156,148,.28),transparent 68%)}
.cta-card .row{gap:0;align-items:center}
.cta-title{font-size:clamp(1.6rem,3.2vw,2.6rem);color:#fff;font-weight:800}
.cta-sub{color:rgba(255,255,255,.7);margin-bottom:0}
.form-card{background:#fff;border-radius:20px;padding:clamp(1.3rem,3vw,2.2rem);box-shadow:0 26px 70px rgba(0,0,0,.25)}
.form-card label{font-size:.88rem;font-weight:700;color:var(--mk-ink);margin-bottom:.25rem}
.form-control,.form-select{height:48px;border-radius:12px;border:1px solid rgba(46,36,32,.16);padding-left:16px;background:#faf7f5;font-size:.95rem;transition:border-color .2s,box-shadow .2s}
.form-control:focus,.form-select:focus{border-color:var(--mk-rose-deep);box-shadow:0 0 0 .25rem rgba(200,156,148,.2);background:#fff;color:var(--mk-ink)}
.form-privacy{font-size:.72rem;color:var(--mk-muted)}
.cta-note{color:rgba(255,255,255,.45);font-size:.76rem;margin:0}
.cta-list{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.cta-list li{color:rgba(255,255,255,.62);font-size:.86rem;display:flex;align-items:center;gap:.55rem}
.cta-list i{color:var(--mk-rose)}
.alert-form{margin-top:12px;border-radius:12px;font-size:.9rem}
@media(max-width:767px){
  .cta-card{padding:2rem 1.4rem}
}

/* 页脚 */
.mt-footer{background:var(--mk-ink);color:#D8D2CC}
.footer-top{padding:clamp(3.4rem,7vw,5rem) 0 3rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:2.8rem}
.footer-brand p{color:#A49A92;font-size:.86rem;margin-top:1rem}
.footer-logo{color:#fff}
.footer-brand .brand-copy small{color:#9B8F87}
.footer-title{font-size:.92rem;letter-spacing:.08em;color:#fff;font-weight:700;margin-bottom:1rem}
.footer-top ul{list-style:none;margin:0;padding:0}
.footer-top ul li{margin-bottom:.55rem}
.footer-top ul a{color:#C8BEB7;font-size:.89rem;display:inline-flex;align-items:center;gap:.3rem;transition:.25s}
.footer-top ul a:hover{color:#fff;padding-left:4px}
.footer-contact p{color:#A49A92;font-size:.86rem;margin-bottom:.5rem;display:flex;gap:.55rem;align-items:center}
.footer-sub form{display:flex;gap:.4rem}
.footer-sub .form-control{height:42px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
.footer-sub .form-control::placeholder{color:#8f827a}
.footer-sub .btn{padding:.55rem 1.2rem}
.footer-social{display:flex;gap:.6rem;margin-top:1rem}
.footer-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:#c5bbb2;font-size:.88rem;transition:.25s}
.footer-social a:hover{background:var(--mk-rose-deep);border-color:var(--mk-rose-deep);color:#fff}
.footer-bottom{padding:1.4rem 0;border-top:1px solid rgba(255,255,255,.08);font-size:.78rem;color:#8f827a;text-align:center}
.footer-bottom a{color:#9d918a}
@media(max-width:991.98px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:575.98px){
  .footer-grid{grid-template-columns:1fr;gap:2rem}
}

/* 底部Tab */
.mobile-tabbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:1050;height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-top:1px solid var(--mk-line)}
.mobile-tabbar{box-shadow:0 -4px 20px rgba(46,36,32,.06)}
.mobile-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--mk-muted);font-size:.66rem;font-weight:600;min-width:0;position:relative;transition:.2s}
.mobile-tab i{font-size:1.12rem}
.mobile-tab.active{color:var(--mk-rose-deep);font-weight:700}
.mobile-tab.active::before{content:"";width:20px;height:3px;border-radius:99px;background:var(--mk-gold);position:absolute;top:2px;left:50%;transform:translateX(-50%)}
@media(max-width:991.98px){
  .mobile-tabbar{display:flex}
  body .page-shell{padding-bottom:0}
}
@media(min-width:992px){
  .mobile-tabbar{display:none}
  body::after{content:"";display:none}
}
body::after{content:"";display:block;height:calc(64px + env(safe-area-inset-bottom))}
@media(min-width:992px){body::after{display:none;height:0}}

/* roulang page: article */
:root{
    --mk-primary:#A66A5C;
    --mk-primary-soft:#C89C94;
    --mk-primary-mist:#F3E6E2;
    --mk-dark:#2E2420;
    --mk-dark-soft:#4A3830;
    --mk-bg:#FAF6F2;
    --mk-surface:#FFFFFF;
    --mk-jade:#3E5F57;
    --mk-gold:#BE9365;
    --mk-text:#5C534E;
    --mk-muted:#9B8F87;
    --mk-line:rgba(158,110,96,.18);
    --mk-line-dark:rgba(255,255,255,.16);
    --mk-shadow:0 10px 30px rgba(46,36,32,.08);
    --mk-shadow-lg:0 14px 36px rgba(46,36,32,.13);
    --mk-radius-lg:22px;
    --mk-radius-md:14px;
    --mk-radius-sm:8px;
    --mk-transition:all .25s ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
    background:var(--mk-bg);
    color:var(--mk-text);
    font-size:1rem;
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
}
body{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
@media(min-width:992px){
    body{padding-bottom:0}
}
a{color:inherit;text-decoration:none;transition:var(--mk-transition)}
img{max-width:100%;vertical-align:middle}
.wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}
@media(max-width:576px){.wrap{padding-left:16px;padding-right:16px}}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6em;
    border-radius:999px;
    padding:.85rem 2rem;
    font-weight:600;
    text-decoration:none;
    border:1px solid transparent;
    transition:var(--mk-transition);
    cursor:pointer;
    line-height:1.4;
    font-size:1rem;
}
.btn:focus-visible, a:focus-visible, button:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(200,156,148,.45);
}
.btn-mk-primary{background:var(--mk-dark);color:#fff;border-color:var(--mk-dark)}
.btn-mk-primary:hover{background:var(--mk-dark-soft);color:#fff;border-color:var(--mk-dark-soft);transform:scale(1.02);box-shadow:0 12px 26px rgba(46,36,32,.18)}
.btn-mk-outline{background:transparent;color:var(--mk-dark);border-color:rgba(46,36,32,.35)}
.btn-mk-outline:hover{background:var(--mk-primary-mist);border-color:var(--mk-primary-mist);color:var(--mk-dark);transform:translateY(-2px)}
.btn-mk-light{background:#fff;color:var(--mk-dark);border-color:#fff}
.btn-mk-light:hover{background:var(--mk-primary-mist);border-color:var(--mk-primary-mist);color:var(--mk-dark);transform:translateY(-2px)}
.btn-mk-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-mk-ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}

/* 顶部导航 */
.site-header{
    position:sticky;
    top:0;
    z-index:1080;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(0,0,0,.06);
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:76px;
    gap:24px;
}
.brand{display:inline-flex;align-items:center;gap:12px;min-width:0}
.brand-mark{
    flex:none;
    width:44px;height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--mk-primary);
    color:#fff;
    font-weight:800;
    font-size:1.25rem;
    letter-spacing:.02em;
    border-radius:50%;
    box-shadow:0 0 0 4px rgba(166,106,92,.14);
}
.brand-copy{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.brand-copy strong{font-size:1.08rem;color:var(--mk-dark);font-weight:700;letter-spacing:.01em}
.brand-copy small{font-size:.78rem;color:var(--mk-muted);margin-top:2px;white-space:nowrap}
.site-nav ul{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.site-nav a{
    display:inline-flex;
    align-items:center;
    position:relative;
    padding:.5rem .8rem;
    color:var(--mk-text);
    font-weight:600;
    border-radius:999px;
    text-decoration:none;
    transition:var(--mk-transition);
}
.site-nav a:hover{color:var(--mk-primary);background:rgba(166,106,92,.07)}
.site-nav a.active{color:var(--mk-dark)}
.site-nav a.active::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:2px;
    width:20px;height:3px;
    border-radius:999px;
    background:var(--mk-primary);
    transform:translateX(-50%);
}
.desktop-nav{display:none}
@media(min-width:992px){
    .desktop-nav{display:block}
    .mobile-menu-btn,.mobile-top-cta{display:none}
}
.mobile-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;height:44px;
    border-radius:14px;
    border:1px solid var(--mk-line);
    background:#fff;
    color:var(--mk-dark);
    font-size:1.2rem;
    transition:var(--mk-transition);
}
.mobile-menu-btn:hover{border-color:var(--mk-primary);color:var(--mk-primary);background:var(--mk-primary-mist)}
.mobile-panel{
    border:0;
    background:#fff;
    border-top:1px solid rgba(0,0,0,.05);
    box-shadow:var(--mk-shadow);
}
.mobile-panel ul{list-style:none;padding:10px 16px;margin:0}
.mobile-panel a{
    display:block;
    padding:12px 10px;
    border-radius:12px;
    font-weight:600;
    color:var(--mk-text);
}
.mobile-panel a:hover,.mobile-panel a.active{background:var(--mk-primary-mist);color:var(--mk-dark)}

/* 移动底部 Tab */
.mobile-tabbar{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:1090;
    background:#fff;
    border-top:1px solid rgba(0,0,0,.06);
    display:flex;
    height:calc(64px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -8px 30px rgba(46,36,32,.06);
}
.mobile-tabbar a{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font-size:.72rem;
    color:var(--mk-muted);
    text-decoration:none;
    transition:var(--mk-transition);
}
.mobile-tabbar a i{font-size:1.15rem}
.mobile-tabbar a:hover{color:var(--mk-primary)}
.mobile-tabbar a.active{color:var(--mk-primary);font-weight:600}
@media(min-width:992px){
    .mobile-tabbar{display:none}
}

/* 文章顶栏 */
.article-topbanner{
    position:relative;
    padding:64px 0 52px;
    background:
        linear-gradient(90deg, rgba(46,36,32,.88) 0%, rgba(46,36,32,.68) 46%, rgba(46,36,32,.2) 100%),
        url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
    color:#fff;
    overflow:hidden;
}
.article-topbanner::before{
    content:"mk";
    position:absolute;
    right:-10px;
    bottom:-40px;
    font-size:clamp(8rem,19vw,16rem);
    font-weight:800;
    line-height:1;
    color:rgba(255,255,255,.05);
    pointer-events:none;
    letter-spacing:.04em;
}
.mk-breadcrumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    font-size:.88rem;
    color:rgba(255,255,255,.82);
    margin-bottom:24px;
}
.mk-breadcrumb a{color:#fff;text-decoration:none;opacity:.88;display:inline-flex;gap:5px;align-items:center;padding:4px 0}
.mk-breadcrumb a:hover{opacity:1;text-decoration:underline}
.mk-breadcrumb i{font-size:.75rem;color:rgba(255,255,255,.55)}
.breadcrumb-active{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
}
.mk-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.24);
    color:#fff;
    font-size:.8rem;
    font-weight:600;
    padding:5px 12px;
    border-radius:999px;
    margin-bottom:16px;
}
.mk-chip i{color:var(--mk-gold)}
.article-topbanner h1{
    margin:.2rem 0 14px;
    color:#fff;
    font-size:clamp(1.8rem,4.4vw,3rem);
    font-weight:800;
    line-height:1.35;
    max-width:820px;
    text-wrap:balance;
}
.article-top-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px 22px;
    margin-top:16px;
    color:rgba(255,255,255,.85);
    font-size:.92rem;
}
.article-top-meta i{color:var(--mk-gold);margin-right:6px}
.article-top-meta .meta-cat{
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.22);
    color:#fff;
    padding:3px 14px;
    border-radius:999px;
    display:inline-flex;
    font-weight:600;
}
.article-share-icons{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-left:auto;
}
.article-share-icons span{font-size:.86rem}
.article-share-icons a{
    width:34px;height:34px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.9rem;
    text-decoration:none;
}
.article-share-icons a:hover{background:var(--mk-gold);border-color:var(--mk-gold);color:#fff;transform:translateY(-2px)}

/* 主体区 */
.article-main-wrap{padding:48px 0 70px}
.article-reading-container{max-width:680px;margin:0 auto}
@media(max-width:767px){.article-main-wrap{padding:32px 0 52px}}

.article-lead{
    background:#fff;
    border-radius:18px;
    padding:26px 28px;
    margin-bottom:28px;
    border:1px solid var(--mk-line);
    color:#65564e;
    font-size:1rem;
    line-height:2;
    box-shadow:var(--mk-shadow);
    position:relative;
    overflow:hidden;
}
.article-lead::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:linear-gradient(180deg,var(--mk-primary),var(--mk-gold));
}
.article-lead .lead-label{
    display:block;
    font-size:.82rem;
    font-weight:700;
    color:var(--mk-primary);
    letter-spacing:.08em;
    margin-bottom:8px;
}
.article-body{animation:fadeUp .5s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.article-body *{max-width:100%}
.article-body{
    font-size:1.04rem;
    line-height:2;
    color:#4f423b;
}
.article-body>p{margin:0 0 1.6em}
.article-body h2{
    font-size:1.7rem;
    font-weight:800;
    color:var(--mk-dark);
    margin:2.4em 0 .8em;
    padding-left:18px;
    position:relative;
}
.article-body h2::before{
    content:"";
    position:absolute;
    left:0;top:.45em;bottom:.45em;
    width:5px;
    border-radius:999px;
    background:var(--mk-primary);
}
.article-body h3{
    font-size:1.35rem;
    font-weight:800;
    color:var(--mk-dark);
    margin:2em 0 .7em;
}
.article-body h4{
    font-size:1.18rem;
    font-weight:700;
    color:var(--mk-dark);
    margin:1.8em 0 .6em;
}
.article-body a{color:var(--mk-primary);text-decoration:underline;text-underline-offset:4px;font-weight:600}
.article-body a:hover{color:var(--mk-dark)}
.article-body ul,.article-body ol{padding-left:1.3em;margin:0 0 1.6em}
.article-body li{margin-bottom:.5em}
.article-body img{
    border-radius:18px;
    margin:2em auto;
    display:block;
    box-shadow:var(--mk-shadow);
}
.article-body blockquote{
    border:0;
    margin:2em 0;
    padding:22px 26px 22px 48px;
    background:rgba(200,156,148,.11);
    border-left:4px solid var(--mk-primary);
    border-radius:0 16px 16px 0;
    color:var(--mk-text);
    font-size:1rem;
    position:relative;
}
.article-body blockquote::before{
    content:"\201C";
    position:absolute;
    left:16px;
    top:6px;
    font-size:2.4rem;
    color:var(--mk-primary);
    opacity:.55;
    line-height:1;
}
.article-body code{
    background:rgba(166,106,92,.08);
    color:var(--mk-dark);
    border-radius:7px;
    padding:.15em .45em;
    font-size:.9em;
}
.article-body pre{
    background:var(--mk-dark);
    color:#ffF;
    border-radius:16px;
    padding:22px 24px;
    overflow-x:auto;
    line-height:1.8;
    margin:0 0 1.8em;
}
.article-body pre code{background:transparent;color:inherit;padding:0}
.article-body table{
    width:100%;
    border-collapse:collapse;
    margin:1.8em 0;
    font-size:.96rem;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:var(--mk-shadow);
}
.article-body th,.article-body td{
    padding:13px 15px;
    border-bottom:1px solid var(--mk-line);
    text-align:left;
    vertical-align:top;
}
.article-body th{background:var(--mk-primary-mist);color:var(--mk-dark);font-weight:700}
.article-body hr{
    border:0;
    height:1px;
    background:var(--mk-line);
    margin:2.6em 0;
}

/* 标签与返回 */
.article-tag-belt{
    margin:10px 0 8px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}
.article-tag-belt span{color:var(--mk-muted);font-size:.9rem;margin-right:2px}
.article-tag{
    background:#fff;
    border:1px solid var(--mk-line);
    border-radius:999px;
    padding:4px 14px;
    font-size:.82rem;
    color:var(--mk-text);
    text-decoration:none;
}
.article-tag:hover{border-color:var(--mk-primary);color:var(--mk-primary);background:var(--mk-primary-mist)}
.article-back-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:34px 0 0;
    padding-top:26px;
    border-top:1px solid var(--mk-line);
}

/* 内容未找到 */
.article-missing{
    background:#fff;
    border:1px dashed var(--mk-line);
    border-radius:22px;
    padding:52px 28px;
    text-align:center;
    box-shadow:var(--mk-shadow);
    animation:fadeUp .5s ease both;
}
.article-missing .missing-icon{
    width:80px;height:80px;
    margin:0 auto 20px;
    border-radius:50%;
    background:var(--mk-primary-mist);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    color:var(--mk-primary);
}
.article-missing h2{font-size:1.7rem;color:var(--mk-dark);margin-bottom:12px;font-weight:800}
.article-missing p{color:var(--mk-muted);margin-bottom:24px}

/* 快速栏目 */
.mk-cat-brief{padding:50px 0 70px;border-top:1px solid var(--mk-line)}
.section-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:18px;
    margin-bottom:34px;
}
.section-sub{color:var(--mk-primary);font-weight:700;font-size:.9rem;letter-spacing:.15em;display:block;margin-bottom:7px}
.section-head h2{
    font-size:clamp(1.55rem,3vw,2.1rem);
    font-weight:800;
    color:var(--mk-dark);
    margin:0;
}
.section-head .sec-note{color:var(--mk-muted);font-size:.9rem}
@media(max-width:576px){.section-head{flex-direction:column;align-items:flex-start}}
.cat-simple-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:991px){.cat-simple-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cat-simple-grid{grid-template-columns:1fr}}
.cat-simple-card{
    background:#fff;
    border-radius:18px;
    padding:22px 18px;
    border:1px solid var(--mk-line);
    box-shadow:var(--mk-shadow);
    text-decoration:none;
    color:var(--mk-text);
    display:block;
    transition:var(--mk-transition);
}
.cat-simple-card:hover{box-shadow:var(--mk-shadow-lg);transform:translateY(-4px);border-color:rgba(166,106,92,.4)}
.cat-simple-card i{font-size:1.7rem;margin-bottom:14px;color:var(--mk-primary)}
.cat-simple-card h3{font-size:1.2rem;color:var(--mk-dark);font-weight:800;margin:0 0 8px}
.cat-simple-card p{font-size:.88rem;color:var(--mk-muted);line-height:1.7;margin:0}
.cat-simple-card .go-link{display:inline-block;margin-top:14px;font-weight:700;color:var(--mk-primary);font-size:.86rem}

/* 相关文章 */
.related-section{background:#fff;border-top:1px solid var(--mk-line);padding:58px 0 72px}
.related-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:30px}
.related-head h2{font-size:clamp(1.45rem,3vw,2rem);font-weight:800;color:var(--mk-dark);margin:0}
.related-head a{color:var(--mk-primary);font-weight:600;text-decoration:none;font-size:.9rem}
.related-head a:hover{text-decoration:underline}
.related-card-wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:991px){.related-card-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.related-card-wrap{grid-template-columns:1fr}}
.related-post-card{
    background:var(--mk-bg);
    border:1px solid var(--mk-line);
    border-radius:18px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:100%;
    transition:var(--mk-transition);
    text-decoration:none;
    color:var(--mk-text);
}
.related-post-card:hover{box-shadow:var(--mk-shadow-lg);transform:translateY(-4px);border-color:rgba(166,106,92,.36)}
.related-post-media{
    aspect-ratio:16 / 8.5;
    background:var(--mk-primary-mist);
    overflow:hidden;
}
.related-post-media img{width:100%;height:100%;object-fit:cover;display:block;}
.related-post-media .img-fallback{
    width:100%;height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--mk-primary-mist);
    color:var(--mk-primary);
    font-size:2.6rem;
    font-weight:800;
}
.related-post-content{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.related-post-content h3{
    font-size:1.13rem;
    font-weight:700;
    color:var(--mk-dark);
    line-height:1.55;
    margin-bottom:10px;
    transition:var(--mk-transition);
}
.related-post-card:hover h3{color:var(--mk-primary)}
.related-post-summary{font-size:.9rem;color:var(--mk-muted);line-height:1.75;flex:1}
.related-post-date{font-size:.8rem;color:var(--mk-muted);display:flex;gap:6px;align-items:center;border-top:1px solid var(--mk-line);padding-top:12px;margin-top:14px}
.related-empty-note{
    background:var(--mk-bg);
    border:1px dashed var(--mk-line);
    border-radius:16px;
    padding:30px;
    text-align:center;
    color:var(--mk-muted);
}
.related-empty-note a{color:var(--mk-primary);font-weight:600}

/* CTA 条 */
.article-cta-section{padding:62px 0;background:
    radial-gradient(circle at 10% 30%,rgba(200,156,148,.2),transparent 34%),
    var(--mk-dark);
    color:#fff;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.05);
}
.article-cta-section h2{font-size:clamp(1.6rem,3.5vw,2.4rem);color:#fff;font-weight:800}
.article-cta-section p{color:rgba(255,255,255,.78);max-width:560px;margin:12px auto 28px}
.article-cta-section .btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* 页脚 */
.mt-footer{background:var(--mk-dark);color:#D8D2CC;margin-top:0}
.footer-top{padding:54px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px 34px}
@media(max-width:991px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){.footer-grid{grid-template-columns:1fr}}
.footer-logo{display:inline-flex;gap:12px;align-items:center;color:#fff}
.footer-logo .brand-mark{background:var(--mk-primary);color:#fff}
.footer-logo strong{font-size:1.2rem}
.footer-logo small{font-size:.75rem;color:#A49A92}
.footer-brand p{margin-top:16px;font-size:.88rem;line-height:1.9;color:#B7AFA8;max-width:300px}
.footer-title{
    color:#fff;
    font-size:1.02rem;
    font-weight:700;
    margin:0 0 14px;
    padding-bottom:10px;
    position:relative;
}
.footer-title::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--mk-gold);border-radius:999px}
.mt-footer ul{list-style:none;padding:0;margin:0}
.mt-footer ul li{margin-bottom:8px}
.mt-footer ul li a{
    color:#CBBFB7;
    font-size:.9rem;
    text-decoration:none;
    transition:var(--mk-transition);
    display:inline-flex;
    align-items:center;
    gap:7px;
}
.mt-footer ul li a:hover{color:#fff;text-decoration:none;padding-left:4px}
.footer-contact p{margin-bottom:9px;color:#CBBFB7;font-size:.88rem}
.footer-contact i{margin-right:7px;color:var(--mk-gold)}
.footer-pub-note{color:#9e958e;font-size:.86rem}
.footer-copy a{color:var(--mk-gold);font-weight:600}
.form-privacy{font-size:.75rem;color:#9e958e !important;margin-bottom:14px;line-height:1.6}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);
    padding:20px 0;
    color:#9B8F87;
    font-size:.84rem;
}
.footer-bottom .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.mt-footer p{margin-bottom:8px}
.mt-footer .btn-mk-primary:hover{background:var(--mk-primary);border-color:var(--mk-primary);color:#fff}
@media(max-width:576px){
    .mt-footer .footer-grid{gap:10px 16px}
    .mt-footer .footer-grid>div{margin-top:18px}
}

/* 少量通用 */
.scrollbar-hint{color:var(--mk-muted);font-size:.8rem}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;white-space:nowrap}

/* roulang page: category1 */
:root {
  --mk-primary: #A66A5C;
  --mk-primary-deep: #8E5448;
  --mk-rose: #C89C94;
  --mk-rose-light: #F5E7E3;
  --mk-ink: #2E2420;
  --mk-bg: #FAF6F2;
  --mk-cream: #F1E9E3;
  --mk-card: #FFFFFF;
  --mk-text: #5C534E;
  --mk-muted: #9B8F87;
  --mk-line: rgba(166, 106, 92, 0.18);
  --mk-gold: #BE9365;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 10px 30px rgba(46, 36, 32, 0.08);
  --shadow-hover: 0 14px 36px rgba(46, 36, 32, 0.13);
  --font-family-cn: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-family-cn);
  background: var(--mk-bg);
  color: var(--mk-text);
  line-height: 1.8;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; color: var(--mk-ink); letter-spacing: 0; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 1.4rem; }
h3 { font-size: 1.2rem; }

p { margin: 0; }

a { color: var(--mk-primary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--mk-primary-deep); }

img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

::selection { background: rgba(200, 156, 148, 0.3); }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200, 156, 148, 0.45);
  border-radius: 6px;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.header-inner {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--mk-ink);
  color: var(--mk-rose);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 14px rgba(46,36,32,.14);
}

.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { font-size: 1.08rem; color: var(--mk-ink); font-weight: 800; letter-spacing: .04em; }
.brand-copy small { font-size: .74rem; color: var(--mk-muted); letter-spacing: .08em; margin-top: 2px; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1.05rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--mk-text);
  position: relative;
  transition: background .2s ease, color .2s ease;
}

.site-nav a:hover { color: var(--mk-primary); background: rgba(200, 156, 148, .12); }
.site-nav a.active { color: var(--mk-primary-deep); }
.site-nav a.active::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mk-primary);
}

.nav-toggle {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mk-line);
  border-radius: 50%;
  background: transparent;
  color: var(--mk-ink);
  font-size: 1.05rem;
  display: none;
  cursor: pointer;
}

.nav-toggle:hover {
  background: var(--mk-rose-light);
  color: var(--mk-primary-deep);
  border-color: var(--mk-primary);
}

/* ---------- Mobile bottom tab ---------- */

.mobile-tabbar {
  display: none;
}

/* ---------- Page hero ---------- */

.cat-hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  padding: 6rem 0 4.2rem;
  color: #fff;
  overflow: hidden;
}

.cat-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.cat-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, rgba(46,36,32,0.02) 0%, rgba(46,36,32,0.26) 45%, rgba(46,36,32,0.74) 100%),
    linear-gradient(0deg, rgba(46,36,32,0.45) 0%, rgba(46,36,32,0.05) 60%);
}

.cat-hero .wrap { position: relative; z-index: 2; width: 100%; }

.crumb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f6efe9;
  font-size: .82rem;
  font-weight: 600;
  padding: .35rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
  backdrop-filter: blur(6px);
}

.cat-hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  margin-bottom: 1rem;
  letter-spacing: .02em;
}

.cat-hero .lead {
  max-width: 560px;
  font-size: 1.06rem;
  color: rgba(255,255,255,.86);
  line-height: 1.9;
  margin-bottom: 1.5rem;
}

.hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  color: rgba(255,255,255,.82);
  font-size: .82rem;
  font-weight: 500;
  border-top: 1px solid rgba(255,255,255,.2);
  padding-top: 1rem;
  max-width: 640px;
}

.hero-note i { color: var(--mk-rose); margin-right: 6px; }

/* ---------- Buttons ---------- */

.btn-mk-primary,
.btn-mk-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: .85rem 2rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  border: 1px solid transparent;
  line-height: 1.2;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.btn-mk-primary {
  background: var(--mk-ink);
  color: #fff;
  box-shadow: 0 8px 20px rgba(46,36,32,.18);
}

.btn-mk-primary:hover {
  background: #1A1412;
  color: #fff;
  transform: scale(1.02);
}

.btn-mk-ghost {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.55);
  color: #fff;
}

.btn-mk-ghost:hover {
  background: rgba(255,255,255,.16);
  border-color: #fff;
  color: #fff;
  transform: scale(1.02);
}

.btn-mk-light {
  background: var(--mk-primary);
  color: #fff;
}

.btn-mk-light:hover {
  background: var(--mk-primary-deep);
  color: #fff;
  transform: scale(1.02);
  box-shadow: 0 10px 22px rgba(166,106,92,.24);
}

/* ---------- Sections ---------- */

.section-block {
  padding: clamp(3.8rem, 8vw, 6.2rem) 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 2.4rem;
}

.section-head .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--mk-primary);
  letter-spacing: .1em;
  margin-bottom: .5rem;
}

.section-head .kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--mk-gold);
  display: inline-block;
  border-radius: 999px;
}

.section-head p {
  color: var(--mk-muted);
  max-width: 590px;
}

/* poster section */

.poster-section { background: var(--mk-bg); }

.poster-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.product-feature {
  grid-column: span 7;
  background: var(--mk-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--mk-line);
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
}

.product-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

.product-feature .pf-media img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.product-feature .pf-body { padding: 1.6rem 1.8rem 1.9rem; }

.product-kicker {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--mk-primary);
  padding: .18rem .7rem;
  background: var(--mk-rose-light);
  border-radius: 999px;
  margin-bottom: .8rem;
}

.product-feature h3 { font-size: 1.5rem; }

.product-feature .pf-body > p {
  margin-top: .6rem;
  margin-bottom: 1.1rem;
}

.product-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  border-top: 1px dashed var(--mk-line);
  padding-top: 1rem;
}

.product-facts li { display: flex; gap: 8px; align-items: center; font-size: .88rem; color: var(--mk-ink); }
.product-facts span { color: var(--mk-muted); font-weight: 500; }

.poster-side {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.product-mini {
  background: var(--mk-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--mk-line);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
}

.product-mini:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.product-mini .mini-media img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.product-mini .mini-body { padding: 1.2rem 1.4rem 1.4rem; }
.product-mini h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.product-mini p { font-size: .9rem; color: var(--mk-muted); }

/* 3 reasoning cards */

.reason-section { background: var(--mk-cream); }

.reason-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: start;
}

.reason-card {
  grid-column: span 4;
  padding: 2rem;
  background: var(--mk-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--mk-line);
  min-height: 260px;
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
}

.reason-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

.reason-card:nth-child(1) { margin-top: 30px; }
.reason-card:nth-child(2) { margin-top: 0; background: var(--mk-ink); color: #eee; }
.reason-card:nth-child(2) h3 { color: #fff; }
.reason-card:nth-child(2) p { color: rgba(255,255,255,.7); }
.reason-card:nth-child(3) { margin-top: 52px; }

.reason-num {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--mk-gold);
  margin-bottom: 1.3rem;
  display: block;
}

.reason-card:nth-child(2) .reason-num { color: var(--mk-rose); }

.reason-card i {
  font-size: 1.4rem;
  color: var(--mk-primary);
  margin-bottom: 1.25rem;
}

.reason-card:nth-child(2) i { color: var(--mk-rose); }

.reason-card h3 { font-size: 1.2rem; margin-bottom: .8rem; }

/* evidence metrics dark block */

.evidence-band {
  position: relative;
  background: var(--mk-ink);
  color: rgba(255,255,255,.85);
  overflow: hidden;
}

.evidence-band::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  right: -120px;
  bottom: -180px;
  border: 1px solid rgba(200,156,148,.18);
  border-radius: 50%;
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px;
  position: relative;
  z-index: 2;
  align-items: center;
}

.evidence-copy { grid-column: span 5; }
.evidence-copy .kicker { color: var(--mk-rose); }
.evidence-copy h2 { color: #fff; margin-bottom: 1rem; }
.evidence-copy p { color: rgba(255,255,255,.72); font-size: .95rem; }

.evidence-metrics {
  grid-column: span 7;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.metric-tile {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.2rem;
  text-align: center;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background .25s ease, transform .25s ease;
}

.metric-tile:hover { background: rgba(255,255,255,.1); transform: translateY(-4px); }
.metric-tile strong { font-size: 1.7rem; color: #fff; font-weight: 800; letter-spacing: .02em; }
.metric-tile span { font-size: .78rem; color: rgba(255,255,255,.66); line-height: 1.5; margin-top: 6px; }
.metric-tile em { font-style: normal; font-size: .9rem; color: var(--mk-rose); }

/* scenario */

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.scenario-item {
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  min-height: 156px;
  box-shadow: 0 4px 14px rgba(46,36,32,.04);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.scenario-item:hover {
  transform: translateY(-5px);
  border-color: var(--mk-rose);
  box-shadow: var(--shadow-hover);
}

.scenario-icon {
  width: 46px;
  height: 46px;
  background: var(--mk-rose-light);
  color: var(--mk-primary);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.scenario-item h3 { font-size: 1rem; margin-bottom: .45rem; }
.scenario-item p { font-size: .85rem; color: var(--mk-muted); }

/* quality flow */

.process-section { background: #fff; border-top: 1px solid var(--mk-line); border-bottom: 1px solid var(--mk-line); }

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 20px;
  counter-reset: mkStep;
  margin-top: 2.5rem;
}

.process-step {
  position: relative;
  counter-increment: mkStep;
  padding-top: .5rem;
}

.process-step .step-no {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mk-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 1.1rem;
  position: relative;
  z-index: 2;
}

.process-step .step-no::before {
  content: counter(mkStep, decimal-leading-zero);
  font-size: .82rem;
}

.process-step h3 { font-size: 1.08rem; margin-bottom: .55rem; }
.process-step p { color: var(--mk-muted); font-size: .9rem; }

.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 46px;
  right: -18px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--mk-line) 0 6px, transparent 6px 12px);
}

/* FAQ */

.faq-wrap { max-width: 850px; }

.faq-item {
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(46,36,32,.03);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.faq-item:hover { border-color: rgba(200,156,148,.5); box-shadow: var(--shadow-soft); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 0;
  background: transparent;
  padding: 1rem 1.4rem;
  text-align: left;
  font-weight: 700;
  color: var(--mk-ink);
  font-size: .98rem;
  min-height: 60px;
  cursor: pointer;
}

.faq-q .q-symbol {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: var(--mk-rose-light);
  color: var(--mk-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 800;
}

.faq-q .fa-chevron-down {
  margin-left: auto;
  color: var(--mk-muted);
  transition: transform .25s ease;
  font-size: .85rem;
}

.faq-item.show .fa-chevron-down,
.faq-q[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }

.faq-a {
  padding: 0 1.4rem 1.15rem 4.3rem;
  color: var(--mk-text);
  font-size: .94rem;
  border-left: 2px solid transparent;
}

/* final CTA */

.final-cta {
  background: var(--mk-cream);
  text-align: center;
  border-top: 1px solid var(--mk-line);
}

.final-cta .cta-box {
  max-width: 760px;
  margin: 0 auto;
}

.final-cta h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }

.final-cta p { color: var(--mk-muted); margin-bottom: 1.6rem; }

.cta-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* Footer */

.mt-footer {
  background: var(--mk-ink);
  color: #D8D2CC;
  margin-top: 0;
}

.footer-top {
  padding: 3.5rem 0 2.4rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr .8fr 1fr .95fr;
  gap: 32px;
}

.footer-brand .brand { margin-bottom: 1rem; }
.footer-brand .brand-mark { background: rgba(255,255,255,.08); color: var(--mk-rose); }
.footer-brand .brand-copy strong { color: #fff; }
.footer-brand .brand-copy small { color: rgba(255,255,255,.55); }

.footer-brand p {
  color: rgba(255,255,255,.68);
  font-size: .9rem;
  max-width: 340px;
  margin-top: .6rem;
  line-height: 1.9;
}

.footer-title {
  color: #fff;
  font-weight: 700;
  margin-bottom: 1.1rem;
  font-size: .98rem;
}

.footer-grid ul li { margin-bottom: .75rem; }
.footer-grid ul a { color: rgba(255,255,255,.65); font-size: .91rem; }
.footer-grid ul a:hover { color: #fff; }

.footer-contact p {
  font-size: .89rem;
  color: rgba(255,255,255,.58);
  margin-bottom: .85rem;
  display: flex;
  gap: 8px;
}

.footer-contact i { color: var(--mk-rose); width: 18px; margin-top: 4px; }

.footer-top > .footer-grid > div:last-child p { color: rgba(255,255,255,.55); font-size: .86rem; margin-bottom: .8rem; }

.form-privacy { font-size: .78rem; color: #9b8f87; }

.footer-bottom {
  padding: 1.3rem 0;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
}

/* responsive */

@media (max-width: 1199px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 40px;
  }
}

@media (max-width: 991.98px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    right: 16px;
    top: calc(100% + 12px);
    width: min(300px, calc(100vw - 32px));
    background: #fff;
    border: 1px solid var(--mk-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hover);
    padding: 12px;
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { display: block; }
  .site-nav a {
    width: 100%;
    justify-content: flex-start;
    padding: .8rem 1rem;
    border-radius: 12px;
    border-bottom: 1px solid rgba(0,0,0,.04);
  }
  .site-nav a.active { background: var(--mk-rose-light); }
  .site-nav a.active::after { display: none; }

  .poster-grid { grid-template-columns: 1fr; }
  .product-feature { grid-column: span 1; }
  .product-feature .pf-media img { height: 330px; }
  .poster-side { grid-column: span 1; display: grid; grid-template-columns: 1fr 1fr; }
  .product-mini { gap: 0; }

  .reason-grid { gap: 20px; }
  .reason-card { grid-column: span 4; }
  .reason-card:nth-child(1), .reason-card:nth-child(3) { margin-top: 16px; }

  .evidence-copy { grid-column: span 5; }
  .evidence-metrics { grid-column: span 7; }

  .scenario-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .process-step:nth-child(2)::after, .process-step:nth-child(4)::after { display: none; }
  .process-step:not(:last-child)::after { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575.98px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .wrap { padding-left: 16px; padding-right: 16px; }

  .header-inner { height: 64px; }

  .brand-copy strong { font-size: .98rem; }
  .brand-copy small { display: none; }
  .brand-mark { width: 38px; height: 38px; font-size: .95rem; }

  .cat-hero {
    min-height: auto;
    padding: 3.2rem 0 3.2rem;
  }

  .cat-hero h1 { font-size: 2rem; }
  .cat-hero .lead { font-size: .96rem; }

  .product-feature .pf-media img { height: 230px; }
  .product-feature .pf-body { padding: 1.4rem; }

  .poster-side { display: block; }
  .poster-side .product-mini + .product-mini {
    margin-top: 14px;
    display: block;
  }

  .poster-side .mini-media img { height: 180px; }

  .product-facts { flex-direction: column; gap: 8px; }
  .reason-grid { grid-template-columns: 1fr; }
  .reason-card { grid-column: span 1; min-height: 0; margin-top: 0 !important; }
  .evidence-grid { grid-template-columns: 1fr; }
  .evidence-copy { grid-column: span 1; }
  .evidence-metrics { grid-column: span 1; grid-template-columns: 1fr 1fr; gap: 12px; }

  .scenario-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .scenario-item { padding: 1.1rem; min-height: 0; }
  .scenario-item h3 { font-size: .93rem; }

  .process-steps { grid-template-columns: 1fr; gap: 26px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

  .mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(0,0,0,.07);
    display: flex;
    align-items: stretch;
  }

  .mobile-tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--mk-muted);
    font-size: .67rem;
    font-weight: 600;
  }

  .mobile-tabbar a i { font-size: 1.1rem; }
  .mobile-tabbar a.active { color: var(--mk-primary); }
}

/* roulang page: category3 */
:root{
      --mk-primary:#A66A5C;
      --mk-primary-soft:#C89C94;
      --mk-primary-bg:#FAF6F2;
      --mk-ink:#2E2420;
      --mk-card:#FFFFFF;
      --mk-accent:#3E5F57;
      --mk-accent-2:#BE9365;
      --mk-text:#5C534E;
      --mk-muted:#9B8F87;
      --mk-border:rgba(158,110,96,.14);
      --mk-shadow:0 10px 30px rgba(46,36,32,.08);
      --mk-shadow-lg:0 14px 36px rgba(46,36,32,.13);
      --mk-radius-card:20px;
      --mk-radius-tag:6px;
      --mk-radius-pill:999px;
      --mk-header-h:76px;
      --mk-font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--mk-font);
      font-size:1rem;
      line-height:1.9;
      color:var(--mk-text);
      background:var(--mk-primary-bg);
      padding-top:var(--mk-header-h);
      -webkit-font-smoothing:antialiased;
    }
    img{max-width:100%;display:block;height:auto}
    a{text-decoration:none;transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
    p{margin:0 0 1em}
    ul{list-style:none;padding:0;margin:0}
    h1,h2,h3,h4,h5{margin:0;line-height:1.25;color:var(--mk-ink);font-weight:750}
    section[id],div[id]{scroll-margin-top:90px}
    :focus-visible{outline:3px solid rgba(200,156,148,.4);outline-offset:2px}
    .wrap{max-width:1320px;margin:0 auto;padding-left:24px;padding-right:24px}
    .mk-container{max-width:1320px;margin:0 auto;padding-left:24px;padding-right:24px}
    @media(max-width:576px){.wrap,.mk-container{padding-left:16px;padding-right:16px}}

    .site-header{
      position:fixed;top:0;left:0;right:0;height:var(--mk-header-h);
      z-index:1100;background:rgba(255,255,255,.92);
      -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(0,0,0,.06);
    }
    .header-inner{
      display:flex;align-items:center;gap:2rem;height:100%;
      max-width:1320px;margin:0 auto;padding:0 24px;position:relative;
    }
    @media(max-width:576px){.header-inner{padding:0 16px;gap:1rem}}
    .brand{display:inline-flex;align-items:center;gap:.65rem;flex-shrink:0}
    .brand-mark{
      width:44px;height:44px;border-radius:16px 6px 16px 6px;
      display:flex;align-items:center;justify-content:center;
      background:var(--mk-ink);color:#fff;font-weight:800;font-size:1.05rem;
      letter-spacing:-.02em;
    }
    .brand-copy strong{display:block;font-size:1.1rem;font-weight:800;line-height:1.1;color:var(--mk-ink)}
    .brand-copy small{display:block;font-size:.75rem;letter-spacing:.03em;color:var(--mk-muted);line-height:1.4;margin-top:2px}
    .site-nav{margin-left:auto;display:flex;justify-content:flex-end}
    .site-nav ul{display:flex;gap:.1rem}
    .site-nav a{
      position:relative;display:inline-flex;padding:.6rem .9rem;border-radius:999px;
      color:var(--mk-ink);opacity:.72;font-weight:600;font-size:.92rem;white-space:nowrap;
    }
    .site-nav a:hover{opacity:1;background:rgba(200,156,148,.12)}
    .site-nav a.active{opacity:1;color:var(--mk-primary)}
    .site-nav a.active::after{
      content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
      width:6px;height:6px;border-radius:50%;background:var(--mk-primary);
    }
    @media(max-width:1200px){
      .site-nav a{padding:.6rem .72rem;font-size:.88rem}
      .header-inner{gap:1rem}
    }
    .nav-burger{
      display:none;position:relative;z-index:1200;margin-left:auto;
      width:42px;height:42px;border-radius:13px;
      border:1px solid rgba(46,36,32,.14);background:#fff;color:var(--mk-ink);
      font-size:1.02rem;align-items:center;justify-content:center;
    }
    .mk-menu-drop{
      position:fixed;top:64px;left:0;right:0;z-index:1090;
      background:#fff;border-bottom:1px solid var(--mk-border);
      box-shadow:0 18px 36px rgba(46,36,32,.10);padding:0 16px 14px;
    }
    .mk-menu-drop ul{padding:.65rem 0}
    .mk-menu-drop li{border-top:1px solid rgba(158,110,96,.08)}
    .mk-menu-drop a{display:block;padding:.95rem .25rem;color:var(--mk-ink);font-weight:650;font-size:1rem}
    .mk-menu-drop a:hover{color:var(--mk-primary)}
    .mk-menu-drop a.active{color:var(--mk-primary)}

    .mobile-tabbar{
      display:none;
    }

    .btn-mk-primary{
      --bs-btn-border-color:transparent;
      background:var(--mk-ink);color:#fff;border:0;
      display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
      padding:.85rem 1.8rem;border-radius:999px;font-weight:700;font-size:.95rem;
      transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
    }
    .btn-mk-primary:hover{background:#4A3630;color:#fff;transform:scale(1.02)}
    .btn-mk-outline{
      background:transparent;border:1px solid var(--mk-ink);color:var(--mk-ink);
      display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
      padding:.85rem 1.8rem;border-radius:999px;font-weight:700;font-size:.95rem;
    }
    .btn-mk-outline:hover{background:rgba(200,156,148,.16);color:var(--mk-ink)}
    .btn-mk-light{
      background:#fff;color:var(--mk-ink);border:0;
      display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
      padding:.9rem 2rem;border-radius:999px;font-weight:700;
      box-shadow:0 10px 24px rgba(0,0,0,.14);
      transition:transform .2s ease,background .2s ease;
    }
    .btn-mk-light:hover{background:#F5E3DC;color:var(--mk-ink);transform:translateY(-2px)}
    .text-arrow{font-weight:700;color:var(--mk-primary);display:inline-flex;align-items:center;gap:.4rem}
    .text-arrow i{transition:transform .2s ease}
    .text-arrow:hover{color:var(--mk-ink)}
    .text-arrow:hover i{transform:translateX(4px)}

    .category-hero{
      position:relative;overflow:hidden;color:#fff;
      background-color:#4B3831;background-size:cover;background-position:center;
      padding:clamp(5rem,10vw,7.5rem) 0 clamp(2.8rem,5vw,4rem);
      isolation:isolate;
    }
    .category-hero::before{
      content:"";position:absolute;inset:0;z-index:-1;
      background:linear-gradient(100deg,rgba(46,36,32,.86) 0%,rgba(46,36,32,.72) 46%,rgba(46,36,32,.3) 100%);
    }
    .category-hero-content{max-width:820px;position:relative;z-index:1}
    .hero-crumb{
      display:inline-flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.78);
      background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);
      padding:.35rem 1rem;border-radius:999px;font-size:.82rem;
    }
    .hero-crumb a{color:#fff}
    .hero-crumb a:hover{color:#F7D9D2}
    .category-hero h1{
      color:#fff;font-size:clamp(2.3rem,5.2vw,3.8rem);font-weight:800;letter-spacing:.01em;
      margin:1.1rem 0 .8rem;
    }
    .category-lead{
      font-size:clamp(1rem,1.5vw,1.18rem);max-width:680px;
      color:rgba(255,255,255,.9);line-height:1.9;margin:0;
    }
    .hero-footnote{
      margin-top:1.6rem;display:inline-flex;align-items:center;gap:.55rem;
      padding:.55rem 1.1rem;font-size:.85rem;color:rgba(255,255,255,.85);
      background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
      border-radius:999px;
    }

    .mk-section{padding:clamp(4rem,9vw,6.6rem) 0;position:relative}
    .mk-section.no-pad-top{padding-top:0}
    .section-head{max-width:780px;margin-bottom:2.9rem}
    .section-head.center{margin-left:auto;margin-right:auto;text-align:center}
    .kicker{
      display:inline-flex;align-items:center;gap:.55rem;
      padding:.25rem 1rem;border-radius:999px;
      background:rgba(166,106,92,.12);color:var(--mk-primary);
      font-size:.8rem;font-weight:750;letter-spacing:.06em;
      margin-bottom:1.1rem;
    }
    .section-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);max-width:760px;margin-bottom:.7rem}
    .section-head p{color:var(--mk-muted);font-size:1rem;max-width:660px;margin:0}
    .section-warm{background:#F3ECE6}
    .section-white{background:#FFFFFF}

    .mk-section.dark{background:var(--mk-ink);color:#D8D2CC}
    .mk-section.dark .section-head h2{color:#fff}
    .mk-section.dark .section-head p{color:rgba(255,255,255,.68)}
    .mk-section.dark .kicker{background:rgba(255,255,255,.1);color:#E6CBC4}

    .info-card{
      position:relative;background:#fff;border:1px solid var(--mk-border);
      border-radius:var(--mk-radius-card);padding:2rem 1.6rem 1.7rem;height:100%;
      box-shadow:0 4px 16px rgba(46,36,32,.04);
      transition:transform .25s ease,box-shadow .25s ease;
    }
    .info-card:hover{transform:translateY(-4px);box-shadow:var(--mk-shadow-lg)}
    .card-icon{
      width:54px;height:54px;border-radius:18px;margin-bottom:1.4rem;
      display:flex;align-items:center;justify-content:center;color:#fff;
      background:var(--mk-primary);font-size:1.25rem;box-shadow:0 8px 18px rgba(166,106,92,.24);
    }
    .info-card:nth-child(2) .card-icon{background:var(--mk-accent)}
    .info-card:nth-child(3) .card-icon{background:var(--mk-accent-2)}
    .info-card:nth-child(4) .card-icon{background:#6D5C52}
    .info-card h3{font-size:1.16rem;margin-bottom:.6rem}
    .info-card p{color:var(--mk-text);font-size:.95rem;margin:0}
    @media(min-width:992px){
      .info-card-grid>.col-lg-3:nth-child(2){margin-top:28px}
      .info-card-grid>.col-lg-3:nth-child(4){margin-top:28px}
    }

    .source-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:.6rem}
    .flow-step{
      border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);
      border-radius:20px;padding:1.6rem 1.4rem 1.5rem;min-height:210px;
      transition:transform .25s ease,background .25s ease,border-color .25s ease;
    }
    .flow-step:hover{transform:translateY(-4px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
    .step-num{
      display:inline-flex;align-items:center;justify-content:center;
      width:38px;height:38px;border-radius:50%;margin-bottom:1.2rem;
      background:rgba(200,156,148,.18);color:#F7DDD6;font-weight:800;font-size:.9rem;
    }
    .flow-step h3{color:#fff;font-size:1.06rem;margin-bottom:.45rem}
    .flow-step p{color:rgba(255,255,255,.68);font-size:.92rem;margin:0;line-height:1.7}
    @media(max-width:991px){.source-flow{grid-template-columns:1fr 1fr}}
    @media(max-width:576px){.source-flow{grid-template-columns:1fr}}

    .topic-card{
      background:#fff;border:1px solid var(--mk-border);border-radius:22px;
      overflow:hidden;height:100%;box-shadow:0 4px 16px rgba(46,36,32,.04);
      transition:transform .25s ease,box-shadow .25s ease;
    }
    .topic-card:hover{transform:translateY(-4px);box-shadow:var(--mk-shadow-lg)}
    .topic-thumb{position:relative;height:232px;overflow:hidden;background:#ECE3DC}
    .topic-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
    .topic-card:hover .topic-thumb img{transform:scale(1.04)}
    .topic-tag{
      position:absolute;left:14px;bottom:12px;z-index:2;
      padding:.3rem .85rem;border-radius:999px;
      background:rgba(255,255,255,.93);color:var(--mk-ink);
      font-size:.76rem;font-weight:700;letter-spacing:.03em;
    }
    .topic-body{padding:1.4rem 1.4rem 1.5rem}
    .topic-body h3{font-size:1.2rem;margin-bottom:.55rem}
    .topic-body p{color:var(--mk-text);font-size:.93rem;margin:0;line-height:1.75;min-height:70px}

    .faq-list{max-width:880px;margin:0 auto}
    .faq-item{
      background:#fff;border:1px solid var(--mk-border);border-radius:20px;
      margin-bottom:14px;overflow:hidden;
      transition:box-shadow .2s ease,border-color .2s ease;
    }
    .faq-item:hover{border-color:rgba(166,106,92,.32);box-shadow:var(--mk-shadow)}
    .faq-qrow{
      display:flex;align-items:flex-start;gap:.95rem;
      padding:1.25rem 1.45rem .55rem;
    }
    .q-mark{
      width:32px;height:32px;border-radius:50%;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
      background:var(--mk-ink);color:#fff;font-weight:800;font-size:.92rem;
    }
    .faq-qrow button{
      border:0;background:transparent;text-align:left;padding:.15rem 2rem .75rem 0;
      min-height:48px;flex:1;color:var(--mk-ink);font-weight:700;font-size:1rem;
      display:flex;align-items:center;gap:.7rem;cursor:pointer;
    }
    .faq-qrow button .chev{
      margin-left:auto;color:var(--mk-muted);font-size:.85rem;
      transition:transform .25s ease;flex-shrink:0;
    }
    .faq-qrow button[aria-expanded="true"] .chev{transform:rotate(180deg);color:var(--mk-primary)}
    .faq-answer{padding:.2rem 1.5rem 1.4rem 1.5rem}
    .faq-answer p{
      margin-left:calc(32px + .95rem);padding-left:1.15rem;color:var(--mk-text);
      border-left:2px solid var(--mk-primary);font-size:.95rem;margin-bottom:0;line-height:1.9;
    }

    .subscribe-shortcut{
      background:#fff;border-top:1px solid var(--mk-border);
      padding:clamp(3.2rem,7vw,5.5rem) 0;
    }
    .subscribe-panel{
      display:flex;align-items:center;justify-content:space-between;gap:2.4rem;
      background:var(--mk-ink);border-radius:26px;
      padding:clamp(2rem,5vw,3.5rem);color:#F1E9E4;
    }
    .subscribe-panel h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem);margin:.55rem 0 .8rem;max-width:600px}
    .subscribe-panel p{color:rgba(255,255,255,.72);max-width:630px;margin:0;line-height:1.9}
    .subscribe-actions{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;flex-shrink:0}
    .link-light{color:#fff;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px;font-size:.9rem}
    .link-light:hover{color:#F7DDD6;border-color:#F7DDD6}
    @media(max-width:991px){.subscribe-panel{flex-direction:column;align-items:flex-start}}
    @media(max-width:576px){.subscribe-actions{width:100%}.subscribe-actions .btn,.subscribe-actions a{width:100%}.subscribe-actions .btn{text-align:center}}

    .mt-footer{background:var(--mk-ink);color:#D8D2CC}
    .footer-top{padding:4rem 0 2rem;
      background-image:radial-gradient(circle at 10% 90%,rgba(200,156,148,.08),transparent 30%);
    }
    .footer-grid{display:grid;grid-template-columns:1.5fr .8fr 1fr 1.2fr;gap:2.6rem}
    .footer-brand .brand{margin-bottom:1.2rem}
    .footer-brand p{color:#A49A92;font-size:.92rem;max-width:360px;line-height:1.9;margin:0}
    .footer-logo .brand-mark{background:#fff;color:var(--mk-ink)}
    .footer-logo .brand-copy strong{color:#fff}
    .footer-logo .brand-copy small{color:#A49A92}
    .footer-title{
      color:#fff;font-weight:700;font-size:1rem;margin-bottom:1.1rem;padding-bottom:.55rem;
      position:relative;
    }
    .footer-title::after{content:"";position:absolute;left:0;bottom:0;width:22px;height:2px;background:var(--mk-primary-soft)}
    .footer-grid ul li{margin-bottom:.45rem}
    .footer-grid ul a{color:#B4ABA4;font-size:.93rem}
    .footer-grid ul a:hover{color:#fff}
    .footer-contact p{margin-bottom:.65rem;font-size:.92rem;color:#A49A92}
    .footer-contact i{width:22px;color:var(--mk-primary-soft)}
    .footer-grid p{color:#A49A92;font-size:.92rem}
    .form-privacy{font-size:.8rem!important;color:#8f827a!important;margin-bottom:1.1rem}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:1.5rem 0;font-size:.86rem;color:#8F827A}
    .footer-bottom .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem}
    @media(max-width:1023px){
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media(max-width:560px){
      .footer-grid{grid-template-columns:1fr}
      .footer-bottom .wrap{flex-direction:column;text-align:center}
    }

    @media(max-width:991px){
      body{padding-top:64px;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
      .site-header{height:64px}
      .header-inner{height:64px;padding:0 16px}
      .site-nav{display:none}
      .nav-burger{display:inline-flex}
      .mobile-tabbar{
        display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1150;
        height:calc(64px + env(safe-area-inset-bottom));
        padding-bottom:env(safe-area-inset-bottom);
        background:rgba(255,255,255,.96);
        -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
        border-top:1px solid var(--mk-border);
        box-shadow:0 -6px 20px rgba(46,36,32,.05);
      }
      .tab-item{
        flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
        color:var(--mk-muted);font-size:.7rem;font-weight:650;
      }
      .tab-item i{font-size:1.12rem;line-height:1}
      .tab-item.active{color:var(--mk-primary)}
    }
    @media(min-width:992px){
      .mobile-tabbar{display:none}
      .mk-menu-drop{display:none!important}
    }

/* roulang page: category2 */
:root {
            --mk-primary: #A66A5C;
            --mk-primary-light: #C89C94;
            --mk-primary-soft: #F3E7E3;
            --mk-dark: #2E2420;
            --mk-dark-deeper: #1F1716;
            --mk-bg: #FAF6F2;
            --mk-card: #FFFFFF;
            --mk-muted: #9B8F87;
            --mk-text: #5C534E;
            --mk-line: rgba(158, 110, 96, 0.14);
            --mk-accent: #BE9365;
            --mk-green-deep: #3E5F57;
            --radius-card: 22px;
            --radius-medium: 14px;
            --radius-pill: 999px;
            --shadow-card: 0 10px 30px rgba(46, 36, 32, 0.08);
            --shadow-hover: 0 14px 36px rgba(46, 36, 32, 0.13);
            --font-stack: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: var(--font-stack);
            font-size: 16px;
            line-height: 1.9;
            color: var(--mk-text);
            background-color: var(--mk-bg);
            -webkit-font-smoothing: antialiased;
        }

        h1, h2, h3, h4, h5, h6 {
            color: var(--mk-dark);
            font-weight: 700;
            line-height: 1.3;
            margin: 0 0 .6em 0;
        }

        p {
            margin: 0 0 1.2em 0;
            line-height: 1.9;
        }

        a {
            color: var(--mk-primary);
            text-decoration: none;
            transition: color .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
        }

        a:hover {
            color: var(--mk-primary);
        }

        img {
            max-width: 100%;
            display: block;
        }

        button,
        input,
        textarea,
        select {
            font-family: inherit;
        }

        .skip-link {
            position: fixed;
            top: -80px;
            left: 18px;
            z-index: 2147;
            padding: 12px 22px;
            border-radius: var(--radius-pill);
            background: var(--mk-dark);
            color: #fff;
            font-weight: 600;
            transition: top .2s ease;
        }

        .skip-link:focus {
            top: 18px;
            color: #fff;
            box-shadow: 0 0 0 4px rgba(200, 156, 148, .5);
        }

        :focus-visible {
            outline: 3px solid rgba(200, 156, 148, .55);
            outline-offset: 2px;
        }

        .wrap {
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 24px;
            padding-right: 24px;
        }

        @media (max-width: 520px) {
            .wrap {
                padding-left: 16px;
                padding-right: 16px;
            }
        }

        /* ---------- 通用按钮 ---------- */
        .btn-mk-primary,
        .btn-mk-light,
        .btn-mk-outline,
        .btn-mk-soft {
            --bs-btn-padding-y: .8rem;
            --bs-btn-padding-x: 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .6rem;
            padding: .8rem 2rem;
            border-radius: var(--radius-pill);
            font-weight: 600;
            line-height: 1.5;
            border: 1px solid transparent;
            transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
        }

        .btn-mk-primary {
            background: var(--mk-dark);
            color: #fff;
            border-color: var(--mk-dark);
        }

        .btn-mk-primary:hover {
            background: #120C0B;
            border-color: #120C0B;
            color: #fff;
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }

        .btn-mk-light {
            background: #fff;
            color: var(--mk-dark);
            border-color: rgba(255, 255, 255, .4);
        }

        .btn-mk-light:hover {
            background: #F7EFEA;
            color: var(--mk-dark);
            transform: translateY(-2px);
            box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
        }

        .btn-mk-outline {
            background: rgba(255, 255, 255, .08);
            border-color: rgba(255, 255, 255, .75);
            color: #fff;
            backdrop-filter: blur(6px);
        }

        .btn-mk-outline:hover {
            background: rgba(255, 255, 255, .16);
            border-color: #fff;
            color: #fff;
            transform: translateY(-2px);
        }

        .btn-mk-soft {
            background: var(--mk-primary-soft);
            color: var(--mk-dark);
            border-color: transparent;
        }

        .btn-mk-soft:hover {
            background: #E9D7D1;
            color: var(--mk-dark);
            transform: translateY(-2px);
        }

        .text-link {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            color: var(--mk-primary);
            font-weight: 600;
        }

        .text-link i {
            transition: transform .22s ease;
        }

        .text-link:hover i {
            transform: translateX(4px);
        }

        /* ---------- 顶栏导航 ---------- */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1030;
            background: rgba(255, 253, 251, .92);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(0, 0, 0, .06);
        }

        .site-header .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 76px;
            gap: 24px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
        }

        .brand-mark {
            width: 46px;
            height: 46px;
            flex: 0 0 46px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--mk-primary);
            color: #fff;
            font-size: 1rem;
            font-weight: 800;
            letter-spacing: .05em;
            box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12), 0 6px 18px rgba(166, 106, 92, .3);
        }

        .brand-copy {
            display: inline-flex;
            flex-direction: column;
            line-height: 1.2;
        }

        .brand-copy strong {
            font-size: 1.12rem;
            letter-spacing: .08em;
            color: var(--mk-dark);
            font-weight: 800;
        }

        .brand-copy small {
            margin-top: 4px;
            font-size: .74rem;
            color: var(--mk-muted);
            letter-spacing: .06em;
        }

        .site-nav ul {
            display: flex;
            align-items: center;
            gap: 10px;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .site-nav a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 15px;
            color: var(--mk-dark);
            font-weight: 600;
            border-radius: var(--radius-pill);
            position: relative;
            transition: background .22s ease, color .22s ease, transform .22s ease;
        }

        .site-nav a::after {
            content: "";
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--mk-accent);
            position: absolute;
            left: 50%;
            bottom: 2px;
            transform: translateX(-50%) scale(0);
            transition: transform .22s ease;
        }

        .site-nav a:hover {
            background: var(--mk-primary-soft);
            color: var(--mk-dark);
        }

        .site-nav a.active {
            color: var(--mk-primary);
        }

        .site-nav a.active::after {
            transform: translateX(-50%) scale(1);
        }

        .menu-toggle {
            display: none;
            width: 44px;
            height: 44px;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 1px solid rgba(46, 36, 32, .22);
            border-radius: 50%;
            color: var(--mk-dark);
            font-size: 1rem;
        }

        .menu-toggle:hover {
            background: var(--mk-primary-soft);
        }

        .mobile-drawer {
            display: none;
            position: fixed;
            left: 0;
            right: 0;
            top: 76px;
            z-index: 1029;
            background: rgba(255, 253, 251, .98);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--mk-line);
            padding: 22px 24px 30px;
            opacity: 0;
            transform: translateY(-14px);
            pointer-events: none;
            transition: opacity .24s ease, transform .24s ease;
            border-radius: 0 0 20px 20px;
        }

        .mobile-drawer.open {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .mobile-drawer ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .mobile-drawer a {
            display: flex;
            align-items: center;
            padding: 14px 8px;
            border-bottom: 1px solid rgba(158, 110, 96, .1);
            color: var(--mk-dark);
            font-weight: 600;
        }

        .mobile-drawer a:last-child {
            border-bottom: 0;
        }

        .mobile-drawer a:hover,
        .mobile-drawer a.active {
            color: var(--mk-primary);
        }

        /* ---------- 底部移动 Tab ---------- */
        .site-bottom-tab {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1080;
            display: none;
            height: calc(64px + env(safe-area-inset-bottom));
            padding-bottom: env(safe-area-inset-bottom);
            background: rgba(255, 255, 255, .96);
            backdrop-filter: blur(14px);
            border-top: 1px solid rgba(0, 0, 0, .08);
        }

        .site-bottom-tab .tab-inner {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            align-content: stretch;
            height: 64px;
        }

        .site-bottom-tab .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            color: var(--mk-muted);
            font-size: .78rem;
            font-weight: 500;
            transition: color .22s ease, background .22s ease;
        }

        .site-bottom-tab .tab-item i {
            font-size: 1.12rem;
            line-height: 1;
        }

        .site-bottom-tab .tab-item:hover,
        .site-bottom-tab .tab-item.active {
            color: var(--mk-primary);
        }

        @media (max-width: 991.98px) {
            .site-nav {
                display: none;
            }

            .menu-toggle {
                display: inline-flex;
            }

            .mobile-drawer {
                display: block;
            }

            .site-bottom-tab {
                display: block;
            }

            body {
                padding-bottom: calc(64px + env(safe-area-inset-bottom));
            }
        }

        /* ---------- 分类 Hero ---------- */
        .category-hero {
            position: relative;
            isolation: isolate;
            display: flex;
            align-items: center;
            min-height: 440px;
            padding: 88px 0 72px;
            background-color: var(--mk-dark);
            background-image: linear-gradient(105deg, rgba(46, 36, 32, .78) 0%, rgba(46, 36, 32, .62) 45%, rgba(46, 36, 32, .28) 100%), url('/assets/images/backpic/back-1.webp');
            background-size: cover;
            background-position: center;
            color: #fff;
        }

        .category-hero::after {
            content: "";
            position: absolute;
            right: -80px;
            bottom: -120px;
            width: 320px;
            height: 320px;
            background: rgba(200, 156, 148, .2);
            filter: blur(60px);
            z-index: -1;
            pointer-events: none;
        }

        .category-hero .wrap {
            position: relative;
            z-index: 2;
            width: 100%;
        }

        .hero-content {
            max-width: 900px;
            color: #fff;
        }

        .hero-breadcrumb {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px 10px;
            padding: 8px 16px;
            background: rgba(255, 255, 255, .14);
            border: 1px solid rgba(255, 255, 255, .28);
            border-radius: var(--radius-pill);
            color: rgba(255, 255, 255, .85);
            font-size: .9rem;
            backdrop-filter: blur(8px);
            margin-bottom: 28px;
        }

        .hero-breadcrumb a {
            color: #fff;
        }

        .hero-breadcrumb a:hover {
            text-decoration: underline;
        }

        .hero-breadcrumb .sep {
            opacity: .6;
        }

        .hero-content h1 {
            margin-bottom: 20px;
            color: #fff;
            font-size: clamp(2.2rem, 5vw, 3.6rem);
            font-weight: 800;
            letter-spacing: .02em;
            line-height: 1.18;
        }

        .hero-content h1 .mk-hero {
            display: inline-block;
            position: relative;
            color: #fff;
        }

        .hero-content h1 .mk-hero::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 2px;
            height: 10px;
            background: rgba(200, 156, 148, .55);
            z-index: -1;
        }

        .hero-lead {
            max-width: 720px;
            font-size: clamp(1.02rem, 1.4vw, 1.2rem);
            color: rgba(255, 255, 255, .9);
            line-height: 2;
            margin-bottom: 32px;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-bottom: 26px;
        }

        .hero-note {
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(255, 255, 255, .72);
            font-size: .9rem;
        }

        .hero-note::before {
            content: "";
            width: 28px;
            height: 1px;
            background: var(--mk-accent);
            display: inline-block;
        }

        /* ---------- 通用区块 ---------- */
        .section {
            padding: clamp(4.2rem, 8vw, 6.8rem) 0;
        }

        .bg-soft {
            background: #F7EFEA;
        }

        .bg-white-section {
            background: #fff;
        }

        .section-head {
            margin-bottom: 46px;
        }

        .section-head.center {
            text-align: center;
        }

        .section-head.center .sec-lead {
            margin-left: auto;
            margin-right: auto;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--mk-primary);
            font-size: .86rem;
            font-weight: 700;
            letter-spacing: .16em;
            margin-bottom: 14px;
        }

        .eyebrow::before {
            content: "";
            width: 28px;
            height: 2px;
            background: var(--mk-accent);
            display: inline-block;
            border-radius: 2px;
        }

        .section-head.center .eyebrow::after {
            content: "";
            width: 28px;
            height: 2px;
            background: var(--mk-accent);
            display: inline-block;
            border-radius: 2px;
        }

        .section-head h2 {
            font-size: clamp(1.75rem, 3.4vw, 2.6rem);
            font-weight: 800;
            line-height: 1.3;
            margin-bottom: 14px;
        }

        .sec-lead {
            max-width: 780px;
            color: var(--mk-text);
            font-size: 1.02rem;
            line-height: 2;
        }

        /* ---------- 品牌故事双栏 ---------- */
        .story-grid {
            display: grid;
            grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
            gap: clamp(36px, 6vw, 80px);
            align-items: center;
        }

        .story-media {
            position: relative;
        }

        .media-frame {
            position: relative;
            overflow: hidden;
            border-radius: var(--radius-card);
            background: #EADEDA;
            box-shadow: var(--shadow-card);
        }

        .media-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s ease;
        }

        .media-frame:hover img {
            transform: scale(1.02);
        }

        .story-media__photo {
            aspect-ratio: 4 / 4.8;
        }

        .story-note {
            position: absolute;
            right: -10px;
            bottom: 26px;
            width: 210px;
            padding: 22px 22px 20px;
            background: var(--mk-dark);
            color: rgba(255, 255, 255, .85);
            border-radius: 16px;
            box-shadow: 0 16px 34px rgba(46, 36, 32, .18);
            line-height: 1.7;
            font-size: .95rem;
        }

        .story-note .story-note-mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 12px;
            background: var(--mk-primary-light);
            color: var(--mk-dark);
            font-size: .86rem;
            font-weight: 800;
            margin-bottom: 10px;
        }

        .story-copy .lead-text {
            font-size: 1.05rem;
            margin-bottom: 18px;
        }

        .story-copy p {
            margin-bottom: 18px;
        }

        .story-points {
            list-style: none;
            margin: 26px 0 0;
            padding: 0;
            border-top: 1px solid var(--mk-line);
        }

        .story-points li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 14px 0;
            border-bottom: 1px solid var(--mk-line);
            line-height: 1.7;
        }

        .story-points li i {
            color: var(--mk-primary);
            font-size: 1rem;
            margin-top: 4px;
        }

        .story-points li span {
            flex: 1;
        }

        /* ---------- 三原则错位卡片 ---------- */
        .principle-list {
            display: flex;
            align-items: flex-start;
            gap: 24px;
        }

        .principle-card {
            flex: 1 1 0;
            position: relative;
            padding: 32px 30px;
            border-radius: var(--radius-card);
            background: #fff;
            border: 1px solid var(--mk-line);
            box-shadow: var(--shadow-card);
            transition: transform .28s ease, box-shadow .28s ease;
        }

        .principle-card:nth-child(2) {
            margin-top: 28px;
        }

        .principle-card:nth-child(3) {
            margin-top: 56px;
        }

        .principle-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }

        .principle-card--deep {
            background: var(--mk-dark);
            border-color: var(--mk-dark);
            color: rgba(255, 255, 255, .85);
            overflow: hidden;
        }

        .principle-card--deep::after {
            content: "03";
            position: absolute;
            right: -8px;
            bottom: -18px;
            font-size: 5rem;
            font-weight: 800;
            color: rgba(255, 255, 255, .07);
            line-height: 1;
            pointer-events: none;
        }

        .principle-card__index {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 46px;
            height: 46px;
            margin-bottom: 28px;
            border-radius: 50%;
            background: var(--mk-primary-soft);
            color: var(--mk-primary);
            font-size: 1rem;
            font-weight: 800;
        }

        .principle-card--deep .principle-card__index {
            background: rgba(255, 255, 255, .16);
            color: #fff;
        }

        .principle-card h3 {
            font-size: 1.3rem;
            font-weight: 800;
            margin-bottom: 14px;
        }

        .principle-card p {
            margin-bottom: 0;
            font-size: .97rem;
        }

        .principle-card--deep h3 {
            color: #fff;
        }

        /* ---------- 理念抉择时间线 ---------- */
        .journey-layout {
            display: grid;
            grid-template-columns: .78fr 1.42fr;
            gap: 72px;
            align-items: start;
        }

        .journey-intro {
            position: sticky;
            top: 120px;
        }

        .journey-intro .eyebrow {
            margin-bottom: 16px;
        }

        .journey-intro h2 {
            margin-bottom: 20px;
        }

        .journey-intro p {
            margin-bottom: 28px;
        }

        .journey-list {
            position: relative;
            display: grid;
            gap: 28px;
        }

        .journey-step {
            position: relative;
            display: flex;
            gap: 22px;
            background: #fff;
            border: 1px solid var(--mk-line);
            border-radius: var(--radius-card);
            padding: 28px 28px 24px 26px;
            box-shadow: 0 4px 18px rgba(46, 36, 32, .04);
            transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        }

        .journey-step:hover {
            transform: translateX(6px);
            box-shadow: var(--shadow-card);
            border-color: rgba(166, 106, 92, .32);
        }

        .journey-step::before {
            content: "";
            position: absolute;
            left: 29px;
            top: 74px;
            bottom: -30px;
            width: 1px;
            background: linear-gradient(180deg, var(--mk-primary-light) 0%, rgba(200, 156, 148, .18) 100%);
        }

        .journey-step:last-child::before {
            display: none;
        }

        .step-num {
            position: relative;
            z-index: 2;
            flex: 0 0 58px;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: var(--mk-primary-soft);
            color: var(--mk-primary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: 800;
        }

        .journey-step-body h3 {
            font-size: 1.22rem;
            font-weight: 800;
            margin-bottom: 10px;
        }

        .journey-step-body p {
            margin-bottom: 0;
            font-size: .97rem;
        }

        /* ---------- 引语与信任数据 ---------- */
        .quote-dark-section {
            background: var(--mk-dark);
            color: rgba(255, 255, 255, .82);
            position: relative;
            overflow: hidden;
        }

        .quote-dark-section::before {
            content: "mk";
            position: absolute;
            right: -60px;
            top: -80px;
            font-size: 17rem;
            font-weight: 800;
            color: rgba(255, 255, 255, .035);
            line-height: 1;
            pointer-events: none;
        }

        .quote-dark-section .wrap {
            position: relative;
            z-index: 2;
        }

        .proof-grid {
            display: grid;
            grid-template-columns: 1.18fr .82fr;
            gap: clamp(40px, 8vw, 110px);
            align-items: center;
        }

        .proof-quote blockquote {
            margin: 0 0 18px;
            padding: 0;
            border: 0;
            color: #fff;
            font-size: clamp(1.25rem, 2.2vw, 1.7rem);
            font-weight: 600;
            line-height: 1.75;
        }

        .proof-quote blockquote::before {
            content: "\201C";
            display: block;
            font-size: 2.4rem;
            line-height: .6;
            color: var(--mk-primary-light);
            margin-bottom: 16px;
        }

        .proof-quote figcaption {
            color: rgba(255, 255, 255, .65);
            font-size: .96rem;
        }

        .proof-stats {
            display: grid;
            gap: 16px;
        }

        .proof-stat {
            display: flex;
            align-items: center;
            gap: 18px;
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 16px;
            padding: 14px 18px;
            backdrop-filter: blur(4px);
        }

        .proof-stat .stat-num {
            min-width: 78px;
            font-size: 1.9rem;
            font-weight: 800;
            color: #fff;
            line-height: 1.2;
        }

        .proof-stat .stat-label {
            font-size: .95rem;
            color: rgba(255, 255, 255, .72);
            line-height: 1.6;
        }

        .proof-footnote {
            margin-top: 26px;
            color: rgba(255, 255, 255, .5);
            font-size: .84rem;
        }

        /* ---------- FAQ ---------- */
        .faq-layout {
            max-width: 780px;
            margin: 0 auto;
        }

        .faq-panel {
            background: #fff;
            border: 1px solid var(--mk-line);
            border-radius: 18px;
            padding: 4px 26px;
            margin-bottom: 16px;
            box-shadow: 0 6px 22px rgba(46, 36, 32, .045);
            transition: border-color .22s ease, box-shadow .22s ease;
        }

        .faq-panel:hover {
            border-color: rgba(166, 106, 92, .26);
            box-shadow: var(--shadow-card);
        }

        .faq-q {
            display: flex;
            align-items: center;
            width: 100%;
            gap: 14px;
            padding: 18px 0;
            background: transparent;
            border: 0;
            text-align: left;
            color: var(--mk-dark);
            font-weight: 700;
            font-size: 1.05rem;
            line-height: 1.6;
            transition: color .22s ease;
        }

        .faq-q::before {
            content: "Q";
            flex: 0 0 32px;
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--mk-primary-soft);
            color: var(--mk-primary);
            font-size: .9rem;
            font-weight: 800;
        }

        .faq-q .faq-toggle {
            margin-left: auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #F5ECEA;
            color: var(--mk-primary);
            font-size: .9rem;
            flex: 0 0 26px;
        }

        .faq-a {
            border-left: 2px solid var(--mk-primary-light);
            margin: 0 6px 20px 44px;
            padding: 2px 0 2px 20px;
            color: var(--mk-text);
            max-width: 680px;
        }

        .faq-a p {
            margin-bottom: 8px;
        }

        .faq-a[hidden] {
            display: none;
        }

        /* ---------- 底部轻 CTA ---------- */
        .page-cta {
            background: linear-gradient(135deg, var(--mk-dark) 0%, #5D4138 100%);
            color: #fff;
        }

        .page-cta .cta-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
            flex-wrap: wrap;
        }

        .page-cta h2 {
            color: #fff;
            font-size: clamp(1.5rem, 3vw, 2.2rem);
            margin-bottom: 10px;
        }

        .page-cta p {
            color: rgba(255, 255, 255, .72);
            margin-bottom: 0;
            max-width: 600px;
        }

        .page-cta .cta-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        /* ---------- 页脚 ---------- */
        .mt-footer {
            background: var(--mk-dark);
            color: #D8D2CC;
        }

        .footer-top {
            padding: 56px 0 34px;
            position: relative;
        }

        .footer-top::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            max-width: 1100px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr .9fr 1fr 1.1fr;
            gap: 36px;
        }

        .footer-logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .footer-logo .brand-mark {
            background: rgba(255, 255, 255, .14);
            box-shadow: none;
            color: #fff;
        }

        .footer-logo .brand-copy strong {
            color: #fff;
        }

        .footer-logo .brand-copy small {
            color: rgba(255, 255, 255, .55);
        }

        .footer-brand p {
            font-size: .95rem;
            color: #B9B0A9;
            line-height: 1.9;
            margin: 20px 0 0;
            max-width: 340px;
        }

        .footer-title {
            color: #fff;
            font-size: 1.05rem;
            font-weight: 700;
            margin-bottom: 22px;
        }

        .footer-title::after {
            content: "";
            display: block;
            width: 18px;
            height: 2px;
            background: var(--mk-primary-light);
            margin-top: 8px;
            border-radius: 2px;
        }

        .footer-grid ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .footer-grid ul li {
            margin-bottom: 10px;
        }

        .footer-grid ul a {
            color: #D8D2CC;
            font-size: .95rem;
            line-height: 1.7;
            display: inline-flex;
            align-items: center;
            transition: color .2s ease, transform .2s ease;
        }

        .footer-grid ul a:hover {
            color: #fff;
            transform: translateX(4px);
        }

        .footer-contact {
            display: grid;
            gap: 12px;
        }

        .footer-contact p {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: .92rem;
            color: #C6BEB8;
            margin-bottom: 0;
            line-height: 1.6;
        }

        .footer-contact i {
            color: var(--mk-primary-light);
            width: 22px;
            text-align: center;
            flex: 0 0 22px;
        }

        .form-privacy {
            line-height: 1.7;
            color: #A49A92 !important;
            font-size: .84rem;
        }

        .mt-footer .btn-mk-primary {
            background: var(--mk-primary);
            border-color: var(--mk-primary);
            color: #fff;
            padding: .72rem 1.6rem;
        }

        .mt-footer .btn-mk-primary:hover {
            background: #935849;
            border-color: #935849;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, .1);
            padding: 22px 0 30px;
        }

        .footer-bottom .wrap {
            font-size: .88rem;
            color: rgba(255, 255, 255, .5);
            display: flex;
            justify-content: center;
            text-align: center;
        }

        /* ---------- 图片兜底 ---------- */
        .img-fallback {
            background: var(--mk-primary-soft);
            position: relative;
        }

        .img-fallback::before {
            content: "mk";
            color: var(--mk-primary-light);
            font-size: 2.3rem;
            font-weight: 800;
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ---------- 响应式：平板与窄屏 ---------- */
        @media (max-width: 1199.98px) {
            .principle-card {
                padding: 28px 22px;
            }
        }

        @media (max-width: 991.98px) {
            .category-hero {
                min-height: 390px;
                padding: 72px 0 60px;
            }

            .story-grid {
                grid-template-columns: 1fr;
                gap: 44px;
            }

            .story-media__photo {
                max-height: 560px;
            }

            .journey-layout {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .journey-intro {
                position: static;
            }

            .proof-grid {
                grid-template-columns: 1fr;
                gap: 34px;
            }

            .principle-list {
                flex-wrap: wrap;
            }

            .principle-card {
                flex: 1 1 calc(50% - 24px);
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 34px;
            }
        }

        @media (max-width: 767.98px) {
            .hero-actions .btn-mk-light,
            .hero-actions .btn-mk-outline {
                padding-left: 24px;
                padding-right: 24px;
            }

            .story-note {
                position: relative;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                margin-top: 16px;
                border-radius: 14px;
            }

            .principle-list {
                display: grid;
                grid-template-columns: 1fr;
                gap: 0;
            }

            .principle-card {
                width: 100%;
            }

            .principle-card:nth-child(2),
            .principle-card:nth-child(3) {
                margin-top: 16px;
            }

            .proof-stat .stat-num {
                font-size: 1.5rem;
                min-width: 68px;
            }

            .faq-panel {
                padding: 4px 16px;
            }

            .faq-a {
                margin-left: 18px;
                margin-right: 0;
                padding-left: 14px;
            }

            .footer-grid {
                grid-template-columns: 1fr;
            }

            .category-hero {
                padding-top: 58px;
                padding-bottom: 52px;
            }

            .wrap {
                padding-left: 16px;
                padding-right: 16px;
            }

            .page-cta .cta-box {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (max-width: 420px) {
            .brand-copy small {
                display: none;
            }

            .site-header .header-inner {
                min-height: 68px;
            }

            .mobile-drawer {
                top: 68px;
            }

            .hero-breadcrumb {
                font-size: .84rem;
            }

            .site-bottom-tab .tab-item {
                font-size: .72rem;
            }

            .site-bottom-tab .tab-item i {
                font-size: 1rem;
            }

            .footer-bottom .wrap {
                font-size: .82rem;
                line-height: 1.7;
            }
        }

/* roulang page: category4 */
:root {
            --mk-rose: #C89C94;
            --mk-rose-deep: #A66A5C;
            --mk-ink: #2E2420;
            --mk-ink-soft: #47332C;
            --mk-bg: #FAF6F2;
            --mk-card: #FFFFFF;
            --mk-jade: #3E5F57;
            --mk-gold: #BE9365;
            --mk-text: #5C534E;
            --mk-weak: #9B8F87;
            --mk-border: rgba(166, 106, 92, 0.16);
            --mk-shadow: 0 10px 30px rgba(46, 36, 32, 0.08);
            --mk-shadow-hover: 0 14px 36px rgba(46, 36, 32, 0.13);
            --mk-radius-lg: 20px;
            --mk-radius-md: 14px;
            --mk-radius-sm: 8px;
            --mk-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", sans-serif;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 92px;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background: var(--mk-bg);
            color: var(--mk-text);
            font-family: var(--mk-font);
            line-height: 1.8;
            -webkit-font-smoothing: antialiased;
        }

        ul,
        ol {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
        }

        img {
            max-width: 100%;
            display: block;
        }

        p {
            margin: 0 0 1rem;
        }

        h1,
        h2,
        h3,
        h4 {
            margin: 0;
            color: var(--mk-ink);
            font-weight: 700;
            line-height: 1.3;
            letter-spacing: 0;
        }

        .wrap {
            max-width: 1200px;
            margin: 0 auto;
            padding-left: 24px;
            padding-right: 24px;
        }

        .skip-link {
            position: absolute;
            left: -999px;
            top: 12px;
            background: var(--mk-ink);
            color: #fff;
            padding: .7rem 1.2rem;
            border-radius: 999px;
            z-index: 2000;
        }

        .skip-link:focus {
            left: 16px;
            color: #fff;
            box-shadow: 0 0 0 3px rgba(200, 156, 148, .55);
        }

        a:focus-visible,
        button:focus-visible {
            outline: 3px solid rgba(200, 156, 148, .55);
            outline-offset: 3px;
            box-shadow: 0 0 0 5px rgba(200, 156, 148, .2);
            border-radius: 6px;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 1030;
            background: rgba(250, 246, 242, .92);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(46, 36, 32, .07);
        }

        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 76px;
            gap: 24px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            color: var(--mk-ink);
        }

        .brand:hover {
            color: var(--mk-ink);
        }

        .brand-mark {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: var(--mk-ink);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: 800;
            letter-spacing: .01em;
            flex: 0 0 auto;
        }

        .brand-copy {
            display: grid;
            line-height: 1.25;
        }

        .brand-copy strong {
            font-size: 1.08rem;
            font-weight: 800;
            letter-spacing: .02em;
        }

        .brand-copy small {
            color: var(--mk-weak);
            font-size: .78rem;
            font-weight: 400;
            margin-top: 2px;
        }

        .site-nav ul {
            display: flex;
            align-items: center;
            gap: clamp(18px, 2vw, 34px);
        }

        .site-nav a {
            display: inline-block;
            position: relative;
            color: var(--mk-text);
            font-size: .96rem;
            font-weight: 500;
            padding: 8px 2px;
            border-bottom: 2px solid transparent;
        }

        .site-nav a:hover {
            color: var(--mk-ink);
            border-bottom-color: rgba(166, 106, 92, .55);
        }

        .site-nav a.active {
            color: var(--mk-rose-deep);
            font-weight: 600;
            border-bottom-color: var(--mk-rose-deep);
        }

        .mobile-tabbar {
            display: none;
        }

        .member-hero {
            position: relative;
            color: #fff;
            overflow: hidden;
            background:
                linear-gradient(105deg, rgba(46, 36, 32, .94) 0%, rgba(71, 51, 44, .78) 46%, rgba(166, 106, 92, .4) 100%),
                url("/assets/images/backpic/back-2.png") center center / cover no-repeat;
            background-color: var(--mk-ink);
        }

        .member-hero .hero-inner {
            padding: clamp(3.2rem, 6vw, 5rem) 0 clamp(2.4rem, 4vw, 3.8rem);
        }

        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, .12);
            border: 1px solid rgba(255, 255, 255, .32);
            border-radius: 999px;
            padding: .42rem 1rem;
            font-size: .88rem;
            letter-spacing: .04em;
            color: #fff;
            margin-bottom: 1.1rem;
        }

        .hero-eyebrow i {
            color: #f0c7b6;
        }

        .member-hero h1 {
            color: #fff;
            font-size: clamp(2.7rem, 5vw, 4.1rem);
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: .5rem;
        }

        .hero-lead {
            color: rgba(255, 255, 255, .88);
            font-size: 1.08rem;
            max-width: 720px;
            margin: 0 0 1.7rem;
            line-height: 1.9;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .btn {
            border-radius: 999px;
            font-weight: 600;
            letter-spacing: .02em;
            padding: .9rem 2rem;
            border: 1px solid transparent;
            transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .btn-mk-primary {
            background: var(--mk-ink);
            color: #fff;
            border-color: var(--mk-ink);
        }

        .btn-mk-primary:hover {
            background: #171210;
            color: #fff;
            border-color: #171210;
            box-shadow: 0 12px 26px rgba(46, 36, 32, .2);
        }

        .btn-outline-light {
            background: rgba(255, 255, 255, .12);
            border-color: rgba(255, 255, 255, .58);
            color: #fff;
        }

        .btn-outline-light:hover {
            background: #fff;
            border-color: #fff;
            color: var(--mk-ink);
        }

        .hero-quickfacts {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem 1.7rem;
            margin-top: 1.7rem;
            padding-top: 1.2rem;
            border-top: 1px solid rgba(255, 255, 255, .18);
            color: rgba(255, 255, 255, .82);
            font-size: .92rem;
            max-width: 720px;
        }

        .hero-quickfacts span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        .hero-quickfacts i {
            color: #ecc0ae;
        }

        .mk-section {
            padding: clamp(3.5rem, 7vw, 5.5rem) 0;
        }

        .bg-soft {
            background: #F3ECE6;
        }

        .section-head {
            max-width: 820px;
            margin-bottom: 2.8rem;
        }

        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: .85rem;
            color: var(--mk-rose-deep);
            background: rgba(166, 106, 92, .1);
            padding: .38rem .95rem;
            border-radius: 999px;
            letter-spacing: .03em;
        }

        .section-head h2 {
            font-size: clamp(1.8rem, 3vw, 2.4rem);
            font-weight: 800;
            margin: .9rem 0 .7rem;
        }

        .section-lead {
            color: var(--mk-text);
            font-size: 1rem;
            margin: 0;
            line-height: 1.9;
        }

        .value-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 24px;
            align-items: start;
        }

        .value-card {
            grid-column: span 4;
            background: var(--mk-card);
            border: 1px solid var(--mk-border);
            border-radius: var(--mk-radius-lg);
            padding: 2rem 1.8rem 1.9rem;
            box-shadow: var(--mk-shadow);
            overflow: hidden;
            min-height: 240px;
        }

        .value-card:nth-child(2) {
            transform: translateY(26px);
            background: var(--mk-ink);
            border-color: var(--mk-ink);
            color: #D8D2CC;
        }

        .value-card:nth-child(3) {
            transform: translateY(10px);
        }

        .value-no {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: rgba(166, 106, 92, .12);
            color: var(--mk-rose-deep);
            font-weight: 800;
            font-size: .9rem;
            margin-bottom: 1.2rem;
        }

        .value-card h3 {
            font-size: 1.25rem;
            color: var(--mk-ink);
            font-weight: 700;
            margin-bottom: .75rem;
        }

        .value-card p {
            color: var(--mk-text);
            margin: 0;
            line-height: 1.85;
        }

        .value-card:nth-child(2) .value-no {
            background: rgba(255, 255, 255, .16);
            color: #F2D5C7;
        }

        .value-card:nth-child(2) h3 {
            color: #fff;
        }

        .value-card:nth-child(2) p {
            color: rgba(255, 255, 255, .74);
        }

        .channel-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        .channel-card {
            background: var(--mk-card);
            border: 1px solid var(--mk-border);
            border-radius: var(--mk-radius-lg);
            overflow: hidden;
            box-shadow: var(--mk-shadow);
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: box-shadow .3s ease, transform .3s ease;
        }

        .channel-card:hover {
            box-shadow: var(--mk-shadow-hover);
            transform: translateY(-4px);
        }

        .channel-media {
            height: 190px;
            background: #EDE2DC;
            overflow: hidden;
            position: relative;
        }

        .channel-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s ease;
        }

        .channel-card:hover .channel-media img {
            transform: scale(1.04);
        }

        .channel-body {
            padding: 1.45rem 1.35rem 1.5rem;
            display: flex;
            flex-direction: column;
            gap: .75rem;
            flex: 1;
        }

        .channel-body h3 {
            font-size: 1.12rem;
            font-weight: 700;
            color: var(--mk-ink);
            margin: 0;
        }

        .channel-body p {
            color: var(--mk-text);
            font-size: .92rem;
            line-height: 1.8;
            margin: 0;
            flex: 1;
        }

        .channel-num {
            color: var(--mk-rose-deep);
            font-size: .82rem;
            font-weight: 700;
            letter-spacing: .08em;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .channel-num::before {
            content: "·";
            color: var(--mk-rose);
            font-size: 1.3rem;
        }

        .section-note {
            margin-top: 1.9rem;
            color: var(--mk-weak);
            font-size: .92rem;
        }

        .level-section {
            background:
                linear-gradient(135deg, rgba(166, 106, 92, .12), transparent 40%),
                var(--mk-ink);
            color: rgba(255, 255, 255, .82);
        }

        .level-wrap {
            display: grid;
            grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
            gap: clamp(2rem, 5vw, 5rem);
            align-items: center;
        }

        .level-intro .section-kicker {
            background: rgba(255, 255, 255, .09);
            color: #F1CDBF;
        }

        .level-intro h2 {
            color: #fff;
            font-size: clamp(1.7rem, 3vw, 2.3rem);
            margin: .9rem 0 .7rem;
            font-weight: 800;
        }

        .level-intro p {
            color: rgba(255, 255, 255, .7);
            margin-bottom: 1rem;
            line-height: 1.9;
        }

        .level-intro .level-footnote {
            color: rgba(255, 255, 255, .48);
            font-size: .88rem;
            line-height: 1.7;
            border-left: 2px solid rgba(255, 255, 255, .22);
            padding-left: .8rem;
        }

        .level-list {
            display: grid;
            gap: 0;
            background: rgba(255, 255, 255, .045);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--mk-radius-lg);
            padding: .6rem 1.3rem;
        }

        .level-item {
            display: grid;
            grid-template-columns: auto 1fr;
            column-gap: 18px;
            padding: 1.35rem .2rem;
            border-bottom: 1px solid rgba(255, 255, 255, .1);
        }

        .level-item:last-child {
            border-bottom: 0;
        }

        .level-index {
            color: var(--mk-gold);
            font-size: .88rem;
            font-weight: 800;
            width: 42px;
            height: 42px;
            border: 1px solid rgba(190, 147, 101, .5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .level-item h3 {
            color: #fff;
            font-size: 1.05rem;
            font-weight: 700;
        }

        .level-item p {
            color: rgba(255, 255, 255, .62);
            font-size: .9rem;
            line-height: 1.7;
            margin: .25rem 0 0;
        }

        .journey-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            counter-reset: journey;
        }

        .journey-step {
            background: var(--mk-card);
            border: 1px solid var(--mk-border);
            border-radius: var(--mk-radius-lg);
            box-shadow: var(--mk-shadow);
            padding: 1.6rem 1.5rem 1.4rem;
            position: relative;
            overflow: hidden;
        }

        .journey-step::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, var(--mk-rose), var(--mk-gold));
            opacity: .5;
        }

        .journey-no {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--mk-rose-deep);
            background: rgba(166, 106, 92, .11);
            border-radius: 14px;
            min-width: 46px;
            height: 40px;
            font-weight: 800;
            margin-bottom: 1rem;
        }

        .journey-step h3 {
            font-size: 1.08rem;
            color: var(--mk-ink);
            margin-bottom: .45rem;
            font-weight: 700;
        }

        .journey-step p {
            color: var(--mk-text);
            font-size: .92rem;
            line-height: 1.75;
            margin: 0;
        }

        .faq-sect {
            background: var(--mk-bg);
        }

        .faq-panel {
            max-width: 920px;
            margin: 0 auto;
        }

        .faq-item {
            background: var(--mk-card);
            border: 1px solid var(--mk-border);
            border-radius: 18px;
            padding: 1.3rem 1.6rem 1.35rem;
            margin-bottom: 16px;
            box-shadow: 0 4px 14px rgba(46, 36, 32, .04);
        }

        .faq-question {
            width: 100%;
            border: 0;
            background: transparent;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 12px;
            min-height: 48px;
            text-align: left;
            font-weight: 600;
            font-size: 1.02rem;
            color: var(--mk-ink);
            border-radius: 10px;
        }

        .faq-q-orbit {
            width: 28px;
            height: 28px;
            flex: 0 0 auto;
            border-radius: 50%;
            background: rgba(166, 106, 92, .1);
            color: var(--mk-rose-deep);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: .78rem;
            font-weight: 800;
        }

        .faq-question h3 {
            font-size: 1.02rem;
            font-weight: 700;
            color: var(--mk-ink);
            margin: 0;
            line-height: 1.5;
        }

        .faq-answer {
            margin-left: 40px;
            padding-left: 16px;
            border-left: 2px solid rgba(166, 106, 92, .4);
            color: var(--mk-text);
            font-size: .93rem;
            line-height: 1.85;
            padding-top: .1rem;
        }

        .faq-answer p {
            margin: 0;
        }

        .faq-more-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid rgba(166, 106, 92, .3);
            background: transparent;
            color: var(--mk-rose-deep);
            border-radius: 999px;
            padding: .7rem 1.35rem;
            font-weight: 600;
            margin-top: .6rem;
            transition: background-color .25s ease, color .25s ease, transform .25s ease;
        }

        .faq-more-btn:hover {
            background: rgba(166, 106, 92, .09);
            transform: translateY(-2px);
        }

        .cta-lite {
            text-align: center;
            padding: clamp(2.8rem, 5vw, 4.5rem) 0 clamp(3.2rem, 6vw, 5rem);
        }

        .cta-lite h2 {
            font-size: clamp(1.6rem, 3vw, 2.2rem);
            font-weight: 800;
            margin-bottom: .6rem;
        }

        .cta-lite p {
            color: var(--mk-text);
            margin: 0 auto 1.7rem;
            max-width: 620px;
        }

        .cta-lite .btn {
            margin: 0 6px 8px;
        }

        .btn-outline-mk {
            border-color: rgba(46, 36, 32, .26);
            color: var(--mk-ink);
            background: transparent;
        }

        .btn-outline-mk:hover {
            background: rgba(46, 36, 32, .07);
            border-color: rgba(46, 36, 32, .42);
            color: var(--mk-ink);
        }

        .text-link-arrow {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: var(--mk-rose-deep);
            font-weight: 600;
            margin-top: .5rem;
        }

        .text-link-arrow i {
            transition: transform .25s ease;
        }

        .text-link-arrow:hover i {
            transform: translateX(4px);
        }

        .mt-footer {
            background: var(--mk-ink);
            color: #D8D2CC;
            border-top: 0;
        }

        .footer-top {
            padding-top: clamp(3rem, 5vw, 4.5rem);
            padding-bottom: 3rem;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr .8fr 1fr 1.35fr;
            gap: 40px;
        }

        .mt-footer .brand {
            color: #fff;
        }

        .mt-footer .brand:hover {
            color: #fff;
        }

        .mt-footer .brand-mark {
            background: var(--mk-rose-deep);
            color: #fff;
        }

        .mt-footer .brand-copy small {
            color: rgba(255, 255, 255, .58);
        }

        .footer-brand p {
            color: rgba(255, 255, 255, .6);
            font-size: .9rem;
            margin: 1.1rem 0 0;
            line-height: 1.85;
            max-width: 320px;
        }

        .footer-title {
            font-size: 1rem;
            color: #fff;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .footer-top ul li {
            margin-bottom: .55rem;
        }

        .footer-top ul a {
            color: rgba(255, 255, 255, .66);
            font-size: .9rem;
        }

        .footer-top ul a:hover {
            color: #fff;
        }

        .footer-contact p {
            color: rgba(255, 255, 255, .6);
            font-size: .9rem;
            margin-bottom: .7rem;
            display: flex;
            gap: 8px;
            align-items: flex-start;
        }

        .footer-contact i {
            color: var(--mk-rose);
            margin-top: 5px;
            width: 16px;
            text-align: center;
        }

        .mt-footer .btn-mk-primary {
            background: var(--mk-rose-deep);
            color: #fff;
            border-color: var(--mk-rose-deep);
            padding: .72rem 1.6rem;
        }

        .mt-footer .btn-mk-primary:hover {
            background: #8f5145;
            border-color: #8f5145;
            color: #fff;
        }

        .form-privacy {
            font-size: .82rem;
            color: rgba(255, 255, 255, .5) !important;
            margin-bottom: 1rem;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, .1);
            padding: 1.2rem 0;
        }

        .footer-bottom .wrap {
            color: rgba(255, 255, 255, .42);
            font-size: .86rem;
            text-align: center;
        }

        @media (max-width: 1199px) {
            .channel-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .value-card {
                grid-column: span 4;
                min-height: auto;
            }
        }

        @media (max-width: 991px) {
            .site-nav {
                display: none;
            }

            .mobile-tabbar {
                display: flex;
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 1040;
                background: rgba(255, 255, 255, .96);
                -webkit-backdrop-filter: blur(14px);
                backdrop-filter: blur(14px);
                border-top: 1px solid rgba(46, 36, 32, .1);
                height: calc(64px + env(safe-area-inset-bottom));
                padding-bottom: env(safe-area-inset-bottom);
                align-items: stretch;
            }

            .mobile-tabbar a {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 3px;
                color: var(--mk-weak);
                font-size: .7rem;
                border-top: 2px solid transparent;
            }

            .mobile-tabbar a:hover {
                color: var(--mk-rose-deep);
            }

            .mobile-tabbar a.active {
                color: var(--mk-rose-deep);
                border-top-color: var(--mk-rose-deep);
            }

            .mobile-tabbar i {
                font-size: 1.1rem;
            }

            body {
                padding-bottom: calc(64px + env(safe-area-inset-bottom));
            }

            .mk-section {
                padding: 3.2rem 0;
            }

            .value-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .value-card,
            .value-card:nth-child(2),
            .value-card:nth-child(3) {
                grid-column: span 2;
                transform: none;
                min-height: auto;
            }

            .level-wrap {
                grid-template-columns: 1fr;
            }

            .journey-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 32px;
            }
        }

        @media (max-width: 767px) {
            .wrap {
                padding-left: 16px;
                padding-right: 16px;
            }

            .header-inner {
                justify-content: center;
            }

            .member-hero h1 {
                font-size: 2.6rem;
            }

            .hero-quickfacts {
                display: grid;
                grid-template-columns: 1fr;
                gap: .4rem;
            }

            .value-grid {
                grid-template-columns: 1fr;
            }

            .value-card,
            .value-card:nth-child(2),
            .value-card:nth-child(3) {
                grid-column: auto;
                transform: none;
            }

            .channel-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .channel-media {
                height: 205px;
            }

            .journey-grid {
                grid-template-columns: 1fr;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 28px;
            }

            .faq-item {
                padding: 1.1rem 1rem;
            }

            .faq-answer {
                margin-left: 30px;
                padding-left: 12px;
            }

            .faq-question h3 {
                font-size: .96rem;
            }

            .cta-lite .btn {
                display: block;
                width: 100%;
                max-width: 360px;
                margin-left: auto;
                margin-right: auto;
            }
        }

        @media (max-width: 520px) {
            .member-hero .hero-inner {
                padding-top: 2.8rem;
                padding-bottom: 2.2rem;
            }

            .member-hero h1 {
                font-size: 2.35rem;
            }

            .hero-actions {
                flex-direction: column;
            }

            .hero-actions .btn {
                width: 100%;
                padding: .8rem 1.5rem;
            }
        }