/* Navbar CSS copied from kikiweb; maintained independently in tools_web. */
:root {
    --kiki-day-page-bg: oklch(0.985 0.002 247);
    --kiki-day-surface: oklch(1 0 0);
    --kiki-day-surface-soft: oklch(0.97 0.005 247);
    --kiki-day-text-primary: oklch(0.21 0.02 260);
    --kiki-day-text-secondary: oklch(0.45 0.02 250);
    --kiki-day-border: oklch(0.90 0.01 250);
    --kiki-day-accent: oklch(0.65 0.14 162);

    --kiki-night-page-bg: #202522;
    --kiki-night-surface: #272e2b;
    --kiki-night-surface-soft: #303936;
    --kiki-night-surface-raised: #394440;
    --kiki-night-text-primary: #f3f7f5;
    --kiki-night-text-secondary: #c4ceca;
    --kiki-night-border: rgba(190, 205, 199, 0.36);
    --kiki-night-accent: #4adea5;

    --kiki-hc-page-bg: #000000;
    --kiki-hc-surface: #000000;
    --kiki-hc-surface-soft: #111111;
    --kiki-hc-text-primary: #ffffff;
    --kiki-hc-text-secondary: #ffffff;
    --kiki-hc-border: #ffffff;
    --kiki-hc-accent: #10b981;
    --kiki-hc-focus-ring: #6ee7b7;
}

.kiki-page-mode-control {
    position: relative;
    flex: 0 0 auto;
}

.kiki-page-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 2.75rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    box-shadow: none;
    line-height: 1;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease,
        border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.kiki-page-mode-toggle:hover {
    background: rgba(16, 185, 129, 0.08);
    box-shadow: none;
}

.kiki-page-mode-toggle:focus-visible {
    outline: 3px solid rgba(16, 185, 129, 0.3);
    outline-offset: 2px;
}

.kiki-page-mode-current-icon {
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
}

.kiki-page-mode-trigger-icon {
    display: none !important;
}

html[data-kiki-page-mode="day"] .kiki-page-mode-trigger-icon[data-kiki-mode-icon="day"],
html[data-kiki-page-mode="night"] .kiki-page-mode-trigger-icon[data-kiki-mode-icon="night"],
html[data-kiki-page-mode="high_contrast"] .kiki-page-mode-trigger-icon[data-kiki-mode-icon="high_contrast"] {
    display: block !important;
}

.kiki-page-mode-chevron {
    opacity: 0.58;
    transition: transform 160ms ease;
}

.kiki-page-mode-toggle[aria-expanded="true"] .kiki-page-mode-chevron {
    transform: rotate(180deg);
}

.kiki-page-mode-menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 80;
    display: grid;
    width: 15.75rem;
    max-width: calc(100vw - 1.5rem);
    padding: 0.4rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18), 0 3px 10px rgba(15, 23, 42, 0.08);
    color: #1f2937;
    transform-origin: top right;
    animation: kiki-page-mode-menu-in 140ms ease-out;
}

.kiki-page-mode-menu.hidden {
    display: none !important;
}

.kiki-page-mode-option {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) 1rem;
    gap: 0.65rem;
    align-items: center;
    width: 100%;
    min-height: 2.55rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    background: transparent;
    color: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: color 130ms ease, background-color 130ms ease, border-color 130ms ease;
}

.kiki-page-mode-option:hover,
.kiki-page-mode-option:focus-visible {
    border-color: rgba(16, 185, 129, 0.18);
    background: #f0fdf8;
    color: #047857;
    outline: none;
}

.kiki-page-mode-option.is-active {
    border-color: rgba(16, 185, 129, 0.26);
    background: #e9fbf4;
    color: #047857;
}

.kiki-page-mode-check {
    opacity: 0;
}

.kiki-page-mode-option.is-active .kiki-page-mode-check {
    opacity: 1;
}

