:root {
        --contact-center-fab-bottom:26px;--contact-center-panel-bottom:98px;--contact-center-footer-clearance:96px;
           --bg: #080a0c;
        --bg-2: #0d1114;
        --surface: #141a1f;
        --surface-2: #1a2026;
        --text: #f4f5f2;
        --muted: #a7a198;
        --faint: #7f7970;
        --line: rgba(255, 255, 255, 0.1);
        --line-soft: rgba(255, 255, 255, 0.06);
        --line-strong: rgba(255, 255, 255, 0.2);
        --mineral: #e6e0d2;
        --mineral-hi: #f1ece0;
        --sage: #82959a;
        --brass: #c2a26a;
        --glass: rgba(28, 34, 40, 0.48);
        --shadow: 0 28px 90px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        --wrap: 1180px;
        --ease: 220ms cubic-bezier(0.16, 1, 0.3, 1);
        --sans: 'Inter', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
        --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font-family: var(--sans);
        font-size: 16px;
        line-height: 1.55;
        letter-spacing: -0.005em;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button {
        font: inherit;
        color: inherit;
        background: none;
        border: 0;
        cursor: pointer;
      }
      svg {
        display: block;
      }
      h1,
      h2,
      h3,
      h4 {
        margin: 0;
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1.08;
      }
      p {
        margin: 0;
      }
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      :focus-visible {
        outline: 2px solid var(--mineral);
        outline-offset: 3px;
        border-radius: 4px;
      }
      .wrap {
        max-width: var(--wrap);
        margin: 0 auto;
        padding: 0 28px;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 13px 22px;
        border-radius: 9px;
        font-size: 14.5px;
        font-weight: 500;
        transition: var(--ease);
        border: 1px solid transparent;
      }
      .btn svg {
        width: 16px;
        height: 16px;
        transition: transform var(--ease);
      }
      .btn:hover svg {
        transform: translateX(3px);
      }
      .btn-primary {
        background: var(--mineral);
        color: #0b0e11;
        font-weight: 600;
      }
      .btn-primary:hover {
        background: var(--mineral-hi);
      }
      .btn-ghost {
        border-color: var(--line-strong);
        color: var(--text);
        background: rgba(255, 255, 255, 0.02);
      }
      .btn-ghost:hover {
        background: rgba(255, 255, 255, 0.06);
      }
      .btn-sm {
        padding: 10px 16px;
        font-size: 13.5px;
        border-radius: 8px;
      }
      .btn-block {
        width: 100%;
      }
      .glass {
        background: var(--glass);
        border: 1px solid var(--line);
        border-radius: 16px;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: var(--shadow);
      }

      /* ---- about page ---- */
      .hero {
        position: relative;
        padding: 72px 0 70px;
        overflow: hidden;
      }
      .hero::before {
        content: '';
        position: absolute;
        inset: -30% -10% auto -10%;
        height: 130%;
        pointer-events: none;
        background:
          radial-gradient(54% 48% at 18% 4%, rgba(230, 224, 210, 0.075), transparent 62%),
          radial-gradient(46% 44% at 92% 34%, rgba(130, 149, 154, 0.09), transparent 66%);
      }
      .hero .wrap {
        position: relative;
        z-index: 1;
      }
      .hero h1 {
        font-size: clamp(34px, 4.1vw, 52px);
        letter-spacing: -0.035em;
        line-height: 1.05;
        max-width: 17em;
      }
      .hero h1 em {
        font-style: normal;
        color: var(--mineral);
      }
      .hero .lede {
        margin-top: 22px;
        font-size: 18px;
        color: var(--muted);
        line-height: 1.6;
        max-width: 42em;
      }
      .hero .acts {
        margin-top: 32px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }

      .strip {
        border-top: 1px solid var(--line-soft);
        border-bottom: 1px solid var(--line-soft);
        background: var(--bg-2);
        padding: 34px 0;
      }
      .strip-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 28px;
      }
      .pf b {
        display: block;
        font-size: 22px;
        font-weight: 500;
        letter-spacing: -0.02em;
        margin-bottom: 6px;
      }
      .pf span {
        font-size: 13.5px;
        color: var(--muted);
        line-height: 1.5;
        display: block;
      }

      .sec {
        padding: 82px 0;
        border-top: 1px solid var(--line-soft);
      }
      .sec.alt {
        background: var(--bg-2);
      }
      .sec h2 {
        font-size: clamp(26px, 2.9vw, 36px);
      }
      .sec-head {
        max-width: 42em;
        margin-bottom: 40px;
      }
      .sec-head p {
        margin-top: 15px;
        font-size: 16.5px;
        color: var(--muted);
        line-height: 1.6;
      }
      .two {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
      }
      .card {
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
      }
      .card h3 {
        font-size: 17px;
        margin-bottom: 10px;
      }
      .card p {
        font-size: 14.5px;
        color: var(--muted);
        line-height: 1.6;
      }
      .why {
        display: grid;
        gap: 2px;
      }
      .why li {
        display: flex;
        gap: 18px;
        padding: 20px 0;
        border-top: 1px solid var(--line-soft);
      }
      .why li:last-child {
        border-bottom: 1px solid var(--line-soft);
      }
      .why .n {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--faint);
        padding-top: 4px;
        flex: none;
      }
      .why h3 {
        font-size: 16.5px;
        font-weight: 500;
        margin-bottom: 6px;
      }
      .why p {
        font-size: 14.5px;
        color: var(--muted);
        line-height: 1.6;
      }
      .flow {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
      }
      .flow .s {
        padding-inline-end: 24px;
        position: relative;
      }
      .flow .s::after {
        content: '';
        position: absolute;
        top: 5px;
        left: -12px;
        width: 1px;
        height: calc(100% - 5px);
        background: var(--line-soft);
      }
      .flow .s:first-child::after {
        display: none;
      }
      .flow .n {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--mineral);
        display: block;
        margin-bottom: 13px;
      }
      .flow h3 {
        font-size: 15.5px;
        font-weight: 500;
        margin-bottom: 7px;
      }
      .flow p {
        font-size: 13.5px;
        color: var(--muted);
        line-height: 1.55;
      }
      .cover {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
      }
      .mk-card {
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
      }
      .mk-card .top {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
      }
      .mk-card .mk {
        font-family: var(--mono);
        font-size: 11.5px;
        letter-spacing: 0.1em;
        color: var(--mineral);
        border: 1px solid rgba(230, 224, 210, 0.3);
        border-radius: 6px;
        padding: 5px 9px;
      }
      .mk-card h3 {
        font-size: 19px;
      }
      .mk-card p {
        font-size: 14.5px;
        color: var(--muted);
        line-height: 1.6;
      }
      .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 18px;
      }
      .chip {
        font-size: 13px;
        padding: 7px 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--muted);
      }
      .tl {
        margin-bottom: 34px;
        display: grid;
        gap: 2px;
        max-width: 56em;
      }
      .tl li {
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 22px;
        padding: 18px 0;
        border-top: 1px solid var(--line-soft);
      }
      .tl li:last-child {
        border-bottom: 1px solid var(--line-soft);
      }
      .tl b {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--mineral);
        font-weight: 400;
        padding-top: 2px;
      }
      .tl p {
        font-size: 14.5px;
        color: var(--muted);
        line-height: 1.6;
      }
      @media (max-width: 1000px) {
        .strip-grid {
          grid-template-columns: 1fr 1fr;
          gap: 24px;
        }
        .flow {
          grid-template-columns: 1fr 1fr;
          gap: 26px 0;
        }
        .flow .s::after {
          display: none;
        }
        .two,
        .cover {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 640px) {
        .wrap {
          padding: 0 20px;
        }
        .strip-grid {
          grid-template-columns: 1fr;
        }
        .flow {
          grid-template-columns: 1fr;
        }
        .tl li {
          grid-template-columns: 1fr;
          gap: 6px;
        }
        .sec {
          padding: 58px 0;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          transition: none !important;
        }
      }

      /* ===== SHARED SITE CHROME (header + drawer + action bar + footer) ===== */
      /* ============================ HEADER ============================ */
      .nav {
        position: sticky;
        top: 0;
        z-index: 60;
        background: rgba(8, 10, 12, 0.78);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--line-soft);
      }
      .nav-inner {
        display: flex;
        align-items: center;
        gap: 36px;
        height: 70px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 11px;
        flex: none;
      }
      .brand svg {
        width: 27px;
        height: 27px;
        color: var(--mineral);
      }
      .brand .name {
        font-size: 17.5px;
        font-weight: 600;
        letter-spacing: -0.02em;
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 36px;
        margin-inline-start: auto;
      }
      .nav-actions { align-items: center; display: flex; flex: none; gap: 14px; margin-inline-start: auto; }
      /* Right-side utility cluster: country switcher · Sign in · primary CTA.
   Utilities stay quieter than the buyer nav — outline/text, never filled. */
      .nav-util {
        display: flex;
        align-items: center;
        gap: 6px;
        padding-inline-end: 8px;
        margin-inline-end: 2px;
        border-inline-end: 1px solid var(--line-soft);
      }
      .ctry {
        position: relative;
        display: flex;
        align-items: center;
      }
      .ctry-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 11px;
        border-radius: 8px;
        font-size: 13.5px;
        color: var(--muted);
        transition: var(--ease);
      }
      .ctry-btn:hover,
      .ctry[data-open] .ctry-btn {
        color: var(--text);
        background: rgba(255, 255, 255, 0.05);
      }
      .ctry-btn .globe {
        width: 15px;
        height: 15px;
      }
      .ctry-btn .caret {
        width: 11px;
        height: 11px;
        opacity: 0.7;
        transition: transform var(--ease);
      }
      .ctry[data-open] .ctry-btn .caret {
        transform: rotate(180deg);
      }
      .ctry-menu {
        position: absolute;
        top: calc(100% + 8px);
        inset-inline-end: 0;
        min-width: 210px;
        z-index: 75;
        background: var(--bg-2);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 7px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: var(--ease);
      }
      .ctry[data-open] .ctry-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
      .ctry-menu a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border-radius: 8px;
        font-size: 14px;
        color: var(--muted);
        transition: var(--ease);
      }
      .ctry-menu a:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.06);
      }
      .ctry-menu a .mk {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: 0.06em;
        color: var(--mineral);
        border: 1px solid rgba(230, 224, 210, 0.28);
        border-radius: 5px;
        padding: 2px 5px;
      }
      .ctry-menu .sep {
        height: 1px;
        background: var(--line-soft);
        margin: 6px 4px;
      }
      .ctry-menu a.soft {
        color: var(--faint);
        font-size: 13px;
      }
      .signin {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13.5px;
        color: var(--muted);
        transition: var(--ease);
      }
      .signin:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.05);
      }
      .signin svg {
        width: 15px;
        height: 15px;
      }

      /* icon-only utility: quiet by design — never a filled pill */
      .uic {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        border: 1px solid var(--line-soft);
        color: var(--muted);
        background: rgba(255, 255, 255, 0.02);
        transition: var(--ease);
      }
      .uic:hover {
        color: var(--text);
        border-color: var(--line-strong);
        background: rgba(255, 255, 255, 0.06);
      }
      .uic svg {
        width: 16px;
        height: 16px;
      }
      @media (max-width: 860px) {
        .uic {
          display: none;
        }
      }

      .nav-toggle {
        display: none;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 8px;
      }
      .nav-toggle svg {
        width: 18px;
        height: 18px;
      }

      /* ---------- nav items + panels ---------- */
      .navitem {
        position: static;
        display: flex;
        align-items: center;
        height: 70px;
      }
      .navitem.anchored {
        position: relative;
      }
      .navlabel,
      .navlink {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        font-size: 14.5px;
        color: var(--muted);
        transition: color var(--ease);
      }
      .navlabel:hover,
      .navlink:hover,
      .navitem[data-open] .navlabel {
        color: var(--text);
      }
      .navlabel .caret {
        width: 12px;
        height: 12px;
        transition: transform var(--ease);
        opacity: 0.75;
      }
      .navitem[data-open] .navlabel .caret {
        transform: rotate(180deg);
      }

      .panel {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        z-index: 70;
        background: var(--bg-2);
        border-top: 1px solid var(--line-soft);
        border-bottom: 1px solid var(--line-soft);
        box-shadow: 0 34px 80px rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition:
          opacity var(--ease),
          transform var(--ease),
          visibility var(--ease);
      }
      .navitem[data-open] .panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
      .panel-inner {
        max-width: var(--wrap);
        margin: 0 auto;
        padding: 34px 28px 36px;
        display: grid;
        grid-template-columns: 1.15fr 1.1fr 1fr 0.8fr;
        gap: 40px;
      }

      .pintro {
        font-size: 12px;
        color: var(--faint);
        font-style: italic;
        margin: -6px 0 18px;
      }

      .pcol h5 { color: var(--text); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; margin-bottom: 20px; text-transform: uppercase; }
      .pcol ul {
        display: grid;
        gap: 4px;
      }
      .pcol li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 11px;
        margin: 0 -11px;
        border-radius: 8px;
        font-size: 14.5px;
        color: var(--muted);
        transition: var(--ease);
      }
      .pcol li > a:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.05);
      }
      .pcol li > a .go {
        width: 14px;
        height: 14px;
        opacity: 0;
        transform: translateX(-4px);
        transition: var(--ease);
        color: var(--mineral);
        flex: none;
      }
      .pcol li > a:hover .go {
        opacity: 1;
        transform: translateX(0);
      }
      .pcol li > a .mk {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: 0.06em;
        color: var(--mineral);
        border: 1px solid rgba(230, 224, 210, 0.28);
        border-radius: 5px;
        padding: 2px 5px;
        flex: none;
        margin-inline-end: 2px;
      }
      .pcol li > a.soft {
        color: var(--faint);
        font-size: 13.5px;
      }
      .pcol li > a .rw {
        display: block;
      }
      .pcol li > a .rw em {
        display: block;
        font-style: normal;
        font-size: 12.5px;
        color: var(--faint);
        margin-top: 2px;
        letter-spacing: 0;
        transition: color var(--ease);
      }
      .pcol li > a:hover .rw em {
        color: var(--muted);
      }
      /* helper row: an action, not a thin footnote */
      .pcol li > a.helper {
        align-items: flex-start;
        border: 1px solid var(--line-soft);
        background: rgba(230, 224, 210, 0.04);
        margin: 2px 0 0;
        padding: 11px 12px;
      }
      .pcol li > a.helper:hover {
        border-color: rgba(230, 224, 210, 0.38);
        background: rgba(230, 224, 210, 0.08);
      }
      .pcol li > a.helper b {
        display: block;
        font-size: 13.5px;
        font-weight: 500;
        color: var(--text);
      }
      .pcol li > a.helper em {
        display: block;
        font-style: normal;
        font-size: 12.5px;
        color: var(--faint);
        margin-top: 2px;
      }
      .pcol li > a.helper .go {
        opacity: 1;
        transform: none;
        margin-top: 3px;
      }
      .pcol li > a.soft:hover {
        color: var(--text);
      }

      .plead h4 {
        font-size: 19px;
        margin-bottom: 12px;
        letter-spacing: -0.025em;
      }
      .plead p {
        font-size: 14px;
        color: var(--muted);
        line-height: 1.6;
        max-width: 24em;
      }
      .plead .btn {
        margin-top: 20px;
      }
      .pdivide {
        border-top: 1px solid var(--line-soft);
        margin-top: 14px;
        padding-top: 14px;
      }
      /* Markets menu is a switcher: the market you are in is state, not a destination. */
      .pcol li.mkt-current .mkt-row { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;margin:0 -11px;border-radius:8px;font-size:14.5px;color:var(--muted);background:rgba(230,224,210,.05) }
      .pcol li.mkt-current .rw { display:block }
      .pcol li.mkt-current .rw em { display:block;font-style:normal;font-size:12.5px;color:var(--faint);margin-top:2px;letter-spacing:0 }
      .mkt-badge { font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:3px 6px;flex:none;white-space:nowrap }
      .dmkt-current { display:flex;align-items:center;gap:8px;color:var(--muted) }
      .dmkt-current .mkt-badge { margin-inline-start:auto }

      .panel-sm {
        z-index: 90;
        left: auto;
        right: auto;
        width: 290px;
        top: 70px;
        border-radius: 14px;
        border: 1px solid var(--line);
        border-top: 1px solid var(--line);
      }
      .panel-sm .panel-inner {
        display: block;
        padding: 14px;
      }

      /* ---------- mobile drawer ---------- */
      .drawer {
        display: none;
        position: fixed;
        inset: 70px 0 0;
        z-index: 80;
        background: var(--bg);
        overflow-y: auto;
        padding: 14px 0 40px;
        border-top: 1px solid var(--line-soft);
      }
      .drawer.open {
        display: block;
      }
      .dgroup {
        border-bottom: 1px solid var(--line-soft);
      }
      .dhead {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 17px 0;
        font-size: 16px;
        color: var(--text);
        text-align: start;
      }
      .dhead svg {
        width: 15px;
        height: 15px;
        color: var(--faint);
        transition: transform var(--ease);
      }
      .dgroup[data-open] .dhead svg {
        transform: rotate(180deg);
      }
      .dbody {
        display: none;
        padding: 0 0 16px;
      }
      .dgroup[data-open] .dbody {
        display: grid;
        gap: 2px;
      }
      .dbody a {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 11px 12px;
        margin: 0 -12px;
        border-radius: 8px;
        font-size: 15px;
        color: var(--muted);
      }
      .dbody a:hover {
        background: rgba(255, 255, 255, 0.05);
        color: var(--text);
      }
      .dbody a .mk, .dbody .dmkt-current .mk {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: 0.06em;
        color: var(--mineral);
        border: 1px solid rgba(230, 224, 210, 0.28);
        border-radius: 5px;
        padding: 2px 5px;
      }
      .dbody a.soft {
        color: var(--faint);
        font-size: 14px;
      }
      .dflat {
        display: block;
        padding: 17px 0;
        font-size: 16px;
        color: var(--text);
        border-bottom: 1px solid var(--line-soft);
      }
      .drawer .btn {
        margin-top: 24px;
      }

      /* ============================ MOBILE ACTION BAR ============================
   Persistent access without floating pills. Desktop keeps the header CTA and
   the utility icons; below 860px this bar carries the same actions and the Vy
   launcher folds into it, so nothing floats loose over the page. */
      .mbar {
        display: none;
      }
      @media (max-width: 860px) {
        .mbar {
          display: flex;
          align-items: center;
          gap: 10px;
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 88;
          padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
          background: rgba(8, 10, 12, 0.94);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          border-top: 1px solid var(--line-soft);
        }
        .mbar .mb-ic {
          width: 46px;
          height: 46px;
          flex: none;
          display: grid;
          place-items: center;
          border-radius: 10px;
          border: 1px solid var(--line);
          color: var(--muted);
          background: rgba(255, 255, 255, 0.03);
        }
        .mbar .mb-ic svg {
          width: 19px;
          height: 19px;
        }
        .mbar .btn {
          flex: 1;
          padding: 14px 18px;
        }
        .chat-fab {
          display: none;
        } /* one persistent surface on mobile, not two */
        body {
          padding-bottom: 78px;
        }
        .drawer {
          bottom: 70px;
        }
      }

      @media (max-width: 1400px) {
        .nav-links {
          gap: 20px;
        }
        .navlabel,
        .navlink,
        .signin {
          font-size: 13.5px;
        }
        .nav-inner {
          gap: 22px;
        }
      }
      @media (max-width: 1160px) {
        .nav-links {
          gap: 16px;
        }
        .panel-inner {
          grid-template-columns: 1fr 1fr 1fr;
          gap: 32px;
        }
        .pcol-connect {
          grid-column: 1/-1;
          display: flex;
          gap: 10px;
        }
        .pcol-connect ul {
          grid-auto-flow: column;
          gap: 10px;
        }
      }
      @media (max-width: 860px) {
        .nav-links {
          display: none;
        }
        .nav-toggle {
          display: block;
          margin-inline-start: auto;
        }
        .nav-util {
          display: none;
        }
        .nav-inner {
          gap: 16px;
        }
      }
      /* ============================ FOOTER (production structure) ============================ */
      .foot { background: var(--bg-2); border-top: 1px solid var(--line-soft); display: flex; padding: 64px 0 34px; }
      .foot-grid {
        display: grid;
        grid-template-columns: 1.7fr repeat(5, 1fr);
        gap: 38px 26px;
      }
      .fb-about {
        display: inline-block;
        margin-top: 14px;
        font-size: 13.5px;
        color: var(--muted);
        border-bottom: 1px solid var(--line);
        padding-bottom: 1px;
        transition: var(--ease);
      }
      .fb-about:hover {
        color: var(--text);
        border-color: var(--line-strong);
      }
      .foot-min {
        margin-inline-start: 14px;
        color: var(--faint);
        border-bottom: 1px solid var(--line-soft);
        transition: var(--ease);
      }
      .foot-min:hover {
        color: var(--muted);
      }
      .foot-brand {
        grid-column: 1/-1;
        padding-bottom: 10px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--line-soft);
      }
      .foot-brand .fb-name {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        margin-bottom: 16px;
      }
      .foot-brand p {
        font-size: 14.5px;
        color: var(--muted);
        line-height: 1.6;
        max-width: 22em;
      }
      .fcol h4 {
        font-family: var(--sans);
        font-size: 12px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text);
        margin-bottom: 18px;
        min-height: 2.9em;
        line-height: 1.35;
        font-weight: 600;
      }
      .fcol ul {
        display: grid;
        gap: 11px;
      }
      .fcol a {
        font-size: 14.5px;
        color: var(--muted);
        transition: color var(--ease);
      }
      .fcol a:hover {
        color: var(--text);
      }
         .fcol h4 a{color:var(--text);transition:color var(--ease)}
         .fcol h4 a:hover{color:var(--mineral)}

      .foot-bar {
        margin-top: 46px;
        padding-top: 26px;
        border-top: 1px solid var(--line-soft);
      }
      .foot-bar-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
      }
      .foot-legal {
        font-size: 14px;
        color: var(--faint);
      }

      .foot-legal a {
        color: var(--muted);
        text-decoration: none;
        transition: var(--ease);
      }
      .foot-legal a:hover {
        color: var(--text);
      }
      .foot-legal-sep {
        color: var(--faint);
        margin: 0 4px;
        opacity: 0.6;
      }
      .foot-bar-right {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-inline-end: 72px;
      }

      .store {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 44px;
        padding: 0 16px;
        border-radius: 8px;
        background: #000;
        border: 1px solid rgba(255, 255, 255, 0.16);
        transition: var(--ease);
      }
      .store:hover {
        border-color: rgba(255, 255, 255, 0.34);
      }
      .store .glyph {
        width: 22px;
        height: 22px;
        flex: none;
      }
      .store .lbl {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: -0.015em;
        color: #fff;
      }
      .store .lbl small {
        display: block;
        font-size: 9.5px;
        font-weight: 400;
        color: #fff;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        margin-bottom: 2px;
        line-height: 1.1;
      }

      .pill {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 15px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.03);
        font-size: 14.5px;
        color: var(--text);
        transition: var(--ease);
      }
      .pill:hover {
        border-color: var(--line-strong);
      }
      .pill .globe {
        width: 17px;
        height: 17px;
        color: var(--muted);
      }
      .pill .chev {
        width: 13px;
        height: 13px;
        color: var(--muted);
      }

      .themebox {
        display: flex;
        align-items: center;
        gap: 4px;
        height: 44px;
        padding: 0 8px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.03);
      }
      .themebox button {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        color: var(--muted);
        transition: var(--ease);
      }
      .themebox button:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.06);
      }
      .themebox svg {
        width: 16px;
        height: 16px;
      }

      .foot-brand .foot-social {
        margin-top: 22px;
      }
      .foot-social {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .foot-social a {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        border: 1px solid var(--line-soft);
        color: var(--text);
        background: rgba(255, 255, 255, 0.02);
        transition: var(--ease);
      }
      .foot-social a:hover {
        border-color: var(--line-strong);
        background: rgba(255, 255, 255, 0.07);
      }
      .foot-social svg {
        width: 17px;
        height: 17px;
      }

      @media (max-width: 1160px) {
        .foot-grid {
          grid-template-columns: repeat(3, 1fr);
          gap: 34px 28px;
        }
      }
      @media (max-width: 560px) {
        .foot-grid {
          grid-template-columns: 1fr 1fr;
          gap: 30px 24px;
        }
        .foot {
          padding: 48px 0 30px;
        }
        .foot-bar {
          flex-direction: column;
          align-items: flex-start;
          gap: 20px;
        }
        .foot-bar-right {
          gap: 10px;
          margin-inline-end: 0;
        }
      }

      /* footer matched to the live sonsoto.com layout: brand + 4 columns */
      .foot-grid {
        grid-template-columns: 1.55fr repeat(4, 1fr) !important;
        gap: 40px 32px !important;
      }
      .foot-brand {
        grid-column: auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        border-bottom: 0 !important;
      }
      .store {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 44px;
        padding: 0 16px;
        border-radius: 8px;
        background: #000;
        border: 1px solid rgba(255, 255, 255, 0.16);
        transition: var(--ease);
      }
      .store:hover {
        border-color: rgba(255, 255, 255, 0.34);
      }
      .store .glyph {
        width: 22px;
        height: 22px;
        flex: none;
      }
      .store .lbl {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: -0.015em;
        color: #fff;
      }
      .store .lbl small {
        display: block;
        font-size: 9.5px;
        font-weight: 400;
        color: #fff;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        margin-bottom: 2px;
        line-height: 1.1;
      }
      .themebox {
        display: flex;
        align-items: center;
        gap: 4px;
        height: 44px;
        padding: 0 8px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.03);
      }
      .themebox button {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        color: var(--muted);
        transition: var(--ease);
      }
      .themebox button:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.06);
      }
      .themebox svg {
        width: 16px;
        height: 16px;
      }
      @media (max-width: 1160px) {
        .foot-grid {
          grid-template-columns: 1fr 1fr 1fr !important;
        }
      }
      @media (max-width: 640px) {
        .foot-grid {
          grid-template-columns: 1fr 1fr !important;
        }
      }

      /* bottom bar wraps rather than compressing — see shared footer bottom-bar block */
      .foot-legal {
        white-space: normal;
      }
      .store {
        height: 42px;
        padding: 0 13px;
      }
      .store .lbl {
        font-size: 14px;
      }
      .pill {
        height: 42px;
        padding: 0 13px;
        font-size: 14px;
      }
      .themebox {
        height: 42px;
      }
      @media (max-width: 1100px) {
        .foot-bar-main {
          flex-wrap: wrap !important;
        }
        .foot-legal {
          white-space: normal;
        }
      }

      /* seven-cell footer: brand + Business Setup + Corporate Secretary + Markets + Support + Company + Trust */
      .foot-grid {
        grid-template-columns: 1.1fr repeat(6, 1fr) !important;
        gap: 34px 20px !important;
      }
      @media (max-width: 1160px) {
        .foot-grid {
          grid-template-columns: 1fr 1fr 1fr !important;
        }
      }
      @media (max-width: 640px) {
        .foot-grid {
          grid-template-columns: 1fr 1fr !important;
        }
      }

      /* 860–1080px: full nav still shows, so the utility cluster must stand down or it overflows */
      @media (max-width: 1080px) {
        .nav-util {
          display: none;
        }
      }

      /* anchored dropdowns must not push the page wider than the viewport */
      html {
        overflow-x: hidden;
      }
      .panel-sm {
        max-width: calc(100vw - 28px);
      }

      /* ============================ VY (ported from index) ============================ */
      .vy-panel {
        position: fixed;
        right: 26px;
        bottom: var(--contact-center-panel-bottom);
        z-index: 95;
        width: 352px;
        max-width: calc(100vw - 32px);
        border-radius: 16px;
        border: 1px solid var(--line);
        background: var(--bg-2);
        box-shadow:
          0 30px 80px rgba(0, 0, 0, 0.62),
          inset 0 1px 0 rgba(255, 255, 255, 0.07);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px) scale(0.985);
        transform-origin: 100% 100%;
        transition: var(--ease);
        overflow: hidden;
      }
      .vy-panel[data-open] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
      }
      .vy-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 16px 14px;
        border-bottom: 1px solid var(--line-soft);
      }
      .vy-mark {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        flex: none;
        border: 1px solid rgba(230, 224, 210, 0.3);
        background: rgba(230, 224, 210, 0.08);
        color: var(--mineral);
      }
      .vy-mark svg {
        width: 19px;
        height: 19px;
      }
      .vy-id {
        flex: 1;
        min-width: 0;
      }
      .vy-id b {
        display: block;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.015em;
      }
      .vy-id span {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--faint);
        margin-top: 2px;
      }
      .vy-id i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--sage);
        box-shadow: 0 0 0 3px rgba(130, 149, 154, 0.18);
      }

      .vy-id .desk-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        border: 0;
        border-radius: 0;
        font-size: 12px;
        color: var(--faint);
        margin-top: 2px;
        background: transparent;
      }
      .vy-id .desk-status .desk-dot {
        width: 6px;
        height: 6px;
      }
      .vy-id .desk-status[data-status="open"] .desk-dot {
        box-shadow: 0 0 0 3px rgba(111, 206, 142, 0.18);
      }
      .vy-x {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        color: var(--faint);
        transition: var(--ease);
        flex: none;
      }
      .vy-x:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.06);
      }
      .vy-x svg {
        width: 15px;
        height: 15px;
      }

      .vy-body {
        padding: 16px;
      }
      .vy-lede {
        font-size: 14px;
        color: var(--muted);
        line-height: 1.55;
        margin-bottom: 14px;
      }
      .vy-acts {
        display: grid;
        gap: 7px;
      }
      .vy-act {
        display: flex;
        align-items: center;
        gap: 11px;
        width: 100%;
        text-align: start;
        padding: 12px 13px;
        border: 1px solid var(--line-soft);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.02);
        font-size: 14px;
        transition: var(--ease);
      }
      .vy-act:hover {
        border-color: rgba(230, 224, 210, 0.38);
        background: rgba(230, 224, 210, 0.06);
      }
      .vy-act .ic {
        width: 17px;
        height: 17px;
        color: var(--mineral);
        flex: none;
        opacity: 0.85;
      }
      .vy-act .go {
        width: 14px;
        height: 14px;
        color: var(--faint);
        margin-inline-start: auto;
        flex: none;
        transition: transform var(--ease);
      }
      .vy-act:hover .go {
        transform: translateX(3px);
      }

      .vy-ask {
        margin-top: 12px;
        display: none;
      }
      .vy-ask.on {
        display: block;
      }
      .vy-ask form {
        display: flex;
        gap: 8px;
      }
      .vy-ask input {
        flex: 1;
        min-width: 0;
        padding: 11px 13px;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.03);
        color: var(--text);
        font: inherit;
        font-size: 14px;
      }
      .vy-ask input::placeholder {
        color: #6e6960;
      }
      .vy-ask input:focus {
        outline: none;
        border-color: var(--mineral);
        background: rgba(230, 224, 210, 0.05);
      }
      .vy-ask button {
        padding: 0 14px;
        border-radius: 9px;
        background: var(--mineral);
        color: #0b0e11;
        display: grid;
        place-items: center;
        transition: var(--ease);
      }
      .vy-ask button:hover {
        background: var(--mineral-hi);
      }
      .vy-ask button svg {
        width: 16px;
        height: 16px;
      }
      .vy-note {
        margin-top: 10px;
        font-size: 12.5px;
        color: var(--faint);
        line-height: 1.5;
      }

      /* WhatsApp = handoff, visually subordinate: no fill, sits under a divider */
      .vy-hand {
        border-top: 1px solid var(--line-soft);
        padding: 12px 16px 15px;
        background: rgba(255, 255, 255, 0.015);
      }
      .vy-hand-lab {
        font-size: 11px;
        color: var(--faint);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin: 0 0 6px;
      }
      .vy-wa {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 9px 10px;
        margin: 0 -10px;
        border-radius: 9px;
        transition: var(--ease);
      }
      .vy-wa:hover {
        background: rgba(255, 255, 255, 0.05);
      }
      .vy-wa .wa {
        width: 19px;
        height: 19px;
        color: var(--muted);
        flex: none;
      }
      .vy-wa b {
        display: block;
        font-size: 13.5px;
        font-weight: 500;
      }
      .vy-wa span {
        display: block;
        font-size: 12px;
        color: var(--faint);
        margin-top: 1px;
      }
      .vy-wa .go {
        width: 14px;
        height: 14px;
        color: var(--faint);
        margin-inline-start: auto;
        flex: none;
      }

      @media (max-width: 560px) {
        .vy-panel {
          right: 16px;
          left: 16px;
          bottom: 82px;
          width: auto;
        }
      }

      /* ============================ VY LAUNCHER ============================ */
      .chat-fab {
        position: fixed;
        right: 26px;
        bottom: var(--contact-center-fab-bottom);
        z-index: 90;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        border: 1px solid rgba(230, 224, 210, 0.3);
        background: rgba(20, 26, 31, 0.82);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow:
          0 14px 40px rgba(0, 0, 0, 0.55),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
        color: var(--mineral);
        transition: var(--ease);
      }
      .chat-fab:hover {
        transform: translateY(-2px);
        border-color: var(--mineral);
        box-shadow:
          0 18px 50px rgba(0, 0, 0, 0.6),
          0 0 0 6px rgba(230, 224, 210, 0.06);
      }
      .chat-fab svg {
        width: 24px;
        height: 24px;
      }
      .chat-fab{background:#25D366;border:none;color:#fff}.chat-fab:hover{background:#1fc25f;border:none}.chat-fab svg{width:36px;height:36px}
      @media (max-width: 560px) {
        .chat-fab {
          right: 16px;
          bottom: 16px;
          width: 52px;
          height: 52px;
        }
      }
      @media print {
        .chat-fab {
          display: none;
        }
      }

      /* ============================ CONTACT CARD (shared) ============================
   One component. The global Get-in-touch panel and the contact page rail render
   different sets of it; only the primitive styles are shared. */
      .contact-card {
        display: flex;
        gap: 13px;
        align-items: flex-start;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        transition: var(--ease);
      }
      .contact-card + .contact-card {
        margin-top: 10px;
      }
      .contact-card:hover {
        border-color: var(--line-strong);
        background: rgba(255, 255, 255, 0.04);
      }
      .contact-card:focus-visible {
        outline: 2px solid var(--mineral, #e6e0d2);
        outline-offset: 2px;
      }
      .cc-ic {
        flex: none;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        border: 1px solid var(--line-soft);
        color: var(--text);
      }
      .cc-ic svg {
        width: 17px;
        height: 17px;
      }
      .cc-tx {
        display: block;
      }
      .cc-h {
        display: block;
        font-size: 14.5px;
        color: var(--text);
        margin-bottom: 3px;
      }
      .cc-b {
        display: block;
        font-size: 13px;
        color: var(--muted);
        line-height: 1.5;
      }
      .cc-meta {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        color: var(--faint);
      }
      .cc-stack {
        display: block;
      }
    
      /* PORTED FROM INDEX — DO NOT EDIT MANUALLY */
      /* ---------- Mega-menu sub-grid (Business Setup → Set Up column) ---------- */
      .pcol-wide { }
      .pcol-sub-grid {
        display: grid;
        grid-template-columns: repeat(var(--sub-cols, 3), 1fr);
        align-items: start;
        gap: 18px 28px;
      }
      .pcol-sub h6 {
        font-size: 10.5px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--mineral);
        font-weight: 700;
        margin-bottom: 10px;
      }
      .pcol-sub ul { display: grid; gap: 3px; }
      .pcol-sub li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 7px 10px;
        margin: 0 -10px;
        border-radius: 8px;
        font-size: 13.5px;
        color: var(--muted);
        transition: var(--ease);
      }
      .pcol-sub li > a:hover { color: var(--text); background: rgba(255,255,255,0.05); }
      .pcol-sub li > a .go {
        width: 12px; height: 12px; opacity: 0;
        transform: translateX(-4px);
        transition: var(--ease);
        color: var(--mineral);
        flex: none;
      }
      .pcol-sub li > a:hover .go { opacity: 1; transform: translateX(0); }

      /* ---------- Mega-menu footer row: market switch strip ---------- */
      .panel-footer {
        max-width: var(--wrap);
        margin: 0 auto;
        padding: 14px 28px 20px;
        border-top: 1px solid var(--line-soft);
        display: flex;
        align-items: center;
        gap: 22px;
        font-size: 13px;
      }
      .panel-footer-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        transition: var(--ease);
      }
      /* Setup paths is a flat list now, not a 3-up sub-grid, so the middle track no
         longer needs double width — even thirds remove the dead zone before Connect. */
      .panel-footer-link.is-current { opacity: .45; text-decoration: none; color: var(--muted); }
      .panel-footer-link.is-current:hover { opacity: 1; color: var(--text); }
      .panel-footer-link:hover { color: var(--text); }
      .panel-footer-link .mk {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.06em;
        color: var(--mineral);
        border: 1px solid rgba(230, 224, 210, 0.28);
        border-radius: 5px;
        padding: 2px 5px;
      }
      .panel-footer-link .go {
        width: 12px; height: 12px; opacity: 0.6;
        color: var(--mineral);
      }
      .panel-footer-link:hover .go { opacity: 1; }

      /* Grid override: 4 equal-ish content columns when there is no plead/lead column. */
      .panel-inner.panel-inner-4 {
        grid-template-columns: 1fr 1fr 1fr 1.2fr;
      }
      /* Business Setup panel: Discover + Set Up (wide, 2 grid slots) + Connect */
      .panel-inner.panel-inner-bs {
        grid-template-columns: 1fr 1fr 1fr;
      }
      @media (max-width: 1160px) {
        .panel-inner.panel-inner-4,
        .panel-inner.panel-inner-bs {
          grid-template-columns: 1fr 1fr 1fr;
        }
        .pcol-sub-grid { grid-template-columns: 1fr; }
        .panel-footer { padding: 14px 20px 20px; }
      }

