/*
  AX Sourcing — shared stylesheet
  Single source of truth for all pages (index.html, terms.html, privacy.html).
  Edit here, not in any HTML file.
*/

    :root {
      --bg: #1e2c3a;
      --bg-elev: #253545;
      --bg-card: rgba(255, 255, 255, 0.025);
      --bg-card-hover: rgba(255, 255, 255, 0.045);
      --border: rgba(255, 255, 255, 0.08);
      --border-strong: rgba(255, 255, 255, 0.16);
      --steel: #5090a8;
      --steel-deep: #427d94;
      --steel-soft: rgba(80, 144, 168, 0.14);
      --green: #4a9c6d;
      --green-deep: #3a8558;
      --cream: #e4edef;
      --cream-soft: rgba(228, 237, 239, 0.78);
      --white: #ffffff;
      --muted: #8ca1b3;
      --muted-2: #5a6f82;
      --max: 1240px;
      --nav-h: 72px;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--nav-h);
    }

    body {
      font-family: 'Barlow', sans-serif;
      font-weight: 400;
      background: var(--bg);
      color: var(--white);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
      position: relative;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.013) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.013) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
      z-index: 0;
    }

    body::after {
      content: '';
      position: fixed;
      top: -250px;
      right: -250px;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(80, 144, 168, 0.085) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }

    .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 2rem;
      position: relative;
      z-index: 1;
    }

    /* ============================
       STICKY NAV
    ============================ */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      height: var(--nav-h);
      background: rgba(30, 44, 58, 0.85);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
    }

    .nav-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      height: 100%;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      text-decoration: none;
      color: inherit;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      object-fit: contain;
      flex-shrink: 0;
      display: block;
    }

    .wordmark {
      font-family: 'Saira', sans-serif;
      font-weight: 700;
      font-size: 0.94rem;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      line-height: 1;
    }
    .wordmark .axison { color: var(--steel); }
    .wordmark .sourcing { color: var(--white); margin-left: 0.35em; }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 1.8rem;
    }

    .nav-link {
      font-family: 'Saira', sans-serif;
      font-weight: 500;
      font-size: 0.78rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s ease;
      position: relative;
    }

    .nav-link:hover { color: var(--white); }

    .nav-link::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -8px;
      width: 0;
      height: 1.5px;
      background: var(--steel);
      transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .nav-link:hover::after { width: 100%; }

    .nav-cta {
      font-family: 'Saira', sans-serif;
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #0c1118;
      background: var(--steel);
      padding: 0.65rem 1.1rem;
      text-decoration: none;
      transition: background 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
    }
    .nav-cta:hover { background: var(--steel-deep); }

    /* SHARED — section tag */
    .section-tag {
      font-family: 'DM Mono', monospace;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--steel);
      margin-bottom: 2.5rem;
    }

    /* ============================
       HERO
    ============================ */
    .hero { padding: 6rem 0 5rem; }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
      gap: 4rem;
      align-items: center;
    }

    .hero h1 {
      font-family: 'Saira Condensed', sans-serif;
      font-weight: 700;
      font-size: clamp(2.4rem, 5.2vw, 4.4rem);
      line-height: 0.98;
      letter-spacing: -0.005em;
      color: var(--white);
      max-width: 18ch;
      margin-bottom: 1.75rem;
    }
    .hero h1 .accent { color: var(--steel); }

    .hero-sub {
      font-size: clamp(0.98rem, 1.15vw, 1.1rem);
      color: var(--muted);
      max-width: 52ch;
      line-height: 1.6;
      margin-bottom: 2.5rem;
    }

    .hero-rule {
      width: 100%;
      max-width: 48ch;
      height: 1px;
      background: var(--steel);
      margin-bottom: 2rem;
    }

    .hero-ctas {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }

    /* Hero image (right column) */
    .hero-image {
      width: 100%;
      aspect-ratio: 5 / 6;
      border-radius: 2px;
      overflow: hidden;
      position: relative;
      background: var(--bg);
      border: 1px solid var(--border);
    }
    .hero-image img,
    .hero-image-placeholder {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero-image-placeholder svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .btn {
      font-family: 'Saira', sans-serif;
      font-weight: 700;
      font-size: 0.82rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 1rem 1.5rem;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      transition: all 0.2s ease;
      cursor: pointer;
      border: none;
    }

    .btn-primary {
      background: var(--steel);
      color: #0c1118;
    }
    .btn-primary:hover { background: var(--steel-deep); }

    .btn-ghost {
      background: transparent;
      color: var(--white);
      border: 1px solid var(--border-strong);
    }
    .btn-ghost:hover { border-color: var(--steel); color: var(--steel); }

    .btn .arrow { font-size: 1.05rem; line-height: 1; transition: transform 0.2s ease; }
    .btn:hover .arrow { transform: translateX(3px); }

    /* ============================
       BROWSE BY (filter pills)
    ============================ */
    .browse {
      padding: 5rem 0;
      border-top: 1px solid var(--border);
    }

    .browse h2 {
      font-family: 'Saira Condensed', sans-serif;
      font-weight: 700;
      font-size: clamp(1.9rem, 3.4vw, 2.8rem);
      line-height: 1;
      letter-spacing: -0.005em;
      color: var(--white);
      margin-bottom: 1rem;
    }

    .browse-sub {
      color: var(--muted);
      font-size: 1rem;
      max-width: 60ch;
      margin-bottom: 3.5rem;
    }

    .filter-group {
      margin-bottom: 2.25rem;
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 2rem;
      align-items: start;
      padding-bottom: 2.25rem;
      border-bottom: 1px solid var(--border);
    }

    .filter-group:last-child { border-bottom: none; padding-bottom: 0; }

    .filter-label {
      font-family: 'DM Mono', monospace;
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted-2);
      padding-top: 0.55rem;
    }

    .filter-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
    }

    .pill {
      font-family: 'Saira', sans-serif;
      font-weight: 500;
      font-size: 0.82rem;
      letter-spacing: 0.02em;
      color: var(--cream);
      background: var(--bg-card);
      border: 1px solid var(--border-strong);
      padding: 0.6rem 1rem;
      text-decoration: none;
      transition: all 0.2s ease;
      cursor: pointer;
      white-space: nowrap;
    }
    .pill:hover {
      border-color: var(--steel);
      color: var(--steel);
      background: var(--steel-soft);
    }

    /* ============================
       RESOURCES (categories + cards)
    ============================ */
    .resources {
      padding: 5rem 0 4rem;
      border-top: 1px solid var(--border);
    }

    .resources-head {
      margin-bottom: 4rem;
      max-width: 64ch;
    }

    .resources h2 {
      font-family: 'Saira Condensed', sans-serif;
      font-weight: 700;
      font-size: clamp(1.9rem, 3.4vw, 2.8rem);
      line-height: 1;
      letter-spacing: -0.005em;
      color: var(--white);
      margin-bottom: 1.1rem;
    }

    .resources-intro {
      font-size: 0.98rem;
      color: var(--muted);
      line-height: 1.6;
      max-width: 56ch;
    }

    /* Each category block */
    .category {
      padding: 3rem 0;
      border-top: 1px solid var(--border);
    }
    .category:first-of-type { border-top: 1px solid var(--border-strong); }

    .category-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 2rem;
      margin-bottom: 2rem;
      flex-wrap: wrap;
    }

    .category-head-left { flex: 1; min-width: 260px; }

    .category-num {
      font-family: 'DM Mono', monospace;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted-2);
      margin-bottom: 0.6rem;
    }

    .category-title {
      font-family: 'Saira Condensed', sans-serif;
      font-weight: 700;
      font-size: clamp(1.5rem, 2.6vw, 2.1rem);
      line-height: 1;
      letter-spacing: -0.003em;
      color: var(--white);
      margin-bottom: 0.55rem;
    }

    .category-desc {
      font-size: 0.92rem;
      color: var(--muted);
      max-width: 56ch;
      line-height: 1.55;
    }

    .view-all {
      font-family: 'Saira', sans-serif;
      font-weight: 600;
      font-size: 0.78rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--steel);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: color 0.2s ease;
      padding-bottom: 0.45rem;
    }
    .view-all:hover { color: var(--white); }
    .view-all .arrow { transition: transform 0.2s ease; }
    .view-all:hover .arrow { transform: translateX(3px); }

    /* ============================
       VIEW-ALL MODAL
    ============================ */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(8, 14, 21, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 200;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 5rem 2rem 4rem;
      overflow-y: auto;
    }
    .modal-backdrop.open {
      opacity: 1;
      visibility: visible;
    }

    .modal {
      background: var(--bg);
      border: 1px solid var(--border-strong);
      max-width: 1100px;
      width: 100%;
      padding: 3rem 2.75rem 3.25rem;
      position: relative;
      transform: translateY(20px);
      transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .modal-backdrop.open .modal { transform: translateY(0); }

    .modal-close {
      position: absolute;
      top: 1.25rem;
      right: 1.25rem;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--muted);
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      line-height: 1;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: 'Saira', sans-serif;
      padding: 0;
    }
    .modal-close:hover {
      border-color: var(--steel);
      color: var(--steel);
    }
    .modal-close:focus-visible {
      outline: 2px solid var(--steel);
      outline-offset: 2px;
    }

    .modal-num {
      font-family: 'DM Mono', monospace;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted-2);
      margin-bottom: 0.85rem;
    }

    .modal-title {
      font-family: 'Saira Condensed', sans-serif;
      font-weight: 700;
      font-size: clamp(1.9rem, 3.4vw, 2.8rem);
      line-height: 1.05;
      letter-spacing: -0.005em;
      color: var(--white);
      margin-bottom: 1rem;
      max-width: 28ch;
    }

    .modal-desc {
      font-size: 0.98rem;
      color: var(--muted);
      line-height: 1.6;
      max-width: 60ch;
      margin-bottom: 2.5rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid var(--border);
    }

    .modal-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }

    /* modal-only cards: hidden by default (homepage), visible only when cloned into modal-grid */
    .r-card.modal-only { display: none; }
    .modal-grid .r-card.modal-only { display: flex; }

    body.modal-open { overflow: hidden; }

    /* Card grid */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }

    .r-card {
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
      padding: 1.4rem 1.4rem 1.25rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      text-decoration: none;
      color: inherit;
      transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
      position: relative;
    }

    .r-card:hover {
      border-color: var(--steel);
      background: rgba(80, 144, 168, 0.1);
      transform: translateY(-2px);
    }

    .r-card-tag {
      font-family: 'DM Mono', monospace;
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--steel);
    }

    .r-card-title {
      font-family: 'Saira', sans-serif;
      font-weight: 700;
      font-size: 1.1rem;
      line-height: 1.2;
      color: var(--white);
      letter-spacing: 0.005em;
      text-transform: uppercase;
    }

    .r-card-desc {
      font-family: 'Barlow', sans-serif;
      font-size: 0.84rem;
      line-height: 1.5;
      color: var(--cream-soft);
      font-weight: 400;
    }

    /* Card footer: price (left) + view CTA (right) */
    .r-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
      padding-top: 1.1rem;
      border-top: 1px solid var(--border);
    }

    .r-card-price {
      font-family: 'Saira', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--white);
      letter-spacing: 0.005em;
    }

    .r-card-cta {
      font-family: 'Saira', sans-serif;
      font-weight: 600;
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--steel);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }

    .r-card-cta .arrow {
      font-size: 0.95rem;
      line-height: 1;
      transition: transform 0.2s ease;
    }

    .r-card:hover .r-card-cta .arrow { transform: translateX(3px); }

    /* Coming-soon state: cards without a live Lemon Squeezy URL */
    .r-card.coming-soon { cursor: default; }
    /* v22: Coming Soon cards now open the PD modal. Keep "View more →"
       CTA visible and show a muted "Coming Soon" pill in the price area
       so the footer matches the priced-card layout. */
    .r-card.coming-soon .r-card-cta {
      color: var(--steel);
      letter-spacing: 0.14em;
    }
    .r-card.coming-soon:hover .r-card-cta { color: var(--white); }
    .r-card.coming-soon .r-card-cta .arrow { display: inline; }

    /* ============================
       ABOUT + CONTACT
    ============================ */
    .about-contact {
      background: var(--cream);
      color: #0c1118;
      padding: 6rem 0;
      margin-top: 5rem;
      position: relative;
      z-index: 2;
    }

    .ac-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: start;
    }

    .ac-tag {
      font-family: 'DM Mono', monospace;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--steel-deep);
      margin-bottom: 1.5rem;
    }

    .about-contact h2 {
      font-family: 'Saira Condensed', sans-serif;
      font-weight: 700;
      font-size: clamp(1.7rem, 3vw, 2.4rem);
      line-height: 1.05;
      letter-spacing: -0.005em;
      color: #1e2c3a;
      margin-bottom: 1.1rem;
    }

    .ac-body {
      font-size: 0.98rem;
      color: #3d4f61;
      line-height: 1.65;
      max-width: 50ch;
    }

    .ac-email {
      display: block;
      width: fit-content;
      margin-top: 1.5rem;
      font-family: 'Saira', sans-serif;
      font-weight: 700;
      font-size: clamp(1.1rem, 1.6vw, 1.35rem);
      letter-spacing: -0.005em;
      color: var(--steel-deep);
      text-decoration: none;
      border-bottom: 1px solid var(--steel-deep);
      padding-bottom: 0.18rem;
      transition: color 0.2s ease, border-color 0.2s ease;
    }
    .ac-email:hover {
      color: #1e2c3a;
      border-color: #1e2c3a;
    }

    .ac-linkedin {
      display: flex;
      width: fit-content;
      align-items: center;
      gap: 0.4rem;
      margin-top: 2.75rem;
      font-family: 'Saira', sans-serif;
      font-weight: 600;
      font-size: 0.78rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #4b5d6f;
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .ac-linkedin .arrow {
      font-size: 0.85rem;
      line-height: 1;
      transition: transform 0.2s ease;
    }
    .ac-linkedin:hover { color: var(--steel-deep); }
    .ac-linkedin:hover .arrow { transform: translate(2px, -2px); }

    /* ============================
       ABOUT — AX SOURCING (cream block, replaces old about-contact)
    ============================ */
    .about {
      background: var(--cream);
      color: #0c1118;
      padding: 6rem 0;
      position: relative;
      z-index: 2;
    }
    .about-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: 4.5rem;
      align-items: start;
    }
    .about-head .section-tag {
      color: var(--steel-deep);
      margin-bottom: 1.25rem;
    }
    .about-title {
      font-family: 'Saira Condensed', sans-serif;
      font-weight: 700;
      font-size: clamp(2.2rem, 4.2vw, 3.6rem);
      line-height: 1;
      letter-spacing: -0.01em;
      color: #1e2c3a;
      margin: 0;
    }
    .about-body-col { padding-top: 0.5rem; }
    .about-body {
      font-size: 1.02rem;
      color: #3d4f61;
      line-height: 1.7;
      max-width: 60ch;
    }
    .about-body + .about-body { margin-top: 1.25rem; }

    /* ============================
       FEATURED RESOURCES (image-led grid)
    ============================ */
    .featured {
      padding: 5.5rem 0 1.5rem;
    }
    .featured-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 2.5rem;
      gap: 2rem;
      flex-wrap: wrap;
    }
    .featured-title {
      font-family: 'Saira Condensed', sans-serif;
      font-weight: 700;
      font-size: clamp(1.7rem, 3vw, 2.4rem);
      line-height: 1.05;
      letter-spacing: -0.005em;
      color: var(--white);
      margin: 0.85rem 0 0.55rem;
    }
    .featured-intro {
      font-size: 0.98rem;
      color: var(--muted);
      max-width: 52ch;
      margin: 0;
    }
    .featured-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: 1fr 1fr;
      gap: 1rem;
    }

    /* Featured cards */
    .f-card {
      display: flex;
      flex-direction: column;
      background: var(--bg-card);
      border: 1px solid var(--border);
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .f-card:hover {
      border-color: var(--steel);
      background: rgba(80, 144, 168, 0.08);
      transform: translateY(-2px);
    }
    .f-card-large {
      grid-row: 1 / 3;
      grid-column: 1 / 2;
    }
    .f-card-media {
      width: 100%;
      background: var(--bg);
      overflow: hidden;
      flex-shrink: 0;
    }
    .f-card-large .f-card-media { aspect-ratio: 3 / 2; }
    .f-card-small .f-card-media { aspect-ratio: 5 / 3; }
    .f-card-media svg,
    .f-card-media img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center top;
    }
    .f-card-body {
      padding: 1.4rem 1.4rem 1.3rem;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .f-card-large .f-card-body { padding: 1.75rem 1.75rem 1.6rem; }
    .f-card-tag {
      font-family: 'DM Mono', monospace;
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--steel);
      margin-bottom: 0.65rem;
    }
    .f-card-title {
      font-family: 'Saira', sans-serif;
      font-weight: 700;
      font-size: 1.02rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--white);
      margin: 0 0 0.5rem;
      line-height: 1.2;
    }
    .f-card-large .f-card-title { font-size: 1.5rem; letter-spacing: 0.02em; }
    .f-card-desc {
      font-size: 0.82rem;
      color: var(--muted);
      line-height: 1.55;
      margin: 0 0 1rem;
      flex: 1;
    }
    .f-card-large .f-card-desc { font-size: 0.95rem; line-height: 1.6; }
    .f-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 0.85rem;
      border-top: 1px solid var(--border);
    }
    .f-card-price {
      font-family: 'Saira', sans-serif;
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--white);
    }
    .f-card-cta {
      font-family: 'DM Mono', monospace;
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--steel);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }
    .f-card-cta .arrow { transition: transform 0.2s ease; }
    .f-card:hover .f-card-cta .arrow { transform: translateX(3px); }
    /* Coming-soon state mirrors r-card behaviour */
    .f-card.coming-soon { cursor: default; }
    .f-card.coming-soon .f-card-cta { color: var(--steel); letter-spacing: 0.14em; }
    .f-card.coming-soon:hover .f-card-cta { color: var(--white); }
    .f-card.coming-soon .f-card-cta .arrow { display: inline; }

    /* ============================
       MARKET UPDATES (standalone section, reuses .category structure)
    ============================ */
    .market { padding: 2.5rem 0 4rem; }
    .market .section-tag { margin-bottom: 1rem; }
    .market .category { padding-top: 0; border-top: none; }
    .market .category-num { display: none; }
    .market .category-title {
      font-family: 'Saira Condensed', sans-serif;
      font-weight: 700;
      font-size: clamp(1.7rem, 3vw, 2.4rem);
      line-height: 1.05;
      letter-spacing: -0.005em;
      color: var(--white);
      margin-bottom: 0.55rem;
    }
    .market .category-desc {
      font-size: 0.98rem;
      color: var(--muted);
      max-width: 56ch;
    }

    /* ============================
       FREE RESOURCES (reuses .category, mirrors .market layout)
    ============================ */
    .free { padding: 2.5rem 0 4rem; }
    .free .section-tag { margin-bottom: 1rem; }
    .free .category { padding-top: 0; border-top: none; }
    .free .category-title {
      font-family: 'Saira Condensed', sans-serif;
      font-weight: 700;
      font-size: clamp(1.7rem, 3vw, 2.4rem);
      line-height: 1.05;
      letter-spacing: -0.005em;
      color: var(--white);
      margin-bottom: 0.55rem;
    }
    .free .category-desc {
      font-size: 0.98rem;
      color: var(--muted);
      max-width: 56ch;
    }
    /* FREE pill badge — replaces $ price */
    .r-card-price.free-tag {
      background: #4a9c6d;
      color: #ffffff;
      font-family: 'DM Mono', monospace;
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 0.3rem 0.6rem;
      border-radius: 1px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
    }
    /* Keep FREE pill visible even when card is coming-soon; push CTA to the right */
    .r-card.coming-soon .r-card-price.free-tag {
      display: inline-flex;
      margin-right: auto;
    }

    /* ============================
       FOOTER
    ============================ */
    footer {
      border-top: 1px solid var(--border);
      padding: 4rem 0 2rem;
      background: var(--bg);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 4rem;
      align-items: start;
      margin-bottom: 3rem;
    }
    .footer-left {
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
      align-items: flex-start;
    }
    .footer-brand {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      text-decoration: none;
    }
    .footer-email {
      font-family: 'Saira', sans-serif;
      font-weight: 700;
      font-size: 1.15rem;
      letter-spacing: -0.005em;
      color: var(--white);
      text-decoration: none;
      border-bottom: 1px solid var(--steel);
      padding-bottom: 0.15rem;
      transition: color 0.2s ease, border-color 0.2s ease;
    }
    .footer-email:hover {
      color: var(--steel);
    }
    .footer-social {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-family: 'Saira', sans-serif;
      font-weight: 600;
      font-size: 0.78rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .footer-social .arrow {
      font-size: 0.85rem;
      transition: transform 0.2s ease;
    }
    .footer-social:hover { color: var(--steel); }
    .footer-social:hover .arrow { transform: translate(2px, -2px); }
    .footer-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.85rem;
    }
    .footer-right a {
      font-family: 'Saira', sans-serif;
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.06em;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .footer-right a:hover { color: var(--white); }
    .footer-base {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1.5rem;
      padding-top: 1.75rem;
      border-top: 1px solid var(--border);
      font-family: 'DM Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted-2);
    }

    /* ============================
       PAGE-LOAD STAGGER (hero only)
    ============================ */
    .reveal {
      opacity: 0;
      transform: translateY(14px);
      animation: reveal 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }
    .r1 { animation-delay: 0.05s; }
    .r2 { animation-delay: 0.18s; }
    .r3 { animation-delay: 0.30s; }
    .r4 { animation-delay: 0.42s; }
    .r5 { animation-delay: 0.54s; }
    @keyframes reveal { to { opacity: 1; transform: translateY(0); } }

    /* ============================
       RESPONSIVE
    ============================ */
    @media (max-width: 980px) {
      .filter-group { grid-template-columns: 1fr; gap: 0.85rem; }
      .filter-label { padding-top: 0; }
      .ac-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .card-grid { grid-template-columns: repeat(2, 1fr); }
      .modal-grid { grid-template-columns: repeat(2, 1fr); }
      .modal-backdrop { padding: 4rem 1.5rem 3rem; }
      .modal { padding: 2.5rem 1.75rem; }
      .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .hero-image { max-width: 480px; aspect-ratio: 4 / 3; }
      .about-grid { grid-template-columns: 1fr; gap: 1.75rem; }
      .featured-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
      .f-card-large { grid-row: auto; grid-column: 1 / -1; }
      .f-card-large .f-card-media { aspect-ratio: 16 / 9; }
    }

    @media (max-width: 560px) {
      .wrap { padding: 0 1.25rem; }
      .wordmark { font-size: 0.82rem; letter-spacing: 0.11em; }
      .brand-mark { width: 30px; height: 30px; }
      .hero { padding: 3.5rem 0 3rem; }
      .browse { padding: 3.5rem 0; }
      .resources { padding: 3.5rem 0 2rem; }
      .subscribe { padding: 3.5rem 0; margin-top: 3rem; }
      .category { padding: 2.25rem 0; }
      .card-grid { grid-template-columns: 1fr; }
      .pill { font-size: 0.78rem; padding: 0.55rem 0.85rem; }
      .hero-ctas { flex-direction: column; align-items: flex-start; gap: 0.65rem; }
      .btn { width: 100%; justify-content: center; }
      .about-contact { padding: 4rem 0; }
      .footer-inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; text-align: left; }
      .nav-cta { font-size: 0.68rem; padding: 0.55rem 0.85rem; letter-spacing: 0.12em; }
      .modal-grid { grid-template-columns: 1fr; }
      .modal-backdrop { padding: 3.5rem 1rem 2rem; }
      .modal { padding: 2rem 1.4rem 2.25rem; }
      .modal-close { top: 0.85rem; right: 0.85rem; width: 34px; height: 34px; }
      .featured-grid { grid-template-columns: 1fr; }
      .about { padding: 4rem 0; }
      .featured { padding: 4rem 0 1rem; }
      .footer-grid { grid-template-columns: 1fr; gap: 2.25rem; }
      .footer-right { align-items: flex-start; }
      .footer-base { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    }

/* ============================
   FOOTER BASE — Terms/Privacy links group
============================ */
.footer-base-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.footer-base-left a {
  color: var(--muted-2);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-base-left a:hover { color: var(--steel); }

/* ============================
   LEGAL PAGES (Terms, Privacy)
   Long-form text in a single readable column
============================ */
.legal-page {
  padding: 5rem 0 4rem;
}
.legal-page .wrap {
  max-width: 760px;
  margin: 0 auto;
}
.legal-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 2rem;
  margin-bottom: 3rem;
}
.legal-page h1 {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--white);
  margin: 0.75rem 0 0;
}
.legal-meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 1.5rem;
}
.legal-meta strong { color: var(--steel); font-weight: 500; }