@keyframes kiki-page-mode-menu-in {
    from {
        opacity: 0;
        transform: translateY(-0.25rem) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

html[data-kiki-page-mode="night"] .kiki-page-mode-toggle,
html[data-kiki-page-mode="night"] #nav-language-dropdown-btn,
html[data-kiki-page-mode="night"] #mobile-menu-button {
    color: var(--kiki-night-text-secondary) !important;
}

html[data-kiki-page-mode="night"] .kiki-page-mode-toggle {
    border: 0;
    background: transparent;
    box-shadow: none;
}

html[data-kiki-page-mode="night"] .kiki-page-mode-toggle:hover,
html[data-kiki-page-mode="night"] #nav-language-dropdown-btn:hover,
html[data-kiki-page-mode="night"] #mobile-menu-button:hover {
    color: var(--kiki-night-text-primary) !important;
}

html[data-kiki-page-mode="night"] .kiki-page-mode-toggle:hover {
    background: rgba(74, 222, 165, 0.1);
}

html[data-kiki-page-mode="night"] .kiki-page-mode-menu {
    border-color: var(--kiki-night-border);
    background: rgba(39, 46, 43, 0.98);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
    color: var(--kiki-night-text-primary);
}

html[data-kiki-page-mode="night"] .kiki-page-mode-option:hover,
html[data-kiki-page-mode="night"] .kiki-page-mode-option:focus-visible,
html[data-kiki-page-mode="night"] .kiki-page-mode-option.is-active {
    border-color: rgba(74, 222, 165, 0.26);
    background: rgba(74, 222, 165, 0.11);
    color: var(--kiki-night-accent);
}

html[data-kiki-page-mode="high_contrast"] .kiki-page-mode-toggle,
html[data-kiki-page-mode="high_contrast"] #nav-language-dropdown-btn,
html[data-kiki-page-mode="high_contrast"] #mobile-menu-button {
    color: var(--kiki-hc-text-primary) !important;
}

html[data-kiki-page-mode="high_contrast"] .kiki-page-mode-toggle {
    border: 0;
    background: transparent;
    box-shadow: none;
}

html[data-kiki-page-mode="high_contrast"] .kiki-page-mode-toggle:hover {
    background: rgba(16, 185, 129, 0.18);
}

html[data-kiki-page-mode="high_contrast"] .kiki-page-mode-toggle:focus-visible,
html[data-kiki-page-mode="high_contrast"] #nav-language-dropdown-btn:focus-visible {
    outline: 2px solid var(--kiki-hc-focus-ring);
    outline-offset: 2px;
}

.kiki-page-mode-toggle[data-kiki-pointer-focus="true"]:focus {
    outline: none !important;
}

html[data-kiki-page-mode="high_contrast"] .kiki-page-mode-menu {
    border: 2px solid var(--kiki-hc-border);
    background: #000000;
    box-shadow: none;
    color: var(--kiki-hc-text-primary);
}

html[data-kiki-page-mode="high_contrast"] .kiki-page-mode-option:hover,
html[data-kiki-page-mode="high_contrast"] .kiki-page-mode-option:focus-visible {
    border-color: var(--kiki-hc-accent);
    background: #1b1b1b;
    color: var(--kiki-hc-accent);
}

html[data-kiki-page-mode="high_contrast"] .kiki-page-mode-option.is-active {
    border-color: var(--kiki-hc-accent);
    background: var(--kiki-hc-accent);
    color: #000000;
}

@media (prefers-reduced-motion: reduce) {
    .kiki-page-mode-toggle,
    .kiki-page-mode-chevron,
    .kiki-page-mode-option {
        transition: none;
    }

    .kiki-page-mode-menu {
        animation: none;
    }
}


/* Shared product navigation. Scope all rules to the existing navbar. */
#main-navbar.kiki-products-nav {
    --nav-content-max-width: var(--tools-content-max-width); --nav-content-gutter: var(--tools-content-gutter);
    --nav-surface: var(--kiki-day-surface); --nav-soft: var(--kiki-day-surface-soft);
    --nav-text: var(--kiki-day-text-primary); --nav-muted: var(--kiki-day-text-secondary);
    --nav-panel-tint: #f0faf5;
    --nav-border: var(--kiki-day-border); --nav-accent: #087c59;
    /* Keep the original transparent-at-top / navbar-blur-on-scroll treatment. */
    background: transparent; border-bottom: 1px solid transparent;
}
/* Match the main-site navbar without inheriting tool-content typography. */
#main-navbar.tools-web-nav {
    line-height: 1.5;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}
