/* roulang page: index */
:root {
      --brand: #3b202b;
      --brand-dark: #27151d;
      --brand-soft: #7b3f52;
      --accent: #b87959;
      --accent-soft: #f3ddd2;
      --paper: #fbf7f2;
      --paper-2: #f4eee8;
      --ink: #241f21;
      --muted: #756a6c;
      --line: rgba(36, 31, 33, .12);
      --line-strong: rgba(36, 31, 33, .2);
      --white: #fffdfb;
      --radius: 8px;
      --shadow: 0 18px 45px rgba(39, 21, 29, .09);
      --shadow-hover: 0 22px 55px rgba(39, 21, 29, .14);
      --container: 1220px;
      --ease: 180ms ease;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.72;
      letter-spacing: 0;
      text-rendering: optimizeLegibility;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color var(--ease), background var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
    }

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

    button,
    .button {
      font-family: inherit;
      letter-spacing: 0;
    }

    .site-wrap {
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255, 253, 251, .92), rgba(251, 247, 242, .98) 34%),
        radial-gradient(circle at 12% 14%, rgba(184, 121, 89, .12), transparent 30%),
        linear-gradient(135deg, rgba(59, 32, 43, .06), transparent 44%);
    }

    .page-container {
      width: min(calc(100% - 40px), var(--container));
      margin: 0 auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(251, 247, 242, .88);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--line);
    }

    .top-bar,
    .top-bar ul {
      background: transparent;
    }

    .nav-shell {
      width: min(calc(100% - 40px), var(--container));
      min-height: 76px;
      margin: 0 auto;
      padding: 0;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      color: var(--brand);
      white-space: nowrap;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      color: var(--white);
      background: var(--brand);
      border-radius: 8px;
      box-shadow: 0 10px 22px rgba(59, 32, 43, .18);
      font-size: 17px;
    }

    .brand-text {
      font-size: 18px;
      line-height: 1.2;
    }

    .nav-menu {
      align-items: center;
      gap: 6px;
    }

    .nav-menu a {
      display: inline-flex;
      align-items: center;
      min-height: 40px;
      padding: 0 14px;
      border-radius: 8px;
      color: var(--muted);
      font-size: 15px;
      font-weight: 650;
    }

    .nav-menu a:hover,
    .nav-menu a:focus {
      color: var(--brand);
      background: rgba(59, 32, 43, .07);
      outline: none;
    }

    .nav-menu a.active {
      color: var(--brand);
      background: var(--accent-soft);
    }

    .nav-cta {
      margin-left: 10px;
    }

    .button.primary-action,
    .button.secondary-action {
      min-height: 46px;
      padding: 13px 20px;
      margin: 0;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 750;
    }

    .button.primary-action {
      color: var(--white);
      background: var(--brand);
      box-shadow: 0 12px 26px rgba(59, 32, 43, .18);
    }

    .button.primary-action:hover,
    .button.primary-action:focus {
      color: var(--white);
      background: var(--brand-dark);
      transform: translateY(-2px);
      outline: 3px solid rgba(184, 121, 89, .22);
      outline-offset: 2px;
    }

    .button.secondary-action {
      color: var(--brand);
      background: rgba(255, 253, 251, .72);
      border: 1px solid var(--line-strong);
    }

    .button.secondary-action:hover,
    .button.secondary-action:focus {
      color: var(--brand-dark);
      border-color: var(--brand-soft);
      background: var(--white);
      transform: translateY(-2px);
      outline: 3px solid rgba(184, 121, 89, .16);
      outline-offset: 2px;
    }

    .title-bar {
      background: var(--brand);
      padding: 12px 20px;
    }

    .menu-icon::after {
      background: var(--white);
      box-shadow: 0 7px 0 var(--white), 0 14px 0 var(--white);
    }

    main {
      display: block;
    }

    section {
      padding: 84px 0;
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      padding: 4px 10px;
      margin-bottom: 14px;
      color: var(--brand);
      background: rgba(184, 121, 89, .13);
      border: 1px solid rgba(184, 121, 89, .24);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 760;
    }

    .section-head {
      max-width: 760px;
      margin-bottom: 34px;
    }

    .section-head.centered {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

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

    h1 {
      max-width: 980px;
      font-size: 52px;
    }

    h2 {
      font-size: 34px;
    }

    h3 {
      font-size: 21px;
    }

    p {
      margin: 0;
      color: var(--muted);
    }

    .hero {
      padding: 46px 0 88px;
    }

    .hero-panel {
      position: relative;
      min-height: 610px;
      overflow: hidden;
      border-radius: 8px;
      background:
        linear-gradient(90deg, rgba(39, 21, 29, .94) 0%, rgba(59, 32, 43, .84) 46%, rgba(59, 32, 43, .28) 100%),
        linear-gradient(135deg, rgba(184, 121, 89, .36), rgba(255, 253, 251, .04)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1300' height='760' viewBox='0 0 1300 760'%3E%3Crect width='1300' height='760' fill='%23efe4dc'/%3E%3Cg opacity='.78'%3E%3Crect x='740' y='110' width='360' height='78' rx='8' fill='%23fffdfb'/%3E%3Crect x='780' y='140' width='220' height='10' fill='%237b3f52' opacity='.65'/%3E%3Crect x='740' y='218' width='430' height='98' rx='8' fill='%23fffdfb'/%3E%3Crect x='780' y='252' width='290' height='10' fill='%23271f21' opacity='.3'/%3E%3Crect x='780' y='278' width='250' height='10' fill='%23271f21' opacity='.18'/%3E%3Crect x='690' y='350' width='460' height='160' rx='8' fill='%23fffdfb'/%3E%3Crect x='730' y='392' width='320' height='12' fill='%23b87959' opacity='.62'/%3E%3Crect x='730' y='428' width='260' height='10' fill='%23271f21' opacity='.2'/%3E%3Crect x='730' y='458' width='210' height='10' fill='%23271f21' opacity='.18'/%3E%3Crect x='950' y='552' width='220' height='66' rx='8' fill='%233b202b' opacity='.82'/%3E%3C/g%3E%3Cpath d='M650 78L1240 662' stroke='%23b87959' stroke-width='2' opacity='.18'/%3E%3Cpath d='M716 60L1250 542' stroke='%23271f21' stroke-width='1' opacity='.12'/%3E%3C/svg%3E");
      background-size: cover;
      background-position: center;
      box-shadow: var(--shadow);
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 760px;
      padding: 78px 58px 54px;
    }

    .hero-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 24px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 30px;
      padding: 5px 11px;
      border: 1px solid rgba(255, 253, 251, .26);
      border-radius: 999px;
      color: rgba(255, 253, 251, .9);
      background: rgba(255, 253, 251, .1);
      font-size: 13px;
      font-weight: 720;
    }

    .hero h1 {
      color: var(--white);
      margin-bottom: 22px;
    }

    .hero-intro {
      max-width: 700px;
      color: rgba(255, 253, 251, .82);
      font-size: 18px;
      line-height: 1.8;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 32px;
    }

    .hero-actions .secondary-action {
      background: rgba(255, 253, 251, .12);
      color: var(--white);
      border-color: rgba(255, 253, 251, .42);
    }

    .hero-actions .secondary-action:hover {
      background: rgba(255, 253, 251, .2);
      color: var(--white);
      border-color: rgba(255, 253, 251, .7);
    }

    .hero-matrix {
      position: absolute;
      right: 34px;
      bottom: 34px;
      z-index: 2;
      width: min(460px, calc(100% - 68px));
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .matrix-item {
      min-height: 104px;
      padding: 16px;
      border: 1px solid rgba(255, 253, 251, .24);
      border-radius: 8px;
      background: rgba(255, 253, 251, .86);
      box-shadow: 0 14px 30px rgba(39, 21, 29, .12);
    }

    .matrix-item strong {
      display: block;
      color: var(--brand);
      font-size: 24px;
      line-height: 1;
      margin-bottom: 9px;
    }

    .matrix-item span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .topic-section {
      background: var(--white);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

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

    .topic-card,
    .recommend-card,
    .seed-card,
    .price-card,
    .related-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--white);
      box-shadow: 0 10px 28px rgba(39, 21, 29, .05);
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }

    .topic-card:hover,
    .recommend-card:hover,
    .seed-card:hover,
    .price-card:hover,
    .related-card:hover {
      transform: translateY(-2px);
      border-color: rgba(123, 63, 82, .34);
      box-shadow: var(--shadow-hover);
    }

    .topic-cover {
      height: 132px;
      border-radius: 8px 8px 0 0;
      background:
        linear-gradient(135deg, rgba(59, 32, 43, .92), rgba(123, 63, 82, .66)),
        repeating-linear-gradient(90deg, rgba(255, 253, 251, .24) 0 1px, transparent 1px 28px);
      position: relative;
      overflow: hidden;
    }

    .topic-cover::after {
      content: "";
      position: absolute;
      inset: 22px;
      border: 1px solid rgba(255, 253, 251, .32);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(255, 253, 251, .18), transparent);
    }

    .topic-body {
      padding: 20px;
    }

    .topic-body h3 {
      margin-bottom: 10px;
    }

    .topic-body p {
      min-height: 54px;
      font-size: 15px;
    }

    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 27px;
      padding: 3px 9px;
      color: var(--brand-soft);
      background: rgba(184, 121, 89, .11);
      border: 1px solid rgba(184, 121, 89, .2);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 720;
    }

    .meta-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 13px;
    }

    .entry-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
      gap: 24px;
      align-items: stretch;
    }

    .featured-card {
      min-height: 460px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 34px;
      border-radius: 8px;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(39, 21, 29, .08), rgba(39, 21, 29, .92)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='740' height='520' viewBox='0 0 740 520'%3E%3Crect width='740' height='520' fill='%23dfcec4'/%3E%3Crect x='70' y='70' width='250' height='70' rx='8' fill='%23fffdfb' opacity='.92'/%3E%3Crect x='105' y='98' width='160' height='10' fill='%233b202b' opacity='.5'/%3E%3Crect x='70' y='168' width='560' height='170' rx='8' fill='%23fffdfb' opacity='.82'/%3E%3Crect x='112' y='210' width='360' height='14' fill='%23b87959' opacity='.66'/%3E%3Crect x='112' y='250' width='430' height='10' fill='%23241f21' opacity='.18'/%3E%3Crect x='112' y='282' width='300' height='10' fill='%23241f21' opacity='.16'/%3E%3Crect x='420' y='368' width='210' height='72' rx='8' fill='%233b202b' opacity='.78'/%3E%3C/svg%3E");
      background-size: cover;
      background-position: center;
      box-shadow: var(--shadow);
    }

    .featured-card h3 {
      color: var(--white);
      font-size: 28px;
      margin: 12px 0;
    }

    .featured-card p {
      color: rgba(255, 253, 251, .82);
      margin-bottom: 22px;
    }

    .entry-list {
      display: grid;
      gap: 14px;
    }

    .entry-item {
      display: grid;
      grid-template-columns: 68px minmax(0, 1fr);
      gap: 16px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 253, 251, .78);
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }

    .entry-item:hover {
      transform: translateY(-2px);
      border-color: rgba(123, 63, 82, .3);
      box-shadow: 0 14px 32px rgba(39, 21, 29, .07);
    }

    .entry-index {
      width: 68px;
      height: 68px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: var(--brand);
      background: var(--accent-soft);
      font-size: 20px;
      font-weight: 850;
    }

    .entry-item h3 {
      font-size: 18px;
      margin-bottom: 7px;
    }

    .entry-item p {
      font-size: 14px;
      line-height: 1.62;
    }

    .mini-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 12px;
      color: var(--brand);
      font-size: 14px;
      font-weight: 800;
    }

    .mini-link:hover {
      color: var(--accent);
    }

    .benefit-strip {
      background: var(--brand);
      color: var(--white);
    }

    .benefit-strip .section-kicker {
      color: var(--white);
      background: rgba(255, 253, 251, .11);
      border-color: rgba(255, 253, 251, .2);
    }

    .benefit-strip h2,
    .benefit-strip h3 {
      color: var(--white);
    }

    .benefit-strip p {
      color: rgba(255, 253, 251, .72);
    }

    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .benefit-card {
      min-height: 220px;
      padding: 26px;
      border: 1px solid rgba(255, 253, 251, .16);
      border-radius: 8px;
      background: rgba(255, 253, 251, .08);
    }

    .benefit-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      margin-bottom: 22px;
      border-radius: 8px;
      background: rgba(184, 121, 89, .28);
      color: var(--white);
      font-size: 20px;
      font-weight: 900;
    }

    .related-section {
      background: var(--paper-2);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .related-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(240px, 1fr));
      gap: 18px;
      overflow-x: auto;
      padding-bottom: 8px;
      scrollbar-width: thin;
    }

    .related-card {
      min-height: 218px;
      padding: 22px;
      background: var(--white);
    }

    .related-card h3 {
      margin: 14px 0 10px;
    }

    .related-no {
      color: var(--accent);
      font-size: 13px;
      font-weight: 850;
    }

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

    .seed-card {
      overflow: hidden;
      background: var(--white);
    }

    .seed-cover {
      aspect-ratio: 4 / 5;
      padding: 18px;
      display: flex;
      align-items: flex-end;
      background:
        linear-gradient(180deg, rgba(255, 253, 251, .1), rgba(39, 21, 29, .72)),
        repeating-linear-gradient(135deg, rgba(59, 32, 43, .92) 0 18px, rgba(123, 63, 82, .92) 18px 36px);
    }

    .seed-cover span {
      display: inline-flex;
      padding: 5px 9px;
      border-radius: 999px;
      background: rgba(255, 253, 251, .88);
      color: var(--brand);
      font-size: 12px;
      font-weight: 800;
    }

    .seed-body {
      padding: 18px;
    }

    .seed-body h3 {
      margin-bottom: 10px;
      font-size: 18px;
    }

    .seed-body p {
      font-size: 14px;
    }

    .news-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 28px;
      align-items: start;
    }

    .news-list {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--white);
      overflow: hidden;
    }

    .news-link {
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      padding: 20px 22px;
      border-bottom: 1px solid var(--line);
    }

    .news-link:last-child {
      border-bottom: 0;
    }

    .news-link:hover {
      background: rgba(184, 121, 89, .08);
    }

    .news-date {
      color: var(--brand);
      font-size: 13px;
      font-weight: 850;
    }

    .news-title {
      color: var(--ink);
      font-weight: 780;
      line-height: 1.45;
    }

    .news-arrow {
      color: var(--accent);
      font-weight: 900;
    }

    .side-callout {
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--brand);
      box-shadow: var(--shadow);
    }

    .side-callout h3 {
      color: var(--white);
      margin-bottom: 12px;
    }

    .side-callout p {
      color: rgba(255, 253, 251, .74);
      margin-bottom: 20px;
    }

    .price-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .price-card {
      padding: 26px;
      background: var(--white);
    }

    .price-card.featured {
      border-color: rgba(184, 121, 89, .46);
      box-shadow: var(--shadow);
    }

    .price-name {
      color: var(--brand);
      font-size: 20px;
      font-weight: 850;
      margin-bottom: 8px;
    }

    .price-note {
      min-height: 56px;
      font-size: 14px;
      margin-bottom: 20px;
    }

    .check-list {
      display: grid;
      gap: 10px;
      margin: 0 0 22px;
      padding: 0;
      list-style: none;
    }

    .check-list li {
      position: relative;
      padding-left: 24px;
      color: var(--muted);
      font-size: 14px;
    }

    .check-list li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--accent);
      font-weight: 900;
    }

    .faq-section {
      background: var(--white);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .accordion {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--white);
    }

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

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

    .accordion-title {
      padding: 20px 24px;
      color: var(--ink);
      font-size: 17px;
      font-weight: 820;
      border: 0;
    }

    .accordion-title:hover,
    .accordion-title:focus {
      color: var(--brand);
      background: rgba(184, 121, 89, .08);
      outline: none;
    }

    .accordion-title::before {
      color: var(--accent);
      font-size: 22px;
      margin-top: -12px;
    }

    .accordion-content {
      padding: 0 24px 22px;
      border: 0;
      background: var(--white);
      color: var(--muted);
      line-height: 1.75;
    }

    .share-cta {
      padding-bottom: 96px;
    }

    .cta-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 30px;
      align-items: center;
      padding: 42px;
      border: 1px solid rgba(184, 121, 89, .26);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(184, 121, 89, .18), rgba(255, 253, 251, .72)),
        var(--accent-soft);
      box-shadow: var(--shadow);
    }

    .cta-panel h2 {
      margin-bottom: 12px;
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: flex-end;
    }

    .progress-box {
      margin-top: 20px;
      max-width: 520px;
    }

    .progress-label {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      color: var(--brand);
      font-size: 13px;
      font-weight: 800;
    }

    .progress {
      height: 10px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(59, 32, 43, .12);
    }

    .progress-meter {
      background: var(--brand);
      border-radius: 999px;
    }

    .site-footer {
      padding: 42px 0;
      color: rgba(255, 253, 251, .72);
      background: var(--brand-dark);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: center;
    }

    .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--white);
      font-size: 18px;
      font-weight: 850;
      margin-bottom: 10px;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      justify-content: flex-end;
    }

    .footer-links a {
      color: rgba(255, 253, 251, .72);
      font-size: 14px;
    }

    .footer-links a:hover,
    .footer-links a:focus {
      color: var(--white);
      outline: none;
    }

    .copyright {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid rgba(255, 253, 251, .12);
      color: rgba(255, 253, 251, .58);
      font-size: 13px;
    }

    @media screen and (max-width: 1024px) {
      .nav-shell {
        width: min(calc(100% - 28px), var(--container));
      }

      .page-container {
        width: min(calc(100% - 28px), var(--container));
      }

      h1 {
        font-size: 42px;
      }

      h2 {
        font-size: 30px;
      }

      .hero-panel {
        min-height: 720px;
      }

      .hero-content {
        padding: 56px 36px;
      }

      .hero-matrix {
        left: 36px;
        right: 36px;
        bottom: 32px;
        width: auto;
      }

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

      .entry-layout,
      .news-layout,
      .cta-panel {
        grid-template-columns: 1fr;
      }

      .price-grid,
      .benefit-grid {
        grid-template-columns: 1fr;
      }

      .cta-actions {
        justify-content: flex-start;
      }
    }

    @media screen and (max-width: 768px) {
      section {
        padding: 58px 0;
      }

      .top-bar {
        display: block;
        padding: 14px 0;
      }

      .top-bar-left,
      .top-bar-right {
        width: 100%;
      }

      .nav-menu {
        display: grid;
        gap: 8px;
        margin-top: 14px;
      }

      .nav-menu li,
      .nav-menu a {
        width: 100%;
      }

      .nav-menu a {
        justify-content: center;
      }

      .nav-cta {
        margin: 12px 0 0;
        width: 100%;
      }

      .nav-cta .button {
        width: 100%;
      }

      .hero {
        padding-top: 28px;
      }

      .hero-panel {
        min-height: 760px;
      }

      .hero-content {
        padding: 42px 24px;
      }

      h1 {
        font-size: 34px;
      }

      .hero-intro {
        font-size: 16px;
      }

      .hero-actions .button {
        width: 100%;
      }

      .hero-matrix {
        grid-template-columns: 1fr;
        left: 24px;
        right: 24px;
      }

      .matrix-item {
        min-height: 82px;
      }

      .related-row {
        grid-template-columns: repeat(4, 260px);
      }

      .news-link {
        grid-template-columns: 1fr;
        gap: 8px;
      }

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

      .footer-links {
        justify-content: flex-start;
      }
    }

    @media screen and (max-width: 520px) {
      .page-container {
        width: min(calc(100% - 24px), var(--container));
      }

      .directory-grid,
      .seed-grid {
        grid-template-columns: 1fr;
      }

      .hero-panel {
        min-height: 830px;
      }

      .entry-item {
        grid-template-columns: 54px minmax(0, 1fr);
        padding: 15px;
      }

      .entry-index {
        width: 54px;
        height: 54px;
        font-size: 17px;
      }

      .featured-card {
        min-height: 390px;
        padding: 24px;
      }

      .featured-card h3 {
        font-size: 23px;
      }

      .cta-panel {
        padding: 28px 20px;
      }

      .cta-actions .button {
        width: 100%;
      }

      .button.primary-action,
      .button.secondary-action {
        width: 100%;
        min-height: 46px;
      }
    }