/* ============================ REFERRAL ROLLOUT ============================ */
.referral-bar { position: relative; z-index: 90; background: var(--bg-2); border-bottom: 1px solid var(--line-soft); font-size: 13.5px; line-height: 1.4; color: var(--text); }
.referral-bar[hidden] { display: none; }
.referral-bar-inner { max-width: var(--wrap, 1280px); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 18px; }
.referral-bar-msg { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); flex: 1 1 auto; min-width: 0; }
.referral-bar-msg b { color: var(--mineral); font-weight: 500; }
.referral-bar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mineral); flex: none; box-shadow: 0 0 0 3px rgba(230, 224, 210, 0.14); }
.referral-bar-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; font-weight: 500; padding: 5px 0; border-bottom: 1px solid rgba(230, 224, 210, 0.28); transition: border-color var(--ease, 0.18s ease), color var(--ease, 0.18s ease); flex: none; }
.referral-bar-cta:hover { border-color: var(--mineral); }
.referral-bar-cta svg { width: 13px; height: 13px; }
.referral-bar-close { background: none; border: 0; color: var(--faint); cursor: pointer; padding: 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; transition: color var(--ease, 0.18s ease), background var(--ease, 0.18s ease); flex: none; }
.referral-bar-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.referral-bar-close svg { width: 14px; height: 14px; }
@media (max-width: 720px) {
  .referral-bar-inner { padding: 8px 16px; gap: 12px; font-size: 13px; }
  .referral-bar-msg { font-size: 12.5px; }
  .referral-bar-cta { font-size: 12.5px; }
}
@media (max-width: 520px) {
  .referral-bar-cta span { display: none; }
}
.foot-ref-card { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px 12px; margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(230, 224, 210, 0.03); color: var(--text); text-decoration: none; transition: border-color var(--ease, 0.18s ease), background var(--ease, 0.18s ease); width: 100%; min-width: 0; max-width: 28em; }
.foot-ref-card:hover { border-color: rgba(230, 224, 210, 0.28); background: rgba(230, 224, 210, 0.055); }
.foot-ref-card-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.foot-ref-card-eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.foot-ref-card-amt { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 12px; letter-spacing: 0.04em; color: var(--mineral); }
.foot-ref-card-body { grid-column: 1; display: flex; flex-direction: column; gap: 2px; }
.foot-ref-card-body b { font-size: 14.5px; font-weight: 500; color: var(--text); letter-spacing: -0.005em; }
.foot-ref-card-body span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.foot-ref-card-arrow { grid-column: 2; grid-row: 2; align-self: center; color: var(--faint); transition: color var(--ease, 0.18s ease), transform var(--ease, 0.18s ease); }
.foot-ref-card-arrow svg { width: 15px; height: 15px; display: block; }
.foot-ref-card:hover .foot-ref-card-arrow { color: var(--mineral); transform: translateX(2px); }
.referral-strip { padding: 44px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: rgba(230, 224, 210, 0.015); }
.referral-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.referral-strip-copy { flex: 1 1 320px; min-width: 0; }
.referral-strip-msg { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text); letter-spacing: -0.005em; }
.referral-strip-msg b { color: var(--mineral); font-weight: 500; }
.referral-strip-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
@media (max-width: 720px) {
  .referral-strip { padding: 32px 0; }
  .referral-strip-msg { font-size: 15.5px; }
  .referral-strip-actions .btn { flex: 1 1 auto; }
}

