/* ==========================================================================
   INFO PAGES — Shared Stylesheet
   Covers: About Us · Banking · T&C · Responsible Gaming · Privacy · Contact Us
   --------------------------------------------------------------------------
   Depends on: root.css (via style.css)
   ========================================================================== */


/* ==========================================================================
   1. PAGE SHELL — fixed viewport, scrolls inside like account pages
   ========================================================================== */
   .page-info .app {
    overflow: hidden;
  }
  
  .page-info .center-content {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5rem 1rem 7rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* No page backdrop — let the shared hero background (sunset + grid) show through. */
    background: transparent;
    /* flex-start + auto block margins on the container centers short pages
       but lets long pages scroll from the top without clipping (a known
       justify-content:center + overflow bug). */
    justify-content: flex-start;
  }
  
  @media (min-width: 900px) {
    .page-info .center-content {
      /* Bottom clearance keeps the box above the floating info sub-nav
         (fixed at bottom:130px) so content is never hidden. 15rem matches the
         hscroll pages so every info page's box is exactly the same size. */
      padding: 5.5rem 2.5rem 15rem;
      /* The page shell itself stays fixed — only the box scrolls. */
      overflow: hidden;
    }

    /* STANDARDISED CONTENT BOX
       Every info page shows the same-size box: it always fills the available
       area, no matter how short the content is. Long content scrolls INSIDE
       the box (the container scrolls, not the page). */
    .page-info .info-page-container {
      flex: 1 1 auto;
      min-height: 0;
      max-height: 100%;
      margin-block: 0;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
    }

    .page-info .info-page-container::-webkit-scrollbar {
      width: 8px;
    }

    .page-info .info-page-container::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: var(--radius-pill);
    }

    .page-info .info-page-container::-webkit-scrollbar-track {
      background: transparent;
    }

    /* The dark content surface fills the standardised box so short pages have
       the same full-size background as long ones (the hscroll host keeps its
       own sizing). */
    .page-info .info-page-container > .info-content:not(.info-hscroll-host),
    .page-info .info-page-container > .contact-cols {
      flex: 1 0 auto;
      min-height: 0;
    }

    /* Contact page: its dark channels card is nested inside .contact-cols,
       so grow that card to fill the standardised box too. The empty stack
       placeholder is collapsed so the card fills the box exactly. */
    .page-info .info-page-container > .contact-cols {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .page-info .info-page-container > .contact-cols > .info-card {
      flex: 1 0 auto;
      min-height: 0;
    }

    .page-info .info-page-container > .contact-cols > .contact-col-stack {
      flex: 0 0 auto;
    }

    /* T&C page: an intro card followed by the accordion card. Keep the intro
       at its natural height and grow the accordion card to fill the box so the
       dark surface matches the other info pages (and long lists scroll). */
    .page-info .info-page-container > .info-card:last-child {
      /* grow to fill the box on short pages, but never shrink below content
         (tall content, e.g. the expanded 2-col accordion, must push the
         container's scrollbar instead of spilling out of the card) */
      flex: 1 0 auto;
      min-height: 0;
    }
  }
  
  
  /* ==========================================================================
     1b. INFO SUB-NAV  (mirrors .category-nav-section / .category-nav)
     ========================================================================== */
  .info-cat-nav-section {
    padding-top: 1rem;
  }

  /* Mobile / tablet: centered glass pill in page flow */
  @media (max-width: 899px) {
    .info-cat-nav-section {
      position: relative;
      z-index: 7;
    }
  }

  /* Desktop: float centered above bottom nav */
  @media (min-width: 900px) {
    .info-cat-nav-section {
      position: fixed;
      bottom: 130px;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      z-index: 7;
      padding-top: 0;
      width: min(800px, calc(100vw - 40px));
      max-width: 800px;
    }
  }

  /* Glass pill bar — shared visual styling (matches .category-nav) */
  .info-cat-nav {
    position: relative;
    width: 100%;
    min-height: 76px;
    border-radius: var(--category-nav-radius);
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.03) 100%),
      linear-gradient(145deg,
        rgba(72, 48, 118, 0.78) 0%,
        rgba(42, 28, 78, 0.88) 55%,
        rgba(32, 18, 62, 0.92) 100%);
    backdrop-filter: blur(var(--liq-blur-heavy));
    -webkit-backdrop-filter: blur(var(--liq-blur-heavy));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      var(--liq-shadow),
      0 0 0 1px rgba(255, 255, 255, 0.06) inset,
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.2),
      0 0 28px rgba(105, 255, 241, 0.1),
      0 0 40px rgba(255, 140, 100, 0.08);
  }

  .info-cat-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 42%;
    border-radius: inherit;
    background: radial-gradient(ellipse 90% 120% at 50% 0%,
        rgba(255, 255, 255, 0.14) 0%,
        transparent 65%);
    pointer-events: none;
    z-index: 0;
  }

  /* Desktop: equal-width grid like .category-nav */
  @media (min-width: 900px) {
    .info-cat-nav {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      align-items: stretch;
      overflow: visible;
    }
  }

  /* Mobile: horizontally scrollable strip (labels stay readable) */
  @media (max-width: 899px) {
    .info-cat-nav {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .info-cat-nav::-webkit-scrollbar { display: none; }
    .info-cat-nav .cat-btn { flex: 1 0 auto; min-width: 84px; }
  }

  .info-cat-nav .cat-btn {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0;
    border-radius: 0;
    min-height: 76px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
  }

  .info-cat-nav .cat-btn.active {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.1) 55%,
        rgba(255, 255, 255, 0.06) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }

  .info-cat-nav .cat-btn:first-child {
    border-top-left-radius: var(--category-nav-radius);
    border-bottom-left-radius: var(--category-nav-radius);
  }

  .info-cat-nav .cat-btn:last-child {
    border-top-right-radius: var(--category-nav-radius);
    border-bottom-right-radius: var(--category-nav-radius);
  }

  /* Active highlight lives on the button; hide legacy inner glow */
  .info-cat-nav .cat-btn.active .cat-btn-inner::before,
  .info-cat-nav .cat-btn.active .cat-btn-inner::after {
    display: none !important;
  }

  /* Figma amendment: use the shared category-nav background treatment. */
  .info-cat-nav {
    background: var(--figma-category-bg) !important;
    border-color: var(--figma-surface-border) !important;
    box-shadow: var(--figma-violet-glow), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  }

  .info-cat-nav .cat-btn.active {
    background: var(--figma-category-active-bg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 0 18px rgba(202, 129, 255, 0.22) !important;
  }

  
  /* ==========================================================================
     2. CONTAINER
     ========================================================================== */
  .info-page-container {
    width: 100%;
    /* Constrain info content so it never spans the full viewport, and centre
       it horizontally. Auto block margins centre short pages vertically while
       allowing long pages to scroll from the top (see .center-content note). */
    max-width: 1140px;
    margin-inline: auto;
    margin-block: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .info-page-container--wide {
    max-width: 1140px;
  }

  /* ==========================================================================
     3. PAGE HEAD
     ========================================================================== */
  .info-page-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 2px 2px 6px;
    margin-bottom: var(--space-2);
  }
  
  .info-page-head-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: rgba(255, 200, 85, 0.14);
    color: var(--color-neon-gold);
    font-size: 1rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(255, 200, 85, 0.35));
  }
  
  .info-page-head h1 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-black);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-white);
  }
  
  
  /* ==========================================================================
     4. GLASS CARD
     ========================================================================== */
  .info-card {
    /* Matches the index check-in glass card background */
    background:
      radial-gradient(ellipse 70% 55% at 12% 6%, rgba(177, 89, 245, 0.30) 0%, transparent 60%),
      linear-gradient(155deg, rgba(126, 38, 193, 0.47) 0%, rgba(63, 19, 97, 1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: var(--radius-xl);
    box-shadow: 0 0 22px rgba(126, 38, 193, 0.30), inset 0 1px 1px rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(21px);
    -webkit-backdrop-filter: blur(21px);
    padding: var(--space-6);
    width: 100%;
  }
  
  
  
  /* ==========================================================================
     5. ABOUT US — HERO
     ========================================================================== */
  .info-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(105,255,241,0.14) 0%, transparent 65%),
      linear-gradient(135deg, rgba(155,92,255,0.40) 0%, rgba(105,255,241,0.22) 100%);
    border: 1px solid rgba(105,255,241,0.18);
    box-shadow: var(--liq-shadow), 0 0 60px rgba(105,255,241,0.06);
    backdrop-filter: blur(var(--liq-blur));
    -webkit-backdrop-filter: blur(var(--liq-blur));
    padding: var(--space-10) var(--space-6);
    text-align: center;
  }
  
  .info-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.03'%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");
    pointer-events: none;
  }
  
  .info-hero-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-neon-purple), var(--color-neon-cyan));
    font-size: 2rem;
    color: #fff;
    margin-bottom: var(--space-5);
    box-shadow: var(--glow-purple);
  }
  
  .info-hero h2 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-3xl);
    font-weight: var(--font-black);
    color: var(--text-white);
    letter-spacing: 0.04em;
  }
  
  .info-hero p {
    margin: 0 auto;
    max-width: 560px;
    font-size: var(--text-base);
    color: var(--text-soft);
    line-height: 1.7;
  }
  
  .info-hero-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
  }
  
  .info-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-soft);
    letter-spacing: 0.04em;
  }
  
  .info-hero-badge i { color: var(--color-neon-cyan); }
  
  
  /* ==========================================================================
     6. FEATURE GRID  (About Us)
     ========================================================================== */
  .info-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  
  @media (min-width: 640px) {
    .info-feature-grid { grid-template-columns: repeat(4, 1fr); }
  }
  
  .info-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: background var(--duration-fast), border-color var(--duration-fast);
  }
  
  .info-feature:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(105,255,241,0.25);
  }
  
  .info-feature-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 1.3rem;
    flex-shrink: 0;
  }
  
  .info-feature-icon--cyan   { background: rgba(105,255,241,0.14); color: var(--color-neon-cyan);   }
  .info-feature-icon--purple { background: rgba(155,92,255,0.16);  color: var(--color-neon-purple); }
  .info-feature-icon--gold   { background: rgba(255,200,85,0.14);  color: var(--color-neon-gold);   }
  .info-feature-icon--green  { background: rgba(74,222,128,0.14);  color: var(--color-neon-green);  }
  
  .info-feature-title {
    font-size: var(--text-sm);
    font-weight: var(--font-black);
    color: var(--text-white);
    line-height: 1.3;
  }
  
  .info-feature-desc {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
  }
  
  
  /* ==========================================================================
     7. SECTION HEADING
     ========================================================================== */
  .info-section-title {
    font-size: var(--text-base);
    font-weight: var(--font-black);
    color: var(--text-white);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  
  .info-section-title i {
    color: var(--color-neon-cyan);
    font-size: 0.9rem;
  }
  
  .info-para {
    font-size: var(--text-sm);
    color: var(--text-soft);
    line-height: 1.75;
    margin: 0 0 var(--space-3);
  }
  
  .info-para:last-child { margin-bottom: 0; }
  
  .info-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    border: none;
    margin: var(--space-5) 0;
  }
  
  
  /* ==========================================================================
     8. POLICY LIST  (T&C / Responsible)
     ========================================================================== */
  .info-policy-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  
  .info-policy-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .info-policy-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: rgba(155,92,255,0.20);
    color: var(--color-neon-violet);
    font-size: var(--text-xs);
    font-weight: var(--font-black);
    flex-shrink: 0;
  }
  
  .info-policy-heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  
  .info-policy-heading-text {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text-white);
  }
  
  .info-policy-body {
    font-size: var(--text-sm);
    color: var(--text-soft);
    line-height: 1.75;
    padding-left: calc(26px + var(--space-3));
  }
  
  .info-policy-list {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .info-policy-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-soft);
    line-height: 1.6;
  }
  
  .info-policy-list li::before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-neon-cyan);
    margin-top: 7px;
    flex-shrink: 0;
  }
  
  
  /* ==========================================================================
     9. BANKING TABLE
     ========================================================================== */
  .info-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.10);
  }
  
  .info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }
  
  .info-table thead th {
    background: rgba(155,92,255,0.14);
    color: var(--text-white);
    font-weight: var(--font-black);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  
  .info-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background var(--duration-fast);
  }
  
  .info-table tbody tr:last-child { border-bottom: none; }
  .info-table tbody tr:hover { background: rgba(255,255,255,0.04); }
  
  .info-table tbody td {
    padding: var(--space-3) var(--space-4);
    color: var(--text-soft);
    vertical-align: middle;
  }
  
  .info-table tbody td:first-child { color: var(--text-white); font-weight: var(--font-semibold); }
  
  .info-table-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.65rem;
    font-weight: var(--font-black);
    letter-spacing: 0.04em;
  }
  
  .info-table-badge--deposit    { background: rgba(74,222,128,0.14);  color: #4dd66e; }
  .info-table-badge--withdraw   { background: rgba(248,113,113,0.14); color: #ff8a8a; }
  
.info-fast { color: var(--color-neon-cyan); font-weight: var(--font-bold); }
  .info-slow { color: var(--color-neon-gold); }

  .info-table-section th {
    background: rgba(255,255,255,0.05);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    padding: var(--space-2) var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }


  /* ==========================================================================
     10. CONTACT CARDS
     ========================================================================== */
  .info-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  
  @media (min-width: 640px)  { .info-contact-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 900px)  { .info-contact-grid { grid-template-columns: repeat(5, 1fr); } }
  
  .info-contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-lg);
    text-align: center;
    text-decoration: none;
    transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-slow);
  }
  
  .info-contact-card:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(105,255,241,0.30);
    transform: translateY(-2px);
  }
  
  .info-contact-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 1.5rem;
    flex-shrink: 0;
  }
  
  .info-contact-icon--chat     { background: rgba(105,255,241,0.14); color: var(--color-neon-cyan);   }
  .info-contact-icon--email    { background: rgba(155,92,255,0.16);  color: var(--color-neon-purple); }
  .info-contact-icon--whatsapp { background: rgba(37,211,102,0.14);  color: #25d366; }
  .info-contact-icon--line     { background: rgba(56,211,96,0.14);   color: #06c755; }
  .info-contact-icon--telegram { background: rgba(41,182,246,0.14);  color: #29b6f6; }
  
  .info-contact-name {
    font-size: var(--text-sm);
    font-weight: var(--font-black);
    color: var(--text-white);
  }
  
  .info-contact-detail {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }
  
  .info-contact-btn {
    display: inline-block;
    padding: 7px 20px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--color-neon-purple), var(--color-neon-cyan));
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--font-black);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: opacity var(--duration-fast);
  }
  
  .info-contact-btn:hover { opacity: 0.88; }
  
  
  /* ==========================================================================
     11. WARNING BANNER  (Responsible Gaming)
     ========================================================================== */
  .info-warn-banner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background:
      radial-gradient(ellipse at left, rgba(255,200,85,0.14), transparent 60%),
      rgba(255,200,85,0.06);
    border: 1px solid rgba(255,200,85,0.30);
    border-radius: var(--radius-lg);
  }
  
  .info-warn-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,200,85,0.18);
    color: var(--color-neon-gold);
    font-size: 1.6rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(255,200,85,0.30));
  }
  
  .info-warn-text h3 {
    margin: 0 0 4px;
    font-size: var(--text-lg);
    font-weight: var(--font-black);
    color: var(--color-neon-gold);
  }
  
  .info-warn-text p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-soft);
    line-height: 1.55;
  }
  
  
  /* ==========================================================================
     12. CHECK LIST  (Responsible Gaming when-not-to list)
     ========================================================================== */
  .info-check-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .info-check-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-soft);
    line-height: 1.6;
  }
  
  .info-check-list li i {
    color: var(--color-neon-red);
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
  }
  
  .info-check-list--positive li i { color: var(--color-neon-green); }
  
  
  /* ==========================================================================
     13. HELP RESOURCE CARD  (Responsible Gaming)
     ========================================================================== */
  .info-resource-card {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
    padding: var(--space-5);
    background: rgba(105,255,241,0.05);
    border: 1px solid rgba(105,255,241,0.15);
    border-radius: var(--radius-lg);
  }
  
  .info-resource-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(105,255,241,0.12);
    color: var(--color-neon-cyan);
    font-size: 1.3rem;
    flex-shrink: 0;
  }
  
  .info-resource-text h4 {
    margin: 0 0 4px;
    font-size: var(--text-base);
    font-weight: var(--font-black);
    color: var(--text-white);
  }
  
  .info-resource-text p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-soft);
    line-height: 1.55;
  }
  
  .info-resource-text a {
    color: var(--color-neon-cyan);
    text-decoration: none;
  }
  .info-resource-text a:hover { text-decoration: underline; }


  /* ==========================================================================
     14. LEGACY CONTENT WRAPPER  (info-content / info-title / info-wrapper)
         Used by about-us.html and banking.html from the original reference markup.
     ========================================================================== */
  .info-content {
    /* Matches the index check-in glass card background */
    background:
      radial-gradient(ellipse 70% 55% at 12% 6%, rgba(177, 89, 245, 0.30) 0%, transparent 60%),
      linear-gradient(155deg, rgba(126, 38, 193, 0.47) 0%, rgba(63, 19, 97, 1) 100%);
    backdrop-filter: blur(21px);
    -webkit-backdrop-filter: blur(21px);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: var(--radius-xl);
    box-shadow: 0 0 22px rgba(126, 38, 193, 0.30), inset 0 1px 1px rgba(255, 255, 255, 0.22);
    padding: var(--space-6);
    overflow: visible;
  }

  .info-title {
    font-size: var(--text-base);
    font-weight: var(--font-black);
    color: var(--text-white);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }

  .info-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .info-wrapper p {
    font-size: var(--text-sm);
    color: var(--text-soft);
    line-height: 1.75;
    margin: 0;
  }

  .info-wrapper h5,
  .info-wrapper h6 {
    margin: 0;
    color: var(--text-white);
    font-weight: var(--font-black);
  }

  .info-wrapper h5 { font-size: var(--text-base); }
  .info-wrapper h6 { font-size: var(--text-sm); }

  .info-wrapper ul,
  .info-wrapper ol {
    margin: 0;
    padding-left: 1.4em;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .info-wrapper li {
    font-size: var(--text-sm);
    color: var(--text-soft);
    line-height: 1.6;
  }

  .info-wrapper strong {
    color: var(--text-white);
    font-weight: var(--font-bold);
  }

  .info-wrapper br { display: none; }


  /* ==========================================================================
     14b. BANKING — two-column layout (table + notes side by side on desktop)
          Keeps the page within one landscape viewport (no vertical scroll).
     ========================================================================== */
  .bnk-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
  }

  @media (min-width: 900px) {
    .bnk-grid {
      grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
      gap: var(--space-6);
    }
  }

  .bnk-notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .bnk-notes strong {
    color: var(--text-white);
    font-weight: var(--font-black);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--text-xs);
  }

  /* Compact rows so the table fits without inflating page height */
  .info-table thead th { padding: var(--space-2) var(--space-3); }
  .info-table tbody td,
  .info-table tbody th { padding: var(--space-2) var(--space-3); }


  /* ==========================================================================
     14c. CONTACT US — two-column layout (fits one landscape viewport)
          Channels card on the left; additional info + quick links stacked right.
          Keeps each card's internal grid intact (unlike the multicol scroll).
     ========================================================================== */
  .contact-cols {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .contact-col-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  @media (min-width: 900px) {
    .contact-cols {
      /* display: grid; */
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
      gap: var(--space-5);
      align-items: start;
    }
  }


  /* ==========================================================================
     15. HORIZONTAL COLUMN SCROLL  (.page-hscroll + .info-hscroll)
         Long content flows top→bottom then into new columns to the RIGHT,
         and scrolls horizontally — so the page never grows vertically on
         desktop (rules.md §1, §3, §5A). Mobile keeps a normal vertical stack.
     ========================================================================== */

  /* Base (all sizes): plain stacked column with spacing */
  .info-hscroll {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  @media (min-width: 900px) {
    /* Lock the viewport: no vertical page scroll, content area is a flex column */
    .page-hscroll .center-content {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding-bottom: 15rem;          /* clears the floating sub-nav + scrollbar */
    }

    .page-hscroll .info-page-container {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* A card that hosts an .info-hscroll block fills the remaining height */
    .page-hscroll .info-hscroll-host {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* The multicol horizontal-scroll region */
    .page-hscroll .info-hscroll {
      flex: 1 1 auto;
      min-height: 0;
      display: block;                 /* override the base flex for multicol */
      column-width: 320px;
      column-gap: var(--space-7);
      column-fill: auto;              /* fill each column fully → flow rightward */
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: var(--space-2);
    }

    .page-hscroll .info-hscroll > * {
      break-inside: avoid;
      margin: 0 0 var(--space-4);
    }

    /* In column mode, dividers become awkward — gaps separate sections instead */
    .page-hscroll .info-hscroll .info-divider { display: none; }
    .page-hscroll .info-hscroll .info-policy-section { margin-bottom: var(--space-5); break-inside: avoid; }
    .page-hscroll .info-hscroll h5,
    .page-hscroll .info-hscroll h6 { break-after: avoid-column; }

    /* Slim themed horizontal scrollbar */
    .page-hscroll .info-hscroll::-webkit-scrollbar { height: 8px; }
    .page-hscroll .info-hscroll::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.18);
      border-radius: var(--radius-pill);
    }
    .page-hscroll .info-hscroll::-webkit-scrollbar-track { background: transparent; }
  }


  /* ==========================================================================
     16. T&C ACCORDION  (Bootstrap accordion, glass-themed)
         Collapses 13 sections so the page fits one viewport (rules.md §5/§7).
     ========================================================================== */
  .tnc-accordion .accordion-item {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
    overflow: hidden;
  }

  .tnc-accordion .accordion-button {
    background: rgba(255,255,255,0.05);
    color: var(--text-white);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-4);
    box-shadow: none;
    gap: var(--space-3);
  }

  .tnc-accordion .accordion-button:not(.collapsed) {
    background: rgba(105,255,241,0.10);
    color: var(--color-neon-cyan);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08);
  }

  .tnc-accordion .accordion-button:focus {
    box-shadow: 0 0 0 2px rgba(105,255,241,0.30);
    border-color: transparent;
  }

  /* Recolour the default chevron to white/cyan */
  .tnc-accordion .accordion-button::after {
    filter: invert(1) brightness(1.6);
    transition: transform var(--duration-fast);
  }
  .tnc-accordion .accordion-button:not(.collapsed)::after {
    filter: invert(72%) sepia(60%) saturate(700%) hue-rotate(120deg);
  }

  .tnc-accordion .accordion-body {
    background: rgba(0,0,0,0.12);
    color: var(--text-soft);
    font-size: var(--text-sm);
    line-height: 1.7;
    padding: var(--space-4);
  }

  .tnc-accordion .accordion-body .info-policy-list {
    margin-top: var(--space-3);
  }

  /* Desktop: two newspaper columns so collapsed headers fit one viewport */
  @media (min-width: 900px) {
    .tnc-accordion {
      column-count: 2;
      column-gap: var(--space-4);
    }
    .tnc-accordion .accordion-item {
      break-inside: avoid;
    }
  }