/* roulang page: category1 */
:root {
      --bg: #f6f1eb;
      --bg-soft: #efe7df;
      --surface: #ffffff;
      --surface-strong: #1f141a;
      --surface-muted: #f8f4ef;
      --text: #241922;
      --muted: #6e5e66;
      --line: rgba(43, 28, 35, 0.12);
      --line-strong: rgba(43, 28, 35, 0.18);
      --primary: #7a2341;
      --primary-dark: #5e1730;
      --primary-soft: #f1dbe2;
      --accent: #b3704c;
      --accent-soft: #ecd6c8;
      --warm: #d7c0af;
      --shadow: 0 18px 42px rgba(32, 20, 27, 0.08);
      --shadow-strong: 0 24px 52px rgba(32, 20, 27, 0.14);
      --radius: 8px;
      --radius-sm: 6px;
      --gap: 24px;
      --max: 1240px;
      --focus: 0 0 0 3px rgba(122, 35, 65, 0.18);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: PingFang SC, Microsoft YaHei, Noto Sans SC, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(179, 112, 76, 0.08), transparent 36%),
        radial-gradient(circle at top right, rgba(122, 35, 65, 0.08), transparent 32%),
        linear-gradient(180deg, #fbf8f4 0%, var(--bg) 40%, #f7f3ee 100%);
      line-height: 1.72;
      letter-spacing: 0;
      overflow-x: hidden;
    }

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

    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;
    }

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

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

    button:focus,
    .button:focus,
    a:focus,
    input:focus,
    textarea:focus {
      outline: none;
      box-shadow: var(--focus);
    }

    .page-container,
    .grid-container {
      max-width: var(--max);
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 40;
      backdrop-filter: blur(14px);
      background: rgba(250, 246, 241, .88);
      border-bottom: 1px solid var(--line);
    }

    .title-bar {
      display: none;
      align-items: center;
      justify-content: space-between;
      padding: .85rem 1rem;
      color: var(--text);
    }

    .menu-icon {
      width: 44px;
      height: 44px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--surface);
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .menu-icon::before,
    .menu-icon::after {
      content: "";
      position: absolute;
      width: 18px;
      height: 2px;
      background: var(--text);
      border-radius: 2px;
      box-shadow: 0 6px 0 var(--text), 0 -6px 0 var(--text);
    }

    .title-bar-title {
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0;
    }

    .nav-shell {
      max-width: var(--max);
      margin: 0 auto;
      padding: .9rem 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      background: transparent;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: .8rem;
      font-weight: 800;
      color: var(--text);
      white-space: nowrap;
    }

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

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg, var(--primary), #a74360);
      color: #fff;
      font-weight: 800;
      box-shadow: 0 10px 22px rgba(122, 35, 65, .18);
    }

    .brand-text {
      font-size: 1.05rem;
      letter-spacing: 0;
    }

    .top-bar-left {
      flex: 0 0 auto;
    }

    .top-bar-right {
      display: flex;
      align-items: center;
      gap: .9rem;
    }

    .top-bar-right ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: inline-flex;
      align-items: center;
      gap: .35rem;
    }

    .top-bar-right li a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: .45rem .8rem;
      color: var(--muted);
      border-radius: 8px;
      border: 1px solid transparent;
      font-size: .96rem;
    }

    .top-bar-right li a:hover,
    .top-bar-right li a.active {
      color: var(--primary);
      background: rgba(122, 35, 65, .06);
      border-color: rgba(122, 35, 65, .12);
    }

    .nav-cta {
      margin: 0;
      border-radius: 8px;
      border: 1px solid var(--primary);
      background: var(--primary);
      color: #fff !important;
      min-height: 44px;
      padding: .7rem 1rem;
      font-weight: 700;
      box-shadow: 0 12px 24px rgba(122, 35, 65, .18);
    }

    .nav-cta:hover,
    .nav-cta:focus {
      background: var(--primary-dark);
      border-color: var(--primary-dark);
      color: #fff !important;
      transform: translateY(-1px);
    }

    .site-main {
      overflow: hidden;
    }

    .section {
      padding: clamp(3rem, 5vw, 5.5rem) 0;
    }

    .section.tight {
      padding-top: clamp(1.8rem, 3vw, 3rem);
      padding-bottom: clamp(1.8rem, 3vw, 3rem);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      color: var(--primary);
      font-size: .86rem;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
      margin-bottom: .9rem;
    }

    .eyebrow::before {
      content: "";
      width: 14px;
      height: 2px;
      background: var(--primary);
      border-radius: 2px;
    }

    .hero-intro {
      position: relative;
      border-top: 1px solid rgba(122, 35, 65, .08);
      border-bottom: 1px solid rgba(122, 35, 65, .08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.76)),
        linear-gradient(90deg, rgba(122, 35, 65, .06), rgba(179, 112, 76, .04));
    }

    .hero-card {
      padding: 1.2rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .hero-title {
      margin: 0 0 .8rem 0;
      font-size: clamp(2.05rem, 4vw, 3.45rem);
      line-height: 1.1;
      letter-spacing: 0;
      color: var(--text);
      max-width: 12ch;
    }

    .hero-title strong {
      color: var(--primary);
      font-weight: 800;
    }

    .hero-copy {
      color: var(--muted);
      font-size: 1.02rem;
      max-width: 42rem;
      margin-bottom: 1.2rem;
    }

    .meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem;
      margin: 1rem 0 1.35rem;
    }

    .badge-soft {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      min-height: 34px;
      padding: .35rem .75rem;
      border-radius: 999px;
      border: 1px solid rgba(122, 35, 65, .14);
      background: rgba(122, 35, 65, .06);
      color: var(--primary);
      font-size: .86rem;
      font-weight: 700;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .8rem;
      margin-top: 1rem;
    }

    .button.primary-action {
      border-radius: 8px;
      background: var(--primary);
      color: #fff;
      border: 1px solid var(--primary);
      min-height: 46px;
      padding: .85rem 1.2rem;
      font-weight: 700;
      box-shadow: 0 12px 22px rgba(122, 35, 65, .18);
      display: inline-flex;
      align-items: center;
      gap: .55rem;
    }

    .button.primary-action:hover {
      background: var(--primary-dark);
      border-color: var(--primary-dark);
      transform: translateY(-1px);
    }

    .button.secondary-action {
      border-radius: 8px;
      background: rgba(255,255,255,.8);
      color: var(--text);
      border: 1px solid var(--line-strong);
      min-height: 46px;
      padding: .85rem 1.2rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: .55rem;
    }

    .button.secondary-action:hover {
      color: var(--primary);
      border-color: rgba(122, 35, 65, .24);
      background: #fff;
      transform: translateY(-1px);
    }

    .hero-visual {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.42);
      background: var(--surface);
      box-shadow: var(--shadow-strong);
    }

    .hero-visual img {
      width: 100%;
      aspect-ratio: 5 / 4;
      object-fit: cover;
    }

    .visual-overlay {
      position: absolute;
      inset: auto 14px 14px 14px;
      display: grid;
      gap: .6rem;
    }

    .visual-stat {
      padding: .75rem .9rem;
      border-radius: 8px;
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(255,255,255,.45);
      box-shadow: 0 10px 24px rgba(24, 14, 18, .12);
    }

    .visual-stat strong {
      display: block;
      font-size: 1rem;
      color: var(--text);
      margin-bottom: .15rem;
    }

    .visual-stat span {
      color: var(--muted);
      font-size: .86rem;
    }

    .mini-pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      margin-top: 1rem;
    }

    .mini-pill {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: .35rem .65rem;
      border-radius: 999px;
      background: #fff;
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: .84rem;
    }

    .section-head {
      margin-bottom: 1.3rem;
    }

    .section-head h2 {
      margin: 0;
      font-size: clamp(1.45rem, 2.4vw, 2.25rem);
      line-height: 1.2;
      letter-spacing: 0;
      color: var(--text);
    }

    .section-head p {
      margin: .5rem 0 0 0;
      color: var(--muted);
      max-width: 46rem;
    }

    .filter-band {
      background: var(--surface);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .filter-shell {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 1rem;
      align-items: center;
    }

    .filter-group,
    .search-group {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: .9rem;
      box-shadow: 0 8px 22px rgba(34, 21, 28, .04);
    }

    .segmented {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
    }

    .segmented .tag {
      display: inline-flex;
      align-items: center;
      min-height: 40px;
      padding: .4rem .8rem;
      border-radius: 999px;
      border: 1px solid transparent;
      background: var(--surface-muted);
      color: var(--muted);
      font-size: .9rem;
      font-weight: 600;
    }

    .segmented .tag:hover,
    .segmented .tag.active {
      background: rgba(122, 35, 65, .08);
      border-color: rgba(122, 35, 65, .16);
      color: var(--primary);
    }

    .input-group {
      margin: 0;
    }

    .input-group-field {
      height: 46px;
      border-radius: 8px 0 0 8px !important;
      border-color: var(--line);
      box-shadow: none;
      background: #fff;
    }

    .input-group-field::placeholder {
      color: #8a7b82;
    }

    .input-group-button .button {
      min-height: 46px;
      border-radius: 0 8px 8px 0 !important;
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
      font-weight: 700;
    }

    .input-group-button .button:hover {
      background: var(--primary-dark);
      border-color: var(--primary-dark);
    }

    .catalog-list {
      display: grid;
      gap: 1rem;
    }

    .topic-item {
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr) auto;
      gap: 1rem;
      align-items: center;
      padding: 1rem;
      border-radius: var(--radius);
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: 0 10px 26px rgba(31, 17, 24, .05);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .topic-item:hover {
      transform: translateY(-2px);
      border-color: rgba(122, 35, 65, .22);
      box-shadow: 0 16px 36px rgba(31, 17, 24, .09);
    }

    .topic-thumb {
      border-radius: 8px;
      overflow: hidden;
      background: var(--surface-muted);
      aspect-ratio: 4 / 3;
      border: 1px solid var(--line);
    }

    .topic-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .topic-body h3 {
      margin: 0 0 .45rem 0;
      font-size: 1.12rem;
      line-height: 1.3;
      color: var(--text);
    }

    .topic-body p {
      margin: 0;
      color: var(--muted);
      font-size: .96rem;
      max-width: 56rem;
    }

    .topic-meta {
      display: flex;
      flex-wrap: wrap;
      gap: .45rem;
      margin-top: .8rem;
    }

    .topic-meta .mini-pill {
      background: rgba(122, 35, 65, .05);
      color: var(--primary);
      border-color: rgba(122, 35, 65, .1);
    }

    .topic-side {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: .55rem;
      min-width: 126px;
    }

    .topic-time {
      font-size: .84rem;
      color: var(--muted);
      white-space: nowrap;
    }

    .topic-link {
      min-height: 42px;
      padding: .7rem .95rem;
      border-radius: 8px;
      border: 1px solid var(--primary);
      color: #fff;
      background: var(--primary);
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
    }

    .topic-link:hover {
      background: var(--primary-dark);
      border-color: var(--primary-dark);
      color: #fff;
      transform: translateY(-1px);
    }

    .topic-link.secondary {
      background: #fff;
      color: var(--primary);
      border-color: rgba(122, 35, 65, .18);
    }

    .topic-link.secondary:hover {
      background: rgba(122, 35, 65, .06);
      border-color: rgba(122, 35, 65, .28);
      color: var(--primary-dark);
    }

    .pagination-wrap {
      display: flex;
      justify-content: center;
      margin-top: 1.6rem;
    }

    .pagination {
      gap: .35rem;
    }

    .pagination li {
      display: inline-flex;
    }

    .pagination a,
    .pagination button {
      border-radius: 8px;
      border: 1px solid var(--line);
      color: var(--muted);
      min-width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #fff;
    }

    .pagination .current {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }

    .pagination a:hover,
    .pagination button:hover {
      border-color: rgba(122, 35, 65, .24);
      color: var(--primary);
      background: rgba(122, 35, 65, .05);
    }

    .related-band {
      background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(239,231,223,.72));
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .related-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
    }

    .related-card {
      padding: 1rem;
      border-radius: var(--radius);
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: 0 12px 24px rgba(31, 17, 24, .05);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
      min-height: 168px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .related-card:hover {
      transform: translateY(-2px);
      border-color: rgba(122, 35, 65, .22);
      box-shadow: 0 18px 34px rgba(31, 17, 24, .1);
    }

    .related-card h3 {
      margin: 0 0 .45rem 0;
      font-size: 1.02rem;
      line-height: 1.35;
    }

    .related-card p {
      margin: 0;
      color: var(--muted);
      font-size: .94rem;
    }

    .related-card .mini-pill {
      width: fit-content;
      margin-bottom: .7rem;
    }

    .faq-shell .accordion {
      background: transparent;
      margin: 0;
    }

    .faq-shell .accordion-item {
      border: 1px solid var(--line);
      background: var(--surface);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: .8rem;
      box-shadow: 0 10px 24px rgba(31, 17, 24, .04);
    }

    .faq-shell .accordion-title {
      color: var(--text);
      font-weight: 700;
      font-size: 1rem;
      padding: 1rem 1.1rem;
      border: 0;
      background: transparent;
    }

    .faq-shell .accordion-title::before {
      right: 1rem;
      margin-top: -.45rem;
      border-color: var(--primary) transparent transparent;
    }

    .faq-shell .accordion-content {
      border: 0;
      padding: 0 1.1rem 1rem;
      color: var(--muted);
      background: transparent;
    }

    .cta-band {
      background: linear-gradient(180deg, #f2e8df, #ebdfd5);
      border-top: 1px solid rgba(122, 35, 65, .08);
    }

    .cta-panel {
      padding: clamp(1.4rem, 3vw, 2.2rem);
      border-radius: 12px;
      background: linear-gradient(135deg, #2a1820, #42212d 55%, #5a2d3c);
      color: #fff;
      box-shadow: var(--shadow-strong);
      border: 1px solid rgba(255,255,255,.08);
      display: grid;
      grid-template-columns: 1.2fr auto;
      gap: 1rem;
      align-items: center;
    }

    .cta-panel h2 {
      margin: 0 0 .45rem 0;
      font-size: clamp(1.45rem, 2.6vw, 2rem);
      line-height: 1.2;
      color: #fff;
    }

    .cta-panel p {
      margin: 0;
      color: rgba(255,255,255,.8);
      max-width: 44rem;
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .7rem;
      justify-content: flex-end;
    }

    .button.cta-primary {
      background: #fff;
      color: var(--primary);
      border: 1px solid #fff;
      min-height: 46px;
      border-radius: 8px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: .45rem;
    }

    .button.cta-primary:hover {
      transform: translateY(-1px);
      background: #f7efea;
      color: var(--primary-dark);
    }

    .button.cta-secondary {
      background: transparent;
      color: #fff;
      border: 1px solid rgba(255,255,255,.28);
      min-height: 46px;
      border-radius: 8px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: .45rem;
    }

    .button.cta-secondary:hover {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.42);
      color: #fff;
    }

    .site-footer {
      padding: 2rem 0 2.2rem;
      background: #f5eee8;
      border-top: 1px solid var(--line);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 1.2rem;
      align-items: start;
      padding-bottom: 1rem;
    }

    .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      font-weight: 800;
      margin-bottom: .8rem;
    }

    .footer-brand .brand-mark {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      font-size: .95rem;
    }

    .site-footer p {
      margin: 0;
      color: var(--muted);
      max-width: 34rem;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem .9rem;
      justify-content: flex-end;
    }

    .footer-links a {
      color: var(--muted);
      padding: .25rem 0;
      border-bottom: 1px solid transparent;
    }

    .footer-links a:hover {
      color: var(--primary);
      border-color: rgba(122, 35, 65, .24);
    }

    .copyright {
      padding-top: 1rem;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: .92rem;
    }

    .section-label {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      color: var(--muted);
      font-size: .88rem;
      font-weight: 700;
      margin-bottom: .65rem;
    }

    .section-label::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(179, 112, 76, .12);
    }

    .callout-soft {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,255,255,.72);
      box-shadow: 0 12px 24px rgba(31, 17, 24, .04);
    }

    .tiny-note {
      color: var(--muted);
      font-size: .9rem;
      margin-top: .7rem;
    }

    .icon {
      width: 16px;
      height: 16px;
      display: inline-block;
      vertical-align: middle;
      fill: currentColor;
      flex: 0 0 auto;
    }

    .arrow-icon {
      width: 14px;
      height: 14px;
    }

    .page-hero .grid-x {
      align-items: stretch;
    }

    .sticky-note {
      margin-top: 1rem;
      padding: .85rem 1rem;
      border-left: 3px solid var(--primary);
      background: rgba(122, 35, 65, .05);
      border-radius: 0 var(--radius) var(--radius) 0;
      color: var(--muted);
      font-size: .92rem;
    }

    @media screen and (max-width: 1024px) {
      .filter-shell {
        grid-template-columns: 1fr;
      }

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

      .cta-panel {
        grid-template-columns: 1fr;
      }

      .cta-actions {
        justify-content: flex-start;
      }

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

      .footer-links {
        justify-content: flex-start;
      }

      .topic-item {
        grid-template-columns: 150px minmax(0, 1fr);
      }

      .topic-side {
        grid-column: 1 / -1;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
      }
    }

    @media screen and (max-width: 768px) {
      .title-bar {
        display: flex;
      }

      .nav-shell {
        display: block;
        padding-top: 0;
      }

      .top-bar-left {
        display: none;
      }

      .top-bar-right {
        display: block;
        margin-top: .2rem;
      }

      .top-bar-right ul {
        display: flex;
        flex-wrap: wrap;
        gap: .3rem;
      }

      .top-bar-right li a {
        min-height: 40px;
        padding: .4rem .7rem;
      }

      .nav-cta {
        margin-top: .7rem;
        width: 100%;
        justify-content: center;
      }

      .hero-title {
        max-width: none;
      }

      .page-hero .grid-x > .cell {
        margin-bottom: 1rem;
      }

      .topic-item {
        grid-template-columns: 1fr;
      }

      .topic-side {
        justify-content: space-between;
      }

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

      .hero-visual img {
        aspect-ratio: 16 / 11;
      }

      .visual-overlay {
        position: static;
        padding: .9rem;
        background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.98));
        border-top: 1px solid var(--line);
      }
    }

    @media screen and (max-width: 520px) {
      .section {
        padding: 2.5rem 0;
      }

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

      .button.primary-action,
      .button.secondary-action,
      .button.cta-primary,
      .button.cta-secondary {
        width: 100%;
        justify-content: center;
      }

      .segmented {
        gap: .4rem;
      }

      .segmented .tag {
        width: 100%;
        justify-content: center;
      }

      .hero-card {
        padding: 1rem;
      }

      .topic-item {
        padding: .85rem;
      }

      .faq-shell .accordion-title {
        padding-right: 2.3rem;
      }
    }