/* ============================ KNOWLEDGE BASE (docs-style 3-col) ============================ */

/* KB pager (prev/next) */
.kb-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line-soft); }
.kb-pager a { display: block; padding: 20px 24px; border: 1px solid var(--line-soft); border-radius: 12px; text-decoration: none; transition: border-color var(--ease,.18s ease); }
.kb-pager a:hover { border-color: var(--mineral); }
.kb-pager .kb-pager-lbl { font-family: var(--mono,'JetBrains Mono',monospace); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.kb-pager .kb-pager-title { margin-top: 8px; font-size: 15.5px; font-weight: 500; color: var(--text); }
.kb-pager .kb-pager-title:hover { color: var(--mineral); }
.kb-pager .kb-pager-next { text-align: right; }
.kb-pager .empty { border-style: dashed; opacity: .5; pointer-events: none; }
.kb-card-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 32px 0 40px; }
.kb-card { display: block; padding: 22px 24px; border: 1px solid var(--line-soft); border-radius: 14px; text-decoration: none; transition: border-color var(--ease,.18s ease), transform var(--ease,.18s ease); }
.kb-card:hover { border-color: var(--mineral); }
.kb-card:hover .kb-card-title { color: var(--mineral); }
.kb-card-eyebrow { font-family: var(--mono,'JetBrains Mono',monospace); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mineral); }
.kb-card-title { margin-top: 10px; font-size: 17px; font-weight: 500; color: var(--text); letter-spacing: -.005em; transition: color var(--ease,.18s ease); }
.kb-card-desc { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--muted); }
@media (max-width: 600px) { .kb-card-row { grid-template-columns: 1fr; } }