.legal-disclaimer {
  background: rgba(80, 144, 168, 0.08);
  border-left: 3px solid var(--steel);
  padding: 1.25rem 1.4rem;
  margin: 0 0 3rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--muted);
}
.legal-disclaimer strong { color: var(--white); font-weight: 600; }

.legal-body h2 {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--white);
  margin: 3rem 0 1rem;
  scroll-margin-top: 6rem;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-family: 'Saira', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: var(--white);
  margin: 2rem 0 0.75rem;
}
.legal-body p,
.legal-body li {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 1rem;
}
.legal-body strong { color: var(--white); font-weight: 600; }
.legal-body ul {
  padding-left: 1.4rem;
  margin: 0 0 1.25rem;
}
.legal-body ul li { margin-bottom: 0.5rem; }
.legal-body ul li::marker { color: var(--steel); }
.legal-body a {
  color: var(--steel);
  text-decoration: none;
  border-bottom: 1px solid rgba(80, 144, 168, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.legal-body a:hover {
  color: var(--white);
  border-color: var(--white);
}
.legal-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 3rem 0;
}

/* Confirm/placeholder marker — must be visible if accidentally deployed */
.legal-body mark.confirm,
.legal-body .confirm {
  background: #ffd54f;
  color: #1a1a1a;
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
  border-radius: 1px;
  letter-spacing: 0.04em;
}

.legal-body table.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2rem;
  font-size: 0.88rem;
}
.legal-body table.legal-table th,
.legal-body table.legal-table td {
  border: 1px solid var(--border);
  padding: 0.75rem 0.95rem;
  text-align: left;
  vertical-align: top;
  color: var(--muted);
  line-height: 1.55;
}
.legal-body table.legal-table th {
  background: var(--bg-card);
  color: var(--white);
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .legal-page { padding: 3rem 0 2.5rem; }
  .legal-head { margin-bottom: 2rem; padding-bottom: 1.5rem; }
  .legal-body h2 { margin-top: 2.25rem; }
  .footer-base-left { gap: 0.85rem; }
}

