:root{--g:#259B54;--dark:#1F2421;--ink:#111827;--mute:#6b7280;--line:#f3f4f6}
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
    img{max-width:100%;display:block}
    a{color:inherit}
    .wrap{max-width:64rem;margin:0 auto;padding:0 16px}

    header{position:sticky;top:0;z-index:50;background:var(--g);box-shadow:0 4px 6px -1px rgba(0,0,0,.15)}
    header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px}
    header img{height:36px;width:auto}
    header a.nav{background:var(--dark);color:#fff;border:2px solid rgba(255,255,255,.4);font-weight:700;font-size:14px;padding:8px 20px;border-radius:999px;text-decoration:none;transition:opacity .2s}
    header a.nav:hover{opacity:.9}

    .hero{padding:48px 16px;background:linear-gradient(135deg,#259B54 0%,#1F2421 100%);color:#fff}
    .hero .wrap{display:flex;align-items:center;gap:40px;padding:0}
    .hero .txt{flex:1;text-align:left}
    .badge{display:inline-block;background:rgba(255,255,255,.2);font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.05em}
    .hero h1{font-size:48px;line-height:1.15;font-weight:800;margin-bottom:20px}
    .hero p.lead{font-size:18px;opacity:.9;margin-bottom:32px;max-width:32rem}
    .stars{display:flex;align-items:center;gap:8px;margin-bottom:24px}
    .stars b{color:#facc15;font-size:20px;letter-spacing:1px}
    .stars span{opacity:.8;font-size:14px;font-weight:500}
    .btn{display:inline-block;background:#fff;color:var(--g);font-weight:800;font-size:18px;padding:16px 40px;border-radius:999px;text-decoration:none;box-shadow:0 20px 25px -5px rgba(0,0,0,.25);transition:transform .2s}
    .btn:hover{transform:scale(1.05)}
    .hero .note{margin-top:12px;font-size:14px;opacity:.7}
    .hero img{flex:none;width:384px;filter:drop-shadow(0 25px 25px rgba(0,0,0,.35))}

    .trust{border-bottom:1px solid var(--line);padding:24px 16px}
    .trust .wrap{max-width:56rem;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center;padding:0}
    .trust strong{display:block;font-size:14px;font-weight:600;color:#374151}
    .trust span{font-weight:400;color:#6b7280}

    .faq{background:#f9fafb;padding:64px 16px}
    .faq .wrap{max-width:48rem;padding:0}
    .tag{display:inline-block;color:var(--g);background:rgba(37,155,84,.08);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:6px 16px;border-radius:999px;margin-bottom:16px}
    .faq h2{font-size:30px;font-weight:800;margin-bottom:8px}
    .faq .sub{color:var(--mute);font-size:14px;margin-bottom:32px}
    .item{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.05);overflow:hidden;margin-bottom:12px}
    .item button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;text-align:left;font:inherit;font-size:14px;font-weight:700;color:#1f2937;background:none;border:0;cursor:pointer}
    .item button:hover{background:#f9fafb}
    .item button i{font-style:normal;font-size:24px;line-height:1;margin-left:16px;color:var(--g);transition:transform .2s}
    .item.open button i{transform:rotate(45deg)}
    .item .ans{display:none;padding:16px 24px 20px;border-top:1px solid var(--line);color:var(--mute);font-size:14px;line-height:1.6}
    .item.open .ans{display:block}

    .pay{padding:40px 16px;border-top:1px solid var(--line);text-align:center}
    .pay h4{font-size:12px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px}
    .pay .row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:16px}
    .pay .row span{border:1px solid #e5e7eb;border-radius:8px;padding:10px 14px;font-size:13px;font-weight:600;color:#4b5563;box-shadow:0 1px 2px rgba(0,0,0,.05)}
    .pay p{font-size:12px;color:#9ca3af}

    footer{background:var(--g);color:#fff;padding:40px 16px}
    footer .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-bottom:32px}
    footer img{height:32px;width:auto;margin-bottom:12px}
    footer p,footer li{font-size:12px;opacity:.85;line-height:1.6}
    footer h4{font-size:14px;font-weight:700;margin-bottom:12px}
    footer ul{list-style:none}
    footer li{margin-bottom:6px}
    footer a,footer li button{color:#fff;text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;padding:0;text-align:left}
    footer a:hover,footer li button:hover{text-decoration:underline}
    footer .legal{border-top:1px solid rgba(255,255,255,.2);padding-top:24px;text-align:center}
    footer .legal p{opacity:1;max-width:42rem;margin:0 auto}

    .modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px}
    .modal.open{display:flex}
    .modal-bg{position:absolute;inset:0;background:rgba(31,36,33,.75)}
    .modal-box{position:relative;background:#fff;border-radius:16px;width:100%;max-width:760px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.35)}
    .modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid #e6e6e6}
    .modal-head h3{font-size:18px;color:var(--g)}
    .modal-close{background:#f3f4f6;border:0;border-radius:8px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;color:var(--dark);cursor:pointer}
    .modal-body{overflow-y:auto;padding:22px;font-size:14px;line-height:1.7;color:#3c3c3c}
    .modal-body h2{font-size:17px;color:var(--g);margin:20px 0 8px}
    .modal-body h2:first-child{margin-top:0}
    .modal-body p{margin:0 0 10px}
    .modal-body ul{margin:0 0 12px 20px}
    .modal-body li{margin-bottom:6px}
    .modal-body a{color:var(--g)}
    body.modal-open{overflow:hidden}

    @media (max-width:768px){
      .hero{padding:40px 16px}
      .hero .wrap{flex-direction:column-reverse;gap:28px}
      .hero .txt{text-align:center}
      .hero h1{font-size:36px}
      .hero p.lead{margin-left:auto;margin-right:auto}
      .stars{justify-content:center}
      .hero img{width:288px}
      
      footer .grid{grid-template-columns:repeat(2,1fr)}
      footer .grid>div:first-child{grid-column:span 2}
    }
    @media (max-width:480px){
      .btn{padding:16px 28px;font-size:17px}
      .trust strong{font-size:13px}
      header img{height:28px}
    }

    /* article layout for guide pages */
    .art{max-width:46rem;margin:0 auto;padding:40px 16px 56px}
    .crumbs{font-size:13px;color:var(--mute);margin-bottom:18px}
    .crumbs a{color:var(--g);text-decoration:none}
    .art h1{font-size:34px;line-height:1.2;font-weight:800;margin-bottom:14px}
    .art .meta{font-size:13px;color:var(--mute);margin-bottom:22px}
    .art h2{font-size:24px;line-height:1.25;font-weight:800;margin:32px 0 10px}
    .art h3{font-size:18px;font-weight:700;margin:22px 0 8px}
    .art p{margin:0 0 14px;font-size:16px;line-height:1.7;color:#374151}
    .art ul,.art ol{margin:0 0 16px 22px;font-size:16px;line-height:1.7;color:#374151}
    .art li{margin-bottom:6px}
    .art a{color:var(--g)}
    .art table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
    .art th,.art td{border:1px solid #e5e7eb;padding:10px 12px;text-align:left;vertical-align:top}
    .art th{background:#f3f4f6}
    .card{background:#f9fafb;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:0 0 18px}
    .cta-box{background:linear-gradient(135deg,#259B54 0%,#1F2421 100%);color:#fff;border-radius:16px;padding:26px 22px;text-align:center;margin:28px 0}
    .cta-box p{color:#fff;opacity:.92;margin-bottom:14px}
    .cta-box .btn{background:#fff;color:var(--g)}
    .more{background:#f9fafb;padding:36px 16px}
    .more .wrap{max-width:46rem;padding:0}
    .more h2{font-size:20px;margin-bottom:12px}
    .more ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
    .more li a{display:inline-block;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:8px 14px;font-size:14px;text-decoration:none;color:#1f2937}
    @media (max-width:768px){.art h1{font-size:28px}.art h2{font-size:21px}}

.hero img{height:auto;aspect-ratio:1/1;object-fit:contain}

header a.nav{background:#fff;color:var(--g);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.18)}