/* roulang page: index */
:root {
      --bg: #ffffff;
      --bg-soft: #f6fbf7;
      --bg-soft-2: #eef6f0;
      --panel: #ffffff;
      --ink: #17201b;
      --ink-2: #39433d;
      --muted: #66716b;
      --line: #d7e2d8;
      --line-strong: #bfd3c4;
      --green: #0d6b3f;
      --green-2: #1d8c50;
      --lime: #a4ea66;
      --shadow: 0 16px 34px rgba(22, 44, 28, 0.08);
      --shadow-soft: 0 10px 24px rgba(22, 44, 28, 0.05);
      --radius: 18px;
      --radius-sm: 12px;
      --radius-xs: 10px;
      --font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
      --container: 1240px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: var(--font);
      color: var(--ink);
      background:
        linear-gradient(180deg, #f8fcf9 0%, #ffffff 18%, #ffffff 100%);
      line-height: 1.65;
      letter-spacing: 0;
    }

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

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

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

    button {
      cursor: pointer;
    }

    :focus-visible {
      outline: 3px solid rgba(29, 140, 80, .22);
      outline-offset: 2px;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .page-shell {
      min-height: 100vh;
      overflow: hidden;
    }

    .grid-container {
      max-width: var(--container);
    }

    .top-strip {
      background: linear-gradient(90deg, #eef7f0 0%, #f6fbf7 100%);
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-size: 13px;
    }

    .top-strip-inner {
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
      padding: 6px 0;
    }

    .top-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(13, 107, 63, .35);
      display: inline-block;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255, 255, 255, .96);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(215, 226, 216, .9);
      box-shadow: 0 8px 26px rgba(22, 44, 28, .05);
    }

    .nav-inner {
      min-height: 76px;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
      color: var(--ink);
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .brand-mark {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: linear-gradient(180deg, var(--green-2), var(--green));
      box-shadow: 0 0 0 6px rgba(29, 140, 80, .10);
      flex: 0 0 auto;
    }

    .nav-collapse {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-width: 0;
    }

    .primary-nav {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex-wrap: wrap;
    }

    .nav-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 10px 14px;
      border-radius: 12px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      border: 1px solid transparent;
      background: transparent;
      white-space: nowrap;
    }

    .nav-link:hover,
    .nav-link:focus-visible,
    .nav-link.active {
      color: var(--green);
      background: var(--bg-soft);
      border-color: #d9eadf;
      transform: translateY(-1px);
    }

    .nav-group {
      position: relative;
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    .mega-toggle {
      width: 38px;
      height: 38px;
      border: 1px solid #d6e4d8;
      border-radius: 12px;
      background: #fff;
      color: var(--green);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
      flex: 0 0 auto;
    }

    .mega-toggle:hover {
      border-color: #b9d7c0;
      background: var(--bg-soft);
      transform: translateY(-1px);
    }

    .mega-panel {
      position: absolute;
      top: calc(100% + 12px);
      left: 0;
      width: min(640px, 82vw);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: var(--shadow);
      padding: 16px;
    }

    .nav-group:hover .mega-panel,
    .nav-group:focus-within .mega-panel,
    .nav-group.open .mega-panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

    .mega-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
    }

    .mega-head strong {
      font-size: 14px;
      font-weight: 800;
      color: var(--ink);
    }

    .mega-head span {
      font-size: 13px;
      color: var(--muted);
    }

    .mega-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .mega-card {
      display: flex;
      gap: 12px;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid #dce7de;
      background: linear-gradient(180deg, #fff 0%, #fbfefb 100%);
      min-width: 0;
    }

    .mega-card:hover {
      border-color: #b9d7c0;
      background: #f5fbf7;
      transform: translateY(-1px);
    }

    .mega-icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: #edf7ef;
      border: 1px solid #d5e8d8;
      color: var(--green);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }

    .mega-card strong {
      display: block;
      font-size: 15px;
      line-height: 1.25;
      margin-bottom: 4px;
      color: var(--ink);
    }

    .mega-card span {
      display: block;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.6;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
    }

    .age-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 0 13px;
      border-radius: 999px;
      background: #0f1f17;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0;
    }

    .menu-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      border: 1px solid #d5e2d7;
      background: #fff;
      color: var(--green);
      flex: 0 0 auto;
    }

    .menu-toggle:hover {
      background: var(--bg-soft);
      transform: translateY(-1px);
    }

    .site-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 16px;
      border-radius: 12px;
      border: 1px solid transparent;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0;
      white-space: nowrap;
      transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
    }

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

    .site-btn.primary {
      background: linear-gradient(180deg, #1b8a4d 0%, #0d6b3f 100%);
      color: #fff;
      box-shadow: 0 14px 28px rgba(13, 107, 63, .16);
    }

    .site-btn.primary:hover {
      box-shadow: 0 18px 34px rgba(13, 107, 63, .22);
    }

    .site-btn.secondary {
      background: #fff;
      border-color: #bdd3c2;
      color: var(--green);
    }

    .site-btn.secondary:hover {
      background: #f3faf5;
      border-color: #a8cbb1;
    }

    .site-btn.ghost {
      background: #f7fbf8;
      border-color: #dce7de;
      color: var(--ink);
    }

    .site-btn .icon {
      width: 16px;
      height: 16px;
      display: inline-flex;
      flex: 0 0 auto;
    }

    main {
      display: block;
    }

    .hero-slab {
      position: relative;
      padding: 46px 0 58px;
      background:
        linear-gradient(180deg, #f6fbf7 0%, #ffffff 70%);
      overflow: hidden;
    }

    .hero-slab::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(13, 107, 63, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 107, 63, .06) 1px, transparent 1px);
      background-size: 46px 46px;
      opacity: .44;
      pointer-events: none;
      clip-path: inset(0 0 34% 0);
    }

    .hero-wrap {
      position: relative;
    }

    .hero-copy {
      padding: 8px 0;
    }

    .hero-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 14px;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid #d9e6db;
      color: var(--green);
      font-size: 13px;
      font-weight: 700;
      box-shadow: var(--shadow-soft);
    }

    .hero-badge .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 0 4px rgba(164, 234, 102, .20);
    }

    .hero-title {
      margin: 0 0 14px;
      font-size: 54px;
      line-height: 1.08;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: 0;
      max-width: 8.5em;
    }

    .hero-copy-text {
      margin: 0;
      font-size: 18px;
      line-height: 1.85;
      color: var(--muted);
      max-width: 38em;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 22px 0 18px;
    }

    .hero-trust {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .trust-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 0 12px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid #dbe7dd;
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 700;
    }

    .trust-pill .icon {
      width: 15px;
      height: 15px;
      color: var(--green);
      flex: 0 0 auto;
    }

    .hero-stage {
      background: #fff;
      border: 1px solid #cfe0d2;
      border-radius: 22px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .hero-stage-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      background: linear-gradient(180deg, #f7fbf8 0%, #edf6ef 100%);
      border-bottom: 1px solid var(--line);
    }

    .window-dots {
      display: flex;
      gap: 6px;
      flex: 0 0 auto;
    }

    .window-dots span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #d3dfd6;
    }

    .hero-stage-bar strong {
      font-size: 14px;
      font-weight: 800;
      color: var(--ink);
    }

    .hero-stage-bar em {
      margin-left: auto;
      font-style: normal;
      color: var(--green);
      font-size: 13px;
      font-weight: 700;
    }

    .hero-stage-grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 14px;
      padding: 18px;
    }

    .stage-main,
    .stage-mini {
      background: linear-gradient(180deg, #fbfefb 0%, #f4faf5 100%);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    }

    .stage-main {
      min-height: 230px;
      padding: 18px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .stage-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--green);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 10px;
    }

    .stage-value {
      font-size: 32px;
      line-height: 1.15;
      font-weight: 800;
      color: var(--ink);
      margin: 0 0 10px;
    }

    .stage-copy {
      margin: 0;
      font-size: 14px;
      line-height: 1.75;
      color: var(--muted);
    }

    .meter {
      height: 10px;
      border-radius: 999px;
      background: #dbe6dd;
      overflow: hidden;
      margin: 18px 0 12px;
    }

    .meter > span {
      display: block;
      height: 100%;
      width: 72%;
      border-radius: 999px;
      background: linear-gradient(90deg, #1b8a4d 0%, #9fe967 100%);
    }

    .meter-caption {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-size: 13px;
    }

    .stage-mini-wrap {
      display: grid;
      gap: 12px;
    }

    .stage-mini {
      padding: 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 68px;
    }

    .stage-mini .icon-shell {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: #eaf5ec;
      color: var(--green);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      border: 1px solid #d5e7d8;
    }

    .stage-mini strong {
      display: block;
      font-size: 14px;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 3px;
    }

    .stage-mini span {
      display: block;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.55;
    }

    .section {
      padding: 86px 0;
    }

    .section.alt {
      background: linear-gradient(180deg, #fbfdfb 0%, #f6faf7 100%);
      border-top: 1px solid rgba(215, 226, 216, .65);
      border-bottom: 1px solid rgba(215, 226, 216, .65);
    }

    .section-head {
      max-width: 840px;
      margin-bottom: 26px;
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--green);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 10px;
      letter-spacing: 0;
    }

    .section-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      height: 28px;
      border-radius: 999px;
      background: #edf7ef;
      border: 1px solid #d5e7d8;
      color: var(--green);
      font-size: 12px;
      font-weight: 800;
    }

    .section-title {
      margin: 0 0 10px;
      font-size: 30px;
      line-height: 1.2;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: 0;
    }

    .section-copy {
      margin: 0;
      font-size: 16px;
      line-height: 1.82;
      color: var(--muted);
      max-width: 60em;
    }

    .table-shell {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .table-scroll {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .comparison-table {
      width: 100%;
      min-width: 840px;
      border-collapse: separate;
      border-spacing: 0;
    }

    .comparison-table thead th {
      background: linear-gradient(180deg, #f7fbf8 0%, #edf5ee 100%);
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
      padding: 16px 18px;
      border-bottom: 1px solid var(--line);
      border-right: 1px solid var(--line);
      text-align: left;
    }

    .comparison-table thead th:first-child {
      position: sticky;
      left: 0;
      z-index: 2;
      background: linear-gradient(180deg, #f7fbf8 0%, #edf5ee 100%);
    }

    .comparison-table tbody td {
      padding: 15px 18px;
      border-bottom: 1px solid var(--line);
      border-right: 1px solid var(--line);
      vertical-align: top;
      font-size: 14px;
      color: var(--ink-2);
      background: #fff;
    }

    .comparison-table tbody tr:nth-child(even) td {
      background: #fcfefd;
    }

    .comparison-table tbody td:first-child {
      position: sticky;
      left: 0;
      z-index: 1;
      background: inherit;
      font-weight: 700;
      color: var(--ink);
      width: 22%;
    }

    .comparison-table .col-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      background: #edf7ef;
      border: 1px solid #d6e7d9;
      color: var(--green);
      font-size: 12px;
      font-weight: 800;
      margin-left: 8px;
    }

    .comparison-table .recommend {
      background: #1b8a4d;
      color: #fff;
      border-color: #1b8a4d;
    }

    .check {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--green);
      font-weight: 700;
    }

    .check .icon {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
    }

    .dash {
      color: #8c9891;
      font-weight: 700;
    }

    .table-note {
      padding: 12px 18px 16px;
      font-size: 13px;
      color: var(--muted);
      background: #fbfefb;
      border-top: 1px solid var(--line);
    }

    .tier-layout {
      display: grid;
      grid-template-columns: minmax(0, 2.1fr) minmax(260px, .9fr);
      gap: 18px;
      align-items: start;
    }

    .tier-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .tier-card {
      position: relative;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow-soft);
      padding: 18px;
      overflow: hidden;
      min-height: 260px;
    }

    .tier-card::before {
      content: "";
      position: absolute;
      inset: 0 auto auto 0;
      width: 100%;
      height: 6px;
      background: linear-gradient(90deg, #1b8a4d 0%, #9eea68 100%);
    }

    .tier-card.featured {
      border-color: #a8d5b4;
      box-shadow: 0 18px 36px rgba(13, 107, 63, .10);
      transform: translateY(-4px);
    }

    .tier-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      background: #edf7ef;
      border: 1px solid #d7e7d9;
      color: var(--green);
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 12px;
    }

    .tier-index {
      font-size: 13px;
      color: var(--green);
      font-weight: 800;
      margin-bottom: 8px;
    }

    .tier-title {
      margin: 0 0 8px;
      font-size: 22px;
      line-height: 1.25;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: 0;
    }

    .tier-text {
      margin: 0 0 14px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.78;
    }

    .tier-points {
      list-style: none;
      margin: 0 0 16px;
      padding: 0;
      display: grid;
      gap: 9px;
    }

    .tier-points li {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      color: var(--ink-2);
      font-size: 14px;
      line-height: 1.65;
    }

    .tier-points li .icon {
      width: 16px;
      height: 16px;
      color: var(--green);
      flex: 0 0 auto;
      margin-top: 2px;
    }

    .tier-side {
      background: linear-gradient(180deg, #0f1f17 0%, #13231b 100%);
      color: #f3faf5;
      border-radius: 18px;
      padding: 18px;
      box-shadow: var(--shadow);
      border: 1px solid rgba(164, 234, 102, .18);
    }

    .tier-side h3 {
      margin: 0 0 10px;
      font-size: 18px;
      line-height: 1.3;
      font-weight: 800;
      color: #fff;
    }

    .tier-side p {
      margin: 0 0 14px;
      font-size: 14px;
      line-height: 1.8;
      color: rgba(243, 250, 245, .82);
    }

    .step-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 12px;
    }

    .step-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 12px 0;
      border-top: 1px solid rgba(220, 233, 223, .14);
    }

    .step-list li:first-child {
      border-top: 0;
      padding-top: 0;
    }

    .step-num {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(164, 234, 102, .12);
      border: 1px solid rgba(164, 234, 102, .30);
      color: #9fe967;
      font-size: 13px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }

    .step-copy strong {
      display: block;
      font-size: 14px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 3px;
    }

    .step-copy span {
      display: block;
      font-size: 13px;
      color: rgba(243, 250, 245, .74);
      line-height: 1.6;
    }

    .tier-side .site-btn {
      width: 100%;
      margin-top: 14px;
    }

    .preview-layout {
      display: grid;
      grid-template-columns: minmax(260px, .9fr) minmax(0, 2.1fr);
      gap: 18px;
      align-items: start;
    }

    .filter-shell {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow-soft);
      padding: 16px;
      position: sticky;
      top: 104px;
    }

    .filter-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .filter-head strong {
      font-size: 16px;
      font-weight: 800;
      color: var(--ink);
    }

    .filter-head span {
      font-size: 13px;
      color: var(--muted);
    }

    .filter-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .filter-chip {
      border: 1px solid #d7e5d8;
      background: #fff;
      color: var(--ink-2);
      border-radius: 999px;
      padding: 9px 12px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .filter-chip:hover {
      background: #f2faf4;
      border-color: #bcd9c3;
      transform: translateY(-1px);
    }

    .filter-chip.is-active {
      background: linear-gradient(180deg, #1b8a4d 0%, #0d6b3f 100%);
      border-color: #0d6b3f;
      color: #fff;
      box-shadow: 0 12px 22px rgba(13, 107, 63, .16);
    }

    .filter-note {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
      font-size: 13px;
      color: var(--muted);
      line-height: 1.75;
    }

    .preview-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .preview-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      background: #edf7ef;
      border: 1px solid #d6e6d8;
      color: var(--green);
      font-size: 13px;
      font-weight: 700;
    }

    .preview-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .preview-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow-soft);
      overflow: hidden;
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }

    .preview-card:hover {
      border-color: #b8d7c0;
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }

    .thumb {
      position: relative;
      aspect-ratio: 16 / 10;
      background:
        linear-gradient(135deg, #ebf4ee 0%, #d8eadf 100%);
      border-bottom: 1px solid var(--line);
      overflow: hidden;
    }

    .thumb::before {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px dashed rgba(13, 107, 63, .18);
      border-radius: 14px;
    }

    .thumb::after {
      content: "";
      position: absolute;
      inset: auto 14px 14px 14px;
      height: 28px;
      border-radius: 10px;
      background: linear-gradient(90deg, rgba(13, 107, 63, .14), rgba(13, 107, 63, .03));
    }

    .thumb-chip {
      position: absolute;
      top: 14px;
      left: 14px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(215, 226, 216, .9);
      color: var(--green);
      font-size: 12px;
      font-weight: 800;
      backdrop-filter: blur(8px);
    }

    .preview-body {
      padding: 14px 14px 16px;
      display: grid;
      gap: 10px;
      flex: 1 1 auto;
    }

    .preview-title {
      margin: 0;
      font-size: 17px;
      line-height: 1.35;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: 0;
    }

    .preview-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tiny-tag {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      background: #f2faf4;
      border: 1px solid #dce8de;
      color: var(--green);
      font-size: 12px;
      font-weight: 700;
    }

    .preview-text {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
      min-height: 3.4em;
    }

    .preview-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: auto;
      flex-wrap: wrap;
    }

    .state-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      background: #edf7ef;
      border: 1px solid #d6e7d9;
      color: var(--green);
      font-size: 12px;
      font-weight: 800;
    }

    .state-pill.muted {
      background: #f4f6f4;
      color: #76827b;
      border-color: #e1e6e2;
    }

    .mini-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 32px;
      padding: 0 10px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid #cfe0d2;
      color: var(--green);
      font-size: 12px;
      font-weight: 800;
    }

    .mini-btn:hover {
      background: #f3faf5;
      border-color: #afd0b9;
      transform: translateY(-1px);
    }

    .updates-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
      gap: 18px;
      align-items: start;
    }

    .feed-shell,
    .matrix-shell {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .feed-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .feed-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 16px;
      border-top: 1px solid var(--line);
    }

    .feed-item:first-child {
      border-top: 0;
    }

    .feed-time {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 64px;
      height: 28px;
      border-radius: 999px;
      background: #edf7ef;
      border: 1px solid #d7e7d9;
      color: var(--green);
      font-size: 12px;
      font-weight: 800;
      flex: 0 0 auto;
    }

    .feed-copy strong {
      display: block;
      margin-bottom: 4px;
      font-size: 15px;
      font-weight: 800;
      color: var(--ink);
    }

    .feed-copy span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.75;
    }

    .matrix-shell {
      padding: 16px;
    }

    .matrix-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .entry-card {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid #dce7de;
      background: linear-gradient(180deg, #fff 0%, #f9fcfa 100%);
      min-height: 100%;
    }

    .entry-card:hover {
      border-color: #b9d7c0;
      background: #f2faf4;
      transform: translateY(-1px);
    }

    .entry-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: #edf7ef;
      border: 1px solid #d6e7d9;
      color: var(--green);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }

    .entry-card strong {
      display: block;
      font-size: 14px;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 4px;
    }

    .entry-card span {
      display: block;
      font-size: 13px;
      line-height: 1.65;
      color: var(--muted);
    }

    .assurance-row {
      margin-top: 14px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .assurance-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 14px;
      background: #f7fbf8;
      border: 1px solid #d9e5db;
      border-radius: 14px;
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 700;
    }

    .assurance-item .icon {
      width: 16px;
      height: 16px;
      color: var(--green);
      flex: 0 0 auto;
    }

    .faq-shell {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .accordion {
      background: transparent;
      border: 0;
    }

    .accordion-item {
      border-bottom: 1px solid var(--line);
    }

    .accordion-title {
      position: relative;
      padding: 18px 50px 18px 18px;
      font-size: 15px;
      font-weight: 800;
      color: var(--ink);
      background: #fff;
      border: 0;
      line-height: 1.45;
    }

    .accordion-title:hover {
      background: #f8fcf9;
      color: var(--green);
    }

    .accordion-title::before {
      color: var(--green);
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 22px;
    }

    .accordion-item.is-active > .accordion-title {
      background: #f3fbf5;
      color: var(--green);
      box-shadow: inset 3px 0 0 var(--green);
    }

    .accordion-content {
      padding: 0 18px 18px;
      border: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.8;
      background: #fff;
      border-left: 3px solid var(--green);
      margin-left: 0;
    }

    .cta-band {
      padding: 88px 0 92px;
      background:
        linear-gradient(180deg, #f7fbf8 0%, #edf6ef 100%);
      border-top: 1px solid rgba(215, 226, 216, .8);
    }

    .cta-panel {
      position: relative;
      background: #fff;
      border: 1px solid #cfe0d2;
      border-radius: 24px;
      box-shadow: var(--shadow);
      overflow: hidden;
      padding: 24px;
    }

    .cta-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(13, 107, 63, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 107, 63, .05) 1px, transparent 1px);
      background-size: 36px 36px;
      opacity: .45;
      pointer-events: none;
      clip-path: inset(0 0 56% 0);
    }

    .cta-grid {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
      gap: 18px;
      align-items: center;
    }

    .cta-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }

    .cta-mark {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      background: #edf7ef;
      border: 1px solid #d6e7d9;
      color: var(--green);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    }

    .cta-mark .icon {
      width: 24px;
      height: 24px;
    }

    .cta-title {
      margin: 0;
      font-size: 30px;
      line-height: 1.2;
      font-weight: 800;
      color: var(--ink);
    }

    .cta-text {
      margin: 0;
      font-size: 16px;
      line-height: 1.85;
      color: var(--muted);
      max-width: 48em;
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 20px;
    }

    .cta-side {
      position: relative;
      background: linear-gradient(180deg, #0f1f17 0%, #13231b 100%);
      color: #fff;
      border-radius: 20px;
      padding: 18px;
      border: 1px solid rgba(164, 234, 102, .18);
      box-shadow: var(--shadow-soft);
    }

    .cta-side strong {
      display: block;
      font-size: 17px;
      font-weight: 800;
      margin-bottom: 10px;
    }

    .cta-side ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 10px;
    }

    .cta-side li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: rgba(243, 250, 245, .84);
      font-size: 13px;
      line-height: 1.7;
    }

    .cta-side .icon {
      width: 16px;
      height: 16px;
      color: #a4ea66;
      flex: 0 0 auto;
      margin-top: 2px;
    }

    .site-footer {
      background: #121814;
      color: rgba(244, 249, 245, .84);
      padding: 34px 0 26px;
      border-top: 1px solid rgba(164, 234, 102, .12);
    }

    .footer-top {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr);
      gap: 18px;
      align-items: start;
      margin-bottom: 22px;
    }

    .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 20px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 10px;
    }

    .footer-brand .brand-mark {
      box-shadow: 0 0 0 6px rgba(164, 234, 102, .12);
    }

    .footer-copy {
      margin: 0;
      font-size: 14px;
      line-height: 1.8;
      color: rgba(244, 249, 245, .76);
      max-width: 34em;
    }

    .footer-links,
    .footer-notes {
      display: grid;
      gap: 10px;
    }

    .footer-links a,
    .footer-notes a,
    .footer-links span,
    .footer-notes span {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(244, 249, 245, .84);
    }

    .footer-links a:hover,
    .footer-notes a:hover {
      color: #a4ea66;
    }

    .footer-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .footer-tag {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(164, 234, 102, .09);
      border: 1px solid rgba(164, 234, 102, .14);
      color: #dff8cc;
      font-size: 12px;
      font-weight: 700;
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      padding-top: 16px;
      border-top: 1px solid rgba(244, 249, 245, .10);
      font-size: 13px;
      color: rgba(244, 249, 245, .64);
    }

    .footer-bottom a {
      color: rgba(244, 249, 245, .82);
    }

    .footer-bottom a:hover {
      color: #a4ea66;
    }

    .icon {
      display: inline-flex;
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
    }

    .muted {
      color: var(--muted);
    }

    .hidden-mobile-break {
      display: inline;
    }

    @media (max-width: 1180px) {
      .hero-title {
        font-size: 48px;
      }
      .preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .tier-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .tier-side {
        margin-top: 18px;
      }
      .tier-layout,
      .preview-layout,
      .updates-layout,
      .cta-grid {
        grid-template-columns: 1fr;
      }
      .filter-shell {
        position: static;
      }
      .assurance-row {
        grid-template-columns: 1fr;
      }
      .footer-top {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 980px) {
      .menu-toggle {
        display: inline-flex;
      }

      .nav-collapse {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 18px 30px rgba(22, 44, 28, .08);
        padding: 16px;
        flex-direction: column;
        align-items: stretch;
      }

      .site-header.mobile-open .nav-collapse {
        display: flex;
      }

      .primary-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
      }

      .nav-link {
        width: 100%;
        justify-content: flex-start;
      }

      .nav-group {
        width: 100%;
        flex-wrap: wrap;
      }

      .nav-group > .nav-row {
        width: 100%;
      }

      .mega-panel {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
        border-radius: 16px;
        margin-top: 10px;
        display: none;
      }

      .nav-group.open .mega-panel {
        display: block;
      }

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

      .nav-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      .hero-stage-grid {
        grid-template-columns: 1fr;
      }

      .hero-title {
        font-size: 40px;
        max-width: none;
      }

      .hero-copy-text {
        font-size: 16px;
      }

      .hero-slab {
        padding: 38px 0 48px;
      }

      .section,
      .cta-band {
        padding: 62px 0;
      }

      .section-title,
      .cta-title {
        font-size: 26px;
      }

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

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

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

      .comparison-table {
        min-width: 760px;
      }
    }

    @media (max-width: 640px) {
      .top-strip-inner {
        justify-content: flex-start;
      }

      .nav-inner {
        gap: 10px;
      }

      .brand {
        font-size: 18px;
        line-height: 1.2;
        white-space: normal;
      }

      .hero-title {
        font-size: 34px;
      }

      .hero-copy-text {
        font-size: 15px;
      }

      .hero-actions,
      .cta-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .site-btn {
        width: 100%;
      }

      .hero-stage,
      .cta-panel,
      .table-shell,
      .tier-card,
      .preview-card,
      .feed-shell,
      .matrix-shell,
      .faq-shell {
        border-radius: 16px;
      }

      .stage-value {
        font-size: 26px;
      }

      .section {
        padding: 54px 0;
      }

      .section-title,
      .cta-title {
        font-size: 24px;
      }

      .accordion-title {
        padding: 16px 46px 16px 16px;
      }

      .accordion-content {
        padding: 0 16px 16px;
      }

      .feed-item {
        flex-direction: column;
      }

      .feed-time {
        min-width: 72px;
      }

      .comparison-table thead th,
      .comparison-table tbody td {
        padding: 13px 14px;
      }
    }

