/* roulang page: index */
:root{
      --ink:#191c1b;
      --green:#123b35;
      --green-2:#1d5148;
      --lime:#d7f36a;
      --paper:#f3f0e8;
      --white:#fffdf7;
      --muted:#69736e;
      --line:#d9ddd3;
      --orange:#c76a45;
      --shadow:0 20px 55px rgba(18,59,53,.12);
      --radius:16px;
      --ease:all .22s ease;
    }
    *,*:before,*:after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.8}
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    img{display:block;max-width:100%;height:auto}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid var(--lime);outline-offset:3px}
    .container{width:min(1180px,calc(100% - 48px));margin:0 auto}
    .notice{background:var(--ink);color:#f7f8ef;font-size:13px}
    .notice-inner{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:20px}
    .notice-status{display:flex;align-items:center;gap:9px;white-space:nowrap}
    .status-dot{width:7px;height:7px;background:var(--lime);border-radius:50%;box-shadow:0 0 0 4px rgba(215,243,106,.12)}
    .notice a{color:var(--lime);white-space:nowrap}
    .notice a:hover{text-decoration:underline}
    .site-header{background:rgba(243,240,232,.94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
    .nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}
    .brand{display:flex;align-items:center;gap:12px;min-width:235px}
    .brand-mark{width:38px;height:38px;border-radius:10px;background:var(--green);color:var(--lime);display:grid;place-items:center;font-weight:900;font-size:18px;letter-spacing:-1px}
    .brand-title{font-size:18px;font-weight:800;line-height:1.2}
    .brand-sub{display:block;color:var(--muted);font-size:11px;font-weight:500;margin-top:3px}
    .nav-links{display:flex;align-items:center;gap:27px;margin-left:auto}
    .nav-links a{font-size:14px;color:#53605a;position:relative;padding:26px 0}
    .nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:17px;height:2px;background:var(--green);transition:var(--ease)}
    .nav-links a:hover,.nav-links a.active{color:var(--green);font-weight:700}
    .nav-links a:hover:after,.nav-links a.active:after{right:0}
    .nav-action,.btn-primary{background:var(--green);color:#fffdf7;border:1px solid var(--green);padding:11px 18px;border-radius:8px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:var(--ease)}
    .nav-action:hover,.btn-primary:hover{background:var(--green-2);transform:translateY(-2px);box-shadow:0 8px 18px rgba(18,59,53,.18)}
    .menu-toggle{display:none;border:0;background:transparent;color:var(--green);font-size:25px}
    .hero{background:var(--green);color:var(--white);position:relative;overflow:hidden}
    .hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,59,53,.98) 12%,rgba(18,59,53,.82) 53%,rgba(18,59,53,.42)),url("/assets/images/backpic/back-1.webp") center/cover}
    .hero-inner{position:relative;min-height:620px;display:grid;grid-template-columns:7fr 5fr;align-items:center;gap:70px;padding:90px 0 72px}
    .eyebrow,.section-kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#aebeb5;font-weight:800;margin-bottom:22px}
    .eyebrow span{display:inline-block;color:var(--lime);margin-right:8px}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(40px,5vw,64px);line-height:1.14;letter-spacing:-.055em;max-width:700px;margin-bottom:24px}
    .hero-copy{font-size:18px;line-height:1.85;color:#dbe4dc;max-width:620px;margin-bottom:34px}
    .hero-buttons{display:flex;gap:13px;flex-wrap:wrap}
    .btn-lime{background:var(--lime);color:var(--ink);border:1px solid var(--lime);padding:12px 20px;border-radius:8px;font-weight:800;display:inline-flex;align-items:center;gap:8px;transition:var(--ease)}
    .btn-lime:hover{background:#e5fb91;transform:translateY(-2px)}
    .btn-outline{border:1px solid rgba(255,255,255,.42);color:#fff;padding:12px 20px;border-radius:8px;display:inline-flex;align-items:center;gap:8px;transition:var(--ease)}
    .btn-outline:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
    .hero-visual{position:relative;min-height:370px}
    .hero-image{position:absolute;width:78%;height:350px;right:0;top:10px;object-fit:cover;border-radius:18px;box-shadow:var(--shadow);border:8px solid rgba(255,255,255,.1)}
    .hero-note{position:absolute;left:0;bottom:0;background:var(--lime);color:var(--ink);width:225px;padding:19px;border-radius:12px;font-size:13px;line-height:1.6;box-shadow:0 15px 35px rgba(0,0,0,.2)}
    .hero-note strong{font-size:25px;display:block;line-height:1.2;margin-bottom:4px}
    .index-strip{background:var(--white);border-bottom:1px solid var(--line)}
    .index-list{display:grid;grid-template-columns:repeat(4,1fr)}
    .index-item{padding:23px 25px;border-right:1px solid var(--line);display:flex;gap:14px;align-items:flex-start}
    .index-item:first-child{padding-left:0}
    .index-item:last-child{border:0}
    .index-no{font-weight:900;color:var(--orange);font-size:13px}
    .index-item strong{display:block;font-size:15px;margin-bottom:2px}
    .index-item span{display:block;color:var(--muted);font-size:12px;line-height:1.5}
    .section{padding:105px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:46px}
    .section-kicker{color:var(--orange);margin-bottom:12px}
    h2{font-size:clamp(30px,4vw,44px);line-height:1.2;letter-spacing:-.04em;margin-bottom:12px}
    .section-intro{color:var(--muted);max-width:550px;margin:0}
    .text-link{color:var(--green);font-weight:800;border-bottom:1px solid var(--green);padding-bottom:3px;white-space:nowrap}
    .text-link:hover{color:var(--orange);border-color:var(--orange)}
    .intro-grid{display:grid;grid-template-columns:2fr 3fr;gap:90px;align-items:start}
    .chapter{font-size:72px;color:var(--green);font-weight:900;line-height:1;letter-spacing:-.08em}
    .chapter small{display:block;font-size:12px;letter-spacing:.12em;color:var(--orange);font-weight:800;margin-top:15px}
    .intro-content h3{font-size:25px;line-height:1.35;margin-bottom:14px}
    .intro-content p{color:var(--muted);max-width:680px}
    .points{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 30px;margin:28px 0 0;padding:0;list-style:none}
    .points li{border-top:1px solid var(--line);padding:14px 0;font-size:14px}
    .points li:before{content:"✓";color:var(--orange);font-weight:900;margin-right:9px}
    .category-area{background:#e8e7dc}
    .category-layout{display:grid;grid-template-columns:260px 1fr;gap:42px}
    .category-nav{border-left:2px solid var(--green);padding-left:22px}
    .category-nav span{display:block;color:var(--muted);font-size:12px;margin-bottom:12px}
    .category-nav a{display:block;font-size:22px;font-weight:800;color:var(--green);margin-bottom:18px}
    .category-nav p{color:var(--muted);font-size:14px}
    .feature-card{background:var(--white);border:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;min-height:320px;border-radius:var(--radius);overflow:hidden;transition:var(--ease)}
    .feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .feature-card img{width:100%;height:100%;min-height:320px;object-fit:cover}
    .feature-copy{padding:37px 35px;display:flex;flex-direction:column;align-items:flex-start}
    .tag{display:inline-block;background:var(--lime);color:var(--ink);font-size:12px;font-weight:800;padding:4px 9px;border-radius:4px;margin-bottom:20px}
    .feature-copy h3{font-size:28px;line-height:1.35;margin-bottom:13px}
    .feature-copy p{color:var(--muted);font-size:14px;margin-bottom:22px}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .step{padding:28px 22px 28px 0;margin-right:22px;border-right:1px solid var(--line)}
    .step:last-child{border:0}
    .step-num{color:var(--orange);font-size:14px;font-weight:900;margin-bottom:20px}
    .step h3{font-size:18px;margin-bottom:8px}
    .step p{color:var(--muted);font-size:13px;line-height:1.7;margin:0}
    .updates{background:var(--ink);color:var(--white)}
    .updates .section-kicker{color:var(--lime)}
    .updates .section-intro{color:#aebbb3}
    .update-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:22px}
    .update-major,.update-list{border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);overflow:hidden}
    .update-major{display:grid;grid-template-columns:1fr 1fr}
    .update-major img{height:100%;min-height:280px;width:100%;object-fit:cover}
    .update-copy{padding:30px}
    .update-copy .tag{background:var(--orange);color:#fff}
    .update-copy h3{font-size:25px;line-height:1.35}
    .update-copy p,.update-row p{color:#aebbb3;font-size:13px}
    .update-row{padding:22px 25px;border-bottom:1px solid rgba(255,255,255,.13)}
    .update-row:last-child{border-bottom:0}
    .update-meta{color:var(--lime);font-size:12px;font-weight:800;margin-bottom:7px}
    .update-row h3{font-size:17px;margin-bottom:4px}
    .faq-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:90px}
    .faq-side p{color:var(--muted);max-width:360px}
    .faq-side .risk{border-left:3px solid var(--orange);padding:13px 18px;background:#ebe8dd;font-size:13px;color:#53605a;margin-top:25px}
    details{border-top:1px solid var(--line);padding:19px 0}
    details:last-child{border-bottom:1px solid var(--line)}
    summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:20px}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"＋";color:var(--orange);font-size:20px;line-height:1}
    details[open] summary:after{content:"−"}
    details p{color:var(--muted);font-size:14px;margin:13px 30px 0 0}
    .feedback{background:var(--green);color:var(--white);padding:80px 0}
    .feedback-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
    .feedback h2{max-width:440px}
    .feedback-copy p{color:#c8d4cc;max-width:460px}
    .feedback-note{font-size:13px;color:#aebeb5;border-top:1px solid rgba(255,255,255,.25);padding-top:18px;margin-top:30px}
    .form{background:var(--white);color:var(--ink);padding:27px;border-radius:var(--radius)}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
    .field{display:flex;flex-direction:column;gap:6px}
    .field.full{grid-column:1/-1}
    .field label{font-size:12px;font-weight:800;color:#53605a}
    .field input,.field select,.field textarea{border:1px solid var(--line);background:#fbfaf4;border-radius:7px;padding:11px 12px;color:var(--ink);min-width:0}
    .field textarea{min-height:100px;resize:vertical}
    .check{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--muted);margin:15px 0}
    .check input{margin-top:6px;accent-color:var(--green)}
    .form .btn-primary{width:100%}
    .site-footer{background:#101413;color:#cbd3cc;padding:55px 0 25px}
    .footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:38px;padding-bottom:45px;border-bottom:1px solid rgba(255,255,255,.13)}
    .footer-brand .brand-title{color:#fff}
    .footer-brand p{color:#89958e;font-size:13px;max-width:270px;margin-top:15px}
    .footer-col h3{color:#fff;font-size:14px;margin-bottom:14px}
    .footer-col a{display:block;color:#89958e;font-size:13px;margin:8px 0}
    .footer-col a:hover{color:var(--lime);padding-left:3px}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:22px;color:#78837e;font-size:12px}
    @media(max-width:1024px){
      .nav-links{gap:15px}.nav-action{display:none}
      .hero-inner{gap:35px}.intro-grid,.faq-layout{gap:45px}
    }
    @media(max-width:768px){
      .container{width:min(100% - 40px,620px)}
      .notice-inner{min-height:42px}.notice-inner a{display:none}
      .nav{height:68px}.brand{min-width:0}.menu-toggle{display:block}
      .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:12px 20px 20px;flex-direction:column;align-items:stretch;gap:0}
      .nav-links.open{display:flex}.nav-links a{padding:12px 0}.nav-links a:after{bottom:7px}
      .hero-inner{display:flex;flex-direction:column;align-items:stretch;min-height:auto;padding:70px 0 55px;gap:35px}
      h1{font-size:40px}.hero-copy{font-size:16px}
      .hero-visual{min-height:300px}.hero-image{height:285px;width:85%}
      .index-list{grid-template-columns:1fr 1fr}.index-item{padding:18px 12px;border-bottom:1px solid var(--line)}.index-item:first-child{padding-left:12px}
      .section{padding:72px 0}.section-head{display:block;margin-bottom:30px}.section-head .text-link{display:inline-block;margin-top:18px}
      .intro-grid,.category-layout,.update-layout,.faq-layout,.feedback-grid{grid-template-columns:1fr;gap:30px}
      .chapter{font-size:54px}.points{grid-template-columns:1fr}
      .feature-card,.update-major{grid-template-columns:1fr}.feature-card img{height:220px;min-height:0}.feature-copy{padding:28px}
      .steps{grid-template-columns:1fr 1fr}.step{border-bottom:1px solid var(--line);padding:22px 16px 22px 0;margin-right:16px}
      .update-major img{min-height:220px}.feedback{padding:65px 0}
      .footer-top{grid-template-columns:1fr 1fr;gap:30px}.footer-brand{grid-column:1/-1}
      .footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}
    }
    @media(max-width:520px){
      .hero-buttons a{width:100%}.hero-note{width:190px;padding:14px}.hero-note strong{font-size:21px}
      .index-list{grid-template-columns:1fr}.index-item,.index-item:first-child{padding:14px 0;border-right:0}
      .steps{grid-template-columns:1fr}.step{border-right:0;margin-right:0}
      .form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
      .footer-top{grid-template-columns:1fr}.footer-brand{grid-column:auto}
    }

/* roulang page: category1 */
:root {
      --ink: #191c1b;
      --green: #123b35;
      --green-deep: #0d2c28;
      --lime: #d7f36a;
      --paper: #f3f0e8;
      --warm: #fffdf7;
      --muted: #68716d;
      --line: #d9ddd2;
      --orange: #c76a45;
      --shadow: 0 18px 48px rgba(18, 59, 53, .11);
      --radius: 14px;
      --ease: 220ms ease;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.8;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; transition: color var(--ease), border-color var(--ease), transform var(--ease), background var(--ease); }
    a:hover { color: var(--green); }
    img { display: block; max-width: 100%; }
    button, input, select, textarea { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
    .container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

    .notice-bar {
      background: var(--green-deep);
      color: #e9efe2;
      font-size: 13px;
      letter-spacing: .02em;
    }
    .notice-inner {
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .notice-copy { display: flex; align-items: center; gap: 9px; min-width: 0; }
    .status-dot { width: 7px; height: 7px; background: var(--lime); border-radius: 50%; flex: 0 0 auto; }
    .notice-copy span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .notice-link { color: var(--lime); white-space: nowrap; border-bottom: 1px solid transparent; }
    .notice-link:hover { border-color: var(--lime); }

    .site-header {
      background: rgba(243, 240, 232, .95);
      border-bottom: 1px solid var(--line);
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(12px);
    }
    .header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
    .brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
    .brand-mark {
      width: 42px; height: 42px; display: grid; place-items: center;
      background: var(--green); color: var(--lime); border-radius: 10px;
      font-weight: 900; letter-spacing: .04em;
    }
    .brand-title { display: block; color: var(--green); font-size: 17px; line-height: 1.2; }
    .brand-sub { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; letter-spacing: .04em; }
    .nav-links { display: flex; align-items: center; gap: 25px; margin-left: auto; }
    .nav-links a { color: #59625e; font-size: 14px; padding: 28px 0 25px; border-bottom: 2px solid transparent; white-space: nowrap; }
    .nav-links a:hover, .nav-links a.active { color: var(--green); border-bottom-color: var(--lime); }
    .header-action { background: var(--lime); color: var(--ink); padding: 11px 17px; border-radius: 8px; font-weight: 700; font-size: 13px; white-space: nowrap; }
    .header-action:hover { background: #c8e55b; color: var(--ink); transform: translateY(-2px); }

    .page-hero {
      position: relative;
      min-height: 405px;
      display: flex;
      align-items: center;
      overflow: hidden;
      color: #fffdf7;
      background: var(--green) url("/assets/images/backpic/back-2.webp") center/cover no-repeat;
    }
    .page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,44,40,.97), rgba(18,59,53,.77) 58%, rgba(18,59,53,.45)); }
    .hero-content { position: relative; z-index: 1; padding: 65px 0 76px; max-width: 770px; }
    .crumbs { color: #b8c8bb; font-size: 13px; margin-bottom: 20px; }
    .crumbs a:hover { color: var(--lime); }
    .eyebrow { color: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
    h1, h2, h3, p { margin-top: 0; }
    h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.16; letter-spacing: 0; margin: 12px 0 19px; max-width: 700px; }
    .hero-content > p { color: #dbe3d9; max-width: 680px; font-size: 17px; line-height: 1.9; margin-bottom: 27px; }
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
    .button {
      display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
      padding: 10px 19px; border: 1px solid transparent; border-radius: 8px;
      font-weight: 700; font-size: 14px; cursor: pointer; transition: all var(--ease);
    }
    .button-primary { background: var(--lime); color: var(--ink); }
    .button-primary:hover { color: var(--ink); background: #c7e45b; transform: translateY(-2px); }
    .button-ghost { color: #f8fbf1; border-color: rgba(255,255,255,.42); }
    .button-ghost:hover { color: var(--lime); border-color: var(--lime); transform: translateY(-2px); }

    main { overflow: hidden; }
    .section { padding: 92px 0; }
    .section-head { display: flex; justify-content: space-between; gap: 32px; align-items: end; margin-bottom: 38px; }
    .section-kicker { color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
    h2 { color: var(--green); font-size: clamp(28px, 4vw, 40px); line-height: 1.25; margin: 8px 0 12px; }
    .section-lead { color: var(--muted); max-width: 550px; margin: 0; }
    .guide-layout { display: grid; grid-template-columns: 255px 1fr; gap: 54px; align-items: start; }
    .side-index { position: sticky; top: 110px; border-left: 2px solid var(--line); }
    .side-index a { display: block; padding: 13px 18px; color: var(--muted); font-size: 14px; border-left: 2px solid transparent; margin-left: -2px; }
    .side-index a:hover, .side-index a.active { color: var(--green); border-left-color: var(--orange); background: rgba(215,243,106,.18); }
    .index-label { color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .12em; padding: 0 18px 14px; }
    .guide-list { border-top: 1px solid var(--line); }
    .guide-item {
      display: grid; grid-template-columns: 64px 1fr auto; gap: 23px; align-items: center;
      padding: 27px 0; border-bottom: 1px solid var(--line);
    }
    .item-no { color: var(--orange); font-size: 21px; font-weight: 800; }
    .guide-item h3 { color: var(--green); font-size: 21px; margin: 0 0 6px; }
    .guide-item p { color: var(--muted); font-size: 14px; margin: 0; max-width: 600px; }
    .item-link { color: var(--green); font-size: 13px; font-weight: 800; white-space: nowrap; border-bottom: 1px solid var(--green); padding-bottom: 3px; }
    .item-link:hover { color: var(--orange); border-color: var(--orange); }

    .feature-band { background: var(--warm); padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); display: grid; grid-template-columns: 1.08fr .92fr; gap: 36px; align-items: center; }
    .feature-band img { width: 100%; height: 245px; object-fit: cover; border-radius: 10px; }
    .feature-band h2 { margin-top: 6px; font-size: 31px; }
    .feature-band p { color: var(--muted); max-width: 480px; }
    .tag { display: inline-block; color: var(--green); background: var(--lime); border-radius: 5px; padding: 3px 8px; font-size: 12px; font-weight: 800; }

    .steps-section { background: var(--green); color: #f7f8ef; }
    .steps-section h2 { color: #f7f8ef; }
    .steps-section .section-lead { color: #c8d5c9; }
    .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.28); }
    .step { padding: 27px 24px 8px 0; border-right: 1px solid rgba(255,255,255,.18); margin-right: 25px; }
    .step:last-child { border: 0; margin-right: 0; }
    .step-num { color: var(--lime); font-size: 14px; font-weight: 800; }
    .step h3 { font-size: 18px; margin: 11px 0 7px; }
    .step p { color: #c8d5c9; font-size: 14px; margin: 0; line-height: 1.75; }

    .notice-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; border-top: 1px solid var(--line); }
    .notice-item { padding: 22px 0; border-bottom: 1px solid var(--line); }
    .notice-meta { display: flex; gap: 10px; align-items: center; color: var(--orange); font-size: 12px; font-weight: 700; }
    .notice-item h3 { color: var(--green); font-size: 18px; margin: 8px 0 4px; }
    .notice-item p { color: var(--muted); font-size: 14px; margin: 0; }

    .faq-wrap { max-width: 850px; margin: 0 auto; }
    details { border-top: 1px solid var(--line); padding: 19px 0; }
    details:last-child { border-bottom: 1px solid var(--line); }
    summary { color: var(--green); cursor: pointer; font-weight: 800; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; color: var(--orange); font-size: 22px; line-height: 1; }
    details[open] summary::after { content: "−"; }
    details p { color: var(--muted); font-size: 14px; max-width: 740px; margin: 12px 38px 0 0; }

    .cta { background: var(--lime); padding: 38px 42px; border-radius: var(--radius); display: flex; justify-content: space-between; align-items: center; gap: 28px; }
    .cta h2 { color: var(--ink); font-size: 29px; margin: 0 0 5px; }
    .cta p { margin: 0; color: #435047; }
    .cta .button { background: var(--green); color: #fff; }
    .cta .button:hover { background: var(--green-deep); color: #fff; }

    .site-footer { background: var(--ink); color: #dce3d8; padding-top: 66px; }
    .footer-top { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 44px; padding-bottom: 50px; }
    .footer-brand p { color: #9daaa0; max-width: 310px; font-size: 13px; margin: 18px 0 0; }
    .footer-brand .brand-title { color: #f7f8ef; }
    .footer-brand .brand-sub { color: #a9b6a9; }
    .footer-col h3 { color: var(--lime); font-size: 14px; margin: 4px 0 14px; }
    .footer-col a { display: block; color: #aeb9ae; font-size: 13px; margin: 7px 0; }
    .footer-col a:hover { color: var(--lime); }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,.14); min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #89978d; font-size: 12px; }

    @media (max-width: 1024px) {
      .nav-links { gap: 15px; }
      .header-action { display: none; }
      .guide-layout { gap: 32px; }
      .footer-top { gap: 24px; }
    }
    @media (max-width: 768px) {
      .container { width: min(100% - 40px, 620px); }
      .header-inner { min-height: 72px; }
      .nav-links { display: none; }
      .site-header::after { content: "菜单"; color: var(--green); font-size: 13px; font-weight: 800; }
      .page-hero { min-height: 430px; }
      .hero-content { padding: 54px 0 66px; }
      .section { padding: 68px 0; }
      .section-head { display: block; margin-bottom: 27px; }
      .section-lead { margin-top: 14px; }
      .guide-layout { display: block; }
      .side-index { position: static; display: flex; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--line); margin-bottom: 26px; white-space: nowrap; }
      .index-label { display: none; }
      .side-index a { border-left: 0; border-bottom: 2px solid transparent; margin: 0; padding: 10px 14px; }
      .side-index a:hover, .side-index a.active { border-left: 0; border-bottom-color: var(--orange); }
      .feature-band { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
      .feature-band img { height: 220px; order: -1; }
      .steps { grid-template-columns: 1fr 1fr; gap: 0 20px; }
      .step { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); margin: 0; padding: 23px 0; }
      .notice-panel { grid-template-columns: 1fr; }
      .cta { display: block; padding: 30px 25px; }
      .cta .button { margin-top: 20px; }
      .footer-top { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-bottom { display: block; padding: 18px 0; }
      .footer-bottom span { display: block; margin: 4px 0; }
    }
    @media (max-width: 520px) {
      .notice-inner { min-height: 42px; }
      .notice-link { display: none; }
      h1 { font-size: 36px; }
      .hero-content > p { font-size: 15px; }
      .guide-item { grid-template-columns: 39px 1fr; gap: 12px; align-items: start; }
      .item-link { grid-column: 2; justify-self: start; margin-top: 4px; }
      .guide-item h3 { font-size: 18px; }
      .steps { grid-template-columns: 1fr; }
      .step { padding-right: 0; }
      .footer-top { grid-template-columns: 1fr 1fr; gap: 25px 18px; }
    }