/* Roboto is enqueued by ffiq-super-tools.php (weights 300, 400, 500 only).
   The @import below is kept as a fallback for the standalone index.html prototype. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
    /* Colors */
    --primary-bg:         #fff;
    --text-primary:       #3B6EB6;
    --text-secondary:     #666;
    --border-color:       #e0e0e0;
    --hover-color:        #F16D24;
    --hover-bg:           #f5f5f5;
    --hover-bg-primary:   #F3F6FA;
    --hover-bg-secondary: #E8EEF6;
    --content-bg:         #F3F6FA;

    /* Layout */
    --header-height: 70px;
    --container-max: 1240px;

    /* Border Radius */
    --radius-pill: 50px;
    --radius-xl:   16px;
    --radius-lg:   12px;
    --radius-md:    8px;
    --radius-sm:    6px;

    /* Typography — rem values respect the user's browser font-size preference */
    --font-nav:  1.125rem;   /* 18px */
    --font-body: 1rem;       /* 16px at default browser font-size */
    --font-sm:   0.875rem;   /* 14px */
    --font-xs:   0.75rem;    /* 12px */

    /* Transitions */
    --transition-speed: 200ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Search field */
    --search-field-height: 48px;
}

/* ============================================================
   RESET
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
    /* line-height: 1.6; */
    color: var(--text-primary);
    background: var(--primary-bg);
}

/* ============================================================
   TOUCH: eliminate ghost-tap highlight on mobile menu interactive elements.
   iOS Safari briefly applies :active and -webkit-tap-highlight-color even when
   touchstart.preventDefault() is called, because the highlight is painted before
   JS listeners run. Setting it transparent removes the visual artefact entirely.
   ============================================================ */
.mobile-menu button,
.mobile-menu a {
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   THEME RESET GUARD
   Themes can inject generic rules such as:
     button:hover, button:focus { background-color: #c36; color: #fff }
     a:hover { color: blue; text-decoration: underline }
     a:visited { color: purple }
   These bleed into menu items — especially <a class="menu-btn"> links used in
   the Newsroom and Products panels — causing wrong colours on hover and after visit.
   This block claims all interactive elements inside the plugin and sets the
   correct hover values directly. Higher-specificity rules below override where needed
   (e.g. .nav-trigger:hover wins over .desktop-nav button:hover on specificity).
   ============================================================ */

/* Buttons (Insights, Company sidebars; hamburger; search toggles) */
.desktop-nav button:hover,       .desktop-nav button:focus,
.mega-menu   button:hover,       .mega-menu   button:focus,
.mobile-menu button:hover,       .mobile-menu button:focus,
.mobile-search-bar button:hover, .mobile-search-bar button:focus,
.nav-search-wrap   button:hover, .nav-search-wrap   button:focus {
    background-color: var(--hover-bg-primary) !important;
    color: var(--hover-color) !important;
    text-decoration: none;
}

/* Anchor links (Newsroom, Products col-1 sidebars; info-cards; app-cards) */
.mega-menu   a:hover, .mega-menu   a:focus,
.mobile-menu a:hover, .mobile-menu a:focus {
    background-color: var(--hover-bg-primary) !important;
    color: var(--hover-color) !important;
    text-decoration: none;
}

/* Suppress browser visited-link colour on menu anchor items */
.mega-menu   a:visited,
.mobile-menu a:visited {
    color: var(--text-primary);
}
.mega-menu   a.menu-btn:visited,
.mobile-menu a.menu-btn:visited {
    color: var(--text-primary);
}
.mega-menu   a.menu-btn.active:visited,
.mobile-menu a.menu-btn.active:visited {
    color: var(--hover-color);
}

/* ============================================================
   DESKTOP NAVIGATION
   ============================================================ */
.desktop-nav {
    flex: 1;
    display: flex;
    align-items: center;
    height: var(--header-height);
    justify-content: space-between;
}

.nav-primary {
    display: flex;
    list-style: none;
    align-items: stretch;
    align-self: stretch;
}

.nav-item {
    display: flex;
    align-items: stretch;
    position: relative;
    opacity: 0;
    animation: navItemIn 0.3s var(--ease) forwards;
}

@keyframes navItemIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nav-item:nth-child(1) { animation-delay: 0.05s; }
.nav-item:nth-child(2) { animation-delay: 0.1s;  }
.nav-item:nth-child(3) { animation-delay: 0.15s; }
.nav-item:nth-child(4) { animation-delay: 0.2s;  }
.nav-item:nth-child(5) { animation-delay: 0.25s; }

/* Sub-items: staggered entrance when a mega panel becomes active */
@keyframes subItemIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Targets: sidebar list items (Insights/Newsroom/Company),
            Products col-1 category rows, Applications cards */
.mega-panel.active .sidebar li,
.mega-panel.active .col-1 .menu-list > li,
.mega-panel.active .app-card {
    opacity: 0;
    animation: subItemIn 0.25s var(--ease) forwards;
}

.mega-panel.active .sidebar         li:nth-child(1),
.mega-panel.active .col-1 .menu-list > li:nth-child(1),
.mega-panel.active .app-card:nth-child(1)  { animation-delay: 0.03s; }

.mega-panel.active .sidebar         li:nth-child(2),
.mega-panel.active .col-1 .menu-list > li:nth-child(2),
.mega-panel.active .app-card:nth-child(2)  { animation-delay: 0.07s; }

.mega-panel.active .sidebar         li:nth-child(3),
.mega-panel.active .col-1 .menu-list > li:nth-child(3),
.mega-panel.active .app-card:nth-child(3)  { animation-delay: 0.11s; }

.mega-panel.active .sidebar         li:nth-child(4),
.mega-panel.active .col-1 .menu-list > li:nth-child(4),
.mega-panel.active .app-card:nth-child(4)  { animation-delay: 0.15s; }

.mega-panel.active .sidebar         li:nth-child(5),
.mega-panel.active .col-1 .menu-list > li:nth-child(5),
.mega-panel.active .app-card:nth-child(5)  { animation-delay: 0.19s; }

.mega-panel.active .sidebar         li:nth-child(6),
.mega-panel.active .col-1 .menu-list > li:nth-child(6),
.mega-panel.active .app-card:nth-child(6)  { animation-delay: 0.23s; }

.mega-panel.active .sidebar         li:nth-child(7),
.mega-panel.active .col-1 .menu-list > li:nth-child(7),
.mega-panel.active .app-card:nth-child(7)  { animation-delay: 0.27s; }

.mega-panel.active .sidebar         li:nth-child(8),
.mega-panel.active .col-1 .menu-list > li:nth-child(8),
.mega-panel.active .app-card:nth-child(8)  { animation-delay: 0.31s; }

.mega-panel.active .app-card:nth-child(9)  { animation-delay: 0.35s; }
.mega-panel.active .app-card:nth-child(10) { animation-delay: 0.39s; }
.mega-panel.active .app-card:nth-child(11) { animation-delay: 0.43s; }
.mega-panel.active .app-card:nth-child(12) { animation-delay: 0.47s; }
.mega-panel.active .app-card:nth-child(13) { animation-delay: 0.51s; }
.mega-panel.active .app-card:nth-child(14) { animation-delay: 0.55s; }
.mega-panel.active .app-card:nth-child(15) { animation-delay: 0.59s; }

@media (prefers-reduced-motion: reduce) {
    .nav-item { animation: none; opacity: 1; }
    .mega-panel.active .sidebar li,
    .mega-panel.active .col-1 .menu-list > li,
    .mega-panel.active .app-card { animation: none; opacity: 1; }
}

.nav-trigger {
    background: none;
    border: none;
    font-size: var(--font-nav);
    font-weight: 500;
    color: white;
    cursor: pointer;
    padding: 0 clamp(0.75rem, calc(2.892vw - 1.103rem), 1.5rem);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition-speed) var(--ease),
                background var(--transition-speed) var(--ease);
    letter-spacing: 0.031em;
    border-radius: 0!important;
}

.nav-trigger::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    flex-shrink: 0;
    transition: transform 0.25s var(--ease);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.desktop-nav .nav-trigger:hover,
.desktop-nav .nav-trigger[aria-expanded="true"] {
    color: var(--text-primary) !important;
    background: white !important;
}

.nav-trigger[data-menu="products"] {
    border-left: solid 1px var(--text-primary);
}

.nav-trigger[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.contact-btn {
    padding: 12px 24px;
    background: var(--hover-color);
    color: white!important;
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-size: var(--font-sm);
    font-weight: 500;
    transition: background var(--transition-speed) var(--ease),
                color var(--transition-speed) var(--ease);
    white-space: nowrap;
    border: 2px solid var(--hover-color);
    display: inline-block;
    text-align: center;
    line-height: 1;
}

.contact-btn:hover {
    background: white;
    color: var(--hover-color);
}

.hamburger {
    display: none;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    border-radius: 0!important;
    transition: background 0.3s var(--ease);
}

.hamburger:hover,
.hamburger:focus,
.hamburger[aria-expanded="true"],
.hamburger[aria-expanded="true"]:hover,
.hamburger[aria-expanded="true"]:focus {
    background: white !important;
}

.hamburger:hover span,
.hamburger:focus span,
.hamburger[aria-expanded="true"]:hover span,
.hamburger[aria-expanded="true"]:focus span {
    background: var(--text-primary);
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: white;
    position: absolute;
    left: 13px;
    transition: all 0.3s var(--ease);
}

.hamburger span:nth-child(1) { top: 17px; }
.hamburger span:nth-child(2) { top: 24px; }
.hamburger span:nth-child(3) { top: 31px; }

.hamburger[aria-expanded="true"] span      { background: var(--text-primary); }

.hamburger[aria-expanded="true"] span:nth-child(1) { top: 24px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { top: 24px; transform: rotate(-45deg); }

/* ============================================================
   MEGA MENU STRUCTURE
   ============================================================ */
.mega-menu-overlay {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-speed) var(--ease);
    z-index: 998;
}

.mega-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mega-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--header-height));
    overflow: visible;
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-speed) var(--ease),
                opacity var(--transition-speed) var(--ease);
    z-index: 999;
    background: #FFF;
    border-bottom: 0.5px solid #3B6EB6;
    box-shadow: 0 5px 40px 0 rgba(106, 143, 197, 0.20);
    padding: 18px 2rem;
}