/* roulang page: category1 */
:root{
      --bg:#f7faf8;
      --bg-2:#eef5f1;
      --card:#ffffff;
      --line:#dbe6df;
      --line-2:#c7d5cd;
      --text:#13211a;
      --muted:#5f7268;
      --muted-2:#7a8c83;
      --green:#1f7a44;
      --green-2:#2ea85f;
      --green-3:#dff3e7;
      --green-4:#effaf3;
      --shadow:0 18px 38px rgba(16, 40, 28, .08);
      --shadow-soft:0 8px 24px rgba(16, 40, 28, .06);
      --radius:18px;
      --radius-sm:12px;
      --radius-lg:24px;
      --max:1220px;
      --header-h:78px;
      --ease:cubic-bezier(.2,.8,.2,1);
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;line-height:1.65}
    body{min-height:100vh;overflow-x:hidden}
    a{color:inherit;text-decoration:none;transition:all .22s var(--ease)}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    ::selection{background:rgba(31,122,68,.18)}
    :focus-visible{outline:3px solid rgba(46,168,95,.4);outline-offset:2px}

    .site-shell{
      background:
        radial-gradient(circle at 12% 8%, rgba(46,168,95,.08), transparent 20%),
        radial-gradient(circle at 86% 12%, rgba(31,122,68,.06), transparent 18%),
        linear-gradient(180deg, #fff 0%, #f9fcfa 22%, #f7faf8 100%);
      min-height:100vh;
    }

    .top-strip{
      background:linear-gradient(90deg, #10311f, #1e6e3e);
      color:#eafff1;
      font-size:.9rem;
      letter-spacing:.01em;
      border-bottom:1px solid rgba(255,255,255,.12);
    }
    .top-strip .grid-container{
      max-width:var(--max);
      padding:.5rem 1rem;
    }
    .top-strip-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
    }
    .top-strip .strip-left,
    .top-strip .strip-right{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
    .age-pill,.privacy-pill{
      display:inline-flex;align-items:center;gap:.4rem;
      padding:.35rem .7rem;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      color:#f0fff5;
      border:1px solid rgba(255,255,255,.15);
      font-size:.84rem;
      white-space:nowrap;
    }
    .age-pill i,.privacy-pill i{width:14px;height:14px}

    header.site-header{
      position:sticky;
      top:0;
      z-index:70;
      backdrop-filter:saturate(140%) blur(10px);
      background:rgba(255,255,255,.92);
      border-bottom:1px solid rgba(186,204,194,.7);
      box-shadow:0 6px 20px rgba(16,40,28,.04);
    }
    .header-inner{
      max-width:var(--max);
      margin:0 auto;
      padding:.95rem 1rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      min-height:var(--header-h);
    }

    .brand{
      display:inline-flex;
      align-items:center;
      gap:.78rem;
      font-weight:800;
      font-size:1.08rem;
      letter-spacing:.01em;
      color:var(--text);
      flex-shrink:0;
    }
    .brand-mark{
      width:38px;height:38px;border-radius:12px;
      background:
        linear-gradient(145deg, #197543, #2fb764);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 18px rgba(31,122,68,.18);
      position:relative;
    }
    .brand-mark::before,.brand-mark::after{
      content:"";
      position:absolute;
      inset:9px;
      border-radius:10px;
      border:1.8px solid rgba(255,255,255,.75);
    }
    .brand-mark::after{
      inset:auto 9px 9px 9px;
      height:6px;
      border:none;
      background:rgba(255,255,255,.7);
      border-radius:999px;
    }

    .nav-wrap{
      display:flex;
      align-items:center;
      gap:1rem;
      flex:1;
      justify-content:space-between;
      min-width:0;
    }

    .primary-nav{
      display:flex;
      align-items:center;
      gap:.4rem;
      min-width:0;
      flex-wrap:wrap;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:.7rem .92rem;
      border-radius:999px;
      color:#244132;
      font-weight:700;
      font-size:.96rem;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .nav-link:hover,
    .nav-link:focus-visible{
      background:var(--green-4);
      color:var(--green);
      border-color:#d6eadf;
      transform:translateY(-1px);
    }
    .nav-link.active{
      background:linear-gradient(180deg, #2a8d52, #1f7a44);
      color:#fff;
      box-shadow:0 10px 18px rgba(31,122,68,.18);
    }

    .nav-group{
      position:relative;
      display:flex;
      align-items:center;
      gap:.55rem;
      margin-left:.2rem;
    }
    .nav-row{
      display:flex;
      align-items:center;
      gap:.35rem;
    }
    .mega-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:42px;height:42px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--green);
      cursor:pointer;
      box-shadow:0 4px 12px rgba(16,40,28,.05);
    }
    .mega-toggle:hover{border-color:#b9d8c5;background:var(--green-4);transform:translateY(-1px)}
    .mega-toggle .icon,
    .nav-link .icon,
    .age-pill .icon,
    .privacy-pill .icon{
      width:16px;height:16px;
    }

    .mega-panel{
      position:absolute;
      right:0;
      top:calc(100% + .8rem);
      width:min(540px, calc(100vw - 2rem));
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow);
      padding:1rem;
      opacity:0;
      visibility:hidden;
      transform:translateY(10px);
      transition:all .22s var(--ease);
    }
    .nav-group:hover .mega-panel,
    .nav-group.is-open .mega-panel{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }
    .mega-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      padding:.3rem .3rem 1rem;
      border-bottom:1px solid var(--line);
      margin-bottom:1rem;
    }
    .mega-head strong{font-size:1.02rem}
    .mega-head span{color:var(--muted);font-size:.92rem}
    .mega-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:.85rem;
    }
    .mega-card{
      display:flex;
      align-items:flex-start;
      gap:.85rem;
      padding:.95rem;
      border-radius:18px;
      border:1px solid var(--line);
      background:linear-gradient(180deg, #fff, #fbfefc);
      min-height:96px;
    }
    .mega-card:hover{border-color:#bfe0cb;background:var(--green-4);transform:translateY(-1px)}
    .mega-icon{
      width:38px;height:38px;border-radius:12px;
      display:inline-flex;align-items:center;justify-content:center;
      background:var(--green-4);
      color:var(--green);
      flex-shrink:0;
      border:1px solid #d2ead8;
    }
    .mega-card strong{display:block;font-size:.98rem;margin-bottom:.25rem}
    .mega-card span span{display:block;color:var(--muted);font-size:.88rem;line-height:1.45}

    .nav-actions{
      display:flex;
      align-items:center;
      gap:.7rem;
      flex-shrink:0;
    }
    .age-mini{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      color:#3d5a4b;
      font-weight:700;
      font-size:.92rem;
      padding:.58rem .8rem;
      background:#fff;
      border:1px solid var(--line);
      border-radius:999px;
      white-space:nowrap;
    }
    .age-dot{
      width:8px;height:8px;border-radius:50%;
      background:var(--green-2);
      box-shadow:0 0 0 4px rgba(46,168,95,.14);
    }
    .btn-primary-green,
    .btn-secondary-green{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.48rem;
      border-radius:12px;
      padding:.84rem 1.05rem;
      font-weight:800;
      line-height:1;
      border:1px solid transparent;
      cursor:pointer;
      transition:all .22s var(--ease);
      white-space:nowrap;
    }
    .btn-primary-green{
      background:linear-gradient(180deg, #2ea85f, #1f7a44);
      color:#fff;
      box-shadow:0 12px 20px rgba(31,122,68,.18);
    }
    .btn-primary-green:hover{transform:translateY(-2px);filter:saturate(1.03)}
    .btn-secondary-green{
      background:#fff;
      color:var(--green);
      border-color:#c9dfd1;
    }
    .btn-secondary-green:hover{background:var(--green-4);border-color:#b8dac6;transform:translateY(-1px)}
    .btn-small{
      padding:.65rem .9rem;
      border-radius:10px;
      font-size:.92rem;
    }

    main{display:block}
    .page-section{
      padding:5rem 0;
    }
    .page-section.tight{padding:3.7rem 0}
    .grid-container{
      max-width:var(--max);
      padding-left:1rem;
      padding-right:1rem;
    }

    .hero{
      position:relative;
      overflow:hidden;
      padding:4.7rem 0 3.8rem;
      background:
        linear-gradient(180deg, rgba(46,168,95,.05), rgba(46,168,95,0) 32%),
        radial-gradient(circle at 18% 24%, rgba(31,122,68,.08), transparent 18%),
        radial-gradient(circle at 82% 12%, rgba(31,122,68,.06), transparent 14%);
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(31,122,68,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,122,68,.05) 1px, transparent 1px);
      background-size:96px 96px;
      opacity:.18;
      pointer-events:none;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0));
    }
    .hero .grid-container{position:relative;z-index:1}
    .hero-grid{
      display:grid;
      grid-template-columns:1.02fr .98fr;
      gap:2.2rem;
      align-items:stretch;
    }
    .hero-copy{
      padding:1rem 0;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.42rem .72rem;
      border-radius:999px;
      background:var(--green-4);
      border:1px solid #d7eadf;
      color:var(--green);
      font-weight:800;
      font-size:.88rem;
      margin-bottom:1rem;
    }
    .eyebrow .dot{
      width:8px;height:8px;border-radius:50%;
      background:var(--green-2);
      box-shadow:0 0 0 4px rgba(46,168,95,.14);
    }
    h1{
      margin:0 0 1rem;
      font-size:clamp(2.25rem, 5vw, 4.3rem);
      line-height:1.05;
      letter-spacing:-.03em;
      font-weight:900;
    }
    .lead{
      max-width:36rem;
      font-size:1.08rem;
      color:var(--muted);
      margin:0 0 1.4rem;
    }
    .hero-actions{
      display:flex;
      gap:.8rem;
      flex-wrap:wrap;
      margin-bottom:1.4rem;
    }
    .hero-tags{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.48rem .72rem;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--line);
      color:#345144;
      font-weight:700;
      font-size:.88rem;
      box-shadow:0 8px 18px rgba(16,40,28,.04);
    }
    .chip.green{
      background:var(--green-4);
      border-color:#cae7d5;
      color:var(--green);
    }

    .hero-panel{
      position:relative;
      background:#fff;
      border:1px solid var(--line);
      border-radius:26px;
      box-shadow:var(--shadow);
      overflow:hidden;
      min-height:100%;
    }
    .panel-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 1.1rem;
      border-bottom:1px solid var(--line);
      background:linear-gradient(180deg, #fff, #fbfcfb);
    }
    .window-dots{
      display:flex;gap:.45rem;align-items:center;
    }
    .window-dots span{
      width:11px;height:11px;border-radius:50%;
      background:#d8e3dc;
    }
    .window-dots span:first-child{background:#ff6b6b}
    .window-dots span:nth-child(2){background:#ffc857}
    .window-dots span:nth-child(3){background:#4cd27f}
    .panel-top strong{font-size:.95rem}
    .panel-top .panel-note{
      color:var(--muted);
      font-size:.88rem;
      white-space:nowrap;
    }
    .panel-body{
      padding:1.1rem;
    }
    .status-bar{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      align-items:center;
      margin-bottom:1rem;
    }
    .status-badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.48rem .7rem;
      border-radius:999px;
      background:var(--green-4);
      color:var(--green);
      border:1px solid #cae7d5;
      font-weight:800;
      font-size:.88rem;
    }
    .status-badge .status-dot{
      width:9px;height:9px;border-radius:50%;
      background:var(--green-2);
      box-shadow:0 0 0 4px rgba(46,168,95,.14);
    }
    .countdown{
      color:#355246;
      font-weight:700;
      background:#f2f7f4;
      border:1px solid #dce8e1;
      padding:.42rem .64rem;
      border-radius:999px;
      font-variant-numeric:tabular-nums;
      font-size:.88rem;
    }
    .panel-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:.95rem;
    }
    .panel-card{
      border:1px solid var(--line);
      border-radius:18px;
      background:linear-gradient(180deg, #fff, #fbfefc);
      padding:.95rem;
    }
    .panel-card h3{
      margin:0 0 .55rem;
      font-size:1rem;
      display:flex;
      align-items:center;
      gap:.48rem;
    }
    .panel-card h3 .icon{
      width:17px;height:17px;color:var(--green);
    }
    .metric-list{
      list-style:none;
      margin:0;padding:0;
      display:grid;
      gap:.65rem;
    }
    .metric-list li{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      align-items:center;
      padding:.62rem .7rem;
      border-radius:12px;
      background:#fff;
      border:1px solid #edf2ee;
    }
    .metric-list .key{
      color:var(--muted);
      font-size:.88rem;
    }
    .metric-list .value{
      font-weight:800;
      color:#214333;
    }
    .meter{
      margin-top:.8rem;
      background:#eff4f1;
      border-radius:999px;
      height:10px;
      overflow:hidden;
      border:1px solid #dde8e1;
    }
    .meter span{
      display:block;
      height:100%;
      width:78%;
      background:linear-gradient(90deg, #bdeacb, #2ea85f);
      border-radius:999px;
    }
    .tag-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
    }
    .tag{
      display:inline-flex;
      padding:.44rem .64rem;
      border-radius:999px;
      background:#f6faf7;
      border:1px solid #dfe9e2;
      color:#4b6257;
      font-weight:700;
      font-size:.84rem;
    }
    .tag.active{
      background:var(--green-4);
      color:var(--green);
      border-color:#cde7d6;
    }
    .mini-list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:.6rem;
    }
    .mini-list li{
      display:flex;
      align-items:center;
      gap:.55rem;
      color:#31493d;
      font-size:.92rem;
    }
    .mini-list li .ok{
      width:18px;height:18px;border-radius:50%;
      background:var(--green-4);
      border:1px solid #cde7d6;
      color:var(--green);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
    }
    .mini-list li .ok .icon{width:12px;height:12px}

    .section-head{
      margin-bottom:1.5rem;
    }
    .section-label{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      color:var(--green);
      font-weight:800;
      font-size:.86rem;
      margin-bottom:.55rem;
    }
    .section-label .num{
      display:inline-grid;
      place-items:center;
      width:26px;height:26px;
      border-radius:8px;
      background:var(--green-4);
      border:1px solid #cde7d6;
    }
    .section-head h2{
      margin:0 0 .35rem;
      font-size:clamp(1.55rem, 2.4vw, 2.2rem);
      font-weight:900;
      line-height:1.15;
      letter-spacing:-.02em;
    }
    .section-head p{
      margin:0;
      color:var(--muted);
      max-width:58rem;
    }

    .rights-wrap{
      background:linear-gradient(180deg, #fff, #f8fbf9);
      border-top:1px solid rgba(219,230,223,.6);
      border-bottom:1px solid rgba(219,230,223,.6);
    }
    .table-wrap{
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .table-scroll{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
    table.rights-table{
      width:100%;
      min-width:860px;
      border-collapse:separate;
      border-spacing:0;
    }
    .rights-table th,
    .rights-table td{
      padding:1rem .95rem;
      text-align:left;
      border-bottom:1px solid #ecf1ee;
      vertical-align:middle;
    }
    .rights-table thead th{
      background:linear-gradient(180deg, #fcfdfc, #f5faf7);
      color:#2b4538;
      font-size:.92rem;
      letter-spacing:.01em;
    }
    .rights-table thead th:first-child{
      width:29%;
    }
    .rights-table tbody tr:hover td{background:#fcfffd}
    .rights-table .row-title{
      font-weight:800;
      color:#1a3327;
      width:29%;
    }
    .compare-pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.42rem .65rem;
      border-radius:999px;
      font-weight:800;
      font-size:.82rem;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .compare-pill.base{background:#f4f7f5;color:#516459;border-color:#e1e9e4}
    .compare-pill.mid{background:#eefaf2;color:#207646;border-color:#cde7d6}
    .compare-pill.pro{background:#e3f7ea;color:#145d34;border-color:#b8dfc8}
    .check{
      color:var(--green);
      font-weight:900;
    }
    .dash{color:#a0b1a8;font-weight:900}
    .info-tip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:18px;height:18px;
      border-radius:50%;
      background:#eef5f1;
      color:#64796f;
      font-size:.78rem;
      margin-left:.35rem;
      border:1px solid #dde8e1;
    }

    .tier-strip{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:1rem;
      margin-top:1.5rem;
    }
    .tier-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      padding:1.15rem;
      box-shadow:var(--shadow-soft);
      position:relative;
      overflow:hidden;
    }
    .tier-card::before{
      content:"";
      position:absolute;
      top:0;left:0;right:0;
      height:5px;
      background:linear-gradient(90deg, #bdeacb, #2ea85f);
    }
    .tier-card .num{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:38px;height:38px;
      border-radius:12px;
      background:var(--green-4);
      color:var(--green);
      font-weight:900;
      margin-bottom:.85rem;
      border:1px solid #cde7d6;
    }
    .tier-card h3{
      margin:0 0 .4rem;
      font-size:1.08rem;
      font-weight:900;
    }
    .tier-card p{
      margin:0 0 .85rem;
      color:var(--muted);
      font-size:.95rem;
      min-height:3.15rem;
    }
    .tier-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-bottom:1rem;
    }
    .mini-chip{
      padding:.36rem .58rem;
      border-radius:999px;
      background:#f5faf7;
      border:1px solid #e2ece5;
      color:#486155;
      font-size:.82rem;
      font-weight:700;
    }

    .preview-area{
      background:linear-gradient(180deg, #fff, #f8fbf9);
      border-top:1px solid rgba(219,230,223,.6);
      border-bottom:1px solid rgba(219,230,223,.6);
    }
    .preview-shell{
      background:#fff;
      border:1px solid var(--line);
      border-radius:26px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .preview-toolbar{
      padding:1rem 1.1rem;
      border-bottom:1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
      background:linear-gradient(180deg, #fff, #fbfcfb);
    }
    .toolbar-left{
      display:flex;
      align-items:center;
      gap:.75rem;
      flex-wrap:wrap;
    }
    .toolbar-label{
      font-weight:800;
      color:#294336;
    }
    .toolbar-note{
      color:var(--muted);
      font-size:.9rem;
    }
    .filter-bar{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      align-items:center;
    }
    .filter-btn{
      border:1px solid var(--line);
      background:#fff;
      color:#385347;
      padding:.58rem .8rem;
      border-radius:999px;
      font-weight:700;
      font-size:.88rem;
      cursor:pointer;
    }
    .filter-btn:hover,
    .filter-btn:focus-visible{
      background:var(--green-4);
      color:var(--green);
      border-color:#cfe6d7;
    }
    .filter-btn.active{
      background:linear-gradient(180deg, #2ea85f, #1f7a44);
      color:#fff;
      border-color:transparent;
      box-shadow:0 10px 20px rgba(31,122,68,.16);
    }

    .preview-body{
      display:grid;
      grid-template-columns:260px 1fr;
      gap:1rem;
      padding:1.1rem;
    }
    .filter-panel,
    .preview-grid{
      border-radius:20px;
      border:1px solid var(--line);
      background:linear-gradient(180deg, #fff, #fcfefc);
    }
    .filter-panel{padding:1rem}
    .filter-panel h3,
    .preview-grid h3{
      margin:0 0 .9rem;
      font-size:1rem;
      font-weight:900;
    }
    .filter-list{
      display:grid;
      gap:.7rem;
      list-style:none;
      margin:0;
      padding:0;
    }
    .filter-list li{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      padding:.72rem .8rem;
      border-radius:14px;
      border:1px solid #edf2ee;
      background:#fff;
    }
    .filter-list strong{font-size:.94rem}
    .filter-list span{font-size:.84rem;color:var(--muted)}
    .filter-list .state{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      color:var(--green);
      font-weight:800;
      font-size:.82rem;
      white-space:nowrap;
    }
    .filter-list .state::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:var(--green-2);
      box-shadow:0 0 0 4px rgba(46,168,95,.14);
    }

    .preview-grid{
      padding:1rem;
    }
    .preview-grid-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      margin-bottom:1rem;
      flex-wrap:wrap;
    }
    .success-note{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.48rem .7rem;
      border-radius:999px;
      background:var(--green-4);
      border:1px solid #cde7d6;
      color:var(--green);
      font-weight:800;
      font-size:.88rem;
    }
    .success-note .icon{width:15px;height:15px}
    .content-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:.9rem;
    }
    .content-card{
      border:1px solid var(--line);
      border-radius:18px;
      overflow:hidden;
      background:#fff;
      box-shadow:0 6px 16px rgba(16,40,28,.04);
      display:flex;
      flex-direction:column;
      min-height:100%;
    }
    .thumb{
      min-height:122px;
      background:
        linear-gradient(135deg, rgba(31,122,68,.12), rgba(46,168,95,.06)),
        radial-gradient(circle at 24% 28%, rgba(255,255,255,.62), transparent 20%),
        linear-gradient(145deg, #dee8e1, #c4d3cb);
      position:relative;
      overflow:hidden;
    }
    .thumb::after{
      content:"";
      position:absolute;
      inset:14px;
      border:1px solid rgba(255,255,255,.45);
      border-radius:14px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0));
      mix-blend-mode:screen;
    }
    .thumb .lock{
      position:absolute;
      right:12px;top:12px;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.34rem .55rem;
      border-radius:999px;
      background:rgba(255,255,255,.76);
      color:#204133;
      border:1px solid rgba(255,255,255,.45);
      font-size:.8rem;
      font-weight:800;
      backdrop-filter:blur(4px);
    }
    .thumb .lock .icon{width:13px;height:13px;color:var(--green)}
    .card-body{
      padding:.95rem;
      display:flex;
      flex-direction:column;
      gap:.7rem;
      flex:1;
    }
    .card-body h4{
      margin:0;
      font-size:1.03rem;
      font-weight:900;
      line-height:1.35;
    }
    .card-tags{
      display:flex;
      flex-wrap:wrap;
      gap:.4rem;
    }
    .card-tag{
      display:inline-flex;
      align-items:center;
      padding:.3rem .52rem;
      border-radius:999px;
      background:#f5faf7;
      border:1px solid #e2ece5;
      color:#4c6256;
      font-size:.79rem;
      font-weight:700;
    }
    .card-desc{
      color:var(--muted);
      font-size:.92rem;
      margin:0;
      min-height:3.1rem;
    }
    .card-foot{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.75rem;
      margin-top:auto;
    }
    .member-state{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      color:var(--green);
      font-weight:800;
      font-size:.84rem;
    }
    .member-state .icon{width:14px;height:14px}
    .small-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:.54rem .72rem;
      border-radius:10px;
      background:#fff;
      border:1px solid var(--line);
      color:#355143;
      font-weight:700;
      font-size:.84rem;
    }
    .small-link:hover,
    .small-link:focus-visible{
      background:var(--green-4);
      border-color:#cfe6d7;
      color:var(--green);
    }

    .banner{
      background:linear-gradient(135deg, #10311f, #1f7a44);
      color:#effff4;
      border-radius:24px;
      padding:1.35rem 1.35rem;
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      position:relative;
    }
    .banner::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
      background-size:72px 72px;
      opacity:.2;
      pointer-events:none;
    }
    .banner-inner{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1.3rem;
      flex-wrap:wrap;
    }
    .banner h3{
      color:#fff;
      margin:0 0 .35rem;
      font-size:1.18rem;
      font-weight:900;
    }
    .banner p{
      margin:0;
      color:#dff6e7;
    }
    .banner-stats{
      display:flex;
      gap:.7rem;
      flex-wrap:wrap;
    }
    .stat{
      min-width:132px;
      padding:.8rem .9rem;
      border-radius:16px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.16);
    }
    .stat strong{
      display:block;
      font-size:1.06rem;
      margin-bottom:.15rem;
      color:#fff;
    }
    .stat span{font-size:.84rem;color:#e4faeb}

    .faq-wrap{
      background:linear-gradient(180deg, #fff, #f8fbf9);
      border-top:1px solid rgba(219,230,223,.6);
    }
    .faq-shell{
      background:#fff;
      border:1px solid var(--line);
      border-radius:24px;
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .accordion{
      margin:0;
      background:#fff;
      border:none;
    }
    .accordion-title{
      color:var(--text);
      font-weight:800;
      font-size:1rem;
      padding:1rem 1.1rem;
    }
    .accordion-item{
      border-color:var(--line);
      border-top:1px solid var(--line);
    }
    .accordion-content{
      background:#fff;
      border-left:3px solid var(--green);
      padding:0 1.1rem 1rem;
      color:var(--muted);
    }
    .accordion-title:hover{background:#fcfffd}
    .accordion-title:focus-visible{background:var(--green-4)}
    .accordion-title::before{
      color:var(--green);
      font-size:1.2rem;
      margin-top:-.1rem;
    }

    .cta-wrap{
      padding-top:4rem;
    }
    .cta-panel{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      background:
        linear-gradient(135deg, #ffffff, #f7fcf9 45%, #eef8f2 100%);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      padding:1.6rem;
    }
    .cta-panel::after{
      content:"";
      position:absolute;
      inset:auto -8% -15% auto;
      width:340px;height:340px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(46,168,95,.10), rgba(46,168,95,0) 65%);
      pointer-events:none;
    }
    .cta-inner{
      position:relative;
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:1.1rem;
      align-items:center;
    }
    .cta-icon{
      width:58px;height:58px;border-radius:18px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:var(--green-4);
      color:var(--green);
      border:1px solid #cde7d6;
      margin-bottom:.85rem;
    }
    .cta-icon .icon{width:28px;height:28px}
    .cta-panel h2{
      margin:0 0 .45rem;
      font-weight:900;
      font-size:clamp(1.5rem, 2.5vw, 2.2rem);
      line-height:1.15;
    }
    .cta-panel p{
      margin:0;
      color:var(--muted);
      max-width:40rem;
    }
    .cta-badges{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-top:1rem;
    }
    .cta-badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.48rem .68rem;
      border-radius:999px;
      background:#fff;
      border:1px solid var(--line);
      color:#395145;
      font-weight:700;
      font-size:.86rem;
      box-shadow:0 8px 18px rgba(16,40,28,.04);
    }
    .cta-actions{
      display:flex;
      justify-content:flex-end;
      gap:.8rem;
      flex-wrap:wrap;
    }

    .site-footer{
      margin-top:4rem;
      background:#10271d;
      color:#d5e7dc;
      padding:3rem 0 1rem;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .footer-top{
      display:grid;
      grid-template-columns:1.2fr .8fr .7fr;
      gap:1.2rem;
      padding-bottom:1.4rem;
      border-bottom:1px solid rgba(255,255,255,.12);
    }
    .footer-brand{
      display:inline-flex;
      align-items:center;
      gap:.78rem;
      font-size:1.05rem;
      font-weight:900;
      color:#fff;
      margin-bottom:.85rem;
    }
    .footer-copy{
      margin:0;
      color:#bfd4c5;
      max-width:36rem;
    }
    .footer-tags{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-top:1rem;
    }
    .footer-tag{
      display:inline-flex;
      align-items:center;
      padding:.38rem .62rem;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      color:#eefaf1;
      font-size:.84rem;
      font-weight:700;
    }
    .footer-links{
      display:grid;
      gap:.65rem;
      align-content:start;
    }
    .footer-links a{
      color:#edf7f0;
      font-weight:700;
      width:fit-content;
    }
    .footer-links a:hover,
    .footer-links a:focus-visible{color:#9ef1bf}
    .footer-notes{
      display:grid;
      gap:.7rem;
      align-content:start;
      color:#b7ccbd;
      font-size:.94rem;
    }
    .footer-bottom{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
      padding-top:1rem;
      color:#a7bdb1;
      font-size:.92rem;
    }

    .section-spacer{height:1px;background:linear-gradient(90deg, transparent, rgba(31,122,68,.16), transparent);margin:0 auto;max-width:var(--max)}
    .helper-line{
      color:var(--muted);
      font-size:.9rem;
      margin-top:.7rem;
    }

    @media (max-width: 1180px){
      .hero-grid,
      .cta-inner{grid-template-columns:1fr}
      .preview-body{grid-template-columns:1fr}
      .content-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
    }

    @media (max-width: 920px){
      .header-inner{flex-wrap:wrap}
      .nav-wrap{width:100%;order:3;justify-content:space-between}
      .nav-actions{margin-left:auto}
      .mega-panel{
        right:auto;left:0;
        width:min(560px, calc(100vw - 2rem));
      }
      .tier-strip{grid-template-columns:1fr}
      .footer-top{grid-template-columns:1fr}
    }

    @media (max-width: 768px){
      .top-strip .top-strip-inner{justify-content:center}
      .primary-nav{gap:.25rem}
      .nav-link{padding:.62rem .76rem;font-size:.92rem}
      .hero{padding:3.5rem 0 2.8rem}
      .page-section{padding:4rem 0}
      .content-grid{grid-template-columns:1fr}
      .panel-grid{grid-template-columns:1fr}
      .panel-body{padding:.95rem}
      .hero-panel{border-radius:22px}
      .cta-panel{padding:1.2rem}
      .banner{padding:1.15rem}
    }

    @media (max-width: 520px){
      .header-inner{padding:.8rem .9rem}
      .brand{font-size:1rem}
      .brand-mark{width:34px;height:34px;border-radius:11px}
      .nav-link{font-size:.88rem;padding:.58rem .72rem}
      .mega-toggle{width:40px;height:40px}
      .nav-actions{width:100%;justify-content:space-between}
      .age-mini{padding:.55rem .72rem;font-size:.86rem}
      .hero-copy{padding-top:.2rem}
      h1{font-size:clamp(2rem, 12vw, 2.8rem)}
      .lead{font-size:1rem}
      .hero-actions .btn-primary-green,
      .hero-actions .btn-secondary-green,
      .cta-actions .btn-primary-green,
      .cta-actions .btn-secondary-green{width:100%}
      .filter-bar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.35rem}
      .filter-btn{flex:0 0 auto}
      .panel-top,.preview-toolbar,.status-bar,.banner-inner{align-items:flex-start}
      .status-bar{flex-direction:column}
      .card-foot{flex-direction:column;align-items:flex-start}
      .footer-bottom{flex-direction:column}
    }