/* ============ KB knowledge product: topic index, glossary, archive, docked Vy ============
   Everything below styles regions owned by tools/build-kb.py. The KB stopped being a
   flat FAQ accordion on 2026-08-31; these are the components that replaced it. */
.kb-navcount { float: right; font-family: var(--mono,'JetBrains Mono',monospace); font-size: 10.5px; color: var(--faint); padding-top: 3px; }

/* --- topic index --- */
.kb-domain { margin: 0 0 40px; scroll-margin-top: 88px; }
.kb-domain-h { font-size: 17px; font-weight: 500; color: var(--text); letter-spacing: -.005em; margin: 0 0 4px; }
.kb-domain-blurb { font-size: 14px; line-height: 1.6; color: var(--faint); margin: 0 0 16px; max-width: 60ch; }
.kb-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kb-topic { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 12px; text-decoration: none; transition: border-color var(--ease,.18s ease), background-color var(--ease,.18s ease); }
.kb-topic:hover { border-color: var(--mineral); background: rgba(230,224,210,.02); }
.kb-topic-h { font-size: 14.5px; font-weight: 500; color: var(--text); line-height: 1.35; letter-spacing: -.005em; }
.kb-topic:hover .kb-topic-h { color: var(--mineral); }
.kb-topic-desc { font-size: 13px; line-height: 1.55; color: var(--muted); }
.kb-topic-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.kb-mkt { font-family: var(--mono,'JetBrains Mono',monospace); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 8px; }
.kb-mkt b { color: var(--text); font-weight: 500; }
.kb-mkt-prep { border-style: dashed; }
.kb-mkt-any { color: var(--mineral); border-color: rgba(230,224,210,.18); }
@media (max-width: 900px) { .kb-topic-grid { grid-template-columns: 1fr; } }