/* WordPress admin bar offset (.admin-bar on <html>, margin-top: 32px >782px, 46px 600–782px) */
.admin-bar .mega-menu-overlay,
.admin-bar .mega-menu,
.admin-bar .mobile-menu {
    top: calc(var(--header-height) + 32px);
}
.admin-bar .mega-menu {
    max-height: calc(100dvh - var(--header-height) - 32px);
}
@media screen and (max-width: 782px) {
    .admin-bar .mega-menu-overlay,
    .admin-bar .mega-menu,
    .admin-bar .mobile-menu {
        top: calc(var(--header-height) + 46px);
    }
    .admin-bar .mega-menu {
        max-height: calc(100dvh - var(--header-height) - 46px);
    }
}
@media screen and (max-width: 600px) {
    .admin-bar .mega-menu-overlay,
    .admin-bar .mega-menu,
    .admin-bar .mobile-menu {
        top: var(--header-height);
    }
    .admin-bar .mega-menu {
        max-height: calc(100dvh - var(--header-height));
    }
}

.mega-menu.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mega-content {
    max-width: var(--container-max);
    margin: 0 auto;
    /* padding: 18px 0; */
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
}

.mega-panel        { display: none; }
.mega-panel.active { display: block; }

/* ============================================================
   PRODUCTS PANEL — 3-COLUMN GRID
   ============================================================ */
.products-grid {
    display: grid;
    grid-template-columns: 330px auto 1fr;
    align-items: stretch;
    gap: 0;
}

/* — Column 2: crypto-type selector — */
.col-2 { display: none; }

.col-2[data-active="true"] {
    display: block;
    background-color: var(--content-bg);
    min-width: 202px;
    padding: 0.75rem 1.25rem;
    padding-right: 0;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.col-2 .menu-btn {
    font-weight: 300;
}

/* — Column 3: content area — */
.col-3 {
    position: relative;
    max-height: calc(100dvh - 200px);
    overflow-y: auto;
    background-color: var(--content-bg);
    border-radius: var(--radius-xl);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
}

/* Show overview background image only when overview sub-panel is active */
.col-3:has(.sub-panel[data-content="overview"].active) .bg-image { opacity: 1; }

.col-3 .bg-image {
    border-radius: var(--radius-xl);
    z-index: 0;
}

.col-3::-webkit-scrollbar       { width: 6px; }
.col-3::-webkit-scrollbar-track { background: #f1f1f1; }
.col-3::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; }

/* When col-2 is visible, merge it visually with col-3 */
.col-2[data-active="true"] ~ .col-3 {
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    padding-left: 0;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* — Sub-panels — */
.sub-panel {
    display: none;
    height: 100%;
    border-radius: var(--radius-lg);
}

.sub-panel.active {
    display: block;
    flex: 1;
}
.sub-panel[data-content="overview"] {
    padding: 8px 0;
}

.sub-panel[data-content="overview"] p,
.sub-panel[data-content="overview"] a {
    margin-left: 1rem;
}

.col-2[data-active="true"] ~ .col-3 .sub-panel {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.col-3 .sub-panel[data-content="hardware"] {
    padding: 0;
    border-radius: 0;
}

/* — Content area — */
.content-area {
    position: relative;
    border-radius: var(--radius-lg);
    flex: 1;
    z-index: 1;
}

.col-2[data-active="true"] ~ .col-3 .content-area {
    background-color: var(--hover-bg-secondary);
    border-radius: var(--radius-lg);
}

/* Square the corner adjacent to the active first/last col-1 item */
.products-grid:has(.col-1 li:first-child .menu-btn.active) .col-3 { border-top-left-radius: 0; }
.products-grid:has(.col-1 li:last-child  .menu-btn.active) .col-3 { border-bottom-left-radius: 0; }

/* ============================================================
   MENU BUTTONS — SHARED BASE
   ============================================================ */
.menu-list { list-style: none; }

.menu-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 12px;
    font-size: var(--font-nav);
    color: var(--text-primary) !important; /* beats theme a { color } rules */
    text-decoration: none !important;
    cursor: pointer;
    transition: all var(--transition-speed) var(--ease);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    display: flex;
    gap: 8px;
}

.mega-panel[data-panel="products"] .col-1 .menu-btn { padding: 12px; }

/* Active state — always applied */
.menu-btn.active {
    background: var(--hover-bg-primary);
    border-right: solid 2px var(--hover-color);
    color: var(--hover-color) !important;
}

/* Hover/focus — pointer devices only (prevents sticky-hover on touch). */
@media (hover: hover) {
    .menu-btn:hover { background: var(--hover-bg-primary); color: var(--hover-color) !important; border-right: solid 2px var(--hover-color); }
}
.menu-btn:focus-visible { background: var(--hover-bg-primary); color: var(--hover-color) !important; border-right: solid 2px var(--hover-color); outline: none; }

/* — Crypto-type split rows (mobile/tablet) — */
.crypto-type-item {
    display: flex;
    align-items: stretch;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    border-right: solid 2px transparent;
    transition: all var(--transition-speed) var(--ease);
}

.crypto-type-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: var(--font-nav);
    font-weight: 300;
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-speed) var(--ease);
}