/* ============================
   LEGAL PAGES — 2-col layout with sticky TOC sidebar
============================ */
.legal-page .wrap { max-width: 1080px; }

.legal-head,
.legal-disclaimer {
  max-width: 760px;
}

/* Steel-blue accent rule beneath H1 — matches hero rhythm */
.legal-head .legal-rule {
  width: 60px;
  height: 2px;
  background: var(--steel);
  margin: 1.5rem 0 0;
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(0, 220px);
  gap: 4rem;
  align-items: start;
}

.legal-body { min-width: 0; }

.toc {
  position: sticky;
  top: 100px;
  align-self: start;
  padding-left: 1.5rem;
  border-left: 1px solid var(--border);
}
.toc-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 1.1rem;
}
.toc-nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.toc-nav a {
  font-family: 'Saira', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.45;
  padding: 0.15rem 0 0.15rem 0.7rem;
  margin-left: -0.7rem;
  border-left: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.toc-nav a:hover { color: var(--white); }
.toc-nav a.active {
  color: var(--steel);
  border-left-color: var(--steel);
  transform: translateX(2px);
}

@media (max-width: 980px) {
  .legal-layout { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
}

/* Smooth scrolling to anchor links */
html { scroll-behavior: smooth; }

/* ============================
   FREE pill on Featured (f-card) cards
============================ */
.f-card-price.free-tag {
  background: var(--steel);
  color: #0c1118;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 1px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.f-card-large .f-card-price.free-tag {
  font-size: 0.7rem;
  padding: 0.4rem 0.8rem;
}

/* ====================================================================
   v22 UPGRADES — refined nav, structured footer, product detail modal,
   country sourcing subsections, mobile menu, green Free pills.
   Appended after the original styles so these rules win cascade order.
   ==================================================================== */

/* ============================ */
/* COLOR — green for Free pills */
/* ============================ */
:root {
  --green: #4a9c6d;        /* Free indicator + One-Page Quick References accent */
  --green-deep: #3a8558;   /* hover/active for green elements */
  --nav-bg-scrolled: rgba(11, 19, 28, 0.85);  /* sticky nav blurred bg when scrolled */
}

/* ============================ */
/* GREEN FREE PILLS — override prior steel-blue */
/* ============================ */
.r-card-price.free-tag,
.f-card-price.free-tag {
  background: #4a9c6d !important;
  color: #ffffff !important;
}
.r-card.free .r-card-cta,
.f-card.free .f-card-cta {
  color: #4a9c6d;
}

/* ============================ */
/* NAV — refined typography, sticky-on-scroll, mobile hamburger */
/* ============================ */
/* Sticky background shift when scrolled */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color 0.25s ease, backdrop-filter 0.25s ease,
              border-color 0.25s ease;
  background: var(--bg);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: var(--nav-bg-scrolled);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--border);
}