.kiki-products-nav > div:first-of-type { max-width: var(--nav-content-max-width); padding-inline: var(--nav-content-gutter); }
@media (min-width: 1024px) { #main-navbar.kiki-products-nav { --nav-content-gutter: 32px; } }
html[data-kiki-page-mode="night"] #main-navbar.kiki-products-nav {
    --nav-surface: var(--kiki-night-surface); --nav-soft: var(--kiki-night-surface-soft);
    --nav-text: var(--kiki-night-text-primary); --nav-muted: var(--kiki-night-text-secondary);
    --nav-border: var(--kiki-night-border); --nav-accent: var(--kiki-night-accent);
    --nav-panel-tint: color-mix(in srgb, var(--nav-accent) 6%, var(--nav-surface));
}
html[data-kiki-page-mode="high_contrast"] #main-navbar.kiki-products-nav {
    --nav-surface: var(--kiki-hc-surface); --nav-soft: var(--kiki-hc-surface-soft);
    --nav-text: var(--kiki-hc-text-primary); --nav-muted: var(--kiki-hc-text-secondary);
    --nav-border: var(--kiki-hc-border); --nav-accent: var(--kiki-hc-accent);
}
/* The scrolled toolbar uses a milky surface, not blur alone. The denser fill
   keeps navigation readable while the page still shows softly underneath. */
#main-navbar.kiki-products-nav.navbar-blur {
    background: linear-gradient(180deg, rgba(255, 255, 255, .90) 0%, rgba(246, 251, 249, .82) 100%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(175%) brightness(1.03) !important;
    backdrop-filter: blur(30px) saturate(175%) brightness(1.03) !important;
    border-bottom-color: rgba(148, 163, 184, .16) !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .045), inset 0 1px 0 rgba(255, 255, 255, .78) !important;
}
html[data-kiki-page-mode="night"] #main-navbar.kiki-products-nav.navbar-blur {
    background: linear-gradient(180deg, rgba(39, 46, 43, .92) 0%, rgba(32, 37, 34, .86) 100%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(145%) brightness(.96) !important;
    backdrop-filter: blur(28px) saturate(145%) brightness(.96) !important;
    border-bottom-color: rgba(190, 205, 199, .22) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
html[data-kiki-page-mode="high_contrast"] #main-navbar.kiki-products-nav.navbar-blur {
    background: var(--kiki-hc-surface) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-bottom: 2px solid var(--kiki-hc-border) !important;
    box-shadow: none !important;
}
.kiki-products-nav .kiki-desktop-links { display: flex; align-items: center; gap: 8px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.kiki-products-nav .kiki-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 8px; color: var(--nav-muted); font-size: 16px; font-weight: 500; border-radius: 10px; line-height: 1.4; text-decoration: none; }
.kiki-products-nav .kiki-desktop-links .kiki-nav-link { white-space: nowrap; }
/* Current primary links use text color only. */
.kiki-products-nav .kiki-nav-link:hover, .kiki-products-nav .kiki-nav-link[aria-current] { color: var(--nav-accent); background: transparent; }
.kiki-products-nav .kiki-products-trigger svg { width: 16px; height: 16px; }
.kiki-products-nav .kiki-products-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.kiki-products-nav .kiki-products-panel { position: absolute; top: calc(100% + 12px); left: 0; right: 0; margin-inline: auto; width: min(calc(var(--nav-content-max-width) - 2 * var(--nav-content-gutter)), calc(100% - 2 * var(--nav-content-gutter))); max-height: calc(100dvh - 92px); overflow-y: auto; padding: 30px; border: 1px solid var(--nav-border); border-radius: 24px; background: var(--nav-surface); box-shadow: 0 24px 60px rgba(0, 50, 35, .18); }
.kiki-products-nav .kiki-products-panel[hidden] { display: none; }
.kiki-products-nav .kiki-products-panel {
    background: linear-gradient(135deg, var(--nav-surface) 0%, var(--nav-surface) 25%, var(--nav-panel-tint) 100%);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .kiki-products-nav .kiki-products-panel {
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--nav-surface) 98%, transparent) 0%,
            color-mix(in srgb, var(--nav-surface) 98%, transparent) 25%,
            color-mix(in srgb, var(--nav-panel-tint) 98%, transparent) 100%);
        -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
    }
}
/* A filtered navbar forms a backdrop root and prevents its dropdown from
   blurring the page below. While expanded, blur the toolbar on its own layer. */