.crypto-type-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background: none;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--transition-speed) var(--ease),
                background var(--transition-speed) var(--ease);
}

/* Hover/focus on the whole row — covers both link-only and split-chevron items. */
@media (hover: hover) {
    .crypto-type-item:hover { background: var(--hover-bg-primary); }
    .crypto-type-item:hover .crypto-type-link,
    .crypto-type-item:hover .crypto-type-chevron { color: var(--hover-color) !important; }
}
.crypto-type-item:focus-within .crypto-type-link,
.crypto-type-item:focus-within .crypto-type-chevron { color: var(--hover-color); }
.crypto-type-item:focus-within { background: var(--hover-bg-primary); }

.crypto-type-chevron::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    flex-shrink: 0;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* — Product category split rows (col-1, mobile/tablet) — */
.product-cat-item {
    display: flex;
    align-items: stretch;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    border-right: solid 2px transparent;
    transition: all var(--transition-speed) var(--ease);
}

.product-cat-link {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: var(--font-nav);
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-speed) var(--ease);
}

.product-cat-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background: none;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--transition-speed) var(--ease),
                background var(--transition-speed) var(--ease);
}

/* Hover/focus on the whole row — covers both link-only and split-chevron items. */
@media (hover: hover) {
    .product-cat-item:hover { background: var(--hover-bg-primary); }
    .product-cat-item:hover .product-cat-link,
    .product-cat-item:hover .product-cat-chevron { color: var(--hover-color); }
}
.product-cat-item:focus-within { background: var(--hover-bg-primary); }
.product-cat-item:focus-within .product-cat-link,
.product-cat-item:focus-within .product-cat-chevron { color: var(--hover-color); }

.product-cat-chevron::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    flex-shrink: 0;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* — Crypto-type buttons (col-2, desktop) — */

.col-2 .menu-btn:hover,
.col-2 .menu-btn.active { background: var(--hover-bg-secondary)!important; }