/* Refined nav links — smaller, tighter letter-spacing, more breathing room */
.nav-link {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  padding: 0.5rem 0;
  position: relative;
}
.nav-menu { gap: 2.5rem; }

/* Animated underline — grows from left */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0.15rem;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--steel);
  transition: width 0.25s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after { width: 100%; }
.nav-link.is-active { color: var(--white); }

/* Refined CTA button — tighter, more polished */
.nav-cta {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  padding: 0.75rem 1.25rem;
  background: var(--steel);
  color: #0c1118;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.2s ease;
}
.nav-cta:hover { background: var(--steel-deep); transform: translateY(-1px); }

/* Mobile hamburger button — hidden on desktop */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.nav-toggle .hamburger {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--white);
  position: relative;
  transition: background 0.2s ease;
}
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--white);
  transition: transform 0.25s ease, top 0.25s ease, bottom 0.25s ease;
}
.nav-toggle .hamburger::before { top: -6px; }
.nav-toggle .hamburger::after { bottom: -6px; }
.nav-toggle[aria-expanded="true"] .hamburger { background: transparent; }
.nav-toggle[aria-expanded="true"] .hamburger::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger::after {
  bottom: 0;
  transform: rotate(-45deg);
}

/* Mobile menu drawer */
.nav-mobile-drawer {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0;
  background: #0b131c;            /* opaque solid — escapes any --bg fallback */
  z-index: 200;                    /* well above nav (50), modals (1000 own theirs) */
  padding: 2rem 1.5rem 2rem;
  flex-direction: column;
  gap: 0.25rem;
  border-top: 1px solid var(--border);
  overflow-y: auto;
}
.nav-mobile-drawer.is-open { display: flex; }
.nav-mobile-drawer a {
  font-family: 'Saira', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.02em;
}
.nav-mobile-drawer a:last-of-type { border-bottom: none; }
.nav-mobile-drawer .nav-cta-mobile {
  margin-top: 1.25rem;
  background: var(--steel);
  color: #0c1118;
  padding: 1rem 1.25rem;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: none;
  text-decoration: none;
}

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

