/* ── Page hero ── */
    .page-hero {
      margin-top: var(--header-h);
      background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
      padding: var(--space-16) 0 var(--space-12);
      position: relative;
      overflow: hidden;
    }

    .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .page-hero__inner {
      position: relative;
      z-index: 1;
    }

    .breadcrumb {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.65);
      margin-bottom: var(--space-6);
      flex-wrap: wrap;
    }

    .breadcrumb a {
      color: rgba(255,255,255,0.65);
      transition: color var(--transition-fast);
    }

    .breadcrumb a:hover { color: var(--clr-white); }

    .breadcrumb__sep { color: rgba(255,255,255,0.35); }

    .breadcrumb__current { color: rgba(255,255,255,0.90); font-weight: 500; }

    .page-hero__tag {
      display: inline-block;
      background: rgba(255,255,255,0.15);
      color: var(--clr-white);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-full);
      margin-bottom: var(--space-4);
      border: 1px solid rgba(255,255,255,0.20);
    }

    .page-hero__title {
      font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
      font-weight: 800;
      color: var(--clr-white);
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin-bottom: var(--space-4);
    }

    .page-hero__desc {
      font-size: clamp(var(--text-base), 2vw, var(--text-lg));
      color: rgba(255,255,255,0.80);
      max-width: 580px;
      line-height: 1.7;
      margin-bottom: var(--space-8);
    }

    .page-hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
    }

    /* ── Quick nav / topic pills ── */
    .topics-nav {
      background: var(--clr-white);
      border-bottom: 1px solid var(--clr-border);
      position: sticky;
      top: var(--header-h);
      z-index: 90;
      box-shadow: var(--shadow-sm);
    }

    .topics-nav__inner {
      display: flex;
      gap: var(--space-2);
      overflow-x: auto;
      scrollbar-width: none;
      padding: var(--space-3) 0;
      -webkit-overflow-scrolling: touch;
    }

    .topics-nav__inner::-webkit-scrollbar { display: none; }

    .topic-pill {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) var(--space-4);
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--clr-muted);
      background: var(--clr-bg);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius-full);
      white-space: nowrap;
      transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
      text-decoration: none;
      flex-shrink: 0;
    }

    .topic-pill:hover,
    .topic-pill.is-active {
      background: var(--clr-primary);
      color: var(--clr-white);
      border-color: var(--clr-primary);
    }

    /* ── Info detail blocks ── */
    .info-block {
      scroll-margin-top: calc(var(--header-h) + 56px);
    }

    .info-block__header {
      display: flex;
      align-items: flex-start;
      gap: var(--space-5);
      margin-bottom: var(--space-8);
    }

    .info-block__icon-wrap {
      width: 64px;
      height: 64px;
      border-radius: var(--radius-lg);
      background: var(--clr-primary-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      flex-shrink: 0;
    }

    .info-block__meta { flex: 1; }

    .info-block__tag {
      display: inline-block;
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--clr-primary);
      background: var(--clr-primary-light);
      padding: 2px var(--space-3);
      border-radius: var(--radius-full);
      margin-bottom: var(--space-2);
    }

    .info-block__title {
      font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
      font-weight: 800;
      color: var(--clr-dark);
      letter-spacing: -0.02em;
      line-height: 1.2;
    }

    .info-block__body {
      font-size: var(--text-base);
      color: var(--clr-muted);
      line-height: 1.8;
    }

    .info-block__body p { margin-bottom: var(--space-4); }
    .info-block__body p:last-child { margin-bottom: 0; }

    .info-block__body strong { color: var(--clr-dark); font-weight: 600; }

    /* ── Data table ── */
    .info-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--text-sm);
      margin: var(--space-6) 0;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    .info-table thead {
      background: var(--clr-primary);
      color: var(--clr-white);
    }

    .info-table th {
      padding: var(--space-3) var(--space-4);
      text-align: left;
      font-weight: 600;
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .info-table td {
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--clr-border);
      color: var(--clr-text);
      vertical-align: top;
    }

    .info-table tbody tr:last-child td { border-bottom: none; }

    .info-table tbody tr:nth-child(even) { background: var(--clr-bg); }

    .info-table tbody tr:hover { background: var(--clr-primary-light); }

    /* ── Highlight box ── */
    .highlight-box {
      background: var(--clr-primary-light);
      border-left: 4px solid var(--clr-primary);
      border-radius: 0 var(--radius) var(--radius) 0;
      padding: var(--space-5) var(--space-6);
      margin: var(--space-6) 0;
      font-size: var(--text-sm);
      color: var(--clr-text);
      line-height: 1.7;
    }

    .highlight-box strong {
      display: block;
      font-size: var(--text-base);
      font-weight: 700;
      color: var(--clr-primary);
      margin-bottom: var(--space-2);
    }

    .highlight-box--warning {
      background: #fff8e8;
      border-left-color: var(--clr-accent);
    }

    .highlight-box--warning strong { color: var(--clr-accent-dark); }

    /* ── Step list ── */
    .step-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      margin: var(--space-6) 0;
    }

    .step-item {
      display: flex;
      gap: var(--space-4);
      align-items: flex-start;
    }

    .step-item__num {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-full);
      background: var(--clr-primary);
      color: var(--clr-white);
      font-size: var(--text-sm);
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .step-item__text {
      font-size: var(--text-sm);
      color: var(--clr-muted);
      line-height: 1.7;
    }

    .step-item__text strong {
      display: block;
      color: var(--clr-dark);
      font-weight: 600;
      margin-bottom: 2px;
    }

    /* ── Points badge grid ── */
    .points-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-3);
      margin: var(--space-6) 0;
    }

    .points-item {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      background: var(--clr-white);
      border: 1px solid var(--clr-border);
      border-radius: var(--radius);
      padding: var(--space-4) var(--space-5);
    }

    .points-badge {
      min-width: 44px;
      height: 44px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--text-lg);
      font-weight: 800;
      flex-shrink: 0;
    }

    .points-badge--lose { background: #fdecea; color: var(--clr-red); }
    .points-badge--gain { background: #e8f5e9; color: var(--clr-green); }

    .points-item__desc {
      font-size: var(--text-sm);
      color: var(--clr-muted);
      line-height: 1.5;
    }

    .points-item__desc strong { display: block; color: var(--clr-dark); font-weight: 600; }

    /* ── CTA section ── */
    .cta-section {
      background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
      border-radius: var(--radius-xl);
      padding: var(--space-12) var(--space-8);
      text-align: center;
      color: var(--clr-white);
      position: relative;
      overflow: hidden;
    }

    .cta-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .cta-section > * { position: relative; z-index: 1; }

    .cta-section__icon { font-size: 3rem; margin-bottom: var(--space-4); }

    .cta-section__title {
      font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: var(--space-3);
    }

    .cta-section__desc {
      color: rgba(255,255,255,0.82);
      font-size: var(--text-base);
      max-width: 480px;
      margin-inline: auto;
      line-height: 1.7;
      margin-bottom: var(--space-8);
    }

    .cta-section__actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      justify-content: center;
    }

    .btn--white {
      background: var(--clr-white);
      color: var(--clr-primary);
      font-weight: 700;
    }

    .btn--white:hover {
      background: rgba(255,255,255,0.92);
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(0,0,0,.20);
    }

    /* ── Table scroll wrapper on mobile ── */
    .table-scroll {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: var(--radius-lg);
      margin: var(--space-6) 0;
    }

    .table-scroll .info-table { margin: 0; }

    /* ── Divider between blocks ── */
    .block-divider {
      height: 1px;
      background: var(--clr-border);
      margin: var(--space-12) 0;
    }

    /* ── Responsive tweaks ── */
    @media (min-width: 640px) {
      .points-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (min-width: 1024px) {
      .page-hero { padding: var(--space-20) 0 var(--space-16); }
      .points-grid { grid-template-columns: repeat(2, 1fr); }
    }