/* --- glossary (market-scoped; each row is a data-kb-item) --- */
.kb-gloss { margin: 0; padding: 0; display: flex; flex-direction: column; }
.kb-gloss-row { padding: 16px 0; border-top: 1px solid var(--line-soft); }
.kb-gloss-row:last-child { border-bottom: 1px solid var(--line-soft); }
.kb-gloss-term { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 500; color: var(--text); margin: 0; }
.kb-gloss-full { font-size: 13.5px; font-weight: 400; color: var(--muted); }
.kb-gloss-tag { margin-left: auto; font-family: var(--mono,'JetBrains Mono',monospace); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 8px; }
.kb-gloss-def { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* --- archive hand-off + the archive page itself --- */
.kb-archive-card { margin: 40px 0 0; padding: 22px 24px; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(230,224,210,.02); }
.kb-archive-lbl { font-family: var(--mono,'JetBrains Mono',monospace); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mineral); }
.kb-archive-link { display: inline-block; margin-top: 8px; font-size: 17px; font-weight: 500; color: var(--text); text-decoration: none; letter-spacing: -.005em; }
.kb-archive-link:hover { color: var(--mineral); }
.kb-archive-desc { margin: 6px 0 0 !important; font-size: 14px; line-height: 1.6; color: var(--muted); }
.kb-archive-count { font-family: var(--mono,'JetBrains Mono',monospace); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.kb-arch-domain { scroll-margin-top: 88px; }
.kb-arch-topic { margin: 0 0 28px; scroll-margin-top: 88px; }
.faq-h3 { font-size: 15px; font-weight: 500; color: var(--text); margin: 28px 0 8px; letter-spacing: -.005em; scroll-margin-top: 88px; }
.kb-count { font-family: var(--mono,'JetBrains Mono',monospace); font-size: 11px; color: var(--faint); font-weight: 400; margin-left: 6px; }

/* --- docked Vy: the rail host. There is still exactly one #vy panel on the page. --- */
.kb-vy-dock { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.kb-vy-dock[hidden] { display: none; }
.kb-vy-lab { font-family: var(--mono,'JetBrains Mono',monospace); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mineral); font-weight: 500; }
.kb-vy-ctx { margin: 0 !important; font-size: 12px !important; line-height: 1.5 !important; color: var(--faint) !important; }
.kb-vy-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-vy-chip { font: inherit; font-size: 12px; text-align: left; color: var(--muted); background: transparent; border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: color var(--ease,.18s ease), border-color var(--ease,.18s ease); }
.kb-vy-chip:hover { color: var(--text); border-color: var(--mineral); }
.kb-vy-slot { display: block; }
body.kb-vy-docked #vy { position: static; width: 100%; max-width: none; right: auto; bottom: auto; z-index: auto; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-radius: 14px; }
body.kb-vy-docked .chat-fab { display: none; }


/* Legacy .faq- names kept below for backward compat — same CSS */
.faq-shell { padding: 40px 0 96px; }
.faq-layout { max-width: 1520px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px; gap: 44px; min-height: 60vh; }
@media (min-width: 1420px) { .faq-layout { grid-template-columns: 280px minmax(0, 1fr) 356px; } }

/* --- Sidebar --- */
.faq-sidebar { position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; padding: 24px 0; border-right: 1px solid var(--line-soft); margin-right: -16px; padding-right: 16px; }
.faq-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; margin-bottom: 28px; border: 1px solid var(--line-soft); background: rgba(230,224,210,.02); border-radius: 10px; color: var(--faint); }
.faq-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 13px; }
.faq-search input::placeholder { color: var(--faint); }
.faq-search-shortcut { font-family: var(--mono,'JetBrains Mono',monospace); font-size: 11px; color: var(--faint); border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 5px; }
.faq-nav { display: flex; flex-direction: column; gap: 28px; }
.faq-nav-group { display: flex; flex-direction: column; gap: 4px; }
.faq-nav-head { font-family: var(--mono,'JetBrains Mono',monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; padding: 0 12px; font-weight: 500; }
.faq-nav-item { display: block; padding: 6px 12px; font-size: 14px; color: var(--muted); text-decoration: none; transition: color var(--ease,.18s ease), background-color var(--ease,.18s ease), border-color var(--ease,.18s ease); border-radius: 4px; border-left: 2px solid transparent; }
.faq-nav-item:hover { color: var(--text); }
.faq-nav-item.active { color: var(--text); background: rgba(230,224,210,.04); border-left-color: var(--mineral); padding-left: 10px; }

/* --- Content --- */
.faq-content { padding: 24px 0 0; max-width: 740px; min-width: 0; }
.faq-breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--mono,'JetBrains Mono',monospace); font-size: 11px; letter-spacing: .04em; color: var(--faint); margin-bottom: 24px; text-transform: uppercase; }
.faq-h1 { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.02em; font-weight: 500; color: var(--text); margin: 0 0 20px; }
.faq-lede { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 0 0 40px; max-width: 62ch; }
.faq-h2 { font-size: 22px; line-height: 1.25; letter-spacing: -.01em; font-weight: 500; color: var(--text); margin: 56px 0 20px; scroll-margin-top: 88px; }
.faq-h2:first-of-type { margin-top: 24px; }
.faq-content p { font-size: 15.5px; line-height: 1.7; color: var(--muted); margin: 0 0 14px; }
.faq-content p:last-child { margin-bottom: 0; }
.faq-content ol, .faq-content ul { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 8px 0 14px; padding-left: 22px; }
.faq-content li { margin: 4px 0; }