/* ============================ */
/* FOOTER — multi-column structured layout (Kosbiotic-inspired, no newsletter) */
/* ============================ */
footer {
  padding: 5rem 0 2rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
  margin-top: 0;
}
.footer-grid-v2 {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 3rem;
  align-items: start;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--border);
}
.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 320px;
}
.footer-brand-col .footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.footer-brand-col .brand-mark {
  width: 38px;
  height: 38px;
}
.footer-brand-col .wordmark {
  font-family: 'Saira Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.footer-brand-tagline {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-top: 0.25rem;
}
.footer-brand-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 0.25rem;
}
.footer-brand-contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.footer-brand-contact a {
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-brand-contact a:hover { color: var(--white); }

.footer-col-title {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer-col a {
  font-family: 'Saira', sans-serif;
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}
.footer-col a:hover {
  color: var(--white);
  transform: translateX(2px);
}

/* Footer bottom strip */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-bottom-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.footer-bottom-left a {
  color: var(--muted-2);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-bottom-left a:hover { color: var(--steel); }
.footer-bottom-right {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}

@media (max-width: 980px) {
  .footer-grid-v2 {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 2rem;
  }
  .footer-brand-col { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
  .footer-grid-v2 { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================ */
/* COUNTRY SOURCING — subsection structure */
/* ============================ */
.card-subsection {
  margin-bottom: 2.25rem;
}
.card-subsection:last-child { margin-bottom: 0; }
.subsection-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 1.25rem;
}
.subsection-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.subsection-head .free-marker {
  color: #4a9c6d !important;
  font-weight: 600;
}
.subsection-head--accent,
.subsection-head.subsection-head--accent {
  color: #4a9c6d !important;
}

/* ============================
   RESOURCE CARD — IMAGE VARIANT
   Structure: .r-card--has-img > .r-card-img-wrap + .r-card-body
   Inline styles on the HTML elements also enforce sizing as a
   backup against CSS caching. Do not remove either.
============================ */
.card-grid > * { min-width: 0; }   /* prevent grid items overflowing their cell */

.r-card--has-img {
  padding: 0 !important;
  overflow: hidden !important;
}

.r-card-img-wrap {
  width: 100% !important;
  height: 110px !important;
  max-height: 110px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  display: block !important;
  border-bottom: 1px solid var(--border);
}

.r-card-img {
  width: 100% !important;
  height: 110px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

/* Restores the standard card padding for all text content */
.r-card-body {
  padding: 1.4rem 1.4rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}
@media (max-width: 900px) {
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .card-grid-3 { grid-template-columns: 1fr; }
}

/* ============================ */
/* PRODUCT DETAIL MODAL — opens before checkout */
/* ============================ */
.pd-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 18, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  /* Use display:flex always + visibility so opacity can transition */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1.5rem 2rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.pd-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pd-modal {
  width: 100%;
  max-width: 780px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  position: relative;
  display: flex;
  flex-direction: column;
  /* Animation scoped to is-open so it re-fires each time modal opens */
}
/* Fires each time is-open is added to the backdrop */
.pd-modal-backdrop.is-open .pd-modal {
  animation: pd-modal-rise 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pd-modal-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.pd-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border);
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s;
  border-radius: 0;
  padding: 0;
  line-height: 1;
}
.pd-modal-close:hover { background: rgba(255, 255, 255, 0.18); }

/* Visual / media area at top */
.pd-modal-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1a232f 0%, #0c131b 100%);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-modal-media svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Photo replaces the SVG when details.image is set */
.pd-modal-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.pd-modal-body {
  padding: 2.25rem 2.5rem 1rem;
}
.pd-modal-meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 0.75rem;
}
.pd-modal-meta .meta-sep {
  margin: 0 0.5rem;
  color: var(--muted-2);
}
.pd-modal-title {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.05;
  color: var(--white);
  margin: 0 0 0.85rem;
  letter-spacing: -0.005em;
}
.pd-modal-positioning {
  font-family: 'Saira', sans-serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--steel);
  font-weight: 500;
  margin: 0 0 1.5rem;
  line-height: 1.45;
}
.pd-modal-description {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.pd-modal-description p { margin: 0 0 0.75rem; }
.pd-modal-description p:last-child { margin-bottom: 0; }

.pd-modal-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}
.pd-modal-block {
  background: rgba(80, 144, 168, 0.05);
  border-left: 2px solid var(--steel);
  padding: 1.1rem 1.25rem;
}
.pd-modal-block-title {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 600;
  margin-bottom: 0.7rem;
}
.pd-modal-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pd-modal-block li {
  font-size: 0.85rem;
  color: var(--white);
  line-height: 1.5;
  padding-left: 1rem;
  position: relative;
}
.pd-modal-block li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--steel);
}

.pd-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2.5rem 2.25rem;
  border-top: 1px solid var(--border);
  gap: 1.25rem;
  flex-wrap: wrap;
}
.pd-modal-price {
  font-family: 'Saira', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--white);
  letter-spacing: -0.005em;
}
.pd-modal-price.free-mod {
  background: #4a9c6d;
  color: #ffffff;
  padding: 0.4rem 0.85rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pd-modal-buy {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--steel);
  color: #0c1118;
  font-family: 'DM Mono', monospace;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1rem 1.5rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.pd-modal-buy:hover {
  background: var(--steel-deep);
  transform: translateY(-1px);
}
.pd-modal-buy.is-disabled {
  background: var(--bg);
  color: var(--muted);
  cursor: not-allowed;
  border: 1px solid var(--border);
}
.pd-modal-buy.is-disabled:hover {
  background: var(--bg);
  transform: none;
}

@media (max-width: 720px) {
  .pd-modal-backdrop { padding: 1rem; }
  .pd-modal-body { padding: 1.5rem 1.5rem 0.75rem; }
  .pd-modal-footer { padding: 1.25rem 1.5rem 1.75rem; }
  .pd-modal-blocks { grid-template-columns: 1fr; gap: 1rem; }
  .pd-modal-title { font-size: 1.5rem; }
  .pd-modal-positioning { font-size: 0.92rem; }
  .pd-modal-description { font-size: 0.9rem; }
}

/* Lock body scroll when modal open */
body.pd-modal-locked { overflow: hidden; }

/* ============================ */
/* CARD CTA — refine "View more →" text */
/* ============================ */
.r-card-cta { text-transform: uppercase; }
.f-card-cta { text-transform: uppercase; }


/* v22: "Coming Soon" pill — sits in the price area on coming-soon cards */
.r-card-price.cs-tag,
.f-card-price.cs-tag,
.pd-modal-price.cs-tag {
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  padding: 0.4rem 0.7rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--border);
}


/* ============================================================
   NEW RELEASES SECTION
============================================================ */
.new-releases {
  padding: 5rem 0 4.5rem;
  border-top: 1px solid var(--border);
}

.nr-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}

.nr-head-text { flex: 1; }