@media (min-width: 1280px) {
    #main-navbar.kiki-products-nav.kiki-nav-expanded {
        -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
        transition-property: background-color, border-color, box-shadow;
    }
    html[data-kiki-page-mode="night"] #main-navbar.kiki-products-nav.kiki-nav-expanded {
        -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    }
    #main-navbar.kiki-products-nav.kiki-nav-expanded.navbar-blur::before {
        content: ""; position: absolute; inset: 0; z-index: -1 !important; pointer-events: none;
        -webkit-backdrop-filter: blur(30px) saturate(175%) brightness(1.03);
        backdrop-filter: blur(30px) saturate(175%) brightness(1.03);
    }
    html[data-kiki-page-mode="night"] #main-navbar.kiki-products-nav.kiki-nav-expanded.navbar-blur::before {
        -webkit-backdrop-filter: blur(28px) saturate(145%) brightness(.96);
        backdrop-filter: blur(28px) saturate(145%) brightness(.96);
    }
    html[data-kiki-page-mode="high_contrast"] #main-navbar.kiki-products-nav.kiki-nav-expanded::before { content: none; }
}
html[data-kiki-page-mode="high_contrast"] .kiki-products-nav .kiki-products-panel {
    background: var(--nav-surface); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.kiki-products-nav .kiki-products-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 24px; }