/* --- Q&A item (details/summary) --- */
.faq-item { border-top: 1px solid var(--line-soft); }
.faq-item:last-child { border-bottom: 1px solid var(--line-soft); }
.faq-item summary { list-style: none; padding: 20px 0; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; font-size: 16px; line-height: 1.45; color: var(--text); font-weight: 500; letter-spacing: -.005em; transition: color var(--ease,.18s ease); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex-shrink: 0; font-size: 20px; font-weight: 300; color: var(--faint); line-height: 1; margin-top: 2px; transition: transform var(--ease,.18s ease), color var(--ease,.18s ease); }
.faq-item[open] summary::after { content: '−'; color: var(--mineral); }
.faq-item summary:hover { color: var(--mineral); }
.faq-item summary:hover::after { color: var(--mineral); }
.faq-answer { padding: 0 40px 22px 0; }

/* --- Callout --- */
.faq-callout { margin: 24px 0; padding: 18px 22px; border-left: 3px solid var(--mineral); background: rgba(230,224,210,.03); border-radius: 0 12px 12px 0; }
.faq-callout .lbl { display: block; font-family: var(--mono,'JetBrains Mono',monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mineral); margin-bottom: 8px; font-weight: 500; }
.faq-callout p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* --- Right TOC --- */
.faq-rail { position: sticky; top: 80px; align-self: start; padding: 40px 0; display: flex; flex-direction: column; gap: 28px; max-height: calc(100vh - 100px); overflow-y: auto; }
.faq-toc { display: flex; flex-direction: column; gap: 4px; }
.faq-toc-head { font-family: var(--mono,'JetBrains Mono',monospace); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; font-weight: 500; }
.faq-toc-item { display: block; padding: 4px 0; font-size: 13px; color: var(--muted); text-decoration: none; transition: color var(--ease,.18s ease); }
.faq-toc-item:hover { color: var(--text); }
.faq-toc-item.active { color: var(--mineral); }