.nr-title {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  color: var(--text-primary);
  line-height: 1;
  margin: 0.4rem 0 0.5rem;
  letter-spacing: -0.01em;
}

.nr-sub {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
}

.nr-view-all {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--steel);
  font-family: 'Barlow', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.65rem 1.35rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}

.nr-view-all:hover {
  border-color: var(--steel);
  background: rgba(80, 144, 168, 0.08);
  color: var(--text-primary);
}

.nr-view-all .arrow { margin-left: 0.25rem; }

@media (max-width: 600px) {
  .nr-head { flex-direction: column; align-items: flex-start; }
  .nr-title { font-size: 1.75rem; }
}


/* ============================================================
   LEMON SQUEEZY TRUST NOTE (inside pd-modal footer)
============================================================ */
.ls-trust-note {
  font-size: 0.67rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.26);
  text-align: center;
  margin: 0.85rem 0 0;
  padding: 0 0.25rem;
}

.ls-trust-note strong {
  color: rgba(255, 255, 255, 0.44);
  font-weight: 500;
}


/* ============================================================
   COOKIE NOTICE BANNER
============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  z-index: 900;
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-text {
  font-size: 0.775rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.cookie-text strong {
  color: var(--text-secondary);
  font-weight: 500;
}

.cookie-link {
  color: var(--steel);
  text-decoration: none;
  margin-left: 0.6rem;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.cookie-link:hover { text-decoration: underline; }

.cookie-btn {
  background: var(--steel);
  border: none;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 1.25rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.cookie-btn:hover { background: var(--steel-deep); }

@media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 1.25rem 1.5rem;
    gap: 1rem;
  }
}

/* ============================================================
   HERO GLOBE — v43 (clean: no markers, no labels)
   Toned-down warm-white sphere on a transparent container.
   ============================================================ */

.hero-globe-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  isolation: isolate;
}

.hero-globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  opacity: 0;
  transition: opacity 1s ease;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  display: block;
  background: transparent;
  border: none;
  outline: none;
}
.hero-globe-canvas:active { cursor: grabbing; }

@media (max-width: 880px) { .hero-globe-stage { max-width: 440px; } }
@media (max-width: 560px) { .hero-globe-stage { max-width: 340px; } }

/* ============================================================
   COUNTRY SOURCING GUIDES - v46
   Dark/translucent cards that integrate seamlessly with the
   site (matching resource-card visual language). Horizontal
   carousel with flexbox. Minimal card footprint.
   ============================================================ */

.cg-section {
  padding: 4.5rem 0 3.5rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.cg-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.cg-title {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--white);
  margin: 0.35rem 0 0;
}

.cg-arrows {
  display: flex !important;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

.cg-arrow {
  width: 38px;
  height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--cream);
  font-family: 'Saira Condensed', sans-serif;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  padding: 0;
}
.cg-arrow:hover:not(:disabled) {
  background: var(--steel-soft);
  border-color: var(--steel);
  color: white;
}
.cg-arrow:disabled { opacity: 0.3; cursor: default; }

/* Flexbox carousel — bulletproof horizontal scroll */
.cg-scroll {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 1rem;
  overflow-x: auto !important;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.16) transparent;
  padding: 0.25rem 0 1rem;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.cg-scroll::-webkit-scrollbar { height: 5px; }
.cg-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 3px; }
.cg-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 3px; }
.cg-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }

/* ---- COUNTRY CARD ----
   Dark translucent — matches resource cards aesthetic.
   Same width math as `card-grid` (4 cards per row at desktop). */
.cg-card {
  flex: 0 0 calc((100% - 3rem) / 4) !important;
  scroll-snap-align: start;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
  padding: 0 !important;
  cursor: pointer;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.cg-card:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--steel) !important;
  transform: translateY(-2px);
}

.cg-card-image {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  background: #0f1923;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.cg-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  opacity: 0.92;
  transition: opacity 0.25s ease, transform 0.4s ease;
}
.cg-card:hover .cg-card-image img {
  opacity: 1;
  transform: scale(1.04);
}

.cg-card-foot {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem 0.85rem !important;
}
.cg-card-text { flex: 1; min-width: 0; }
.cg-card-desc {
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 0.2rem;
  line-height: 1.2;
}
.cg-card-title {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--white);
  margin: 0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}
.cg-card-button {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--cream-soft);
  font-size: 0.85rem;
  line-height: 1;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cg-card:hover .cg-card-button {
  background: var(--steel);
  color: white;
  border-color: var(--steel);
}

/* ---- MODAL ---- */
.cg-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 23, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1rem 1rem;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cg-modal-backdrop.open {
  display: flex;
  opacity: 1;
}

.cg-modal {
  position: relative;
  width: 100%;
  max-width: 850px;
  background: #f8f6f0;
  border-radius: 20px 20px 12px 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(20px) scale(0.98);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.cg-modal-backdrop.open .cg-modal {
  transform: translateY(0) scale(1);
}

.cg-modal-image {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  background: #d8d3c8;
}
.cg-modal-image::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 60px;
  background: linear-gradient(to top, #f8f6f0, transparent);
  pointer-events: none;
}
.cg-modal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.cg-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: #1e2c3a;
  z-index: 5;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-modal-close:hover { background: white; transform: scale(1.05); }

.cg-modal-body { padding: 1.5rem 2.5rem 2.5rem; }

.cg-modal-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-deep);
  margin-bottom: 0.4rem;
}

.cg-modal-title {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  line-height: 1;
  letter-spacing: -0.005em;
  color: #1e2c3a;
  margin: 0 0 1.5rem;
}

.cg-modal-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 2rem;
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: 1.25rem;
  margin-bottom: 2rem;
}
.cg-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 0.88rem;
}
.cg-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7782;
  flex-shrink: 0;
  min-width: 90px;
}
.cg-stat-value {
  font-family: 'Barlow', sans-serif;
  color: #1e2c3a;
  font-weight: 500;
  text-align: right;
  line-height: 1.35;
}

.cg-modal-block { margin-bottom: 2rem; }
.cg-modal-block-title {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #1e2c3a;
  margin: 0 0 0.6rem;
}
.cg-modal-gov {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--steel-deep);
  margin: 0 0 0.75rem;
  line-height: 1.5;
}
.cg-modal-political,
.cg-modal-outlook-para {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #4a5560;
  margin: 0 0 0.85rem;
}
.cg-modal-political:last-child,
.cg-modal-outlook-para:last-child { margin-bottom: 0; }

/* Trade entries — stacked region/desc rows. Works with both
   short rates ("0% EBA") and full paragraph descriptions. */
.cg-modal-trade {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.cg-modal-trade li {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  gap: 1rem;
  align-items: baseline;
  font-size: 0.9rem;
}
.cg-modal-trade li:last-child { border-bottom: none; }
.cg-modal-trade-region {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-deep);
  font-weight: 600;
  min-width: 78px;
  flex-shrink: 0;
}
.cg-modal-trade-rate { color: #1e2c3a; flex: 1; line-height: 1.55; }
.cg-modal-trade-note {
  font-size: 0.78rem;
  line-height: 1.55;
  color: #6b7782;
  margin: 0.5rem 0 0;
  font-style: italic;
}

.cg-modal-cta-wrap {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0,0,0,0.1);
  text-align: center;
}
.cg-modal-cta {
  display: inline-block;
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--steel-deep);
  font-size: 0.9rem;
  text-decoration: none;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--steel);
  border-radius: 2px;
  transition: background 0.2s, color 0.2s;
}
.cg-modal-cta:hover { background: var(--steel); color: white; }

body.cg-modal-open { overflow: hidden; }