.mm-icon {
    fill: currentColor;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

.crypto-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* ============================================================
   PRODUCTS — PER-CRYPTO-TYPE COLORS (desktop)
   ============================================================ */
.col-2 .menu-btn[data-crypto="pqc"]:hover,
.col-2 .menu-btn[data-crypto="pqc"].active         { color: #19CAE6!important; border-right-color: #19CAE6; }
.col-2 .menu-btn[data-crypto="aes"]:hover,
.col-2 .menu-btn[data-crypto="aes"].active         { color: #3F869B!important; border-right-color: #3F869B; }
.col-2 .menu-btn[data-crypto="hmac"]:hover,
.col-2 .menu-btn[data-crypto="hmac"].active        { color: #0799CB!important; border-right-color: #0799CB; }
.col-2 .menu-btn[data-crypto="ecc"]:hover,
.col-2 .menu-btn[data-crypto="ecc"].active         { color: #747CBC!important; border-right-color: #747CBC; }
.col-2 .menu-btn[data-crypto="cryptoboxes"]:hover,
.col-2 .menu-btn[data-crypto="cryptoboxes"].active { color: #1BA2B4!important; border-right-color: #1BA2B4; }
.col-2 .menu-btn[data-crypto="roots"]:hover,
.col-2 .menu-btn[data-crypto="roots"].active       { color: #864EA6!important; border-right-color: #864EA6; }

/* ============================================================
   PRODUCTS — ACCORDIONS & CRYPTO SECTIONS
   ============================================================ */
.accordion-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

.crypto-section          { display: none; height: 100%; }
.crypto-section.active   { display: block; }

.crypto-section[data-crypto-section] {
    background-color: var(--hover-bg-secondary);
    padding: 12px;
    border-radius: var(--radius-lg);
}

/* Square the corner adjacent to the active first/last crypto-type item */
.products-grid:has(.col-2 .menu-btn[data-crypto="pqc"].active)   .crypto-section.active { border-top-left-radius: 0; }
.products-grid:has(.col-2 .menu-btn[data-crypto="roots"].active) .crypto-section.active { border-bottom-left-radius: 0; }

.accordion {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.acc-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-xs);
    font-weight: 300;
    text-align: left;
    color: var(--text-primary);
    border-radius: var(--radius-md)!important;
    transition: background var(--transition-speed) var(--ease);
}

@media (hover: hover) {
    .acc-header:hover { background: var(--hover-bg-primary); color: var(--hover-color); }
}
.acc-header:focus-visible { background: var(--hover-bg-primary); color: var(--hover-color); outline: none; }

.acc-icon {
    flex-shrink: 0;
    transition: transform var(--transition-speed) var(--ease);
}

.accordion.active .acc-icon { transform: rotate(180deg); }

.acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-in-out;
}

.accordion.active .acc-body {
    max-height: 1000px; /* fallback; JS overrides inline with scrollHeight */
}

.link-list {
    list-style: none;
    padding: 0 20px 0 32px;
}

.link-list a {
    color: var(--text-primary) !important;
    text-decoration: none;
    font-size: var(--font-xs);
    display: block;
    padding: 3px 6px;
    margin: 0 -6px;
    border-radius: var(--radius-sm);
    transition: color var(--transition-speed) var(--ease),
                background var(--transition-speed) var(--ease);
}

@media (hover: hover) {
    .link-list a:hover { color: var(--hover-color) !important; background: var(--hover-bg-primary); }
}
.link-list a:focus-visible { color: var(--hover-color) !important; background: var(--hover-bg-primary); outline: none; }

.desc-text {
    font-size: var(--font-body);
    line-height: 1.7;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    max-width: 60%;
}

/* ============================================================
   SHARED CONTENT COMPONENTS — Cards, Grids
   ============================================================ */
.card-grid { display: grid; gap: 0; }
.card-grid.grid-2-cols { grid-template-columns: repeat(2, 1fr); }

.card-grid p {
    margin: 0;
}

.info-card {
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0.75rem;
    text-decoration: none;
    transition: all var(--transition-speed) var(--ease);
    cursor: pointer;
}

/* Scoped to .mega-menu to reach specificity 0,3,0 — beats the reset guard's .mega-menu a:hover at 0,2,1 */
.mega-menu .info-card:hover    { background-color: var(--hover-bg-secondary) !important; color: var(--text-primary) !important; }
.mega-menu .info-card:hover h3 { font-weight: 400; }

.info-card h3 {
    font-size: var(--font-nav);
    font-weight: 300;
    line-height: 1.16;
    color: var(--text-primary);
}

.info-card p {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    line-height: 1.3;
}

/* Applications grid */
.apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-auto-flow: column;
}

.app-card {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 0 12px;
    align-items: start;
    padding: 8px;
    text-decoration: none;
    transition: all var(--transition-speed) var(--ease);
    border-radius: var(--radius-xl);
}

.app-card:hover { background: var(--hover-bg-primary); }

.app-card .app-card-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    grid-row: 1 / 3;
    color: var(--text-primary);
    transition: color var(--transition-speed) var(--ease);
}

.app-card .app-card-icon svg { width: 32px; height: 32px; }

.app-card:hover .app-card-icon { color: var(--hover-color); }

.app-card .app-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 5px;
}

.app-card h4 {
    font-size: var(--font-nav);
    font-weight: 400;
    line-height: 1.16;
    color: var(--text-primary);
    transition: color var(--transition-speed) var(--ease);
}

.app-card:hover h4 { color: var(--hover-color); }

.app-card p {
    font-size: var(--font-xs);
    font-weight: 300;
    line-height: 1.16;
    color: var(--text-secondary);
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* ============================================================
   SIDEBAR PANELS — Insights / Newsroom / Company
   ============================================================ */
.sidebar-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width, 242px) 1fr;
    gap: 0;
}

.sidebar .menu-list {
    display: flex;
    flex-direction: column;
}

.sidebar .menu-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.sidebar .menu-btn .sidebar-icon     { width: 32px; height: 32px; flex-shrink: 0; }
.sidebar .menu-btn .sidebar-icon svg { width: 32px; height: 32px; color: inherit; }

.content-panel {
    position: relative;
    padding: 1.25rem 2rem;
    background-color: var(--content-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Square the corner adjacent to the active first/last sidebar item */
.sidebar-layout:has(.sidebar li:first-child .menu-btn.active) .content-panel { border-top-left-radius: 0; }
.sidebar-layout:has(.sidebar li:last-child  .menu-btn.active) .content-panel { border-bottom-left-radius: 0; }

/* Tab content panels */
.tab-content        { display: none; animation: fadeIn 0.3s var(--ease); }
.tab-content.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.text-content { position: relative; z-index: 2; }

.text-content p {
    font-size: var(--font-body);
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    max-width: 60%;
}

.learn-more-btn {
    display: inline-block;
    background: var(--hover-color);
    color: white!important;
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-size: var(--font-sm);
    font-weight: 500;
    transition: background var(--transition-speed) var(--ease),
                color var(--transition-speed) var(--ease);
    border: 2px solid var(--hover-color);
    white-space: nowrap;
    text-align: center;
    line-height: 1.16;
    padding: 6px 24px;
}

.learn-more-btn:hover {
    background: white;
    color: var(--hover-color)!important;
}

/* Background images — sidebar panels & col-3 */
.bg-image {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
    z-index: 1;
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}

.bg-image.active { opacity: 1; }

/* ============================================================
   MOBILE / TABLET MENU
   ============================================================ */
.mobile-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 999;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease);
    display: flex;
    flex-direction: column;
}

.mobile-menu.active { transform: translateX(0); }

.mobile-header { display: none; }

.mobile-close {
    background: none;
    border: none;
    font-size: 2.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-primary);
    padding: 8px;
}

.mobile-breadcrumb {
    padding: 24px 1rem 0;
    display: none;
}

.mobile-breadcrumb.active { display: flex; }

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 6px 8px;
    font-size: 1rem;
    font-weight: 400;
    border-radius: var(--radius-md)!important;
    transition: background var(--transition-speed) var(--ease);
}

.breadcrumb-item:hover { background: var(--hover-bg); }
.breadcrumb-item:hover .breadcrumb-chevron,
.breadcrumb-item:hover span { color: var(--hover-color); }

.breadcrumb-item .breadcrumb-chevron { flex-shrink: 0; color: var(--text-primary); }

.mobile-content { flex: 1; overflow: hidden; }