/* --- Bottom CTA card --- */

/* --- Responsive --- */
@media (max-width: 1100px) {
  .faq-layout { grid-template-columns: 240px 1fr; gap: 40px; }
  .faq-rail { display: none; }
}
@media (max-width: 760px) {
  .faq-layout { grid-template-columns: 1fr; padding: 0 24px; gap: 0; }
  .faq-sidebar { display: none; }
  .faq-content { padding-top: 8px; }
}

/* off-hours strip (rolled out) */
.offhours-strip { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: rgba(230,224,210,.025); }
.offhours-inner { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 14px 0; flex-wrap: wrap; }
.offhours-dot { width: 8px; height: 8px; border-radius: 50%; background: #d4a24c; box-shadow: 0 0 0 4px rgba(212,162,76,.15); flex-shrink: 0; }
.offhours-text { margin: 0; font-size: 14px; color: var(--text); }
.offhours-cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(230,224,210,.25); border-radius: 999px; background: transparent; color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer; transition: border-color var(--ease,.18s ease), color var(--ease,.18s ease); }
.offhours-cta:hover { border-color: var(--mineral); color: var(--mineral); }
.offhours-cta svg { width: 14px; height: 14px; }
@media (max-width: 640px) { .offhours-text { font-size: 13px; text-align: center; } }