/* Responsive breakpoints */
@media (max-width: 1100px) {
  .cg-card { flex: 0 0 calc((100% - 2rem) / 3) !important; }
}
@media (max-width: 800px) {
  .cg-card { flex: 0 0 calc((100% - 1rem) / 2) !important; }
  .cg-section { padding: 4rem 0 3rem; }
  .cg-modal-body { padding: 1.25rem 1.5rem 2rem; }
  .cg-modal-image { height: 220px; }
  .cg-modal-stats { grid-template-columns: 1fr; gap: 0; }
  .cg-modal-trade li { flex-direction: column; gap: 0.2rem; }
  .cg-modal-trade-region { min-width: 0; }
}
@media (max-width: 520px) {
  .cg-card { flex: 0 0 70% !important; }
}

/* ============================================================
   COUNTRY SOURCING GUIDES - v47 FIXES
   Targets specific desktop issues seen in v46:
   1. Blue link color leaking through to country titles
   2. Only 2 cards visible at desktop (should be 4)
   3. Visible browser scrollbar
   4. Header arrows stacking below title instead of right-aligned
   ============================================================ */

/* FIX 1: Force <a> color to inherit completely — UA's default link blue
   was bleeding through. Highest specificity + !important to win every
   cascade. */
a.cg-card,
a.cg-card:link,
a.cg-card:visited,
a.cg-card:hover,
a.cg-card:active,
a.cg-card:focus {
  color: var(--white) !important;
  text-decoration: none !important;
}
a.cg-card .cg-card-title,
.cg-scroll a.cg-card .cg-card-title,
.cg-card .cg-card-title {
  color: var(--white) !important;
  text-decoration: none !important;
}
a.cg-card .cg-card-desc,
.cg-scroll a.cg-card .cg-card-desc,
.cg-card .cg-card-desc {
  color: rgba(255, 255, 255, 0.62) !important;
  text-decoration: none !important;
}

/* FIX 2: Force 4-cards-visible at desktop. Override with maximum specificity.
   Targeting both the class and the container to win any cascade. */
.cg-section .cg-scroll .cg-card,
.cg-scroll > .cg-card {
  flex: 0 0 calc((100% - 3rem) / 4) !important;
  width: calc((100% - 3rem) / 4) !important;
  min-width: 0 !important;
  max-width: calc((100% - 3rem) / 4) !important;
}
@media (max-width: 1100px) {
  .cg-section .cg-scroll .cg-card,
  .cg-scroll > .cg-card {
    flex: 0 0 calc((100% - 2rem) / 3) !important;
    width: calc((100% - 2rem) / 3) !important;
    max-width: calc((100% - 2rem) / 3) !important;
  }
}
@media (max-width: 800px) {
  .cg-section .cg-scroll .cg-card,
  .cg-scroll > .cg-card {
    flex: 0 0 calc((100% - 1rem) / 2) !important;
    width: calc((100% - 1rem) / 2) !important;
    max-width: calc((100% - 1rem) / 2) !important;
  }
}
@media (max-width: 520px) {
  .cg-section .cg-scroll .cg-card,
  .cg-scroll > .cg-card {
    flex: 0 0 78% !important;
    width: 78% !important;
    max-width: 78% !important;
  }
}

/* FIX 3: Hide horizontal scrollbar completely. The dot pagination
   takes over as the visual scroll indicator. */
.cg-section .cg-scroll {
  scrollbar-width: none !important;        /* Firefox */
  -ms-overflow-style: none !important;     /* IE/Edge legacy */
}
.cg-section .cg-scroll::-webkit-scrollbar {
  display: none !important;                /* Chrome/Safari/Edge */
  height: 0 !important;
  width: 0 !important;
  background: transparent !important;
}

/* FIX 4: Section header — title on left, arrows on right at desktop.
   On mobile they can wrap (and do, in the user's good-looking phone view). */
@media (min-width: 720px) {
  .cg-section .cg-head {
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
  }
  .cg-section .cg-head > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }
  .cg-section .cg-head .cg-arrows {
    flex-shrink: 0;
  }
}

/* Dot pagination — visual scroll indicator since the bar is hidden.
   Updated by JS as user scrolls or presses arrows. */
.cg-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  max-width: 100%;
}
.cg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, width 0.2s;
  flex-shrink: 0;
}
.cg-dot:hover { background: rgba(255, 255, 255, 0.4); }
.cg-dot.active {
  background: var(--cream);
  width: 18px;
  border-radius: 4px;
}

/* Drag cursor states */
.cg-section .cg-scroll {
  cursor: grab;
  user-select: none;
}
.cg-section .cg-scroll.cg-dragging {
  cursor: grabbing;
  scroll-behavior: auto !important;
}
.cg-section .cg-scroll.cg-dragging .cg-card {
  pointer-events: none;
}

/* ============================================================
   RESOURCE CARDS - v49 REDESIGN
   Full-image overlay style across all r-cards (with or without
   images). Mirrors the country card visual language but works
   within the existing per-category grid layout.

   CSS-only transformation — defeats inline styles already on the
   r-card HTML using !important. The PD modal click flow is
   preserved (no JS changes).
   ============================================================ */

/* Reset the r-card from its current "image-on-top + body-below" layout
   to a "single full-card surface with overlay" layout. */
.r-card,
.r-card.r-card--has-img,
.r-card.modal-only,
a.r-card {
  position: relative !important;
  aspect-ratio: 3 / 4 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: block !important;
  background: #0f1923 !important;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(80, 144, 168, 0.15) 0%, transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(116, 188, 214, 0.10) 0%, transparent 50%),
    linear-gradient(135deg, #0f1923 0%, #14202c 50%, #1a2735 100%) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  text-decoration: none !important;
  color: inherit !important;
  flex: initial !important;
  min-width: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.r-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}

/* Image fills the entire card (was 110px tall band on top). */
.r-card .r-card-img-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
  flex-shrink: 0;
  border-bottom: none !important;
  z-index: 0 !important;
}
.r-card .r-card-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.5s ease;
}
.r-card:hover .r-card-img { transform: scale(1.05); }

/* Body becomes the bottom overlay with backdrop-blur + dark gradient. */
.r-card .r-card-body {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  padding: 16px 14px 14px !important;
  background: linear-gradient(to top,
    rgba(10, 16, 23, 0.92) 0%,
    rgba(10, 16, 23, 0.75) 55%,
    rgba(10, 16, 23, 0.10) 100%) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  min-height: 44% !important;
  z-index: 1;
}