.kiki-products-nav .kiki-products-heading > div:first-child { min-width: 0; }
.kiki-products-nav .kiki-products-welcome { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 8px; }
.kiki-products-nav .kiki-products-mascot { width: 64px; height: 64px; flex: 0 0 auto; }
.kiki-products-nav .kiki-products-mascot img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: center 75%; transition: transform 240ms ease; }
@media (hover: hover) and (pointer: fine) {
    .kiki-products-nav .kiki-products-mascot:hover img { transform: translateY(-2px) rotate(-3deg) scale(1.04); }
}
.kiki-products-nav .kiki-products-heading h2 { font-size: 23px; font-weight: 750; line-height: 1.4; color: var(--nav-text); }
.kiki-products-nav .kiki-products-heading p { margin-top: 6px; color: var(--nav-muted); }
.kiki-products-nav .kiki-products-note { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 24px; background: var(--nav-soft); color: var(--nav-muted); font-size: 12px; line-height: 1.4; white-space: nowrap; }
.kiki-products-nav .kiki-products-note svg { width: 16px; height: 16px; color: var(--nav-accent); }
.kiki-products-nav .kiki-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.kiki-products-nav .kiki-product-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; overflow: hidden; min-width: 0; padding: 24px 20px; border: 1px solid var(--nav-border); border-radius: 18px; background: var(--nav-surface); color: var(--nav-text); text-decoration: none; }
.kiki-products-nav .kiki-product-card img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 4px; }
.kiki-products-nav .kiki-product-title { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; font-weight: 750; font-size: 18px; line-height: 1.4; }
.kiki-products-nav .kiki-product-title svg { width: 16px; height: 16px; flex-shrink: 0; }
.kiki-products-nav .kiki-product-description { position: relative; z-index: 1; color: var(--nav-muted); font-size: 14px; line-height: 1.6; }
.kiki-products-nav .kiki-product-features { display: none; position: relative; z-index: 1; color: var(--nav-muted); font-size: 13px; line-height: 1.5; }
.kiki-products-nav .kiki-product-feature-list { display: grid; gap: 7px; min-height: 0; overflow: hidden; margin: 0; padding: 0; list-style: none; }
.kiki-products-nav .kiki-product-features li { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 0; }
.kiki-products-nav .kiki-product-features li > span { min-width: 0; overflow-wrap: anywhere; }
.kiki-products-nav .kiki-product-features svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; color: var(--nav-accent); }
.kiki-products-nav .kiki-product-free { position: absolute; bottom: -24px; right: -8px; font-size: 80px; font-weight: 800; opacity: .045; pointer-events: none; }
.kiki-products-nav .kiki-product-card:hover { border-color: var(--nav-accent); background: var(--nav-soft); }
.kiki-products-nav .kiki-product-card[aria-current] { background: #07583f; color: #fff; border-color: #0c9668; }
.kiki-products-nav .kiki-product-card[aria-current] .kiki-product-description { color: #d1fae5; }
.kiki-products-nav .kiki-product-card[aria-current] .kiki-product-features { color: #d1fae5; }
.kiki-products-nav .kiki-product-card[aria-current] .kiki-product-features svg { color: #a7f3d0; }
.kiki-products-nav .kiki-product-current { position: absolute; top: 14px; right: 12px; padding: 3px 7px; border-radius: 4px; background: #087c59; color: #fff; font-size: 10px; font-weight: 700; }
.kiki-products-nav :is(a,button,summary):focus-visible { outline: 3px solid var(--nav-accent); outline-offset: 3px; }
.kiki-products-nav .kiki-mobile-links { display: flex; flex-direction: column; gap: 4px; padding: 12px 20px 24px; }
.kiki-products-nav .kiki-mobile-links .kiki-nav-link { display: flex; padding: 12px; }
.kiki-products-nav .kiki-mobile-products summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; padding: 12px; color: var(--nav-text); font-weight: 650; list-style: none; }
.kiki-products-nav .kiki-mobile-products summary::-webkit-details-marker { display: none; }
.kiki-products-nav .kiki-mobile-products summary svg { width: 16px; height: 16px; }
.kiki-products-nav .kiki-mobile-products[open] summary svg { transform: rotate(180deg); }
.kiki-products-nav .kiki-mobile-products-panel { margin: 0 0 8px; padding: 10px; border: 1px dashed var(--nav-border); border-color: color-mix(in srgb, var(--nav-accent) 35%, var(--nav-border)); border-radius: 18px; background: var(--nav-soft); }
html:not([data-kiki-page-mode="day"]) .kiki-products-nav .kiki-products-panel { box-shadow: none; }
html[data-kiki-page-mode="high_contrast"] .kiki-products-nav .kiki-product-card[aria-current] { border: 2px solid var(--nav-accent); background: var(--nav-soft); }
@media (max-width: 1279px) {
    .kiki-products-nav .kiki-desktop-links, .kiki-products-nav #kiki-products-panel { display: none; }
    .kiki-products-nav #mobile-menu-btn { display: inline-flex !important; }
    .kiki-products-nav #mobile-menu:not(.hidden) { display: block !important; }
    .kiki-products-nav #mobile-menu { max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; background: var(--nav-surface); border-color: var(--nav-border); }
    .kiki-products-nav .kiki-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kiki-products-nav .kiki-product-card { padding: 16px; gap: 8px; }
    .kiki-products-nav .kiki-product-card img { width: 44px; height: 44px; }
    .kiki-products-nav .kiki-product-title { font-size: 15px; }
    .kiki-products-nav .kiki-product-description { font-size: 12px; }
    .kiki-products-nav .kiki-product-current { position: static; }
}
@media (min-width: 1280px) { .kiki-products-nav #mobile-menu-btn, .kiki-products-nav #mobile-menu { display: none !important; } }
@media (min-width: 1280px) {
    .kiki-products-nav .kiki-product-card { transition: border-color 180ms ease, background-color 180ms ease, box-shadow 220ms ease; }
    /* Grow the artwork into existing padding; its 68px flow footprint stays unchanged. */
    .kiki-products-nav .kiki-product-card img { width: 80px; height: 80px; margin-top: -8px; margin-bottom: -4px; }
    .kiki-products-nav .kiki-product-card img,
    .kiki-products-nav .kiki-product-title svg { transition: transform 240ms cubic-bezier(.2, .7, .2, 1); }
    /* Animate to intrinsic content height so translated summaries never get clipped. */
    .kiki-products-nav .kiki-product-features { display: grid; grid-template-rows: 0fr; margin-top: -12px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: grid-template-rows 240ms cubic-bezier(.2, .7, .2, 1), margin-top 240ms cubic-bezier(.2, .7, .2, 1), opacity 180ms ease, transform 240ms ease, visibility 0s linear 240ms; }
    .kiki-products-nav .kiki-product-card:is(:hover, :focus-visible) .kiki-product-features { grid-template-rows: 1fr; margin-top: 0; opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
    .kiki-products-nav .kiki-product-card:is(:hover, :focus-visible) img { transform: translateY(-2px) scale(1.08); }
    .kiki-products-nav .kiki-product-card:is(:hover, :focus-visible) .kiki-product-title svg { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .kiki-products-nav .kiki-product-card,
    .kiki-products-nav .kiki-product-card img,
    .kiki-products-nav .kiki-product-title svg,
    .kiki-products-nav .kiki-products-mascot img,
    .kiki-products-nav .kiki-product-features { transition: none; }
    .kiki-products-nav .kiki-products-mascot:hover img { transform: none; }
    .kiki-products-nav .kiki-product-card:is(:hover, :focus-visible) img,
    .kiki-products-nav .kiki-product-card:is(:hover, :focus-visible) .kiki-product-title svg { transform: none; }
}
@media (max-width: 600px) {
    .kiki-products-nav > div:first-of-type { padding-inline: 12px; }
    .kiki-products-nav .kiki-product-free { font-size: 52px; bottom: -16px; }
}

/* VD/VC highlight the disclosure text without making it a current-page link. */
.kiki-products-nav .kiki-products-trigger[aria-expanded="true"] { color: var(--nav-muted); background: transparent; text-decoration: none; }
.kiki-products-nav .kiki-products-trigger[data-current-product="true"],
.kiki-products-nav .kiki-mobile-products summary[data-current-product="true"] { color: var(--nav-accent); background: transparent; text-decoration: none; }

/* V34's disclosure cue: only the open menu gets the underline and connector. */
@media (min-width: 1280px) {
    .kiki-products-nav .kiki-desktop-links { height: 100%; }
    .kiki-products-nav .kiki-products-trigger { position: relative; align-self: stretch; }
    .kiki-products-nav .kiki-products-trigger[aria-expanded="true"] {
        color: var(--nav-accent); background: color-mix(in srgb, var(--nav-accent) 8%, transparent);
    }
    .kiki-products-nav .kiki-products-trigger::after {
        content: ""; position: absolute; inset: auto 16px 0; height: 2px; border-radius: 2px;
        background: var(--nav-accent); opacity: 0; transform: scaleX(.34); pointer-events: none;
        transition: opacity 180ms ease, transform 200ms ease;
    }
    .kiki-products-nav .kiki-products-trigger::before {
        content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 13px;
        background: var(--nav-accent); opacity: 0; pointer-events: none;
        transform: translateX(-50%) scaleY(.35); transform-origin: top;
        transition: opacity 160ms ease, transform 190ms ease;
    }
    .kiki-products-nav .kiki-products-trigger[aria-expanded="true"]::after { opacity: 1; transform: scaleX(1); }
    .kiki-products-nav .kiki-products-trigger[aria-expanded="true"]::before { opacity: .55; transform: translateX(-50%) scaleY(1); }
    html[data-kiki-page-mode="high_contrast"] .kiki-products-nav .kiki-products-trigger[aria-expanded="true"] {
        background: var(--nav-soft);
    }
    html[data-kiki-page-mode="high_contrast"] .kiki-products-nav .kiki-products-trigger[aria-expanded="true"]::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .kiki-products-nav .kiki-products-trigger::before,
    .kiki-products-nav .kiki-products-trigger::after { transition: none; }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .kiki-products-nav .kiki-desktop-links { gap: 4px; }
    .kiki-products-nav .kiki-desktop-links .kiki-nav-link { font-size: 14px; padding-inline: 4px; }
}
/* Above old page footers while open; existing business dialogs use higher layers. */
#main-navbar.kiki-products-nav.kiki-nav-expanded { z-index: 70 !important; }

/* Keep the original at-top integration in dark mode, too. */
html[data-kiki-page-mode="night"] #main-navbar.kiki-products-nav:not(.navbar-blur) {
    background: transparent !important; border-bottom-color: transparent !important;
    box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html[data-kiki-page-mode="night"] #main-navbar.kiki-products-nav .kiki-nav-link:hover { color: var(--nav-accent) !important; }
html[data-kiki-page-mode="high_contrast"] .kiki-products-nav .kiki-product-free { display: none; }
html[data-kiki-page-mode="high_contrast"] .kiki-products-nav .kiki-product-current {
    background: var(--nav-accent); color: var(--kiki-hc-page-bg);
}
html[data-kiki-page-mode="high_contrast"] .kiki-products-nav .kiki-product-card[aria-current] :is(.kiki-product-description, .kiki-product-features) {
    color: var(--kiki-hc-text-primary);
}
html[data-kiki-page-mode="high_contrast"] .kiki-products-nav :focus-visible { outline-color: var(--kiki-hc-focus-ring); }

/* tools_web-only additions: eight audio tools and deferred theme choices. */
#main-navbar .kiki-free-tools-panel {
    left: 50%; right: auto;
    width: min(536px, calc(100% - 2 * var(--nav-content-gutter)));
    padding: 20px;
    border-radius: 18px;
    background: var(--nav-surface);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .10), 0 3px 8px rgba(15, 23, 42, .04);
}
.kiki-products-nav .kiki-free-tools-title {
    margin: 0 10px 12px; font-size: 16px; font-weight: 650; line-height: 1.5; color: var(--nav-text);
}
.kiki-products-nav .kiki-free-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
.kiki-products-nav .kiki-free-tool-link {
    display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 10px;
    border: 1px solid transparent; border-radius: 10px; color: var(--nav-muted);
    background: transparent; font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.kiki-products-nav .kiki-free-tool-link:hover,
.kiki-products-nav .kiki-free-tool-link:focus-visible { color: var(--nav-accent); background: #f0faf5; }
.kiki-products-nav .kiki-free-tool-link[aria-current="page"] { color: var(--nav-accent); background: #ecfdf5; border-color: #d1fae5; }
.kiki-products-nav .kiki-free-tool-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; background: var(--nav-soft); }
.kiki-products-nav .kiki-free-tool-icon svg { width: 18px; height: 18px; }
.kiki-products-nav .kiki-free-tool-link > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.kiki-products-nav .kiki-free-tool-arrow { width: 14px; height: 14px; flex: 0 0 auto; margin-inline-start: auto; opacity: 0; transition: opacity 160ms ease; }
.kiki-products-nav .kiki-free-tool-link:is(:hover, :focus-visible, [aria-current="page"]) .kiki-free-tool-arrow { opacity: 1; }
html[dir="rtl"] .kiki-products-nav .kiki-free-tool-arrow { transform: rotate(180deg); }
#main-navbar #tools-language-dropdown-menu { width: min(320px, calc(100vw - 24px)); }
#main-navbar #tools-language-dropdown-btn > span { line-height: 1; }
#main-navbar .kiki-page-mode-option:disabled { opacity: .4; cursor: default; background: transparent; }
#main-navbar .kiki-page-mode-menu[hidden] { display: none; }
html[dir="rtl"] #main-navbar .kiki-page-mode-option { text-align: right; }
.kiki-products-nav .kiki-products-trigger svg { transition: transform 160ms ease; }
@media (max-width: 1279px) {
    .kiki-products-nav #kiki-free-tools-panel { display: none; }
    .kiki-products-nav .kiki-mobile-free-tools .kiki-free-tool-grid { grid-template-columns: 1fr; }
    .kiki-products-nav .kiki-free-tool-link { font-size: 14px; }
    .kiki-products-nav .kiki-mobile-links { gap: 6px; padding-bottom: 18px; }
    .kiki-products-nav .kiki-mobile-products-panel { border-style: solid; border-color: var(--nav-border); background: var(--nav-surface); }
    .kiki-products-nav .kiki-mobile-free-tools .kiki-mobile-products-panel { padding: 6px; border-radius: 14px; }
}
@media (max-width: 374px) {
    #main-navbar .logo-font-01 { font-size: 16px !important; letter-spacing: -.025em; }
    #main-navbar .tools-nav-actions { gap: 2px; }
    #main-navbar .tools-nav-actions > * { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .kiki-products-nav .kiki-free-tool-link,
    .kiki-products-nav .kiki-free-tool-arrow,
    .kiki-products-nav .kiki-products-trigger svg { transition: none; }
}