:root {
      --navy: #061934;
      --blue: #0c4aa5;
      --gold: #f4b82f;
      --green: #25D366;
      --ink: #12213a;
      --muted: #5f6f88;
      --line: #dce5f1;
      --soft: #f4f7fb
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 100px
    }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
      color: var(--ink);
      background: #fff;
      font-size: 16px;
      line-height: 1.65;
      overflow-x: hidden;
      top: 0 !important
    }

    h1,
    h2,
    h3,
    h4,
    p,
    li,
    a,
    span,
    small,
    strong,
    td,
    th,
    summary {
      overflow-wrap: anywhere;
      word-break: break-word
    }

    img,
    iframe,
    video,
    svg {
      max-width: 100%
    }

    iframe {
      border: 0;
      display: block
    }

    a {
      color: inherit;
      text-decoration: none
    }

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

    h1,
    h2,
    h3 {
      line-height: 1.1;
      letter-spacing: -.045em;
      margin: 0;
      font-weight: 750
    }

    h1 {
      font-size: clamp(34px, 5.3vw, 76px);
      margin: 18px 0 26px
    }

    h2 {
      font-size: clamp(26px, 3.4vw, 48px);
      margin-bottom: 22px
    }

    h3 {
      font-size: clamp(20px, 1.8vw, 25px);
      letter-spacing: -.025em
    }

    button,
    input,
    select {
      font: inherit
    }

    button,
    summary {
      cursor: pointer
    }

    button,
    a,
    select,
    input,
    summary {
      touch-action: manipulation
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    summary:focus-visible,
    .table-scroll:focus-visible {
      outline: 3px solid #b37504;
      outline-offset: 5px
    }

    .wrap {
      width: min(1240px, calc(100% - 80px));
      margin: auto
    }

    .section {
      padding: 96px 0
    }

    .eyebrow {
      font-size: 12px;
      letter-spacing: .16em;
      color: var(--gold);
      font-weight: 800;
      margin-bottom: 15px
    }

    .blue {
      color: var(--blue)
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid transparent;
      padding: 14px 22px;
      border-radius: 999px;
      min-height: 50px;
      font-size: 14px;
      font-weight: 750;
      line-height: 1.4;
      text-align: center;
      transition: background .2s
    }

    .gold {
      background: var(--gold);
      color: var(--navy);
      box-shadow: 0 8px 24px #f4b82f16
    }

    .gold:hover {
      background: #ffd16a
    }

    .green {
      background: var(--green);
      color: #fff;
      box-shadow: 0 8px 24px #25D36616
    }

    .green:hover {
      background: #1ebe5d;
      color: #fff
    }

    .ghost {
      color: white;
      border-color: #ffffff45;
      background: #ffffff06
    }

    .ghost:hover {
      background: #ffffff12
    }

    .outline {
      background: white;
      color: var(--blue);
      border-color: #aabbcf
    }

    .outline:hover {
      background: var(--soft)
    }

    .small {
      min-height: 44px;
      padding: 10px 20px
    }

    .text-link {
      display: block;
      color: var(--blue);
      font-size: 14px;
      font-weight: 650;
      margin-top: 22px
    }

    .fine {
      font-size: 14px;
      color: var(--muted);
      margin: 22px 0
    }

    .soft {
      background: var(--soft)
    }

    /* ============================================================
     HEADER / NAV  — grid-based, fully responsive
  ============================================================ */
    header {
      position: sticky;
      top: 0;
      z-index: 999;
      background: #061934f7;
      border-bottom: 1px solid #ffffff15;
      color: white
    }

    .nav {
      min-height: 84px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      grid-template-areas: "brand nav translator";
      align-items: center;
      gap: 24px;
      position: relative
    }

    .nav>.brand {
      grid-area: brand
    }

    .nav>#mainNav,
    .nav>nav {
      grid-area: nav
    }

    .nav>.site-translator {
      grid-area: translator
    }

    .nav>#menuButton,
    .nav>.menu {
      grid-area: menu
    }

    .brand img {
      display: block;
      width: 220px;
      height: 60px;
      object-fit: contain
    }

    .nav nav {
      display: flex;
      gap: 24px;
      align-items: center;
      justify-content: flex-end;
      font-size: 14px;
      font-weight: 600
    }

    .nav nav>a:hover {
      color: var(--gold)
    }

    .nav nav>a.gold:hover {
      color: var(--navy)
    }

    .nav nav>a.green:hover {
      color: #fff
    }

    .menu {
      display: none
    }

    .site-translator {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .site-translator select {
      width: auto;
      min-width: 145px;
      min-height: 42px;
      padding: 8px 34px 8px 12px;
      border: 1px solid #ffffff45;
      border-radius: 999px;
      background: #132f58;
      color: #fff;
      font-size: 13px;
      font-weight: 650
    }

    .site-translator select option {
      background: #fff;
      color: #12213a
    }

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

    /* Google translate cleanup */
    .goog-te-banner-frame.skiptranslate {
      display: none !important
    }

    .goog-te-gadget {
      font-size: 0 !important
    }

    .goog-te-gadget .goog-te-combo {
      display: none !important
    }

    .goog-tooltip,
    .goog-tooltip:hover {
      display: none !important
    }

    .goog-text-highlight {
      background: none !important;
      box-shadow: none !important
    }

    /* ============================================================
     HERO
  ============================================================ */
    .hero {
      background: radial-gradient(circle at 80% 15%, #2169d473, transparent 40%), linear-gradient(135deg, #04132a, #082c62);
      color: white;
      padding-top: 64px
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 60px;
      align-items: center;
      padding-bottom: 60px
    }

    .hero-grid>* {
      min-width: 0
    }

    .hero h1 span {
      color: var(--gold)
    }

    .hero-copy {
      font-size: 19px;
      color: #ccdaed;
      max-width: 680px
    }

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

    .hero-note {
      font-size: 14px;
      color: #b9c9df;
      margin-top: 28px
    }

    .gold-rule {
      display: inline-block;
      width: 26px;
      height: 2px;
      background: var(--gold);
      margin-right: 12px;
      vertical-align: middle
    }

    .hero-panel {
      border: 1px solid #ffffff25;
      background: #ffffff06;
      border-radius: 20px;
      padding: 20px;
      box-shadow: 0 24px 60px #00000020;
      min-width: 0
    }

    .panel-top {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      letter-spacing: .09em;
      color: #baccdf;
      padding: 3px 0 18px;
      gap: 16px
    }

    /* Legacy video-frame / poster styles */
    .video-frame {
      aspect-ratio: 16/9;
      width: 100%;
      background: #000;
      border-radius: 12px;
      overflow: hidden
    }

    .video-frame iframe {
      border: 0;
      width: 100%;
      height: 100%
    }

    .video-poster {
      padding: 0;
      position: relative;
      border: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: black
    }

    .video-poster img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 64px;
      height: 64px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--gold);
      color: var(--navy);
      font-size: 34px;
      box-shadow: 0 6px 25px #0004
    }

    .video-caption {
      padding: 22px 4px 3px
    }

    .video-caption h2 {
      font-size: 28px;
      line-height: 1.2;
      margin: 0 0 10px
    }

    .video-caption h3 {
      font-size: 28px;
      margin-bottom: 8px
    }

    .video-caption p {
      font-size: 15px;
      color: #cbd9ec;
      margin-bottom: 18px
    }

    .video-caption label {
      font-size: 14px;
      color: #d9e4f4
    }

    .video-caption select {
      background: #132f58;
      border-color: #567097;
      color: white;
      margin-top: 7px
    }

    .video-actions {
      display: flex;
      gap: 16px;
      align-items: center;
      margin: 18px 0 10px
    }

    .video-actions>a:last-child {
      font-size: 14px;
      color: #d1dff2;
      text-decoration: underline;
      text-underline-offset: 4px
    }

    .video-caption small {
      font-size: 12px;
      color: #aebfd7
    }

    .hero-foot {
      border-top: 1px solid #ffffff20;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: 24px 0 28px;
      gap: 24px
    }

    .hero-foot strong {
      font-size: 16px;
      display: block
    }

    .hero-foot span {
      font-size: 13px;
      color: #aebfd7
    }

    /* ============================================================
     SECTION HEADINGS
  ============================================================ */
    .section-heading {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 48px;
      margin-bottom: 36px
    }

    .section-heading p {
      margin: 0;
      max-width: 480px
    }

    .section-heading.centered {
      display: block;
      text-align: center
    }

    .centered p {
      margin: auto;
      max-width: 760px
    }

    /* ============================================================
     PATH GRID
  ============================================================ */
    .path-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      margin-top: 40px
    }

    .path-grid a {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 24px 20px;
      box-shadow: 0 8px 24px #102c5408;
      background: white
    }

    .path-grid a:hover {
      border-color: var(--gold)
    }

    .path-grid span {
      font-size: 13px;
      font-weight: 700;
      color: var(--blue);
      display: block;
      margin-bottom: 28px
    }

    .path-grid h3 {
      font-size: 22px;
      margin-bottom: 12px
    }

    .path-grid p {
      font-size: 14px;
      margin-bottom: 22px
    }

    .path-grid small {
      font-size: 12px;
      color: var(--blue)
    }

    /* ============================================================
     OPPORTUNITY SECTIONS
  ============================================================ */
    .opportunity {
      padding: 88px 0;
      border-top: 1px solid #e8eef6
    }

    .feature-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 80px;
      align-items: start
    }

    .feature-grid>* {
      min-width: 0
    }

    .section-label {
      font-size: 12px;
      letter-spacing: .1em;
      font-weight: 750;
      color: var(--blue);
      display: flex;
      gap: 14px;
      align-items: center;
      margin-bottom: 22px
    }

    .section-label>span {
      background: var(--blue);
      color: white;
      border-radius: 10px;
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      font-size: 14px;
      letter-spacing: 0;
      flex-shrink: 0
    }

    .feature-grid>div>p {
      font-size: 17px;
      max-width: 720px
    }

    .checks {
      padding: 0;
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px 24px;
      margin: 30px 0
    }

    .checks li {
      padding-left: 22px;
      position: relative;
      color: #384b66;
      font-size: 15px
    }

    .checks li:before {
      content: '✓';
      position: absolute;
      left: 0;
      color: #087660;
      font-weight: 800
    }

    .context {
      background: #fff8e5;
      border-left: 3px solid var(--gold);
      padding: 20px 24px;
      border-radius: 0 12px 12px 0;
      margin-top: 30px
    }

    .context strong {
      font-size: 15px
    }

    .context p {
      font-size: 14px;
      margin: 8px 0 0;
      color: #6b5c3f
    }

    .feature-card {
      background: linear-gradient(160deg, var(--navy), #0c3c79);
      color: white;
      border-radius: 20px;
      padding: 32px;
      box-shadow: 0 20px 50px #06193415;
      min-width: 0
    }

    .card-kicker {
      color: var(--gold);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      margin-bottom: 30px
    }

    .feature-card h3 {
      font-size: 30px;
      margin-bottom: 20px
    }

    .feature-card p {
      font-size: 15px;
      color: #cbd9ec
    }

    .feature-card .btn {
      width: 100%;
      margin-top: 14px
    }

    .card-link {
      display: block;
      color: #f4cb6f;
      font-size: 14px;
      font-weight: 600;
      text-align: center;
      margin-top: 18px
    }

    .feature-card details {
      border-color: #ffffff25
    }

    .feature-card summary {
      font-size: 14px
    }

    .feature-card details p {
      font-size: 14px
    }

    .feature-price {
      font-size: 42px;
      color: var(--gold);
      font-weight: 750;
      letter-spacing: -.04em;
      line-height: 1.2;
      margin-bottom: 18px
    }

    .feature-price span {
      font-size: 18px;
      color: #c9d6e6;
      margin-left: 10px;
      letter-spacing: 0
    }

    /* ============================================================
     VENDOR PLANS
  ============================================================ */
    .plans-heading {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 56px;
      gap: 30px
    }

    .plans-heading p {
      margin: 0;
      font-size: 15px
    }

    .plan-controls {
      display: flex;
      gap: 8px;
      margin: 26px 0 18px;
      flex-wrap: wrap
    }

    .plan-controls button {
      padding: 10px 20px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: white;
      min-height: 44px;
      font-size: 14px;
      color: var(--blue)
    }

    .plan-controls button.active {
      background: var(--navy);
      color: white;
      border-color: var(--navy)
    }

    .plan-preview {
      background: var(--soft);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 26px;
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 36px
    }

    .plan-preview .plan-price {
      font-size: 36px;
      font-weight: 750;
      letter-spacing: -.04em;
      color: var(--blue);
      line-height: 1.2
    }

    .plan-preview strong {
      display: block;
      font-size: 18px
    }

    .plan-preview p {
      margin: 10px 0 0;
      font-size: 15px
    }

    .all-plans {
      margin-top: 24px
    }

    .table-scroll {
      overflow: auto;
      margin-top: 20px;
      -webkit-overflow-scrolling: touch
    }

    table {
      border-collapse: collapse;
      width: 100%;
      min-width: 650px;
      font-size: 14px
    }

    caption {
      text-align: left;
      font-size: 14px;
      margin-bottom: 12px;
      color: var(--muted)
    }

    th,
    td {
      text-align: left;
      padding: 16px;
      border-bottom: 1px solid var(--line);
      vertical-align: top
    }

    th {
      background: var(--navy);
      color: white
    }

    td:first-child {
      font-weight: 600;
      width: 150px
    }

    td:nth-child(2) {
      white-space: nowrap;
      color: var(--blue);
      font-weight: 600
    }

    /* ============================================================
     REQUIREMENTS
  ============================================================ */
    .requirements {
      margin-top: 30px
    }

    .requirements>div {
      border-top: 1px solid var(--line);
      padding: 22px 0
    }

    .requirements span {
      display: block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .09em;
      color: var(--blue);
      margin-bottom: 8px
    }

    .requirements strong {
      font-size: 22px;
      line-height: 1.3;
      display: block
    }

    .requirements p {
      font-size: 14px;
      margin: 8px 0 0
    }

    /* ============================================================
     PRIME SECTION
  ============================================================ */
    .prime {
      background: radial-gradient(circle at 90% 20%, #1a55935c, transparent 45%), linear-gradient(125deg, #061934, #092b56);
      color: white
    }

    .prime .section-label {
      color: var(--gold)
    }

    .prime .section-label span {
      background: var(--gold);
      color: var(--navy)
    }

    .prime h2 span {
      color: var(--gold)
    }

    .prime p {
      color: #cbd9ec
    }

    .prime .checks li {
      color: #d3e1f3
    }

    .prime .checks li:before {
      color: var(--gold)
    }

    .prime-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin: 30px 0
    }

    .prime-split>div {
      background: #ffffff08;
      border: 1px solid #ffffff20;
      border-radius: 12px;
      padding: 24px
    }

    .prime-split strong {
      font-size: 30px;
      display: block;
      color: var(--gold);
      letter-spacing: -.035em
    }

    .prime-split span {
      font-size: 16px;
      font-weight: 650
    }

    .prime-split p {
      margin: 8px 0 0;
      font-size: 14px
    }

    .prime-offer {
      border: 1px solid #f4b82f50;
      background: linear-gradient(140deg, #1b3b65, #0c2142)
    }

    .prime-offer>img {
      width: 76px;
      height: 76px;
      object-fit: contain;
      margin-bottom: 26px
    }

    /* ============================================================
     SOLUTIONS GRID
  ============================================================ */
    .solution-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px
    }

    .solution-grid article {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 26px;
      display: flex;
      flex-direction: column;
      min-width: 0
    }

    .solution-grid article>span {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--blue);
      margin-bottom: 26px
    }

    .solution-grid h3 {
      margin-bottom: 18px;
      font-size: 23px
    }

    .solution-grid p {
      font-size: 15px
    }

    .solution-grid strong {
      font-size: 14px;
      margin-top: auto
    }

    .solution-grid a {
      color: var(--blue);
      font-weight: 600;
      font-size: 14px;
      margin-top: 18px
    }

    .support {
      display: flex;
      gap: 30px;
      align-items: center;
      background: var(--soft);
      padding: 24px;
      border-radius: 12px;
      margin-top: 30px;
      flex-wrap: wrap
    }

    .support>strong {
      min-width: 180px
    }

    .support p {
      font-size: 14px;
      margin: 0
    }

    .support a {
      font-size: 14px;
      font-weight: 600;
      min-width: 160px;
      color: var(--blue)
    }

    /* ============================================================
     WEBINARS
  ============================================================ */
    .webinars {
      background: linear-gradient(135deg, #061934, #0c4aa5);
      color: white
    }

    .webinars p {
      color: #d0def0
    }

    .webinar-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-top: 44px
    }

    .webinar-grid article {
      background: #ffffff08;
      border: 1px solid #ffffff30;
      border-radius: 18px;
      padding: 32px;
      min-width: 0
    }

    .webinar-grid article>span {
      font-size: 11px;
      letter-spacing: .1em;
      color: var(--gold);
      font-weight: 700;
      display: block;
      margin-bottom: 24px
    }

    .webinar-grid h3 {
      font-size: 30px;
      margin-bottom: 18px
    }

    .webinar-grid small {
      display: block;
      color: #c6d5e9;
      font-size: 13px;
      margin-top: 20px
    }

    /* ============================================================
     LEARNING HUB — FILTERS
  ============================================================ */
    .filters {
      display: grid;
      grid-template-columns: 1fr 220px 220px;
      gap: 16px;
      margin-top: 36px;
      align-items: end
    }

    label {
      display: block;
      font-size: 14px;
      font-weight: 650;
      margin-bottom: 8px
    }

    input,
    select {
      width: 100%;
      border: 1px solid #aabbcf;
      border-radius: 8px;
      background: white;
      padding: 12px 16px;
      min-height: 50px;
      color: var(--ink)
    }

    .filters input[type="search"] {
      width: 100%;
      border: 1px solid #aabbcf;
      border-radius: 8px;
      background: #fff;
      padding: 12px 16px;
      min-height: 50px;
      color: var(--ink);
      font-size: 15px
    }

    .filters input[type="search"]:focus {
      outline: 3px solid #b37504;
      outline-offset: 2px;
      border-color: var(--blue)
    }

    /* ---------- Custom select (filters) ---------- */
    .custom-select {
      position: relative;
      width: 100%;
      user-select: none
    }

    .custom-select-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      min-height: 50px;
      padding: 12px 16px;
      background: #fff;
      border: 1px solid #aabbcf;
      border-radius: 8px;
      font-size: 15px;
      color: var(--ink);
      cursor: pointer;
      text-align: left;
      transition: border-color .2s, box-shadow .2s;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent
    }

    .custom-select-trigger:hover,
    .custom-select.open .custom-select-trigger {
      border-color: var(--blue)
    }

    .custom-select.open .custom-select-trigger {
      box-shadow: 0 0 0 3px rgba(12, 74, 165, 0.15)
    }

    .custom-select-arrow {
      display: inline-block;
      transition: transform .2s ease;
      font-size: 12px;
      color: var(--blue);
      line-height: 1
    }

    .custom-select.open .custom-select-arrow {
      transform: rotate(180deg)
    }

    .custom-select-options {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      background: #fff;
      border: 1px solid #dce5f1;
      border-radius: 8px;
      box-shadow: 0 12px 32px rgba(6, 25, 52, 0.15);
      overflow: hidden;
      z-index: 9999;
      max-height: 280px;
      overflow-y: auto;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity .18s ease, transform .18s ease, visibility .18s ease
    }

    .custom-select.open .custom-select-options {
      opacity: 1;
      visibility: visible;
      transform: translateY(0)
    }

    .custom-select-option {
      display: block;
      width: 100%;
      padding: 12px 16px;
      background: none;
      border: 0;
      text-align: left;
      font-size: 15px;
      color: var(--ink);
      cursor: pointer;
      transition: background .15s ease;
      border-bottom: 1px solid #f2f6fb;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent
    }

    .custom-select-option:last-child {
      border-bottom: 0
    }

    .custom-select-option:hover {
      background: #f4f7fb
    }

    .custom-select-option[aria-selected="true"] {
      background: #eaf1fb;
      color: var(--blue);
      font-weight: 650
    }

    /* ============================================================
     RESOURCE GRID (Learning Hub cards)
  ============================================================ */
    .resource-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin: 24px 0
    }

    .resource {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 26px;
      display: flex;
      flex-direction: column;
      min-width: 0
    }

    .resource>span {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--blue);
      margin-bottom: 24px
    }

    .resource h3 {
      font-size: 21px;
      line-height: 1.3;
      margin-bottom: 16px
    }

    .resource p {
      font-size: 14px
    }

    .resource-links {
      margin-top: auto;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      display: none !important
    }

    .resource-links a,
    .language-links a {
      font-size: 14px;
      color: var(--blue);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 13px
    }

    .resource-links a:hover {
      background: var(--soft)
    }

    .language-links {
      display: flex;
      gap: 10px;
      margin-top: 20px
    }

    .language-links a {
      color: var(--gold);
      border-color: #ffffff50
    }

    .resource-video {
      margin: -26px -26px 22px;
      border-radius: 12px 12px 0 0;
      overflow: hidden;
      background: #000;
      aspect-ratio: 16/9;
      position: relative
    }

    .resource-video img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .resource-video .play {
      width: 54px;
      height: 54px;
      font-size: 27px
    }

    .resource-video a {
      display: block;
      width: 100%;
      height: 100%
    }

    .video-language-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px
    }

    .video-language-group a {
      font-size: 12px;
      padding: 6px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--blue)
    }

    .video-language-group a:hover {
      background: var(--soft)
    }

    /* ============================================================
     STORY
  ============================================================ */
    .story {
      background: var(--soft)
    }

    .story-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center
    }

    .story-grid>* {
      min-width: 0
    }

    .story-image {
      border-radius: 16px;
      overflow: hidden;
      background: var(--navy);
      color: white
    }

    .story-image img {
      width: 100%;
      height: 330px;
      object-fit: cover;
      display: block
    }

    .story-image>div {
      padding: 22px 26px;
      font-size: 12px;
      letter-spacing: .06em
    }

    .story-image small {
      display: block;
      font-size: 13px;
      color: #aabbd1;
      letter-spacing: 0;
      margin-top: 4px
    }

    .evidence {
      display: flex;
      gap: 24px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 20px 0;
      flex-wrap: wrap
    }

    .evidence>a {
      font-size: 16px;
      font-weight: 700;
      flex: 1;
      min-width: 140px
    }

    .evidence small {
      display: block;
      font-size: 12px;
      color: var(--muted);
      font-weight: 400
    }

    /* ============================================================
     DETAILS / SUMMARY
  ============================================================ */
    details {
      padding: 20px 0;
      border-bottom: 1px solid var(--line)
    }

    summary {
      list-style: none;
      padding-right: 28px;
      position: relative;
      font-weight: 600;
      font-size: 16px;
      min-height: 28px
    }

    summary:after {
      content: '+';
      position: absolute;
      right: 0;
      top: -4px;
      font-size: 24px;
      font-weight: 400
    }

    details[open] summary:after {
      content: '−'
    }

    details p {
      font-size: 15px;
      margin: 18px 0 0
    }

    details a {
      font-size: 14px;
      color: var(--blue);
      display: inline-block;
      margin-top: 16px
    }

    /* ============================================================
     FAQ
  ============================================================ */
    .faq {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 90px
    }

    .faq>* {
      min-width: 0
    }

    /* ============================================================
     CONTACT
  ============================================================ */
    .contact {
      background: var(--navy);
      color: white
    }

    .contact p {
      color: #c5d4e8
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 80px;
      align-items: center
    }

    .contact-grid>* {
      min-width: 0
    }

    .contact-card {
      background: #ffffff04;
      border: 1px solid #ffffff25;
      border-radius: 16px;
      padding: 32px
    }

    .contact-card .btn {
      display: flex;
      margin-bottom: 16px
    }

    .contact-card>a:last-child {
      font-size: 14px;
      display: block;
      text-align: center;
      color: #efca74
    }

    /* ============================================================
     FOOTER
  ============================================================ */
    footer {
      background: #031022;
      color: #afc0d8
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 40px;
      padding: 56px 0
    }

    .footer-grid>* {
      min-width: 0
    }

    .footer-grid img {
      width: 200px;
      height: 56px;
      object-fit: contain;
      margin-bottom: 16px
    }

    .footer-grid p {
      color: #afc0d8;
      font-size: 14px
    }

    .footer-grid strong {
      font-size: 14px;
      color: white
    }

    .footer-grid a {
      display: block;
      font-size: 14px;
      margin-top: 12px
    }

    .footer-grid a:hover {
      color: var(--gold)
    }

    .footer-note {
      border-top: 1px solid #ffffff15;
      padding: 26px 0
    }

    .footer-note p {
      font-size: 12px;
      color: #9fb1ca
    }

    .footer-note>div {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      gap: 24px
    }

    .footer-note a {
      color: var(--gold)
    }

    /* ============================================================
     SKIP LINK
  ============================================================ */
    .skip {
      position: absolute;
      top: -100px;
      left: 12px;
      padding: 12px;
      background: white;
      z-index: 100;
      color: var(--navy)
    }

    .skip:focus {
      top: 12px
    }

    [hidden] {
      display: none !important
    }

    /* ============================================================
     VIDEO SECTION (Webinar + GG Prime blocks)
  ============================================================ */
    .video-section {
      width: 100%;
      max-width: 100%;
      margin: 0 auto 24px;
      position: relative;
      min-width: 0
    }

    .video-section.second {
      margin-top: 32px
    }

    .video-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #000;
      border-radius: 12px;
      overflow: hidden
    }

    .video-wrapper iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block
    }

    /* ============================================================
     VIDEO DROPDOWN — click-based
  ============================================================ */
    .video-dropdown {
      position: relative;
      display: block;
      width: 100%;
      margin-top: 16px;
      z-index: 40;
      min-width: 0
    }

    .video-dropdown-btn {
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent
    }

    .video-dropdown-btn,
    a.video-dropdown-btn {
      background: #e5e5e5;
      color: var(--navy);
      border-radius: 999px;
      padding: 14px 22px;
      font-size: 14px;
      font-weight: 750;
      min-height: 50px;
      line-height: 1.4;
      text-align: left;
      text-decoration: none
    }

    .video-dropdown-btn:hover,
    a.video-dropdown-btn:hover {
      background: #d5d5d5
    }

    .dropdown-arrow {
      font-size: 16px;
      transition: transform 0.2s ease;
      display: inline-block;
      flex-shrink: 0
    }

    .video-dropdown-menu {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      min-width: 180px;
      width: 100%;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
      z-index: 9999;
      max-height: 320px;
      overflow-y: auto
    }

    .video-dropdown.open .video-dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0)
    }

    .video-dropdown.open .dropdown-arrow {
      transform: rotate(180deg)
    }

    .video-dropdown-menu a,
    .video-dropdown-menu .coming-soon-item {
      display: block;
      padding: 12px 16px;
      color: #222;
      text-decoration: none;
      font-size: 15px;
      border-bottom: 1px solid #f0f3f8;
      transition: background 0.15s ease;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent
    }

    .video-dropdown-menu a:last-child,
    .video-dropdown-menu .coming-soon-item:last-child {
      border-bottom: 0
    }

    .video-dropdown-menu a:hover {
      background: #f3f3f3
    }

    .video-dropdown-menu .coming-soon-item {
      color: #9aa7ba;
      cursor: not-allowed;
      background: #f8f9fb;
      text-align: center
    }

    /* ============================================================
     INVEST TEASER + FULL MESSAGE
  ============================================================ */
    .invest-teaser {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(4px);
      padding: 1.5rem 1.5rem 1rem;
      border-radius: 1.2rem;
      border-left: 5px solid var(--gold);
      margin: 1.5rem 0 1.2rem
    }

    .invest-teaser h3 {
      font-size: 0.85rem;
      letter-spacing: 1.5px;
      color: var(--gold);
      font-weight: 700;
      margin-bottom: 0.3rem
    }

    .invest-teaser p {
      color: #e6edf8;
      font-size: 1rem;
      margin-bottom: 0.8rem
    }

    .invest-teaser strong {
      color: white
    }

    .full-message {
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(6px);
      padding: 1.5rem 1.8rem;
      border-radius: 1.5rem;
      margin: 1.5rem 0;
      border: 1px solid rgba(255, 255, 255, 0.15);
      max-height: 500px;
      overflow-y: auto;
      color: #f0f4fc
    }

    .full-message p,
    .full-message li {
      font-size: 0.95rem;
      line-height: 1.6;
      color: #e6edf8
    }

    .full-message ul {
      padding-left: 1.5rem;
      margin: 0.5rem 0 1rem
    }

    .full-message li {
      margin-bottom: 0.25rem
    }

    .full-message strong {
      color: #fff
    }

    .read-less-btn {
      margin-top: 0.8rem
    }

    /* ============================================================
     PROOF / HIGHLIGHTS BAR
  ============================================================ */
    .proof {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: transparent;
      border: 1px solid #d8e1ee;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 22px 55px rgba(18, 33, 58, .12);
      margin: -60px auto 0;
      width: calc(100% - 80px);
      max-width: 1240px;
      box-sizing: border-box;
      position: relative;
      z-index: 5
    }

    .proof div {
      background: #fff;
      padding: 22px;
      text-align: center
    }

    .proof strong {
      display: block;
      font-size: 22px;
      color: var(--navy, #061934)
    }

    .proof span {
      font-size: 13px;
      color: var(--muted, #5f6f88)
    }

    /* ============================================================
     RESPONSIVE — 1100px
  ============================================================ */
    @media (max-width: 1100px) {
      .wrap {
        width: calc(100% - 56px)
      }

      .nav {
        gap: 16px
      }

      .brand img {
        width: 185px
      }

      .hero-grid {
        gap: 36px
      }

      .feature-grid {
        gap: 48px;
        grid-template-columns: 1.3fr 1fr
      }

      .solution-grid {
        grid-template-columns: 1fr 1fr
      }

      .path-grid {
        gap: 10px
      }

      .path-grid a {
        padding: 22px 16px
      }

      .path-grid h3 {
        font-size: 20px
      }

      .filters {
        grid-template-columns: 1fr 1fr
      }

      .filters>div:first-child {
        grid-column: 1 / -1
      }

      .story-grid,
      .contact-grid {
        gap: 48px
      }
    }

    /* ============================================================
     TABLET — 900px
  ============================================================ */
    @media (max-width: 900px) {

      /* Header becomes 2-row grid:
       row 1: brand  |  language
       row 2: nav links (collapsed unless .open) */
      .nav {
        min-height: auto;
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "brand translator"
          "nav   nav";
        gap: 12px;
        padding-top: 12px;
        padding-bottom: 12px
      }

      .brand img {
        width: 170px;
        height: auto
      }

      .site-translator {
        grid-area: translator;
        margin-left: 0;
        justify-content: flex-end
      }

      .site-translator select {
        min-width: 130px
      }

      /* Menu button visible on tablet+phone */
      .menu {
        display: block;
        grid-area: menu;
        min-height: 42px;
        border: 1px solid #ffffff50;
        background: transparent;
        color: white;
        padding: 8px 18px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600
      }

      /* Nav collapses into a full-width dropdown */
      .nav nav {
        display: none;
        grid-area: nav;
        position: static;
        background: transparent;
        padding: 12px 0 0;
        margin-top: 6px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        border-top: 1px solid #ffffff15;
        width: 100%;
        max-height: calc(100vh - 90px);
        overflow-y: auto
      }

      .nav nav.open {
        display: flex
      }

      .nav nav>a {
        padding: 10px 4px;
        font-size: 15px;
        text-align: left
      }

      .nav nav>a.btn {
        width: 100%;
        justify-content: center;
        text-align: center
      }

      /* Hero single column */
      .hero-grid {
        grid-template-columns: 1fr
      }

      .hero-grid h1 {
        font-size: 56px
      }

      .hero-panel {
        max-width: 100%
      }

      /* Feature grid stacks */
      .feature-grid {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .feature-card {
        max-width: 100%
      }

      .path-grid {
        grid-template-columns: repeat(3, 1fr)
      }

      .filters {
        grid-template-columns: 1fr 1fr
      }

      .filters>div:first-child {
        grid-column: 1 / -1
      }

      .resource-grid {
        grid-template-columns: 1fr 1fr
      }

      .story-grid,
      .faq,
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .story-image {
        max-width: 100%
      }

      .support {
        flex-wrap: wrap
      }

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

      /* Proof bar tablet */
      .proof {
        grid-template-columns: 1fr 1fr;
        width: calc(100% - 56px);
        margin-top: 24px
      }
    }

    /* ============================================================
     MOBILE — 580px
  ============================================================ */
    @media (max-width: 580px) {
      .wrap {
        width: calc(100% - 32px)
      }

      /* Header layout on phones:
       row 1: brand  |  menu
       row 2: language (full width)
       row 3: nav links (only when .open) */
      .nav {
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "brand menu"
          "translator translator"
          "nav nav";
        gap: 10px;
        padding-top: 10px;
        padding-bottom: 10px
      }

      .brand img {
        width: 150px;
        height: auto
      }

      .site-translator {
        grid-area: translator;
        width: 100%;
        justify-content: flex-start
      }

      .site-translator select {
        min-width: 0;
        width: 100%;
        max-width: 240px
      }

      .menu {
        grid-area: menu;
        margin-left: auto;
        padding: 7px 14px;
        font-size: 13px;
        min-height: 38px
      }

      .nav nav {
        grid-area: nav
      }

      .hero {
        padding-top: 36px
      }

      .hero-grid {
        padding-bottom: 36px
      }

      .hero-grid h1 {
        font-size: 38px
      }

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

      .actions {
        flex-direction: column
      }

      .actions .btn {
        width: 100%
      }

      .hero-panel {
        padding: 15px;
        border-radius: 16px
      }

      .panel-top {
        flex-direction: column;
        gap: 6px;
        font-size: 9px
      }

      .video-actions {
        flex-direction: column;
        align-items: stretch;
        text-align: center
      }

      .hero-foot {
        grid-template-columns: 1fr 1fr;
        gap: 22px
      }

      .hero-foot strong {
        font-size: 14px
      }

      .hero-foot span {
        font-size: 12px
      }

      .section {
        padding: 64px 0
      }

      .section-heading {
        display: block
      }

      .section-heading p {
        margin-top: 22px
      }

      .path-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px
      }

      .path-grid a:last-child {
        grid-column: 1 / -1
      }

      .path-grid span {
        margin-bottom: 18px
      }

      .path-grid h3 {
        font-size: 20px
      }

      .path-grid p {
        margin-bottom: 12px
      }

      .path-grid small {
        font-size: 12px
      }

      .opportunity {
        padding: 64px 0
      }

      .checks {
        grid-template-columns: 1fr;
        gap: 16px
      }

      .feature-card {
        padding: 26px
      }

      .feature-card h3 {
        font-size: 26px
      }

      .feature-price {
        font-size: 32px
      }

      .plans-heading {
        display: block;
        margin-top: 40px
      }

      .plans-heading p {
        margin-top: 18px
      }

      .plan-controls button {
        padding: 10px 16px
      }

      .plan-preview {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px
      }

      .prime-split {
        grid-template-columns: 1fr
      }

      .solution-grid,
      .webinar-grid,
      .resource-grid {
        grid-template-columns: 1fr
      }

      .solution-grid article {
        padding: 24px
      }

      .support {
        display: block
      }

      .support p {
        margin: 14px 0
      }

      .support a {
        display: block
      }

      .filters {
        grid-template-columns: 1fr
      }

      .filters>div:first-child {
        grid-column: auto
      }

      .webinar-grid article {
        padding: 26px
      }

      .story-image img {
        height: 240px
      }

      .evidence {
        gap: 14px
      }

      .evidence>a {
        font-size: 14px
      }

      .evidence small {
        font-size: 11px
      }

      .contact-card {
        padding: 24px
      }

      .contact-card .btn {
        width: 100%
      }

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

      .footer-grid>div:first-child,
      .footer-grid>div:last-child {
        grid-column: 1 / -1
      }

      .footer-note>div {
        display: block
      }

      .footer-note a {
        display: block;
        margin-top: 12px
      }

      /* Proof bar mobile */
      .proof {
        grid-template-columns: 1fr 1fr;
        width: calc(100% - 32px);
        margin-top: 20px
      }

      .proof div {
        padding: 16px 8px
      }

      .proof strong {
        font-size: 18px
      }

      .proof span {
        font-size: 12px
      }

      /* Video dropdown menu full width & scrollable */
      .video-dropdown-menu {
        max-height: 260px
      }

      .video-dropdown-menu a {
        padding: 12px 14px;
        font-size: 14px
      }

      /* Tables scroll horizontally */
      .table-scroll {
        overflow-x: auto
      }

      table {
        min-width: 520px
      }
    }

    /* ============================================================
     VERY SMALL — 400px
  ============================================================ */
    @media (max-width: 400px) {
      h1 {
        font-size: 30px
      }

      h2 {
        font-size: 24px
      }

      .eyebrow {
        font-size: 11px
      }

      .brand img {
        width: 130px
      }

      .site-translator select {
        font-size: 12px
      }

      .menu {
        padding: 6px 12px;
        font-size: 12px
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto
      }

      * {
        transition: none !important
      }
    }

    /* ===== Copied from webinar_new project: Apply-for-webinar modal + form (same UI/theme) ===== */
    .btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 12px 30px rgba(244,184,47,.22)}
    .btn-whatsapp{background-color:#25D366;color:#fff;margin-top:10px}
    .btn-whatsapp:hover{background-color:#1ebe5d;color:#fff}
    .modal-overlay{position:fixed;inset:0;background:rgba(6,25,52,.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:1000}
    .modal-overlay.open{display:flex}
    .modal-box{background:#fff;border-radius:22px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;padding:32px;position:relative;box-shadow:0 30px 70px rgba(6,25,52,.3);scrollbar-width:none;-ms-overflow-style:none}
    .modal-box::-webkit-scrollbar{display:none}
    .modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:var(--soft);color:var(--ink);font-size:18px;cursor:pointer;display:grid;place-items:center;z-index:2;transition:.2s}
    .modal-close:hover{background:var(--line)}
    .modal-box h2{font-size:24px;margin:0 0 6px;color:var(--navy);letter-spacing:-.02em}
    .apply-modal{max-width:680px;padding:0}
    .apply-modal .modal-close{background:rgba(255,255,255,.14);color:#fff}
    .apply-modal .modal-close:hover{background:rgba(255,255,255,.26)}
    .apply-modal-head{background:radial-gradient(circle at 85% 0%,rgba(244,184,47,.18),transparent 55%),linear-gradient(135deg,var(--navy),#0c3c79);color:#fff;padding:30px 36px 24px;border-radius:22px 22px 0 0}
    .apply-modal-head .eyebrow{color:var(--gold);font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:8px}
    .apply-modal-head h2{color:#fff;font-size:clamp(22px,3vw,28px);margin:0 0 6px}
    .apply-modal-head p{color:#cbd9ec;font-size:14px;margin:0}
    .apply-modal-body{padding:26px 36px 34px}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
    @media(max-width:640px){.form-grid{grid-template-columns:1fr}}
    .form-field{margin-bottom:18px}
    .form-field label{display:block;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-bottom:7px}
    .form-field input,.form-field select{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;font-family:inherit;color:var(--ink);background:#fff;transition:.2s}
    .form-field input:focus,.form-field select:focus{border-color:var(--blue);outline:3px solid rgba(22,104,212,.15)}
    .field-error{display:none;color:#c0392b;font-size:12px;margin-top:5px;font-weight:700}
    .form-field.invalid input,.form-field.invalid select{border-color:#c0392b}
    .form-field.invalid .field-error{display:block}
    .form-msg{display:none;background:#fdeaea;color:#c0392b;border:1px solid #f3c5c5;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:700;margin-bottom:16px}
    .form-msg.show{display:block}
    #applyForm .btn{width:100%;margin-top:8px;font-size:16px}
    #applyForm .btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
    .confirm-modal{max-width:460px}
    .confirm-modal-head{text-align:center;padding:38px 32px 28px}
    .confirm-modal-head .eyebrow{display:block;margin:0 0 8px}
    .confirm-modal-head h2{color:#fff;margin:0;font-size:clamp(21px,3vw,25px);line-height:1.25}
    .confirm-icon{width:68px;height:68px;border-radius:50%;background:rgba(244,184,47,.15);border:2px solid rgba(244,184,47,.45);color:var(--gold);display:grid;place-items:center;font-size:30px;font-weight:900;margin:0 auto 16px;animation:confirmPop .45s cubic-bezier(.34,1.56,.64,1)}
    @keyframes confirmPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
    .confirm-modal-body{text-align:center}
    .confirm-modal-body p{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 24px}
    .confirm-modal-body .btn-whatsapp{width:100%;font-size:15.5px;display:inline-flex;align-items:center;justify-content:center;gap:9px}
    .ss-wrap{position:relative}
    .ss-input{width:100%;padding:13px 36px 13px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;font-family:inherit;color:var(--ink);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235f6f88" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 14px center/14px;cursor:pointer;transition:.2s}
    .ss-input:focus{border-color:var(--blue);outline:3px solid rgba(22,104,212,.15)}
    .ss-list{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:230px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(6,25,52,.16);z-index:20}
    .ss-list.open{display:block}
    .ss-option{padding:11px 14px;font-size:14px;cursor:pointer}
    .ss-option:hover,.ss-option.active{background:var(--soft)}
    .ss-empty{padding:11px 14px;font-size:13px;color:var(--muted)}
    @media(max-width:720px){.apply-modal{max-width:560px}}
    @media(max-width:480px){
      .modal-overlay{padding:10px}
      .modal-box{padding:20px;border-radius:16px;max-width:none}
      .apply-modal{padding:0}
      .apply-modal-head{padding:24px 22px 20px;border-radius:16px 16px 0 0}
      .apply-modal-body{padding:22px 22px 26px}
    }