/* Eyebrow (the tag — "Guide", "Template", "Playbook", etc.) */
.r-card .r-card-tag {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.55rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(116, 188, 214, 0.95) !important;
  margin: 0 0 0.35rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  display: block !important;
  line-height: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Title (resource name) */
.r-card .r-card-title {
  font-family: 'Saira Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  line-height: 1.05 !important;
  letter-spacing: -0.005em;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Description — REMOVED per spec (no text below name) */
/* (v49 hid description; v51 brings it back as line-clamp-2 below) */

/* Footer holds price + read-more on a single row, bottom of overlay. */
.r-card .r-card-footer {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding: 0 !important;
  border-top: none !important;
}

/* Price tag — cream pill bottom-left */
.r-card .r-card-price {
  background: #f4f1ea !important;
  color: #1e2c3a !important;
  font-family: 'Saira', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  padding: 5px 9px !important;
  border-radius: 4px !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  display: inline-block !important;
}

/* Read more link — teal mono bottom-right (was "View more" before) */
.r-card .r-card-cta {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.55rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #74bcd6 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px !important;
  white-space: nowrap;
  font-weight: 500 !important;
}
.r-card .r-card-cta .arrow { color: #74bcd6 !important; }

/* Always-Free price treatment — green pill instead of cream */
.r-card .r-card-price.r-card-price--free,
.r-card .r-card-price.free-tag,
.r-card .free-tag.r-card-price,
.r-card[data-product*="-one-pager"] .r-card-price,
.r-card.modal-only[data-product*="-one-pager"] .r-card-price {
  background: #2d5f3f !important;
  color: #d4edda !important;
}

/* Modal-only cards (the 25 that aren't visible in main listing but
   exist in the page DOM) — keep them hidden from view; the PD modal
   pulls their data programmatically. */
.r-card.modal-only {
  display: none !important;
}

/* Ensure responsive aspect-ratio still works inside the existing
   category grids (the .r-grid or similar already in place handles
   the per-row layout — we just changed each card's shape). */
@media (max-width: 520px) {
  .r-card .r-card-title { font-size: 1rem !important; }
  .r-card .r-card-body { padding: 14px 12px 12px !important; }
}

/* Hover/focus polish — link decoration override (browsers sometimes
   bleed the default link blue into nested elements). */
a.r-card,
a.r-card:link,
a.r-card:visited,
a.r-card:hover,
a.r-card:active,
a.r-card:focus,
a.r-card .r-card-title,
a.r-card .r-card-tag,
a.r-card .r-card-price,
a.r-card .r-card-cta {
  text-decoration: none !important;
}

/* ============================================================
   RESOURCE CARDS - v51 GALLERY4 REFINEMENTS
   Refines the v49 r-card design with the suitable design
   tweaks from the gallery4 reference component:
   - Description now visible (line-clamp-2)
   - "Read more →" arrow slides on hover
   - Slightly larger title, tighter typography
   - Overlay grows to fit description while still letting the
     image dominate the upper portion of the card
   Country Sourcing Guides (top section) is UNTOUCHED.
   ============================================================ */

/* Slightly more generous overlay height so the description fits
   comfortably with the existing tag, title, and bottom row.
   Going from 44% → 60% of card height. */
.r-card .r-card-body {
  min-height: 60% !important;
  gap: 12px !important;
  padding: 18px 16px 16px !important;
}

/* Re-enable description (was display:none in v49). Truncate to two
   lines with line-clamp so long descriptions don't break the layout. */
.r-card .r-card-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
}

/* Title — slight refinement from v49: same Saira Condensed weight,
   subtly larger and tighter line height to match gallery4's
   text-xl/font-semibold feel while keeping our type system. */
.r-card .r-card-title {
  font-size: 1.2rem !important;
  line-height: 1.05 !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Eyebrow stays as the small monospace category tag (Guide/Template/etc.) */
.r-card .r-card-tag {
  font-size: 0.52rem !important;
  margin-bottom: 0 !important;
}

/* Sliding arrow on "Read more →" hover — directly from gallery4
   (group-hover:translate-x-1). The whole card is the .group, so when
   you hover the card the arrow on the CTA slides right by 4px. */
.r-card .r-card-cta {
  transition: gap 0.25s ease;
}
.r-card .r-card-cta .arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.r-card:hover .r-card-cta .arrow {
  transform: translateX(4px);
}

/* On hover, also subtly lift the CTA color brighter for affordance */
.r-card:hover .r-card-cta,
.r-card:hover .r-card-cta .arrow {
  color: #a8d5e5 !important;
}

/* Bottom row spacing — the description above already pushes the
   row down naturally via margin-top:auto */
.r-card .r-card-footer {
  margin-top: 4px !important;
  gap: 10px !important;
}

/* Mobile: smaller description, tighter padding */
@media (max-width: 520px) {
  .r-card .r-card-desc {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .r-card .r-card-title {
    font-size: 1.05rem !important;
  }
  .r-card .r-card-body {
    padding: 14px 12px 12px !important;
    min-height: 62% !important;
  }
}


/* ============================================================
   RESOURCE CARDS - v52.2 SHOW 4 / VIEW ALL TOGGLE
   Each category in the resource library shows only the first
   4 visible cards by default. A "View all (N)" button in the
   category-head expands the grid to show the rest. Modal-only
   ghost cards stay hidden regardless of state (they live outside
   .card-grid, after the closing </div>).
   ============================================================ */

/* v52.3: JS adds .r-card--hidden to cards 5+ on init. The class hides via
   a high-specificity rule. The :nth-child rule is kept as a no-JS fallback
   so even with JS disabled the first 4 cards render correctly. */
.r-card.r-card--hidden,
.card-grid > .r-card.r-card--hidden {
  display: none !important;
}

/* No-JS fallback: hide cards 5+ via CSS alone */
.no-js .card-grid > .r-card:nth-child(n+5) {
  display: none !important;
}

/* The .view-all toggle in category-head — chevron flips on expand */
.category .view-all {
  cursor: pointer;
  user-select: none;
}
.category .view-all .arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.category.expanded .view-all .arrow {
  transform: rotate(180deg);
}

/* Smooth fade for cards as they appear/disappear */
.card-grid > .r-card {
  transition: opacity 0.2s ease;
}

/* ============================================================
   v52.4 TEXT-HEAVY EXPLAINER SECTIONS
   Three new text-only sections inserted at strategic points
   to add depth between visual blocks:
   #what-we-cover    (after #about)
   #why-these-markets (after #country-guides)
   #library-intro    (before #resources)
   ============================================================ */

.text-section {
  padding: 5rem 0 4.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* (v52.6: .text-section now uses canonical .wrap from the rest of the site
   for full-width alignment. The text-section-body below constrains its OWN
   line width to ~62ch for readability, so prose doesn't run the full 1080px.) */
.text-section-head {
  margin-bottom: 2rem;
}
.text-section-tag {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal, #74bcd6);
  margin: 0 0 0.85rem;
  line-height: 1;
}
.text-section-title {
  font-family: 'Saira Condensed', 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.08;
  color: #f3f7f9;
  margin: 0;
  letter-spacing: -0.005em;
  max-width: 820px;
  text-align: left;
}
.text-section-body {
  font-family: 'Barlow', sans-serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 62ch;
}
.text-section-body p {
  margin: 0 0 1.15rem;
}
.text-section-body p:last-child { margin-bottom: 0; }
.text-section-body strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}
.text-section-list {
  margin: 0.4rem 0 1.4rem;
  padding: 0;
  list-style: none;
}
.text-section-list li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
  font-size: 1rem;
}
.text-section-list li:last-child { border-bottom: none; }
.text-section-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0.55rem;
  color: var(--teal, #74bcd6);
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.9rem;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .text-section { padding: 3.25rem 0; }
  /* (text-section now uses canonical .wrap which already has mobile padding rules) */
  .text-section-title { font-size: 1.7rem; }
  .text-section-body { font-size: 0.95rem; }
  .text-section-list li { font-size: 0.93rem; padding-left: 1.35rem; }
}


/* ============================================================
   v52.10 — MODAL Z-INDEX FIX (ROOT CAUSE OF SOURCING DESTINATIONS BUG)
   The cg-modal was at z-index 200, but the cookie banner is at 900.
   On computers where the cookie banner is still showing (new devices,
   cleared cookies, incognito), modals opened BEHIND the banner so the
   user thought nothing happened.
   Modals now sit at 10000 / 10001 — above ALL other UI elements.
   When a modal is open, cookie banner + mobile drawer are explicitly
   hidden via the body.cg-modal-open / body.pd-modal-open classes so
   they cannot stack over or under the modal in unexpected ways.
   ============================================================ */
.cg-modal-backdrop { z-index: 10000 !important; }
.pd-modal-backdrop { z-index: 10001 !important; }

/* When ANY modal is open, hide the cookie banner + mobile drawer entirely.
   Defensive: ensures no other UI can sit on top of, behind, or beside
   the modal regardless of future z-index changes. */
body.cg-modal-open .cookie-banner,
body.pd-modal-open .cookie-banner,
body.cg-modal-open .nav-mobile-drawer,
body.pd-modal-open .nav-mobile-drawer {
  display: none !important;
}

/* Make sure the cg-modal-backdrop has its own stacking context */
.cg-modal-backdrop { isolation: isolate; }
.pd-modal-backdrop { isolation: isolate; }