/* iOS-style slide animations */
@keyframes slideInRight {
    from { transform: translateX(30%);  opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-30%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.slide-in-right { animation: slideInRight 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
.slide-in-left  { animation: slideInLeft  0.3s cubic-bezier(0.25, 0.1, 0.25, 1) both; }

.mobile-nav-col,
.mobile-detail-col {
    height: 100%;
    overflow-y: auto;
    padding: 1rem;
}

.mobile-nav-col .menu-list,
.mobile-detail-col .menu-list { list-style: none; }

.mobile-nav-col .menu-btn,
.mobile-detail-col .menu-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 16px 4px;
    font-size: 1rem;
    color: var(--text-primary);
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-nav-col .menu-btn:after,
.mobile-detail-col .menu-btn[data-has-children]:after {
    content: '›';
    font-size: 1.8rem;
    color: inherit;
}

.mobile-nav-col .menu-btn.active { background: var(--hover-bg); }

.mobile-detail-col .link-item {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.mobile-detail-col .link-item a {
    color: var(--text-primary);
    text-decoration: none;
    display: block;
}

/* Tablet/mobile card grids */
.tablet-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 8px 20px;
}

.tablet-card-grid--single { grid-template-columns: 1fr; }
/* .tablet-card-grid--apps   { grid-template-columns: repeat(2, 1fr); } */

.tablet-app-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text-primary);
    border-radius: var(--radius-lg);
    transition: all var(--transition-speed) var(--ease);
}

@media (hover: hover) {
    .tablet-app-card:hover { background: var(--hover-bg-primary); color: var(--hover-color); }
}
.tablet-app-card:focus-visible { background: var(--hover-bg-primary); color: var(--hover-color); outline: none; }

.tablet-app-card--detail { align-items: flex-start; }

.tablet-card-icon     { width: 24px; height: auto; flex-shrink: 0; }
.tablet-card-icon svg { width: 24px; height: 24px; }

.tablet-card-title {
    font-size: var(--font-body);
    font-weight: 400;
}

.tablet-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tablet-card-desc {
    font-size: var(--font-xs);
    font-weight: 300;
    line-height: 1.4;
    color: var(--text-secondary);
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tablet-info-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all var(--transition-speed) var(--ease);
}

@media (hover: hover) {
    .tablet-info-card:hover    { background: var(--hover-bg-primary); }
    .tablet-info-card:hover h3 { color: var(--hover-color); }
}
.tablet-info-card:focus-visible    { background: var(--hover-bg-primary); outline: none; }
.tablet-info-card:focus-visible h3 { color: var(--hover-color); }

.tablet-info-card h3 {
    font-size: var(--font-sm);
    font-weight: 300;
    color: var(--text-primary);
    transition: color var(--transition-speed) var(--ease);
}

.tablet-info-card p {
    font-size: var(--font-xs);
    font-weight: 300;
    line-height: 1.4;
    color: var(--text-secondary);
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mobile-menu-footer {
    display: none;
    padding: 1rem 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.mobile-menu-footer .contact-btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* — ≤ 1024px: hide desktop nav, show hamburger — */
@media (max-width: 1024px) {
    .desktop-nav { display: none; }

    .hamburger {
        display: flex;
    }

    .mega-menu,
    .mega-menu-overlay { display: none; }

    .mobile-menu { display: flex; }
}

/* — 768–1024px: tablet two-column menu — */
@media (min-width: 768px) and (max-width: 1024px) {
    :root { --header-height: 60px; }

    .hamburger {
        width: var(--header-height);
        height: var(--header-height);
        border-radius: 0;
    }

    .hamburger span { left: 19px; }
    .hamburger span:nth-child(1) { top: 23px; }
    .hamburger span:nth-child(2) { top: 30px; }
    .hamburger span:nth-child(3) { top: 37px; }

    .hamburger[aria-expanded="true"] span:nth-child(1) { top: 30px; }
    .hamburger[aria-expanded="true"] span:nth-child(3) { top: 30px; }

    .mobile-menu {
        bottom: auto;
        transform: translateY(-20px);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    }

    .mobile-menu.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-content {
        display: grid;
        grid-template-columns: auto 1fr;
        padding: 24px;
    }

    .mobile-nav-col {
        border-right: none;
        padding: 0;
    }

    .mobile-detail-col {
        padding: 8px 0;
        background-color: var(--content-bg);
        border-radius: var(--radius-xl);
        overflow: hidden;
    }

    /* Square the corner adjacent to the active first/last nav item */
    .mobile-content:has(.mobile-nav-col li:first-child .menu-btn.active) .mobile-detail-col { border-top-left-radius: 0; }
    .mobile-content:has(.mobile-nav-col li:last-child  .menu-btn.active) .mobile-detail-col { border-bottom-left-radius: 0; }

    /* Square the corner adjacent to the active first/last crypto-type item */
    .mobile-content:has(.mobile-nav-col .crypto-type-item[data-crypto="pqc"].active)   .mobile-detail-col { border-top-left-radius: 0; }
    .mobile-content:has(.mobile-nav-col .crypto-type-item[data-crypto="roots"].active) .mobile-detail-col { border-bottom-left-radius: 0; }

    .mobile-nav-col .menu-btn,
    .mobile-detail-col .menu-btn {
        padding: 12px 36px 12px 12px;
        font-size: 1rem;
        border-bottom: none;
        border-radius: var(--radius-xl) 0 0 var(--radius-xl);
        justify-content: flex-start;
        border-right: solid 2px white;
    }

    .mobile-detail-col .menu-btn,
    .mobile-detail-col .crypto-type-link {
        padding-left: 32px;
        color: var(--text-primary);
    }

    @media (hover: hover) {
        .mobile-detail-col .menu-btn:hover { background: var(--hover-bg-primary); color: var(--hover-color) !important; }
    }

    /* Suppress mobile › chevron in left nav col */
    .mobile-nav-col .menu-btn:after { content: none; }

    /* Right-pointing chevron for second-column navigable items */
    .mobile-detail-col .menu-btn[data-has-children]::after {
        content: '';
        color: inherit;
        display: block;
        width: 12px;
        height: 12px;
        background-color: currentColor;
        margin-left: auto;
        flex-shrink: 0;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
    }

    .mobile-detail-col .menu-btn[data-has-children] { padding-right: 16px; }

    /* Tablet crypto-type split rows */
    .mobile-nav-col .crypto-type-item,
    .mobile-detail-col .crypto-type-item {
        border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    }
    .mobile-nav-col .crypto-type-item    { border-right: solid 2px white; }
    .mobile-detail-col .crypto-type-item { border-right-color: transparent; }

    .mobile-nav-col .crypto-type-link {
        padding: 12px;
        font-size: 1rem;
    }
    .mobile-nav-col .crypto-type-chevron,
    .mobile-detail-col .crypto-type-chevron { padding: 0 20px; color: var(--text-primary); background-color: transparent; }
    @media (hover: hover) {
        /* Row-level hover is handled by the base .crypto-type-item:hover rules above. */
        .mobile-detail-col .crypto-type-chevron:hover { color: var(--hover-color); background: var(--hover-bg-primary); }
    }

    /* Tablet product-category split rows */
    .mobile-nav-col .product-cat-item,
    .mobile-detail-col .product-cat-item {
        border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    }
    .mobile-nav-col .product-cat-item    { border-right: solid 2px white; }
    .mobile-detail-col .product-cat-item { border-right-color: transparent; }

    .mobile-nav-col .product-cat-link,
    .mobile-detail-col .product-cat-link { padding: 12px 12px 12px 32px; font-size: 1rem; color: var(--text-primary); }
    .mobile-nav-col .product-cat-link { padding: 12px; }
    .mobile-nav-col .product-cat-chevron,
    .mobile-detail-col .product-cat-chevron { padding: 0 20px; color: var(--text-primary); background-color: transparent; }
    @media (hover: hover) {
        /* Row-level hover is handled by the base .product-cat-item:hover rules above. */
        .mobile-detail-col .product-cat-link:hover { color: var(--hover-color); }
        .mobile-nav-col .product-cat-link:hover    { padding: 12px; color: var(--hover-color); }
        .mobile-nav-col .product-cat-chevron:hover,
        .mobile-detail-col .product-cat-chevron:hover { color: var(--hover-color); background: var(--hover-bg-primary); }
    }

    /* Active state — product-category row */
    .mobile-nav-col .product-cat-item.active,
    .mobile-detail-col .product-cat-item.active {
        background: var(--hover-bg-primary);
        border-right-color: var(--hover-color);
    }
    .mobile-nav-col .product-cat-item.active .product-cat-link,
    .mobile-nav-col .product-cat-item.active .product-cat-chevron,
    .mobile-detail-col .product-cat-item.active .product-cat-link,
    .mobile-detail-col .product-cat-item.active .product-cat-chevron {
        color: var(--hover-color);
        font-weight: 400;
    }

    @media (hover: hover) {
        .mobile-nav-col .menu-btn:hover,
        .mobile-detail-col .menu-btn:hover { background: var(--hover-bg-primary); color: var(--hover-color); }
        .mobile-nav-col .menu-btn:hover    { border-right: solid 2px var(--hover-color); }
        .mobile-detail-col .menu-btn:hover { border-right-color: transparent; }
    }

    .mobile-nav-col .menu-btn.active,
    .mobile-detail-col .menu-btn.active {
        background: var(--hover-bg-primary);
        color: var(--hover-color);
        font-weight: 400;
    }

    /* Active state — nav-col crypto-type row */
    .mobile-nav-col .crypto-type-item.active {
        background: var(--hover-bg-primary);
        border-right-color: var(--hover-color);
    }
    .mobile-nav-col .crypto-type-item.active .crypto-type-link,
    .mobile-nav-col .crypto-type-item.active .crypto-type-chevron {
        color: var(--hover-color);
        font-weight: 400;
    }

    /* Per-crypto-type active colors (tablet nav-col) */
    .mobile-nav-col .crypto-type-item[data-crypto="pqc"].active         { border-right-color: #19CAE6; }
    .mobile-nav-col .crypto-type-item[data-crypto="pqc"].active .crypto-type-link,
    .mobile-nav-col .crypto-type-item[data-crypto="pqc"].active .crypto-type-chevron { color: #19CAE6; }
    .mobile-nav-col .crypto-type-item[data-crypto="aes"].active         { border-right-color: #3F869B; }
    .mobile-nav-col .crypto-type-item[data-crypto="aes"].active .crypto-type-link,
    .mobile-nav-col .crypto-type-item[data-crypto="aes"].active .crypto-type-chevron { color: #3F869B; }
    .mobile-nav-col .crypto-type-item[data-crypto="hmac"].active        { border-right-color: #0799CB; }
    .mobile-nav-col .crypto-type-item[data-crypto="hmac"].active .crypto-type-link,
    .mobile-nav-col .crypto-type-item[data-crypto="hmac"].active .crypto-type-chevron { color: #0799CB; }
    .mobile-nav-col .crypto-type-item[data-crypto="ecc"].active         { border-right-color: #747CBC; }
    .mobile-nav-col .crypto-type-item[data-crypto="ecc"].active .crypto-type-link,
    .mobile-nav-col .crypto-type-item[data-crypto="ecc"].active .crypto-type-chevron { color: #747CBC; }
    .mobile-nav-col .crypto-type-item[data-crypto="cryptoboxes"].active { border-right-color: #1BA2B4; }
    .mobile-nav-col .crypto-type-item[data-crypto="cryptoboxes"].active .crypto-type-link,
    .mobile-nav-col .crypto-type-item[data-crypto="cryptoboxes"].active .crypto-type-chevron { color: #1BA2B4; }
    .mobile-nav-col .crypto-type-item[data-crypto="roots"].active       { border-right-color: #864EA6; }
    .mobile-nav-col .crypto-type-item[data-crypto="roots"].active .crypto-type-link,
    .mobile-nav-col .crypto-type-item[data-crypto="roots"].active .crypto-type-chevron { color: #864EA6; }

    /* Per-crypto-type hover colors (tablet nav-col) */
    @media (hover: hover) {
        .mobile-nav-col .crypto-type-item[data-crypto="pqc"]:hover         { border-right-color: #19CAE6; }
        .mobile-nav-col .crypto-type-item[data-crypto="pqc"]:hover .crypto-type-link,
        .mobile-nav-col .crypto-type-item[data-crypto="pqc"]:hover .crypto-type-chevron { color: #19CAE6 !important; }
        .mobile-nav-col .crypto-type-item[data-crypto="aes"]:hover         { border-right-color: #3F869B; }
        .mobile-nav-col .crypto-type-item[data-crypto="aes"]:hover .crypto-type-link,
        .mobile-nav-col .crypto-type-item[data-crypto="aes"]:hover .crypto-type-chevron { color: #3F869B !important; }
        .mobile-nav-col .crypto-type-item[data-crypto="hmac"]:hover        { border-right-color: #0799CB; }
        .mobile-nav-col .crypto-type-item[data-crypto="hmac"]:hover .crypto-type-link,
        .mobile-nav-col .crypto-type-item[data-crypto="hmac"]:hover .crypto-type-chevron { color: #0799CB !important; }
        .mobile-nav-col .crypto-type-item[data-crypto="ecc"]:hover         { border-right-color: #747CBC; }
        .mobile-nav-col .crypto-type-item[data-crypto="ecc"]:hover .crypto-type-link,
        .mobile-nav-col .crypto-type-item[data-crypto="ecc"]:hover .crypto-type-chevron { color: #747CBC !important; }
        .mobile-nav-col .crypto-type-item[data-crypto="cryptoboxes"]:hover { border-right-color: #1BA2B4; }
        .mobile-nav-col .crypto-type-item[data-crypto="cryptoboxes"]:hover .crypto-type-link,
        .mobile-nav-col .crypto-type-item[data-crypto="cryptoboxes"]:hover .crypto-type-chevron { color: #1BA2B4 !important; }
        .mobile-nav-col .crypto-type-item[data-crypto="roots"]:hover       { border-right-color: #864EA6; }
        .mobile-nav-col .crypto-type-item[data-crypto="roots"]:hover .crypto-type-link,
        .mobile-nav-col .crypto-type-item[data-crypto="roots"]:hover .crypto-type-chevron { color: #864EA6 !important; }
    }

    .mobile-nav-col  .menu-btn.active  { border-right: solid 2px var(--hover-color); }
    .mobile-detail-col .menu-btn.active { border-right-color: transparent; }

    /* Active state — detail-col crypto-type row */
    .mobile-detail-col .crypto-type-item.active { background: var(--hover-bg-secondary); }

    /* Per-crypto-type active colors (tablet detail-col) */
    .mobile-detail-col .crypto-type-item[data-crypto="pqc"].active .crypto-type-link,
    .mobile-detail-col .crypto-type-item[data-crypto="pqc"].active .crypto-type-chevron         { color: #19CAE6; }
    .mobile-detail-col .crypto-type-item[data-crypto="aes"].active .crypto-type-link,
    .mobile-detail-col .crypto-type-item[data-crypto="aes"].active .crypto-type-chevron         { color: #3F869B; }
    .mobile-detail-col .crypto-type-item[data-crypto="hmac"].active .crypto-type-link,
    .mobile-detail-col .crypto-type-item[data-crypto="hmac"].active .crypto-type-chevron        { color: #0799CB; }
    .mobile-detail-col .crypto-type-item[data-crypto="ecc"].active .crypto-type-link,
    .mobile-detail-col .crypto-type-item[data-crypto="ecc"].active .crypto-type-chevron         { color: #747CBC; }
    .mobile-detail-col .crypto-type-item[data-crypto="cryptoboxes"].active .crypto-type-link,
    .mobile-detail-col .crypto-type-item[data-crypto="cryptoboxes"].active .crypto-type-chevron { color: #1BA2B4; }
    .mobile-detail-col .crypto-type-item[data-crypto="roots"].active .crypto-type-link,
    .mobile-detail-col .crypto-type-item[data-crypto="roots"].active .crypto-type-chevron       { color: #864EA6; }

    /* Per-crypto-type hover colors (tablet detail-col) */
    @media (hover: hover) {
        .mobile-detail-col .crypto-type-item[data-crypto="pqc"]:hover .crypto-type-link,
        .mobile-detail-col .crypto-type-item[data-crypto="pqc"]:hover .crypto-type-chevron         { color: #19CAE6 !important; }
        .mobile-detail-col .crypto-type-item[data-crypto="aes"]:hover .crypto-type-link,
        .mobile-detail-col .crypto-type-item[data-crypto="aes"]:hover .crypto-type-chevron         { color: #3F869B !important; }
        .mobile-detail-col .crypto-type-item[data-crypto="hmac"]:hover .crypto-type-link,
        .mobile-detail-col .crypto-type-item[data-crypto="hmac"]:hover .crypto-type-chevron        { color: #0799CB !important; }
        .mobile-detail-col .crypto-type-item[data-crypto="ecc"]:hover .crypto-type-link,
        .mobile-detail-col .crypto-type-item[data-crypto="ecc"]:hover .crypto-type-chevron         { color: #747CBC !important; }
        .mobile-detail-col .crypto-type-item[data-crypto="cryptoboxes"]:hover .crypto-type-link,
        .mobile-detail-col .crypto-type-item[data-crypto="cryptoboxes"]:hover .crypto-type-chevron { color: #1BA2B4 !important; }
        .mobile-detail-col .crypto-type-item[data-crypto="roots"]:hover .crypto-type-link,
        .mobile-detail-col .crypto-type-item[data-crypto="roots"]:hover .crypto-type-chevron       { color: #864EA6 !important; }
    }

    .mobile-detail-col .accordion-list {
        border-radius: var(--radius-lg);
        padding: 12px;
    }

    .tablet-card-grid--apps   { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(8, auto); grid-auto-flow: column; }
    .tablet-card-grid--single { grid-template-columns: 1fr 1fr; }
    .acc-header { padding: 0.875rem 2rem; }
    .link-list a { padding: 10px 24px; }
}


/* — < 768px: mobile full-screen menu — */
@media (max-width: 767px) {
    :root { --header-height: 60px; }

    .hamburger {
        width: 60px;
        height: 60px;
    }

    .hamburger span { left: 19px; }
    .hamburger span:nth-child(1) { top: 23px; }
    .hamburger span:nth-child(2) { top: 30px; }
    .hamburger span:nth-child(3) { top: 37px; }

    .hamburger[aria-expanded="true"] span:nth-child(1) { top: 30px; }
    .hamburger[aria-expanded="true"] span:nth-child(3) { top: 30px; }

    .mobile-menu-footer { display: block; }

    .mobile-content { position: relative; }

    .mobile-nav-col,
    .mobile-detail-col {
        position: absolute;
        inset: 0;
        background: white;
        transition: transform 0.3s var(--ease);
    }

    .mobile-nav-col               { transform: translateX(0); }
    .mobile-nav-col.hidden        { transform: translateX(-100%); }
    .mobile-detail-col            { transform: translateX(100%); }
    .mobile-detail-col.active     { transform: translateX(0); }

    .mobile-nav-col .menu-btn,
    .mobile-detail-col .menu-btn {
        background: none;
        border-bottom: 1px solid #EBF1F8;
        border-radius: 0;
        line-height: 1.2;
    }

    .mobile-nav-col .menu-btn.active { background: none; }

    /* Mobile crypto-type rows: flat, border-based, no radius */
    .mobile-detail-col .crypto-type-item {
        border-radius: 0;
        border-right: none;
        border-bottom: 1px solid #EBF1F8;
    }
    .mobile-detail-col .crypto-type-link  { padding: 12px 12px 12px 4px; font-size: 1rem; }
    .mobile-detail-col .crypto-type-chevron { border-left-color: #EBF1F8; padding: 0 16px; border-radius: 0; }
    @media (hover: hover) {
        .mobile-detail-col .crypto-type-chevron:hover { color: var(--hover-color); }
        /* Per-crypto-type hover colors (mobile detail-col) */
        .mobile-detail-col .crypto-type-item[data-crypto="pqc"]:hover .crypto-type-link,
        .mobile-detail-col .crypto-type-item[data-crypto="pqc"]:hover .crypto-type-chevron         { color: #19CAE6 !important; }
        .mobile-detail-col .crypto-type-item[data-crypto="aes"]:hover .crypto-type-link,
        .mobile-detail-col .crypto-type-item[data-crypto="aes"]:hover .crypto-type-chevron         { color: #3F869B !important; }
        .mobile-detail-col .crypto-type-item[data-crypto="hmac"]:hover .crypto-type-link,
        .mobile-detail-col .crypto-type-item[data-crypto="hmac"]:hover .crypto-type-chevron        { color: #0799CB !important; }
        .mobile-detail-col .crypto-type-item[data-crypto="ecc"]:hover .crypto-type-link,
        .mobile-detail-col .crypto-type-item[data-crypto="ecc"]:hover .crypto-type-chevron         { color: #747CBC !important; }
        .mobile-detail-col .crypto-type-item[data-crypto="cryptoboxes"]:hover .crypto-type-link,
        .mobile-detail-col .crypto-type-item[data-crypto="cryptoboxes"]:hover .crypto-type-chevron { color: #1BA2B4 !important; }
        .mobile-detail-col .crypto-type-item[data-crypto="roots"]:hover .crypto-type-link,
        .mobile-detail-col .crypto-type-item[data-crypto="roots"]:hover .crypto-type-chevron       { color: #864EA6 !important; }
    }

    /* Mobile product-category rows: flat, border-based, no radius */
    .mobile-detail-col .product-cat-item,
    .mobile-nav-col .product-cat-item {
        border-radius: 0;
        border-right: none;
        border-bottom: 1px solid #EBF1F8;
    }
    .mobile-detail-col .product-cat-link,
    .mobile-nav-col .product-cat-link { padding: 12px 12px 12px 4px; font-size: 1rem; }
    .mobile-detail-col .product-cat-link:hover,
    .mobile-nav-col .product-cat-link:hover { color: var(--hover-color); }
    .mobile-detail-col .product-cat-chevron,
    .mobile-nav-col .product-cat-chevron { border-left-color: #EBF1F8; padding: 0 16px; border-radius: 0;}
    .mobile-detail-col .product-cat-chevron:hover,
    .mobile-nav-col .product-cat-chevron:hover { color: var(--hover-color); }

    .tablet-card-grid {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .tablet-app-card,
    .tablet-app-card--detail {
        background: none;
        border-bottom: 1px solid #EBF1F8;
        border-radius: 0;
        padding: 16px 4px;
    }

    @media (hover: hover) {
        .tablet-app-card:hover,
        .tablet-app-card--detail:hover { background: none; }

        .tablet-app-card:hover .tablet-card-title,
        .tablet-app-card--detail:hover .tablet-card-title,
        .tablet-app-card:hover .tablet-card-icon,
        .tablet-app-card--detail:hover .tablet-card-icon { color: var(--hover-color); }
    }

    .tablet-info-card {
        background: none;
        border-bottom: 1px solid #EBF1F8;
        border-radius: 0;
        padding: 14px 20px;
    }

    @media (hover: hover) {
        .tablet-info-card:hover { background: none; }
    }

    .mobile-detail-col .link-item            { border-bottom: 1px solid #EBF1F8; }
    .mobile-detail-col .link-list li         { border-bottom: 1px solid #EBF1F8; }
    .mobile-detail-col .link-list li:last-child { border-bottom: none; }
    .mobile-detail-col .link-list a          { padding: 16px 0; }

    .mobile-detail-col .accordion {
        border-bottom: 1px solid #EBF1F8;
        margin-bottom: 0;
        border-radius: 0;
    }

    .mobile-detail-col .accordion-list {
        background: none;
        border-radius: 0;
        padding: 0;
    }

    .acc-header { padding: 12px; }
    .link-list  { padding: 0 0 12px 20px; }
}

/* ============================================================
   UTILITIES & ACCESSIBILITY
   ============================================================ */
button:focus-visible,
a:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

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

.hidden    { display: none !important; }

/* Suppress all menu transitions while the browser window is being resized.
   Prevents the mobile-menu from animating between its translateX(100%) (mobile)
   and translateY(-20px) (tablet) states as breakpoints are crossed mid-drag. */
.is-resizing .mobile-menu,
.is-resizing .mega-menu,
.is-resizing .mega-menu-overlay { transition: none !important; }
.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    /* top is set dynamically by lockScroll() to preserve scroll position on iOS */
}

/* ============================================================
   SEARCH — TOGGLE BUTTONS
   ============================================================ */

/* Shared base for both desktop and mobile toggle */
.search-toggle,
.search-toggle--mobile {
    width: var(--search-field-height);
    height: var(--search-field-height);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    padding: 0;
    transition: background var(--transition-speed) var(--ease);
}

/* Orange background while search is open */
.search-toggle[aria-expanded="true"],
.search-toggle--mobile[aria-expanded="true"] {
    background: var(--hover-color);
}

/* (hover: hover) alone incorrectly matches iPads — add (pointer: fine) to
   restrict these states to true mouse/trackpad devices only. */
@media (hover: hover) and (pointer: fine) {
    .search-toggle:hover,
    .search-toggle--mobile:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    .search-toggle:focus-visible,
    .search-toggle--mobile:focus-visible {
        background: rgba(255, 255, 255, 0.22);
    }

    .search-toggle[aria-expanded="true"]:hover,
    .search-toggle--mobile[aria-expanded="true"]:hover {
        background: var(--hover-color);
    }
}

/* Desktop toggle lives inside .desktop-nav — hidden on mobile via parent */
/* Mobile toggle sits between logo and hamburger — hidden on desktop */
.search-toggle--mobile {
    display: none;
}

@media (max-width: 1024px) {
    .search-toggle--mobile {
        display: flex;
    }
}

/* ============================================================
   SEARCH — DESKTOP INLINE EXPANSION
   ============================================================ */

/* Search wrap: always visible — just shows the toggle when search is closed.
   When search is active: expands to fill available space and gains a pill border. */
.nav-search-wrap {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    position: relative;
    gap: 10px;
    margin: 0 1.5rem;
    padding: 3px;
    border: 1px solid transparent;
}

.desktop-nav.search-active .nav-primary {
    display: none;
}

.desktop-nav.search-active .nav-search-wrap {
    flex: 1;
    min-width: 0;
    /* height: 48px; */
    border: 1px solid #FFFFFF80;
    border-radius: var(--radius-pill);
    /* No overflow:hidden — keeps the results dropdown visible below */
}

/* Form hidden by default inside the wrap; revealed when search is active */
.nav-search-wrap .nav-search-form {
    display: none;
}

.desktop-nav.search-active .nav-search-wrap .nav-search-form {
    display: flex;
}

/* Shrink toggle to fit the 48px pill; round its right edge to match the pill */
.desktop-nav.search-active .search-toggle {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
}

/* ============================================================
   SEARCH — FORM & INPUT
   ============================================================ */

.nav-search-form {
    display: flex;
    flex: 1;
    min-width: 0;
    position: relative;
    padding: 0;
}

.nav-search-input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    border: none!important;
    border-radius: var(--radius-pill);
    background: white;
    font-size: var(--font-body);
    color: var(--text-primary);
    outline: none;
}

.nav-search-input::placeholder {
    color: #999;
}

/* ============================================================
   SEARCH — LIVE RESULTS DROPDOWN
   ============================================================ */

.nav-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    z-index: 1002;
    display: none;
    max-height: 360px;
    overflow-y: auto;
}

.nav-search-results.has-results {
    display: block;
}

.search-result-list {
    padding: 8px 6px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: background var(--transition-speed) var(--ease);
}

.search-result-item:last-child {
    border-bottom: none;
}

@media (hover: hover) {
    .search-result-item:hover {
        background: var(--hover-bg-primary);
    }
}

.search-result-item:focus-visible {
    background: var(--hover-bg-primary);
    outline: 2px solid var(--text-primary);
    outline-offset: -2px;
}

.search-result-title {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.search-result-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.search-results-footer {
    border-top: 1px solid var(--border-color);
    padding: 8px 10px;
}

.search-results-all {
    display: block;
    padding: 8px 10px;
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--hover-color);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background var(--transition-speed) var(--ease);
    text-align: center;
}

@media (hover: hover) {
    .search-results-all:hover {
        background: var(--hover-bg-primary);
        color: var(--hover-color) !important;
    }
}

/* ============================================================
   SEARCH — MOBILE/TABLET BAR (fixed panel below header)
   ============================================================ */

.mobile-search-bar {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: white;
    padding: 12px 16px;
    z-index: 1001;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    gap: 12px;
    align-items: center;
}

.mobile-search-bar.active {
    display: flex;
}

.mobile-search-bar .nav-search-form {
    padding: 0;
}

/* Full-width results: fixed to viewport, below the search bar */
.mobile-search-bar .nav-search-results {
    position: fixed;
    left: 0;
    right: 0;
    /* bar height = 12px padding-top + 48px input + 12px padding-bottom */
    top: calc(var(--header-height) + var(--search-field-height) + 24px);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Full-width results for header search on tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .desktop-nav.search-active .nav-search-results {
        position: fixed;
        left: 0;
        right: 0;
        top: calc(var(--header-height) + 8px);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }
}
/* Full-width results for header search on tablet */
@media (max-width: 1024px) {
    .nav-search-input {
        padding: 0!important;
    }
}