.offhours-strip[data-status="open"] .offhours-dot { background: #6fce8e; box-shadow: 0 0 0 4px rgba(111,206,142,.15); }
.offhours-strip[data-status="closed"] .offhours-dot { background: #d4a24c; box-shadow: 0 0 0 4px rgba(212,162,76,.15); }
.desk-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.35; }
.vy-id .desk-status { align-items: flex-start; }
.vy-id .desk-status .desk-dot { margin-top: 5px; }
.vy-id .desk-text { align-items: flex-start; }
.rbar-rotator { position: relative; flex: 1 1 auto; min-width: 0; display: grid; }
.rbar-slide { grid-area: 1 / 1; display: flex; align-items: center; gap: 18px; min-width: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 420ms ease; }
.rbar-slide[data-active] { opacity: 1; visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .rbar-slide { transition: none; } }
/* Newsletter section — canonical */
.newsletter-section { padding:64px 0;border-top:1px solid var(--line-soft) }
.newsletter-section h2 { font-size:clamp(24px,2.6vw,32px);line-height:1.2;letter-spacing:-.015em;font-weight:500;color:var(--text);margin:0 0 10px }
.newsletter-body { color:var(--muted);font-size:15.5px;line-height:1.6;margin:0 0 20px;max-width:56ch }
.newsletter-form { display:flex;gap:12px;margin:0 0 14px;max-width:480px }
.newsletter-email { flex:1;padding:14px 18px;border-radius:999px;border:1px solid var(--line-soft);background:var(--text);color:#0d1114;font-family:inherit;font-size:14.5px;outline:none }
.newsletter-email::placeholder { color:rgba(13,17,20,.55) }
.newsletter-email:focus { border-color:var(--mineral);box-shadow:0 0 0 3px rgba(212,162,76,.15) }
.newsletter-submit { padding:14px 26px;border-radius:999px;border:1px solid var(--text);background:transparent;color:var(--text);font-family:inherit;font-size:14.5px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background var(--ease,.18s ease),color var(--ease,.18s ease) }
.newsletter-submit:hover { background:var(--text);color:#0d1114 }
.newsletter-terms { font-size:12.5px;line-height:1.55;color:var(--faint);margin:0;max-width:480px }
.newsletter-terms a { color:var(--muted);text-decoration:underline;text-underline-offset:2px }
@media (max-width:560px){ .newsletter-form { flex-direction:column;max-width:100% } .newsletter-submit { width:100% } }
/* Canonical pre-footer assistance band (.close-band) */




/* ================= shared footer refinements ================= */
/* 1 · heading system: wrapped labels ("Business Setup", "Corporate Secretary")
      reserved less space than single-word ones, so they read heavier and pushed
      their link lists out of alignment. One reserved height for every heading. */
.fcol h4 { min-height: 40px; }
/* 2 · social cluster: loosen density, and let it breathe above and below */
.foot-social { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.foot-brand .foot-social { margin-top: 26px; }
/* 3 · referral card: roomier footprint and internal spacing */
.foot-ref-card { margin-top: 28px; padding: 18px 20px; gap: 8px 14px; }
.foot-ref-card-head { margin-bottom: 10px; }
/* BEGIN GENERATED footer-referral-card — tools/build-footer-referral-card.py — do not edit */
/* FooterReferralCard — SINGLE SOURCE (2026-09-07; restyled 2026-09-19, owner brief). tools/build-footer-referral-card.py
   writes this into every page's footer <style> directly after the page's own .foot-ref-card rules, so these win by
   source order. The card is one link with three lines: title · supporting line with the reward amount as its focal
   point · a separated "Become a referral partner →" line. Surface: --surface-card-footer (a lighter charcoal than the
   footer in dark; in light the footer's own ground — owner 2026-09-22: no white card at rest, the hover keeps its
   fill) with a restrained --line border; hover shifts surface and border only; focus
   is the site's --focus-ring. No glow, no scaling. Tokens only. */
.foot-ref-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 28px; padding: 20px 22px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-card-footer); color: var(--text); text-decoration: none; transition: background-color .18s ease, border-color .18s ease; }
.foot-ref-card:hover { background: var(--surface-2); border-color: var(--line-strong); }
.foot-ref-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.foot-ref-card-title { font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: -.005em; color: var(--text); }
.foot-ref-card-line { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.foot-ref-card-amount { font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--text); white-space: nowrap; }
.foot-ref-card-cta { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--text); }
.foot-ref-card-cta svg { flex: none; width: 14px; height: 14px; color: var(--faint); transition: color .18s ease, transform .18s ease; }
.foot-ref-card:hover .foot-ref-card-cta svg, .foot-ref-card:focus-visible .foot-ref-card-cta svg { color: var(--text); transform: translateX(2px); }
[dir="rtl"] .foot-ref-card-cta svg { transform: scaleX(-1); }
[dir="rtl"] .foot-ref-card:hover .foot-ref-card-cta svg, [dir="rtl"] .foot-ref-card:focus-visible .foot-ref-card-cta svg { transform: scaleX(-1) translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .foot-ref-card, .foot-ref-card-cta svg { transition: none; }
  .foot-ref-card:hover .foot-ref-card-cta svg, .foot-ref-card:focus-visible .foot-ref-card-cta svg { transform: none; }
  [dir="rtl"] .foot-ref-card:hover .foot-ref-card-cta svg, [dir="rtl"] .foot-ref-card:focus-visible .foot-ref-card-cta svg { transform: scaleX(-1); }
}
/* END GENERATED footer-referral-card */
/* 4 · widen the brand column so the card is not squeezed (desktop 7-cell grid only) */
@media (min-width: 1161px) {
  /* 6 tracks for 6 columns — the old 7-track grid left an empty trailing track,
     which shrank the brand column and made the footer stop short of the bar. */
  .foot-grid { grid-template-columns: 1.6fr repeat(6, 1fr) !important; }
}
/* ============ shared footer bottom bar + floating Vy clearance ============ */
.foot-bar-main { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-bar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-inline-end: 0; }
@media (min-width: 1101px) { .foot-bar-right { margin-inline-start: auto; } }
@media (max-width: 1100px) {
  .foot-bar-main { align-items: flex-start; }
  .foot-bar-right { width: 100%; justify-content: flex-start; margin-inline-start: 0; }
}
@media (max-width: 640px) {
  .foot-bar-main { flex-direction: column; align-items: flex-start; gap: 20px; }
  .foot-bar-right { gap: 10px; }
}
/* ---- Sonsoto Contact Center · footer clearance ----------------------------
   Desktop (>860px): the entry button stays visible over the footer and rises to clear
   the footer's bottom strip, so the Contact Center is reachable at the bottom of the
   page. It is never hidden and never loses pointer events.
   Mobile (<=860px): untouched — .chat-fab remains display:none there and the Contact
   Center is reached from the fixed mobile action bar. */
.chat-fab, .vy-panel {
  transition:
    bottom .22s cubic-bezier(.16, 1, .3, 1),
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease;
}
@media (min-width: 861px) {
  body.footer-in-view .chat-fab {
    bottom: calc(var(--contact-center-fab-bottom) + var(--contact-center-footer-clearance));
  }
  body.footer-in-view .vy-panel {
    bottom: calc(var(--contact-center-panel-bottom) + var(--contact-center-footer-clearance));
  }
}
/* ============ language selector (native names, no ISO codes in the UI) ============ */
.langsel { position: relative; }
.langsel-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 60; min-width: 180px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #141a1f); box-shadow: 0 18px 44px rgba(0,0,0,.55); }
.langsel-menu[hidden] { display: none; }
.langsel-menu li { margin: 0; }
.langsel-opt { display: block; width: 100%; text-align: start; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-family: inherit; font-size: 14.5px; cursor: pointer; transition: background var(--ease,.18s ease), color var(--ease,.18s ease); }
.langsel-opt:hover { background: rgba(230,224,210,.06); }
.langsel-opt[aria-selected="true"] { color: var(--mineral); }
.langsel-menu li[dir="rtl"] .langsel-opt, .langsel-opt[dir="rtl"] { text-align: end; }
@media (max-width: 1100px) { .langsel-menu { right: auto; left: 0; } }   /* the bar is left-aligned here: anchor the menu to the pill's left edge so it never leaves the viewport (2026-09-09) */
/* ============ footer bottom strip: three fixed zones ============ */
/* left = copyright · centre = app badges · right = language + theme. Nothing else. */
.foot-bar-main { display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap }
.foot-bar-center { display:flex;align-items:center;gap:12px;flex-wrap:wrap }
.foot-bar-right { display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-inline-end:0 }
.foot-bar-main > * { min-height:42px;display:flex;align-items:center }
.foot-bar .store, .foot-bar .pill, .foot-bar .themebox { height:42px }
@media (min-width:1101px){ .foot-bar-right { margin-inline-start:0 } }
@media (max-width:1100px){
  .foot-bar-main { align-items:flex-start }
  .foot-bar-center, .foot-bar-right { width:100%;justify-content:flex-start }
}
@media (max-width:640px){
  .foot-bar-main { flex-direction:column;align-items:flex-start;gap:20px }
  .foot-bar-center, .foot-bar-right { gap:10px }
}
      /* KB country filter */
      .kb-ctry { margin: 0 0 22px; padding: 0 0 18px; border-bottom: 1px solid var(--line-soft); }
      .kb-ctry .ctry-switch { margin: 0; padding: 0; border: 0; }
      .kb-ctry-label { display:block;font-family:var(--mono,'JetBrains Mono',monospace);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 8px }
      /* Matches .faq-search's box so the sidebar reads as one control stack. `appearance:none`
         plus an inline chevron, because the native control ignores the dark palette. */
      .kb-ctry select { width:100%;box-sizing:border-box;height:36px;padding:0 30px 0 12px;font:inherit;font-size:13px;color:var(--text);background:rgba(230,224,210,.02);border:1px solid var(--line-soft);border-radius:10px;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8578' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px }
      .kb-ctry select:focus-visible { outline:none;border-color:var(--mineral) }
      .ctry-switch { display:flex;align-items:center;gap:8px;flex-wrap:wrap }
      .ctry-switch-btn { font:inherit;font-size:13px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer;transition:var(--ease) }
      .ctry-switch-btn:hover { color:var(--text);border-color:var(--line-strong) }
      .ctry-switch-btn[data-active] { color:var(--bg);background:var(--mineral);border-color:var(--mineral);font-weight:500 }
      [data-kb-item][hidden], [data-kb-group][hidden] { display: none !important; }
          /* ---- Footer bottom strip -------------------------------------------------
         Two zones: copyright left, everything else (badges, language, theme) in one
         cluster flush right. .foot-bar is a flex child of .wrap, so without an explicit
         width it shrinks to its content and the divider stops short of the grid above. */
      .foot-bar { width: 100%; }
      @media (min-width: 1101px) {
        .foot-bar-main { justify-content: flex-start; }
        .foot-bar-center { margin-inline-start: auto; }
        .foot-bar-right { margin-inline-start: 0; }
      }
          /* ---- Mega-panel sizing ------------------------------------------------------
         Capped in width and denser than the old full-bleed panel. Company formation is
         anchored under its own trigger; Ongoing services sits further right, so anchoring
         it to its trigger would push it past the viewport — it hangs off the header's
         right edge instead. Ordered last so it wins over the base .panel geometry. */
      .navitem.has-panel > .panel {
        width: var(--panel-w, 820px);
        max-width: calc(100vw - 32px);
        border-radius: 14px;
        border: 1px solid var(--line);
        top: 66px;
      }
      /* Company formation — left edge locked to the trigger label */
      .navitem.has-panel:has(.panel-inner-bs) { position: relative; }
      .navitem.has-panel:has(.panel-inner-bs) > .panel { left: 0; right: auto; }
      /* Ongoing services — 4 columns, right-anchored so it never overflows */
      /* Ongoing services: anchored under its own trigger. Right edge aligns with the trigger's
         right edge; the wider panel extends leftward without escaping the viewport. */
      .navitem.has-panel:has(.panel-inner-4) { position: relative; }
      .navitem.has-panel:has(.panel-inner-4) > .panel { --panel-w: 1000px; left: 50%; max-width: calc(100vw - 32px); position: fixed; right: auto; top: var(--nav-h,66px); transform: translatex(-50%); }
      /* Narrower Ongoing services: collapse to 2 columns to keep column
         labels readable within the reduced panel width. */
      .navitem.has-panel:has(.panel-inner-4) > .panel .panel-inner-4 { display: grid; gap: 26px; grid-template-columns: repeat(4,1fr); }
      .navitem.has-panel:has(.panel-inner-4) > .panel .panel-inner .pcol { min-width: 0; }


      .navitem.has-panel > .panel > .panel-inner {
        max-width: none;
        margin: 0;
        padding: 20px 22px 18px;
        gap: 26px;
      }
      /* denser lists in every mega column */
      .navitem.has-panel .pcol h5 { margin-bottom: 10px; }
      .navitem.has-panel .pcol ul { gap: 1px; }
      .navitem.has-panel .pcol li > a { padding: 6px 10px; font-size: 14px; }
      .navitem.has-panel .pcol-sub h6 { margin-bottom: 6px; }
      /* market switch strip: quiet, not a footer row */
      .navitem.has-panel .panel-footer { padding: 8px 22px 12px; gap: 10px; }
      .navitem.has-panel .panel-footer-link { font-size: 12.5px; }
      @media (max-width: 1160px) {
        .navitem.has-panel > .panel { --panel-w: 700px; }
        .navitem.has-panel:has(.panel-inner-4) > .panel { --panel-w: 900px; }
      }
          /* ---- Footer variants ---------------------------------------------------------
         UAE/Vietnam: brand · Company formation (2 sub-groups) · Ongoing services ·
         Company · Trust.   Global: brand · Markets · Company · Trust.
         The specified var(--space-6) / var(--text-xs) do not exist in this project;
         mapped to the real scale and to .fcol h4's own type. */
      @media (min-width: 1161px) {
        /* 5 items on market pages, 4 on global — sized so no label wraps */
        body[data-desk-market='uae'] .foot-grid,
        body[data-desk-market='vietnam'] .foot-grid {
          grid-template-columns: 1.45fr 1fr 1.12fr 0.82fr 0.86fr 1.12fr !important;
        }
        body[data-desk-market='global'] .foot-grid {
          grid-template-columns: 1.45fr 1fr 1.12fr 0.82fr 0.86fr 1.12fr !important;
        }
      }