/* ============================================================================
   MAINTENANCE (DedSec Project)
   KEY RULES:
   - Keep overflow-x hidden to prevent sideways scroll on mobile.
   - Buttons must use max-width:100% and flex-wrap where needed.
   - Prefer editing CSS variables (colors/sizes) first, then components.
   ============================================================================ */
/*
    =================================================================
    DEDSEC PROJECT MULTI-PAGE STYLES
    VERSION: 5.0 (Unified Mobile-Like Navigation for PC)
    =================================================================
*/

/* ADDED: Font import for Inter, Orbitron, and Roboto Mono */
:root {
    /* === Premium Glass / Lavender System === */
    /* Dark theme base backdrop: pure black to blend with the background image */
    --nm-abyss-blue: #000000;
    --nm-darkest: rgba(10, 10, 18, 0.72);  /* nav / top surfaces */
    --nm-nav-solid: #0b0a12;          /* solid top bar */
    --nm-menu-solid: #0e0d18;         /* solid burger menu */
    --nm-dark: rgba(14, 14, 24, 0.58);     /* cards */
    --nm-container: rgba(18, 18, 30, 0.52);

    /* Solid surface for disclaimer banner/modal so it stays readable */
    --nm-disclaimer-bg: #0a0a12;

    /* Neutral button background for actions like "Decline" */
    --nm-neutral-btn-bg: rgba(255, 255, 255, 0.10);

    --nm-border: rgba(168, 85, 247, 0.50);
    --nm-accent: #A855F7;
    --nm-accent-hover: #9333EA;

    --nm-text: rgba(255, 255, 255, 0.92);
    --nm-text-muted: rgba(255, 255, 255, 0.74);
    --nm-text-accent: rgba(255, 255, 255, 0.96);

    --nm-danger: #ff6b6b;
    --nm-danger-hover: #ff8787;
    --nm-success: #A855F7;
    --nm-warning: #ffd43b;

    --nm-text-on-accent: #0b0a12;
    --nm-text-on-status: #0b0a12;

    --nm-fade: rgba(0,0,0,0);

    --glow-rgb: 168, 85, 247;
    --shadow-elev-1: 0 10px 30px rgba(0,0,0,0.35);
    --shadow-elev-2: 0 18px 50px rgba(0,0,0,0.42);

    --shadow-elev-3: 0 24px 70px rgba(0,0,0,0.55);

    /* Dynamic layout helpers (set by script.js) */
    --nav-h: 70px;
    --vh: 1vh;

    /* Safe-area helpers (iOS notch / gesture bars) */
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);

    --font-primary: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-secondary: "Orbitron", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --z-backdrop: -2;
    --z-noise: -1;
    --z-base: 1;
    --z-header: 1000;
    --z-modal-overlay: 1010;
    --z-banner: 1100;

    --safe-area-inset-bottom: env(safe-area-inset-bottom, 10px);

    --ease-out-cubic: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1);
    --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);

    /* Blur controls */
    --glass-blur: 16px;
    --glass-sat: 140%;

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(168, 85, 247, 0.35);
}


/* Responsive overflow fixes */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg, canvas { max-width: 100%; height: auto; }
pre { max-width: 100%; width: 100%; min-width: 0; overflow-x: auto; }
code { word-break: normal; }
.btn, .nav-action-btn { max-width: 100%; }
.nav-actions { flex-wrap: wrap; }

/* === LIGHT THEME COLOR SYSTEM (STRICT #FFFFFF & #000000) === */
body.light-theme {
    /* Light theme base backdrop: pure white to blend with the background image */
    --nm-abyss-blue: #ffffff;
    --nm-darkest: rgba(255, 255, 255, 0.82);
    --nm-nav-solid: #ffffff;          /* solid top bar */
    --nm-menu-solid: #ffffff;         /* solid burger menu */
    --nm-dark: rgba(255, 255, 255, 0.70);
    --nm-container: rgba(255, 255, 255, 0.62);

    /* Solid surface for disclaimer banner/modal so it stays readable */
    --nm-disclaimer-bg: #ffffff;

    /* Neutral button background for actions like "Decline" */
    --nm-neutral-btn-bg: rgba(0, 0, 0, 0.06);

    --nm-border: rgba(168, 85, 247, 0.35);
    --nm-accent: #A855F7;
    --nm-accent-hover: #9333EA;

    --nm-text: rgba(10, 10, 18, 0.92);
    --nm-text-muted: rgba(10, 10, 18, 0.70);
    --nm-text-accent: rgba(10, 10, 18, 0.96);

    --nm-danger: #d6336c;
    --nm-danger-hover: #e64980;
    --nm-success: #A855F7;
    --nm-warning: #f59f00;

    --nm-text-on-accent: rgba(255, 255, 255, 0.96);
    --nm-text-on-status: rgba(255, 255, 255, 0.96);

    --glow-rgb: 168, 85, 247;
    --nm-fade: rgba(255,255,255,0);
    --shadow-elev-1: 0 10px 30px rgba(0,0,0,0.12);
    --shadow-elev-2: 0 18px 50px rgba(0,0,0,0.16);
    --shadow-elev-3: 0 24px 70px rgba(0,0,0,0.20);
}

/* Anchor offset for fixed top bar */
[id] {
    scroll-margin-top: calc(var(--nav-h, 70px) + 22px);
}

/*
    =================================================================
    GLOBAL STYLES & UX
    =================================================================
*/

html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

body {
margin: 0;
    padding: 0;
    background: var(--nm-abyss-blue);
    background-color: var(--nm-abyss-blue);
font-family: var(--font-primary);
    color: var(--nm-text);
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    line-height: 1.4;
}

/* FORCE ICON COLOR OVERRIDE (Purple by default) */
i, .material-icons, .fa, .fab, .fas, .far {
    color: var(--nm-accent);
}

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

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

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.code-container code,
.nav-action-btn,
.form-group input,
.contact-grid .app-icon,
.copy-btn { 
    font-family: var(--font-mono); 
}

/* ADDED: Custom scrollbar (High Contrast) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--nm-abyss-blue); border-left: 1px solid var(--nm-border); }
::-webkit-scrollbar-thumb { background: var(--nm-border); border: 2px solid var(--nm-abyss-blue); }
::-webkit-scrollbar-thumb:hover { background: var(--nm-accent); }

/* --- BACKGROUND IMAGE STYLES --- */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: none;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: var(--z-backdrop);
    pointer-events: none;
    transition: background-image 0.3s ease;
}


body.light-theme::before {
    background-image: none;
    opacity: 0;
}

/* === TEXT SIZE & SPACING OPTIMIZATIONS === */
p {
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 0.8em;
}

.nm-text-muted {
    font-size: 0.8rem;
    line-height: 1.2;
}

/* --- NAVIGATION STYLES --- */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--nm-nav-solid) !important;
    border-bottom: 1px solid var(--nm-border) !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    z-index: var(--z-header);
    padding: var(--safe-area-inset-top) 15px 0;
    box-sizing: border-box;
}

.main-nav {
    /*
      iOS Safari (and some in-app browsers like Instagram's) can clip
      fixed-position descendants when an ancestor has overflow:hidden.
      The burger menu (.nav-menu) is position:fixed and must be allowed
      to render outside the navbar.
    */
    overflow: visible;
    isolation: isolate;
}

.main-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(900px 240px at 15% 0%, rgba(168, 85, 247,0.18), transparent 60%),
      radial-gradient(700px 220px at 85% 0%, rgba(255,198,122,0.10), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.main-nav .nav-container {
    position: relative;
    z-index: 1;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0;
    transition: max-width 0.3s ease;
    position: relative;
}

.nav-title {
    flex: 1 1 auto;
    /* Prevent the injected logo from being clipped when the navbar is tight */
    min-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    order: 1;
}

.nav-title .site-title {
    margin: 0;
    font-size: clamp(0.80rem, 2.3vw, 1.05rem); 
    color: var(--nm-text-accent);
    font-family: var(--font-secondary);
    text-shadow: none;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Allow "DedSec\nProject" stacking when needed */
    white-space: pre-line;
    min-width: 0;
}

/* Keep the injected navbar logo stable */
.nav-title .site-title img[data-site-logo="1"] {
    flex: 0 0 auto;
}

body.light-theme .nav-title .site-title {
    text-shadow: none;
}

.burger-menu {
    display: flex;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    gap: 4px;
    order: 3;
    margin-left: 6px;
    margin-inline-start: 6px;
    flex-shrink: 0;
    /* Improves tap reliability on iOS/in-app browsers */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    align-items: center;
}

.burger-menu .burger-line {
    width: 25px;
    height: 3px;
    background: var(--nm-text);
    transition: all 0.3s var(--ease-out-cubic);
}

.burger-label {
    width: auto;
    height: auto;
    background: none;
    color: var(--nm-text);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    line-height: 1;
    opacity: 0.9;
    margin-top: 2px;
    user-select: none;
}

.burger-menu.active .burger-line:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.burger-menu.active .burger-line:nth-child(2) { opacity: 0; }
.burger-menu.active .burger-line:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

.nav-menu {
    position: fixed;
    top: var(--nav-h, 70px);
    right: 0;
    inset-inline-end: 0;
    width: min(360px, 92vw);
    max-width: 360px;
    height: calc((var(--vh, 1vh) * 100) - var(--nav-h, 70px));
    background: var(--nm-menu-solid) !important;
    border-left: 1px solid var(--nm-border);
    flex-direction: column;
    padding: 18px calc(16px + var(--safe-area-inset-right)) calc(18px + var(--safe-area-inset-bottom)) calc(16px + var(--safe-area-inset-left));
    box-sizing: border-box;
    box-shadow: var(--shadow-elev-3) !important;
    transform: translateX(110%);
    opacity: 1;
    visibility: visible;
    transition: transform 0.3s var(--ease-out-cubic);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    align-items: stretch;
    gap: 14px;
    /* Ensure it works on desktop */
    z-index: 1001;
}

.nav-menu {
    /* Keep the visual isolation, but don't override overflow-y:auto
       (otherwise the menu can't scroll and can appear clipped on iOS). */
    isolation: isolate;
}

.nav-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(900px 260px at 10% 0%, rgba(168, 85, 247,0.16), transparent 62%),
      radial-gradient(800px 260px at 110% 10%, rgba(255,198,122,0.10), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,0.04), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.nav-menu > * {
    position: relative;
    z-index: 1;
}

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

.nav-link {
    color: var(--nm-text);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 8px 15px;
    border-radius: 0px !important;
    border: 1px solid transparent;
    transition: all 0.25s var(--ease-out-cubic);
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.nav-link:hover,
.nav-link.active {
    background: var(--nm-accent);
    color: var(--nm-text-on-accent); 
    border-color: var(--nm-accent);
    transform: translateY(-3px);
    box-shadow: none;
}

.nav-link:active {
    transform: translateY(0px) scale(0.97);
    transition-duration: 0.1s;
}

.nav-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
    margin-inline-start: auto;
    margin-top: 0;
    justify-content: flex-end;
    flex-direction: row;
    width: auto;
    order: 2;
    flex-shrink: 0;
}

.nav-action-btn {
    background: var(--nm-container);
    border: 1px solid var(--nm-border);
    color: var(--nm-text);
    padding: 8px 10px;
    min-height: 40px;
    border-radius: 0px !important;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.25s var(--ease-out-cubic);
    width: auto;
    justify-content: center;
    box-sizing: border-box;
}

.nav-action-btn:hover {
    background: var(--nm-accent);
    color: var(--nm-text-on-accent); 
    border-color: var(--nm-accent);
    transform: translateY(-3px);
    box-shadow: none;
}

/* Ensure icon inside nav button turns black on hover */
.nav-action-btn:hover i {
    color: var(--nm-text-on-accent) !important;
}

.nav-action-btn:active {
    transform: translateY(0px) scale(0.97);
    transition-duration: 0.1s;
}

.nav-action-btn span {
    display: none;
}

/* --- PAGE CONTENT STYLES --- */
.page-content {
    margin-top: 0;
    padding: calc(var(--nav-h, 70px) + 20px) 20px 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    transition: max-width 0.3s ease;
    animation: fadeIn 0.5s 0.1s var(--ease-out-cubic) backwards;
}

.page-header {
    text-align: center;
    margin-bottom: 30px;
}

.page-header h1 {
    color: var(--nm-text-accent);
    font-family: var(--font-secondary);
    font-size: 2.125rem; 
    margin-bottom: 10px;
    text-shadow: none;
}

body.light-theme .page-header h1 {
    text-shadow: none;
}

.page-header p {
    color: var(--nm-text);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.content-section {
    background: var(--nm-container);
    border: 1px solid var(--nm-border);
    border-radius: 0px !important;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: none;
    transition: border-color 0.3s ease, box-shadow 0.3s var(--ease-out-cubic);
}

.content-section:hover {
    border: 1px solid var(--nm-accent);
    box-shadow: none;
}

.content-section h2 {
    color: var(--nm-text-accent);
    font-family: var(--font-secondary);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--nm-border);
    padding-bottom: 10px;
    font-size: 1.7rem; 
}

.content-section h3 {
    color: var(--nm-text);
    font-family: var(--font-secondary);
    margin: 25px 0 15px 0;
    font-size: 1.19rem; 
}

.content-section p {
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 0.8em;
}

.content-section li {
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 0.3em;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.tool-card {
    background: var(--nm-menu-solid) !important;
border: 1px solid var(--nm-border);
    border-radius: 0px !important;
    padding: 15px;
    transition: transform 0.25s var(--ease-out-cubic), border-color 0.25s ease;
}

.tool-card:hover {
    border-color: var(--nm-accent);
    transform: translateY(-3px);
    box-shadow: none;
}

.tool-card h4 {
    color: var(--nm-text-accent);
    margin-bottom: 10px;
    font-family: var(--font-secondary);
    font-size: 1.13rem; 
}

/* --- TOOL FEATURES BULLET STYLES --- */
.tool-features ul { padding-inline-start: 20px; margin: 0; }
.tool-features li {
    margin-bottom: 0.4em;
    line-height: 1.2;
    color: var(--nm-text);
    position: relative;
    padding-inline-start: 3px;
    font-size: 0.85rem;
}
.tool-features li::before {
    content: "•";
    color: var(--nm-accent);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-inline-start: -1em;
}

/* --- HOMEPAGE SPECIFIC STYLES --- */
.phone-container {
    width: 100%;
    /* Allow full height/width on PC */
    height: auto;
    min-height: calc(var(--vh, 1vh) * 100);
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: visible;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    padding-top: var(--nav-h, 70px);
}

.screen {
    width: 100%;
    height: 100%;
    border-radius: 0px !important;
    overflow-y: visible;
    overflow-x: hidden;
    background: transparent;
}

.home-screen {
    text-align: center;
    padding-top: 20px;
    padding-bottom: calc(20px + var(--safe-area-inset-bottom));
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    animation: fadeIn 0.5s 0.1s var(--ease-out-cubic) backwards;
}

/* --- Enhanced Hero Section Styles --- */
.hero-section {
    padding: 56px 16px 56px 16px;
    background: linear-gradient(180deg, rgba(168, 85, 247,0.16), rgba(14,13,24,0.92));
    border: 1px solid var(--nm-border);
    border-radius: 0px !important;
    margin-bottom: 40px;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    animation: fadeIn 0.8s var(--ease-out-cubic) backwards;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 180deg, rgba(168, 85, 247,0.65), rgba(168, 85, 247,0.35), rgba(255,164,98,0.35), rgba(168, 85, 247,0.65));
    filter: blur(18px);
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--nm-accent);
    color: var(--nm-text-on-accent);
    padding: 8px 16px;
    border-radius: 0px !important;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 20px;
    animation: slideInUp 0.6s 0.2s var(--ease-out-back) backwards;
}

/* FIX: Trusted/Hero badge icon MUST be black on purple background */
.hero-badge i {
    animation: pulse 2s infinite;
    color: var(--nm-text-on-accent) !important;
}

.hero-section h2 {
    font-family: var(--font-secondary);
    font-size: 1.785rem; 
    color: var(--nm-text-accent);
    text-shadow: none;
    margin: 0 0 25px 0;
    animation: slideInUp 0.6s 0.3s var(--ease-out-back) backwards;
}

.hero-text {
    color: var(--nm-text);
    font-size: 0.95rem;
    line-height: 1.3;
    margin: 0 auto 20px auto;
    max-width: 700px;
    padding: 0 20px;
    animation: slideInUp 0.6s 0.4s var(--ease-out-back) backwards;
}

.trust-indicators {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 15px;
    max-width: 600px;
    margin: 0 auto 30px auto;
    animation: slideInUp 0.6s 0.5s var(--ease-out-back) backwards;
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px 10px;
    background: var(--nm-dark);
border-radius: 0px !important;
    border: 1px solid var(--nm-border);
    transition: all 0.3s var(--ease-out-cubic);
}

.trust-item:hover {
    transform: translateY(-3px);
    background: var(--nm-accent);
    color: var(--nm-text-on-accent);
    border-color: var(--nm-accent);
    box-shadow: none;
}

/* FIX: Trust Icon MUST be black on purple background (Hover) */
.trust-item:hover i,
.trust-item:hover span {
    color: var(--nm-text-on-accent) !important;
}

.trust-item i {
    font-size: 1.5rem;
    color: var(--nm-accent);
}

.trust-item span {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    color: var(--nm-text);
    line-height: 1.2;
}

.hero-actions {
    display: none;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    animation: slideInUp 0.6s 0.6s var(--ease-out-back) backwards;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 0px !important;
    text-decoration: none;
    font-family: var(--font-secondary);
    font-weight: bold;
    font-size: 1.1rem;
    border: 2px solid transparent;
    transition: all 0.3s var(--ease-out-cubic);
    min-width: 180px;
    justify-content: center;
}

.hero-cta.primary {
    background: var(--nm-accent);
    color: var(--nm-text-on-accent);
    box-shadow: none;
}

/* Fix CTA Primary Icon color */
.hero-cta.primary i {
    color: var(--nm-text-on-accent) !important;
}

.hero-cta.secondary {
    background: transparent;
    color: var(--nm-accent);
    border-color: var(--nm-accent);
}

.hero-cta.primary:hover {
    background: var(--nm-accent);
    opacity: 0.8;
    transform: translateY(-3px) scale(1.05);
    box-shadow: none;
}

.hero-cta.secondary:hover {
    background: var(--nm-accent);
    color: var(--nm-text-on-accent);
    transform: translateY(-3px) scale(1.05);
    box-shadow: none;
}

/* Fix CTA Secondary Hover Icon color */
.hero-cta.secondary:hover i {
    color: var(--nm-text-on-accent) !important;
}

.stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
    margin: 0 0 50px 0;
    animation: fadeIn 0.8s 0.7s var(--ease-out-cubic) backwards;
}

.stat-card {
    background: var(--nm-dark);
    border: 1px solid var(--nm-border);
    border-radius: 0px !important;
    padding: 20px 15px;
    text-align: center;
    transition: all 0.3s var(--ease-out-cubic);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    display: none;
}

.stat-card:hover {
    border-color: var(--nm-accent);
    transform: translateY(-5px) scale(1.03);
    box-shadow: none;
}

.stat-number {
    font-family: var(--font-secondary);
    font-size: 1.87rem; 
    font-weight: 700;
    color: var(--nm-accent);
    margin-bottom: 8px;
    text-shadow: none;
}

.stat-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--nm-text-muted);
    line-height: 1.2;
    font-weight: 600;
}

/* Enhanced Feature Cards */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 30px 0 60px;
    animation: fadeIn 0.8s 0.8s var(--ease-out-cubic) backwards;
}

.feature-card {
    background: var(--nm-dark);
border: 1px solid var(--nm-border);
    border-radius: 0px !important;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    color: var(--nm-text);
    text-align: center !important;
    transition: all 0.4s var(--ease-out-cubic);
    position: relative;
    overflow: hidden;
}


.feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(1200px 420px at 10% -10%, rgba(168, 85, 247,0.18), transparent 60%),
      radial-gradient(900px 320px at 110% 10%, rgba(255,198,122,0.12), transparent 55%),
      radial-gradient(800px 280px at 40% 120%, rgba(168, 85, 247,0.10), transparent 55%),
      linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.14) 45%, transparent 72%);
    background-size: auto, auto, auto, 220% 220%;
    background-position: center, center, center, -120% 0;
    animation: glassGlance 7.5s var(--ease-in-out-cubic) infinite;
    pointer-events: none;
}
.feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
    pointer-events: none;
}

.feature-card:hover {
    border-color: var(--nm-accent);
    transform: translateY(-8px) scale(1.02);
    box-shadow: none;
}

.feature-icon-wrapper {
    width: 50px;
    height: 50px;
    background: transparent;
    border: 1px solid var(--nm-border);
    border-radius: 0px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: all 0.3s var(--ease-out-cubic);
}

.feature-card:hover .feature-icon-wrapper {
    background: var(--nm-accent);
    border-color: var(--nm-accent);
    transform: scale(1.1) rotate(5deg);
}

.feature-icon {
    font-size: 1.8rem;
    color: var(--nm-accent);
    transition: all 0.3s var(--ease-out-cubic);
}

.feature-card:hover .feature-icon {
    color: var(--nm-text-on-accent);
    transform: scale(1.1);
}

.feature-title {
    font-family: var(--font-secondary);
    font-size: 1.02rem; 
    color: var(--nm-text-accent);
    margin: 0 0 10px 0;
    transition: color 0.3s ease;
}

.feature-description {
    font-size: 0.8rem;
    color: var(--nm-text-muted);
    margin-bottom: 10px;
    line-height: 1.3;
    flex-grow: 1;
}

.feature-cta {
    font-family: var(--font-mono);
    color: var(--nm-accent);
    font-weight: bold;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    transition: all 0.3s ease;
}












@media (max-width: 520px) {
    
    
}


.feature-card:hover .feature-cta {
    color: var(--nm-accent);
    transform: translateX(5px);
}

.community-section {
    text-align: center;
    animation: fadeIn 0.8s 0.9s var(--ease-out-cubic) backwards;
}

.community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(213px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.community-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 25px 20px;
    background: var(--nm-dark);
border: 1px solid var(--nm-border);
    border-radius: 0px !important;
    text-decoration: none;
    color: var(--nm-text);
    transition: all 0.3s var(--ease-out-cubic);
}

.community-card:hover {
    border-color: var(--nm-accent);
    transform: translateY(-5px);
    box-shadow: none;
}

.community-card i {
    font-size: 2.5rem;
    color: var(--nm-accent);
    transition: transform 0.3s ease;
}

.community-card:hover i {
    transform: scale(1.2);
}

.community-card span {
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.935rem; 
    text-align: center;
}

.support-section {
    text-align: center;
    animation: fadeIn 0.8s 1s var(--ease-out-cubic) backwards;
}

.sponsor-btn {
    background: var(--nm-accent) !important;
    border: 2px solid var(--nm-accent) !important;
    color: var(--nm-text-on-accent) !important;
    font-weight: bold;
    max-width: 300px;
    margin: 0 auto;
}

.sponsor-btn i {
    color: var(--nm-text-on-accent) !important;
}

.sponsor-btn:hover {
    transform: translateY(-3px) scale(1.05);
    opacity: 0.9;
    box-shadow: none !important;
}

/* --- FOOTER STYLES --- */
.main-footer {
    text-align: center;
    font-size: 0.8rem;
    color: var(--nm-text-muted);
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid var(--nm-border);
    width: 100%;
    max-width: 1200px;
}

.main-footer .footer-link-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px 0;
}

.main-footer .footer-links-note {
    margin: 4px 0 10px 0;
    font-size: 0.78rem;
}

.main-footer .footer-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    font-size: 0.74rem;
    line-height: 1.2;
    color: var(--nm-text-primary);
    border: 1px solid var(--nm-border);
    border-radius: 0px !important;
    text-decoration: none;
    background: var(--nm-container);
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.main-footer .footer-mini-btn:hover,
.main-footer .footer-mini-btn:focus-visible {
    transform: translateY(-1px);
    border-color: var(--nm-accent);
    color: var(--nm-accent);
}

/* ================================================================= MODAL STYLES (COMMON) ================================================================= */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Solid background (no transparency) for disclaimer/modal overlay */
    background: #000000;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-modal-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease-in-out-quad), visibility 0s 0.3s;
}

body.light-theme .modal-overlay {
    background: #ffffff;
}

.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--ease-in-out-quad);
}

.modal-content {
    background: var(--nm-container);
    width: 95%;
    max-width: 800px;
    height: 85%;
    max-height: 800px;
    border: 2px solid var(--nm-border);
    box-shadow: none; 
    display: flex;
    flex-direction: column;
    overflow: hidden;
    clip-path: none;
    border-radius: 0px !important;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.4s var(--ease-out-back), opacity 0.4s var(--ease-in-out-quad);
    will-change: transform, opacity;
}

/* Disclaimer modal: force solid surfaces (no transparency) */
#disclaimer-modal .modal-content {
    background: var(--nm-disclaimer-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#disclaimer-modal .note,
#disclaimer-modal .privacy-policy-embed {
    background: var(--nm-menu-solid);
}

#disclaimer-modal .privacy-policy-embed {
    border: 1px solid var(--nm-border);
    border-radius: 0px !important;
    padding: 0.8rem;
    margin: 15px 0;
}

.modal-content-auto-height {
    height: auto;
    max-height: 90vh;
}

.modal-overlay.visible .modal-content {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.modal-overlay.closing {
    opacity: 0;
    transition: opacity 0.4s var(--ease-in-out-quad), visibility 0s 0.4s;
}

.modal-overlay.closing .modal-content {
    transform: translateY(40px) scale(0.9);
    opacity: 0;
    transition: transform 0.4s var(--ease-in-out-quad), opacity 0.4s var(--ease-in-out-quad);
}

.modal-overlay.banner-style.closing .modal-content {
    transform: translateY(100%);
    transition: transform 0.5s var(--ease-in-out-quad);
}

.modal-header {
    padding: 20px 30px;
    border-bottom: 1px solid var(--nm-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-header h2 {
    margin: 0;
    font-family: var(--font-secondary);
    color: var(--nm-text-accent);
    font-size: 1.275rem; 
}

.modal-body {
    padding: 30px;
    overflow-y: auto;
    flex-grow: 1;
    line-height: 1.3;
    font-size: 0.9rem;
    color: var(--nm-text);
}

.modal-body-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.modal-body p {
    margin-bottom: 0.7em;
}

.modal-footer {
    padding: 20px 30px;
    border-top: 1px solid var(--nm-border);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.close-modal {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--nm-text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s ease;
}

.close-modal:hover {
    color: var(--nm-accent);
}

/* DISCLAIMER BANNER STYLES */

.modal-overlay.banner-style {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    background: none;
    pointer-events: none;
    z-index: var(--z-banner);
    display: block;
    align-items: unset;
    justify-content: unset;
}

.modal-overlay.banner-style .modal-content {
    pointer-events: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 45vh;
    margin: 0;
    border-radius: 0px !important;
    border-bottom: none;
    border-left: 1px solid var(--nm-border);
    border-right: 1px solid var(--nm-border);
    border-top: 1px solid var(--nm-border);
    /* Use a more solid background for the disclaimer banner so text is readable
       even over busy wallpapers (this is what users share / see first). */
    background: var(--nm-disclaimer-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    box-shadow: var(--shadow-elev-2);
    opacity: 1;
    transform: translateY(100%);
    transition: transform 0.5s var(--ease-out-cubic);
}

.modal-overlay.banner-style.visible .modal-content {
    transform: translateY(0);
}

.modal-overlay.banner-style .modal-header {
    padding: 15px 20px;
}

.modal-overlay.banner-style .modal-header h2 {
    font-size: 0.935rem; 
}

.modal-overlay.banner-style .language-selection-btn {
    padding: 6px 12px;
    font-size: 0.7rem;
}

.modal-overlay.banner-style .modal-body {
    padding: 10px 20px;
    font-size: 0.8rem;
    line-height: 1.4;
}

.modal-overlay.banner-style .note {
    padding: 0.8rem;
    margin: 10px 0;
}

.modal-overlay.banner-style .note p {
    margin: 0 0 10px 0;
}

.modal-overlay.banner-style .modal-divider {
    margin: 1rem 0;
}

.modal-overlay.banner-style .modal-footer {
    padding: 15px 20px;
    flex-direction: row; 
    justify-content: flex-end;
}

.modal-overlay.banner-style .disclaimer-footer button {
    padding: 8px 15px;
    font-size: 0.9rem;
    min-height: auto;
    min-width: 80px;
}

/* --- Language & Theme Switcher Buttons --- */
.language-selection-btn,
.theme-selection-btn {
    background: var(--nm-container);
border: 1px solid var(--nm-border);
    color: var(--nm-text);
    padding: 6px 12px;
    border-radius: 0px !important;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.25s var(--ease-out-cubic);
    will-change: transform;
}

.language-selection-btn:hover,
.theme-selection-btn:hover {
    background: var(--nm-accent);
    color: var(--nm-text-on-accent);
    transform: translateY(-3px);
    box-shadow: none;
}

/* --- Disclaimer/Language Buttons --- */
.disclaimer-footer button,
.language-button {
    background: var(--nm-container);
border: 1px solid var(--nm-border);
    color: var(--nm-text);
    padding: 10px 20px;
    border-radius: 0px !important;
    cursor: pointer;
    font-family: var(--font-secondary);
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.25s var(--ease-out-cubic);
    min-height: 45px;
    min-width: 100px;
    text-align: center;
}

.language-button:hover, 
.language-button.selected {
    color: var(--nm-text-on-accent);
    background-color: var(--nm-accent);
    border-color: var(--nm-accent);
    box-shadow: none;
    transform: translateY(-3px);
}

.language-button:active {
    transform: translateY(0px) scale(0.97);
    transition-duration: 0.1s;
}

.hidden { display: none !important; }
.hidden-by-default { display: none; }

/* Accept/Decline Buttons */
.decline-btn, .accept-btn {
    color: var(--nm-text-on-status) !important;
    transition: all 0.25s var(--ease-out-cubic);
    border: 1px solid var(--nm-border);
}

.accept-btn { 
    background-color: var(--nm-accent) !important; 
    border-color: var(--nm-accent) !important;
}

.decline-btn { 
    background-color: var(--nm-neutral-btn-bg) !important; 
    color: var(--nm-text) !important;
    border-color: var(--nm-border) !important;
}

.accept-btn:hover { 
    opacity: 0.8; 
    transform: translateY(-3px);
    box-shadow: none !important;
}

.decline-btn:hover { 
    background-color: var(--nm-accent) !important;
    color: var(--nm-text-on-accent) !important;
    border-color: var(--nm-accent) !important;
    transform: translateY(-3px);
    box-shadow: none !important;
}

.accept-btn:active, .decline-btn:active {
    transform: translateY(0px) scale(0.97);
    transition-duration: 0.1s;
}

/* ================================================================= COMPONENT STYLES (CODE, NOTES, ETC) ================================================================= */

/* --- UPDATED: Compact Code/Coupon Box with Overflow Fix --- */
pre,
.code-container {
    background: var(--nm-container);
border: 1px solid var(--nm-border);
    padding: 10px 15px;
    width: fit-content;
    min-width: 200px;
    max-width: 100%; 
    box-sizing: border-box;
    margin: 10px auto 20px auto;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    border-radius: 0px !important;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.4;
    position: relative;
    
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: anywhere;
    
    transition: border-color 0.3s ease;
}

pre:hover,
.code-container:hover {
    border-color: var(--nm-accent);
}

pre code,
.code-container code {
    color: var(--nm-text); 
    text-shadow: none; 
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* MODIFIED: Tighter layout for the coupon text */
#coupon-code {
    display: block;
    text-align: center;
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.2;
}

.copy-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--nm-container);
    border: 1px solid var(--nm-border);
    color: var(--nm-text-muted);
    padding: 5px 10px;
    border-radius: 0px !important;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.2s ease;
    z-index: 5;
    font-family: var(--font-mono);
}

.copy-btn:hover {
    background: var(--nm-accent);
    color: var(--nm-text-on-accent);
    border-color: var(--nm-accent);
}

.copy-btn:active {
    transform: scale(0.95);
}


.copy-btn.copy-success {
    background: var(--nm-success);
    border-color: var(--nm-success);
    color: var(--nm-text-on-status);
}

.copy-btn.copy-fail {
    background: var(--nm-danger);
    border-color: var(--nm-danger);
    color: var(--nm-text-on-status);
}


/* --- Notes, Warnings, and Danger Blocks --- */
.note, .warning, .note-warning, .danger, .tip, .modal-disclaimer {
    border-inline-start: 4px solid var(--nm-border);
    background: transparent;
    border: 1px solid var(--nm-border);
    border-left-width: 5px;
    padding: 0.8rem;
    border-radius: 0px !important;
    margin: 15px 0;
    font-size: 0.85rem;
    line-height: 1.3;
}

/* ================================================================= PAGE-SPECIFIC STYLES ================================================================= */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    justify-items: center;
    padding-top: 20px;
}

.contact-grid .app-icon {
    width: 100%;
    max-width: 350px;
    height: auto;
    padding: 12px 15px;
    gap: 15px;
    clip-path: none;
    border-radius: 0px !important;
    background: var(--nm-container);
border: 1px solid var(--nm-border);
    color: var(--nm-text);
    cursor: pointer;
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
    position: relative;
    transition: all 0.25s var(--ease-out-cubic);
}

.contact-grid .app-icon:hover {
    background: var(--nm-accent);
    border-color: var(--nm-accent);
    color: var(--nm-text-on-accent);
    transform: translateY(-3px);
    box-shadow: none;
}

.contact-grid .app-icon:active {
    transform: translateY(0px) scale(0.97);
    transition-duration: 0.1s;
}

.contact-grid .app-icon i {
    color: var(--nm-text);
    font-size: 1.5rem;
    transition: color 0.2s ease;
}

.contact-grid .app-icon .x-contact-icon {
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}

.contact-grid .app-icon:hover i {
    color: var(--nm-text-on-accent) !important;
}

.contact-grid .app-icon span {
    font-size: 1rem;
}

/* --- Portfolio/GitHub page: Job Experience grid --- */
.job-experience-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    margin: 18px 0 6px;
}

@media (max-width: 980px) {
    .job-experience-grid {
        /* Keep 3-per-row on smaller screens too (to match the GitHub README layout). */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .job-experience-card {
        padding: 10px !important;
    }

    .job-experience-title {
        font-size: 0.82rem !important;
    }
}

@media (max-width: 640px) {
    .job-experience-grid {
        /* 3 columns even on mobile */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .job-experience-card {
        padding: 8px !important;
    }

    .job-experience-title {
        font-size: 0.75rem !important;
    }
}

.job-experience-card {
    width: 100%;
    background: var(--nm-menu-solid);
    border: 1px solid var(--nm-border);
    border-radius: 0px !important;
    padding: 12px;
    text-align: center;
}

.job-experience-card img {
    width: 100%;
    height: auto;
    max-width: 260px;
    border-radius: 0px !important;
}

.job-experience-title {
    margin-top: 10px;
    font-size: 0.9rem;
    font-family: var(--font-mono);
    color: var(--nm-text);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.portfolio-card {
    background: var(--nm-dark);
border: 1px solid var(--nm-border);
    border-radius: 0px !important;
    padding: 20px;
    text-decoration: none;
    color: var(--nm-text);
    transition: transform 0.25s var(--ease-out-cubic), border-color 0.25s ease;
}

.portfolio-card:hover {
    border-color: var(--nm-accent);
    transform: translateY(-3px);
    box-shadow: none;
}

.portfolio-card h4 {
    color: var(--nm-text-accent);
    font-family: var(--font-secondary);
    margin-bottom: 10px;
    font-size: 1.13rem; 
}

.portfolio-card p {
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--nm-text-muted);
}

.github-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    justify-items: center;
    align-items: start;
    margin: 30px 0;
}

@media (max-width: 1100px) {
    .github-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .github-stats {
        grid-template-columns: 1fr;
    }
}
.github-stats img {
    width: 100%;
    max-width: 520px;
    height: auto;
    border: 1px solid var(--nm-border);
    border-radius: 0px !important;
    transition: box-shadow 0.3s ease;
    filter: none;
}
.github-stats img:hover {
    box-shadow: none;
    border-color: var(--nm-accent);
}

.github-stat-light { display: none; }
.github-stat-dark { display: block; }

body.light-theme .github-stat-light { display: block; }
body.light-theme .github-stat-dark { display: none; }









.content-section-modal {
    margin-top: 10px;
}

/* --- Misc Components --- */
.modal-divider {
    margin: 2rem 0;
    border-color: var(--nm-border);
}

.text-center {
    text-align: center;
}


/* === IMPROVED FAQ PAGE STYLES === */
.category-header {
    background: var(--nm-dark);
    border: 1px solid var(--nm-border);
    border-radius: 0px !important;
    padding: 15px 20px;
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s var(--ease-in-out-cubic);
}

.category-header:hover {
    border-color: var(--nm-accent);
    background: var(--nm-container);
    transform: translateY(-2px);
}

.category-header h3,
.category-header h2 {
    margin: 0;
    font-family: var(--font-secondary);
    color: var(--nm-text-accent);
    font-size: 1.02rem; 
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.toggle-icon {
    color: var(--nm-text);
    transition: transform 0.3s var(--ease-in-out-cubic);
}

.category.active .toggle-icon {
    transform: rotate(180deg);
}

.tools-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-in-out-cubic);
    margin: 0;
    padding: 0;
}

.category.active .tools-list {
    max-height: 5000px;
}

.tool-item {
    border-bottom: 1px solid var(--nm-border);
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.3s var(--ease-in-out-cubic);
    background: var(--nm-container);
}

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

.tool-item:hover {
    background: var(--nm-accent);
    color: var(--nm-text-on-accent);
    border-color: var(--nm-accent);
    transform: translateY(-2px);
}

.tool-item:hover .tool-title,
.tool-item:hover .tool-expand-icon,
.tool-item:hover .note-warning,
.tool-item:hover .note,
.tool-item:hover .copy-btn {
    color: var(--nm-text-on-accent) !important;
    border-color: var(--nm-text-on-accent) !important;
}

/* FIXED: Keep code box text WHITE on hover, because box background is BLACK */
.tool-item:hover .code-container {
    border-color: var(--nm-text-on-accent) !important;
}
.tool-item:hover .code-container code {
    color: var(--nm-text) !important;
}

.tool-item:hover .copy-btn {
    background: var(--nm-text-on-accent) !important;
    color: var(--nm-accent) !important;
}

.tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tool-title {
    margin: 0;
    color: var(--nm-text);
    font-family: var(--font-mono);
    font-size: 0.85rem; 
    font-weight: 600;
}

.tool-expand-icon {
    color: var(--nm-text);
    transition: transform 0.3s var(--ease-in-out-cubic);
}

.tool-item.active .tool-expand-icon {
    transform: rotate(180deg);
}

.tool-description {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-in-out-cubic);
    padding-top: 0;
    opacity: 0;
}

.tool-item.active .tool-description {
    max-height: 2000px;
    padding-top: 15px;
    opacity: 1;
}

.tool-description p {
    margin-top: 0;
    color: var(--nm-text-muted);
    line-height: 1.3;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.tool-item:hover .tool-description p {
    color: var(--nm-text-on-accent);
}

.tool-features {
    margin-top: 15px;
}

.tool-features h5 {
    color: var(--nm-text-accent);
    font-family: var(--font-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.3em;
    transition: color 0.3s ease;
}

.tool-item:hover .tool-features h5,
.tool-item:hover .tool-features li {
    color: var(--nm-text-on-accent);
}
.tool-item:hover .tool-features li::before {
    color: var(--nm-text-on-accent);
}

/* ADDED: FAQ Button Styles to fix rendering issues */
.faq-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.faq-button-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.faq-link-btn {
    background: var(--nm-container);
border: 1px solid var(--nm-border);
    color: var(--nm-text);
    padding: 10px 20px;
    border-radius: 0px !important;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.25s var(--ease-out-cubic);
    width: 100%;
    text-align: center;
}

.faq-link-btn:hover {
    background: var(--nm-accent);
    color: var(--nm-text-on-accent);
    border-color: var(--nm-accent);
    transform: translateY(-3px);
}

.faq-link-btn:hover i {
    color: var(--nm-text-on-accent) !important;
}
























































.contact-page-btn {
    display: inline-block;
    background: var(--nm-accent);
    color: var(--nm-text-on-accent);
    padding: 15px 30px;
    border-radius: 0px !important;
    text-decoration: none;
    font-family: var(--font-secondary);
    font-weight: bold;
    font-size: 1.1rem;
    border: 2px solid transparent;
    transition: all 0.3s var(--ease-out-cubic);
    box-shadow: none;
    margin: 20px 0;
    text-align: center;
    width: 100%;
    max-width: 300px;
    box-sizing: border-box;
    cursor: pointer;
}

.contact-page-btn:hover {
    background: var(--nm-container);
    color: var(--nm-text);
    border-color: var(--nm-accent);
    transform: translateY(-3px);
    box-shadow: none;
}

.contact-page-btn:active {
    transform: translateY(0px) scale(0.97);
}

.contact-cta {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

/* ================================================================= MEDIA QUERIES ================================================================= */

@media (max-width: 992px) {
    body {
        font-size: 13px;
    }
    
    .phone-container {
        height: auto;
        min-height: calc(var(--vh, 1vh) * 100);
        margin-top: 0;
        padding-top: var(--nav-h, 70px);
    }

    .page-content {
        margin-top: 0;
        padding: calc(var(--nav-h, 70px) + 15px) 15px 15px;
    }

    .content-section {
        padding: 15px;
        margin-bottom: 15px;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }

    .nav-title .site-title {
        font-size: 1.35rem;
        gap: 8px;
    }

    #disclaimer-modal .modal-footer {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    
    #disclaimer-modal.banner-style .modal-footer {
        flex-direction: row;
    }

    #disclaimer-modal .decline-btn, #disclaimer-modal .accept-btn {
        font-size: 0.9rem;
        padding: 10px 15px;
        min-height: 35px;
        min-width: 80px;
        margin: 0;
    }

    .modal-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .modal-content {
        width: 95%;
        height: 95%;
    }
    
    .modal-overlay.banner-style .modal-content {
        width: 100%;
        height: auto;
        max-height: 50vh;
    }

    .modal-header {
        padding: 15px 20px;
    }

    .modal-body {
        padding: 20px;
        font-size: 0.9rem;
    }

    .modal-header h2 {
        font-size: 1.105rem; 
    }
    
    .hero-section {
        padding: 25px 0 35px 0;
    }

    .hero-section h2 {
        font-size: 1.445rem; 
    }

    .hero-text {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

    .trust-indicators {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-cta {
        width: 100%;
        max-width: 280px;
    }

    .stats-section {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .community-grid {
        grid-template-columns: 1fr;
    }

    

    

    

    

    

    

    

    

    .contact-page-btn {
        padding: 12px 25px;
        font-size: 1rem;
        max-width: 250px;
    }

    /* FAQ Mobile Improvements */
    .category-header {
        padding: 12px 15px;
    }
    
    .category-header h3 {
        font-size: 0.935rem; 
    }
    
    .tool-item {
        padding: 12px 15px;
    }
    
    .tool-title {
        font-size: 0.808rem; 
    }
    
    .tool-description {
        font-size: 0.9rem;
    }
    
    .code-container {
        padding-top: 35px;
        font-size: 0.85rem;
    }
    
    .note, .warning, .note-warning, .danger, .tip {
        padding: 0.7rem;
        margin: 10px 0;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    
    p {
        font-size: 0.85rem;
        line-height: 1.2;
    }
    
    .content-section {
        padding: 12px;
    }
}

/* ================================================================= 
   PC "HORIZONTAL MOBILE" STYLES 
   (Keeps burger menu & mobile logic, but expands content width)
================================================================= */
@media (min-width: 993px) {
    /* DO NOT HIDE BURGER MENU - Keep mobile nav structure */
    
    .nav-container {
        padding: 10px 0;
    }

    /* Page Content expands horizontally */
    .page-content {
        margin-top: 0;
        padding: calc(var(--nav-h, 70px) + 30px) 30px 30px;
    }

    .phone-container {
        height: auto;
        min-height: calc(var(--vh, 1vh) * 100);
        max-width: 1400px;
        margin: 0 auto;
    }

    .screen {
        height: auto;
        overflow-y: visible;
    }

    .home-screen {
        padding-top: 20px;
        max-width: 1300px;
    }

    /* Hero Section - Better Spacing for PC */
    .hero-section {
        padding: 60px 0 70px 0;
    }
    
    .hero-section h2 {
        font-size: 2.125rem; 
    }
    
    .hero-text {
        font-size: 1rem;
        max-width: 800px;
    }

    
    

    

    .contact-page-btn {
        max-width: 350px;
        padding: 18px 35px;
        font-size: 1.2rem;
    }
    
    /* Modal Improvements for PC */
    .modal-overlay.banner-style .modal-content {
        width: 95%;
        max-width: 1200px;
        margin: 0 auto;
        border-radius: 0px !important;
    }
    
    /* Hover Effects for PC */
    .category-header:hover {
        transform: translateY(-3px);
    }
    
    .tool-item:hover {
        transform: translateY(-3px);
    }
    
    .content-section {
        padding: 25px;
    }
    
    .feature-card {
        padding: 20px;
    }
}

@media (min-width: 1400px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    .feature-card {
        padding: 25px;
    }
    
    .hero-section {
        padding: 80px 0 90px 0;
    }
    
    .hero-section h2 {
        font-size: 2.55rem; 
    }
}

/* ================================================================= ACCESSIBILITY/FOCUS STYLES ================================================================= */

button:focus-visible,
.nav-link:focus-visible,
.nav-action-btn:focus-visible,
.contact-grid .app-icon:focus-visible,
.feature-card:focus-visible,
.category-header:focus-visible,
.tool-header:focus-visible {
    outline: 2px solid var(--nm-accent) !important;
    outline-offset: 2px;
    box-shadow: none;
}

.form-group input:focus-visible,
.form-group textarea:focus-visible {
    outline: none !important;
    border-color: var(--nm-accent) !important;
    box-shadow: none !important;
}

/* === PERFORMANCE OPTIMIZATIONS === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/*
    ================================================================
    PREMIUM GLASS OVERRIDES + SEARCH UI (Performance-first)
    ================================================================
*/

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 0px !important;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .main-nav,
    .nav-menu,
    .content-section,
    .feature-card,
    .tool-card,
    .tool-item,
    .category-header,
    .modal-content,
    .code-container,
    .contact-grid .app-icon,
    .community-card,
    .nav-action-btn {
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    }
}


/* --- SOLID NAV (no glass blur) --- */
.main-nav,
.nav-menu {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.main-nav {
    background-color: var(--nm-nav-solid) !important;
    border-bottom: 1px solid var(--nm-border) !important;
    box-shadow: var(--shadow-elev-1) !important;
}

.nav-menu {
    background: var(--nm-dark);
box-shadow: var(--shadow-elev-2);
}

.content-section,
.feature-card,
.tool-card {
    background: var(--nm-container);
    box-shadow: var(--shadow-elev-1);
}

.content-section:hover,
.feature-card:hover,
.tool-card:hover {
    border-color: var(--nm-accent);
    transform: translateY(-2px);
}

/* Desktop layout improvements */
@media (min-width: 980px) {
    .nav-action-btn span { display: inline; }
    .nav-action-btn { padding: 10px 12px; }
    .page-content { padding: calc(var(--nav-h, 70px) + 32px) 24px 24px; }
    .features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .phone-container { width: min(1200px, calc(100% - 48px)); margin: 0 auto; padding: 0 16px; padding-top: var(--nav-h, 70px); }
    .screen { border-radius: 0px !important; }
}

/* Home "phone" wrapper becomes a real layout on desktop */
.phone-container {
    margin-top: 0;
    padding: 0 16px;
    padding-top: var(--nav-h, 70px);
    box-sizing: border-box;
}
.screen {
    max-width: 1200px;
    margin: 0 auto;
}

/* Search modal */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: calc(var(--nav-h, 70px) + 18px) 16px 16px;
    z-index: calc(var(--z-modal-overlay) + 20);
}
.search-overlay.visible { display: flex; }

.search-modal {
    width: min(900px, 100%);
    border: 1px solid var(--nm-border);
    border-radius: 0px !important;
    background: var(--nm-dark);
box-shadow: var(--shadow-elev-2);
    overflow: hidden;
}

.search-top {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.search-input {
    width: 100%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--nm-text);
    border-radius: 0px !important;
    padding: 12px 12px;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    outline: none;
}

body.light-theme .search-input {
    background: rgba(10,10,18,0.06);
    border: 1px solid rgba(10,10,18,0.10);
}

.search-close {
    background: transparent;
    border: 1px solid var(--nm-border);
    color: var(--nm-text);
    border-radius: 0px !important;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s var(--ease-out-cubic);
}
.search-close:hover {
    background: var(--nm-accent);
    color: var(--nm-text-on-accent);
}
.search-close:hover i { color: var(--nm-text-on-accent) !important; }

.search-results {
    max-height: min(60vh, 520px);
    overflow: auto;
    padding: 8px;
}

.search-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    padding: 12px 12px;
    border-radius: 0px !important;
    border: 1px solid transparent;
    color: var(--nm-text);
    transition: all 0.2s var(--ease-out-cubic);
}
.search-item:hover,
.search-item:focus-visible {
    border-color: var(--nm-border);
    background: rgba(255,255,255,0.06);
}
.search-item-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-secondary);
    font-size: 0.98rem;
}
.search-item-meta {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--nm-text-muted);
}

/* Performance: avoid offscreen work on long pages */
.content-section,
.feature-card,
.tool-item,
.category {
    content-visibility: auto;
    contain-intrinsic-size: 600px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Home hero */
.hero-section {
    padding: 26px 18px 10px;
    border-radius: 0px !important;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--nm-container);
    box-shadow: var(--shadow-elev-1);
    margin-bottom: 18px;
}

.hero-title {
    margin: 0 0 10px 0;
    font-family: var(--font-secondary);
    font-size: clamp(1.45rem, 6vw, 3.4rem);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.hero-kicker {
    margin: 0 0 14px 0;
    color: var(--nm-text-muted);
    font-size: 1rem;
}

.hero-section h2 {
    margin-top: 10px;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    color: var(--nm-text);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 0px !important;
    border: 1px solid var(--nm-border);
    text-decoration: none;
    font-family: var(--font-mono);
    color: var(--nm-text);
    background: rgba(255,255,255,0.06);
    transition: all 0.2s var(--ease-out-cubic);
    min-width: 140px;
}

.btn:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--glow-rgb), 0.75);
}

.btn-primary {
    background: var(--nm-accent);
    border-color: var(--nm-accent);
    color: var(--nm-text-on-accent);
}
.btn-primary:hover { background: var(--nm-accent-hover); }

.btn-ghost {
    background: transparent;
}

.btn i { color: inherit !important; }

/* Nav action labels fallback (icons may fail to load) */
.nav-action-btn span{display:inline;}
@media (max-width:420px){.nav-action-btn span{display:none;} .nav-action-btn span.nav-action-label{display:inline !important;}}

/* Stack multi-word navbar labels vertically ("Word\nWord") */
.nav-action-btn .nav-action-label {
  display: block;
  white-space: pre-line;
  text-align: center;
  line-height: 1.05;
}

.main-nav .burger-label {
  white-space: pre-line;
  text-align: center;
}

@media (max-width: 420px) {
  .nav-title .site-title { font-size: 1.15rem; }
}

.hero-section > * { position: relative; z-index: 1; }

.hero-logo {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 14px 0 10px 0;
}

.hero-logo-img {
    width: clamp(56px, 16vw, 92px);
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0px !important;
    box-shadow: 0 14px 30px rgba(0,0,0,0.22);
}

body.light-theme .hero-logo-img {
    box-shadow: 0 12px 24px rgba(0,0,0,0.14);
}


.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 16px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 0px !important;
    background: var(--nm-darkest);
    border: 1px solid var(--nm-border);
    color: var(--nm-text);
    font-size: 0.85rem;
    line-height: 1;
}

.badge i { color: var(--nm-text-accent); }
.badge-alt { background: var(--nm-container); }
.badge-alt2 { background: var(--nm-dark); }

.hero-subtitle {
    font-size: clamp(1.05rem, 3.4vw, 1.35rem);
    margin: 14px auto 0;
    max-width: 52ch;
    line-height: 1.25;
    color: var(--nm-text);
    opacity: 0.95;
}

.hero-kicker {
    max-width: 70ch;
    margin: 10px auto 0;
    font-size: 1rem;
}

.hero-actions { margin-top: 18px; }






@media (max-width: 720px) {
    .hero-glance { grid-template-columns: 1fr; }
    .glance-card { text-align: center; }
}

/* --- Mobile header tightening so the full title fits --- */
@media (max-width: 420px) {
  .main-nav { padding: var(--safe-area-inset-top) 10px 0; }
  .nav-container { gap: 8px; }
  .nav-actions { gap: 6px; }
  .nav-action-btn { padding: 6px 8px; }
  .nav-title .site-title { font-size: 0.98rem; letter-spacing: 0.02em; }
}
@media (max-width: 360px) {
  .nav-title .site-title { font-size: 0.92rem; }
  .nav-actions { gap: 5px; }
}


/* Home-only centering */
.home-screen .features-grid{justify-items:center;}
.home-screen .feature-card{align-items:center;text-align:center;}
.home-screen .feature-icon-wrapper{margin-left:auto;margin-right:auto;}
.home-screen .feature-cta{justify-content:center;}
.home-screen .community-grid,.home-screen .contact-grid{justify-content:center;}

/* Premium glass glance animation */
@keyframes glassGlance {
  0%   { background-position: center, center, center, -120% 0; }
  55%  { background-position: center, center, center, 220% 0; }
  100% { background-position: center, center, center, 220% 0; }
}
@keyframes glassSweep {
  0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
  15% { opacity: .55; }
  100% { transform: translateX(140%) skewX(-18deg); opacity: 0; }
}

.glance-card::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.16) 45%, transparent 72%);
    background-size: 220% 220%;
    background-position: -120% 0;
    animation: glassGlance 8s var(--ease-in-out-cubic) infinite;
    opacity: 0.45;
    pointer-events:none;
}
.glance-card > *{position:relative; z-index:1;}

/* Hover sheen for interactive elements */
.btn, .nav-action-btn{ position: relative; overflow: hidden; }
.btn::after, .nav-action-btn::after{
    content:"";
    position:absolute;
    inset:-2px;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.22) 45%, transparent 72%);
    transform: translateX(-140%) skewX(-18deg);
    opacity:0;
    pointer-events:none;
}
@media (hover:hover){
  .btn:hover::after, .nav-action-btn:hover::after{ animation: glassSweep 1.1s var(--ease-out-cubic); }
}

/* Light theme polish */
body.light-theme .badge{ background: rgba(255,255,255,0.92); }
body.light-theme .badge i{ color: var(--nm-accent) !important; }
body.light-theme .badge-alt{ background: rgba(255,255,255,0.88); }
body.light-theme .badge-alt2{ background: rgba(255,255,255,0.82); }
body.light-theme .hero-section{ border-color: rgba(168, 85, 247,0.18); }
body.light-theme .btn{ background: rgba(255,255,255,0.86); }
body.light-theme .glance-card{ background: rgba(255,255,255,0.82); }
body.light-theme .nav-action-btn{ background: rgba(255,255,255,0.80); }

/* Index: quick-start steps */
.hero-steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin: 16px auto 0;
  max-width: 980px;
}
.step-card{
  background: var(--nm-dark);
  border: 1px solid var(--nm-border);
  border-radius: 0px !important;
  padding: 14px 14px;
  box-shadow: var(--shadow-elev-1);
  position: relative;
  overflow: hidden;
}
.step-card i{ font-size: 1.15rem; color: var(--nm-accent); }
.step-title{ margin-top: 8px; font-weight: 800; letter-spacing: .2px; }
.step-text{ margin-top: 6px; color: var(--nm-text-muted); font-size: .92rem; line-height: 1.25; }
.step-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.14) 45%, transparent 72%);
  background-size: 220% 220%;
  background-position: -120% 0;
  animation: glassGlance 9s var(--ease-in-out-cubic) infinite;
  opacity:.35;
  pointer-events:none;
}
.step-card > *{ position: relative; z-index: 1; }

@media (max-width: 820px){
  .hero-steps{ grid-template-columns: 1fr; }
  .step-card{ text-align: center; }
}
body.light-theme .step-card{ background: rgba(255,255,255,0.86); }

/* =================================================================
   MOBILE PERFORMANCE LITE MODE
   - Disables expensive continuous animations & heavy blurs on touch devices
   ================================================================= */

@media (hover: none), (pointer: coarse), (max-width: 820px) {
  :root {
    --glass-blur: 10px;
    --glass-sat: 120%;
  }

  /* Heavy blur glow in hero is expensive on mobile GPUs */
  .hero-section::before {
    filter: none !important;
    opacity: 0.18;
  }

  /* Continuous sheen animations (great on desktop, costly on mobile) */
  .feature-card::before,
  .glance-card::after,
  .step-card::after {
    animation: none !important;
  }

  /* Backdrop blur is one of the most expensive effects on mobile */
  .content-section,
  .feature-card,
  .tool-card,
  .tool-item,
  .category-header,
  .modal-content,
  .code-container,
  .contact-grid .app-icon,
  .community-card,
  .nav-action-btn {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Avoid large hover transforms (no true hover on touch) */
  .feature-card:hover,
  .content-section:hover,
  .tool-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-data: reduce) {
  body::before { display: none !important; }
}


.btn:focus-visible{outline:none; box-shadow: var(--focus-ring);}


/* =================================================================
   QUICK 5-SECOND CLARITY (HOMEPAGE)
   ================================================================= */
.hero-nontech{
  margin-top: 14px;
  padding: 14px;
  border-radius: 0px !important;
  border: 1px solid rgba(168, 85, 247, 0.55);
  background: rgba(14, 14, 24, 0.52);
  backdrop-filter: blur(10px);
}
.hero-nontech .nontech-title{
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
  color: var(--nm-accent-hover);
}
.hero-nontech .nontech-sub{
  margin-top: 6px;
  color: var(--nm-text-muted);
  font-size: 0.95rem;
}
.hero-nontech .nontech-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (min-width: 720px){
  .hero-nontech .nontech-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}
.hero-nontech .nontech-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 0px !important;
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(0,0,0,0.22);
}
.hero-nontech .nontech-item i{
  color: var(--nm-accent);
  font-size: 1.05rem;
}
.hero-nontech .nontech-item span{
  color: var(--nm-text);
  font-weight: 600;
}
















/* ============================================================================
   ASSISTANT (Static JSON, GitHub Pages safe)
   ============================================================================ */
.assistant-shell {
    position: fixed;
    right: max(14px, calc(var(--safe-area-inset-right, 0px) + 10px));
    bottom: max(14px, calc(var(--safe-area-inset-bottom, 10px) + 10px));
    z-index: 1200;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
}

.assistant-shell--page {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 1;
    display: block;
    width: 100%;
    pointer-events: auto;
}

.assistant-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: min(94vw, 450px);
    max-height: min(82vh, 820px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0px !important;
    background: linear-gradient(180deg, rgba(18, 18, 30, 0.98), rgba(10, 10, 18, 1));
    border: 1px solid var(--nm-border);
    box-shadow: var(--shadow-elev-3), 0 0 0 1px rgba(var(--glow-rgb), 0.08) inset;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(18px) scale(0.98);
    transform-origin: bottom right;
    transition: opacity 0.22s var(--ease-out-cubic), transform 0.22s var(--ease-out-cubic), visibility 0s linear 0.22s;
}

body.light-theme .assistant-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 242, 250, 1));
}

.assistant-shell.open .assistant-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity 0.22s var(--ease-out-cubic), transform 0.22s var(--ease-out-cubic), visibility 0s linear 0s;
}

.assistant-trigger {
    pointer-events: auto;
    width: 68px;
    height: 68px;
    border: 1px solid rgba(var(--glow-rgb), 0.58);
    border-radius: 0px !important;
    background: linear-gradient(135deg, rgba(18, 18, 30, 1), rgba(46, 20, 74, 1));
    color: var(--nm-text-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    cursor: pointer;
    box-shadow: var(--shadow-elev-2), 0 0 24px rgba(var(--glow-rgb), 0.22), inset 0 1px 0 rgba(255,255,255,0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    font-family: var(--font-mono);
}

body.light-theme .assistant-trigger {
    background: linear-gradient(135deg, rgba(245, 242, 250, 1), rgba(224, 214, 240, 1));
}

.assistant-trigger:hover,
.assistant-trigger:focus-visible {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-elev-2), 0 0 30px rgba(var(--glow-rgb), 0.28), inset 0 1px 0 rgba(255,255,255,0.1);
    border-color: rgba(var(--glow-rgb), 0.74);
}

.assistant-trigger:focus-visible,
.assistant-close:focus-visible,
.assistant-home:focus-visible,
.assistant-refresh:focus-visible,
.assistant-chip:focus-visible,
.assistant-open-link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.assistant-trigger-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.assistant-trigger-text {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

.assistant-header {
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(var(--glow-rgb), 0.14);
    background: linear-gradient(180deg, rgba(var(--glow-rgb), 0.08), rgba(0, 0, 0, 0));
}

.assistant-header-top {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.assistant-title-wrap {
    min-width: 0;
}

.assistant-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.15;
    color: var(--nm-text-accent);
    font-family: var(--font-secondary);
}

.assistant-subtitle {
    margin: 5px 0 0;
    font-size: 0.78rem;
    color: var(--nm-text-muted);
}

.assistant-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.assistant-close,
.assistant-home,
.assistant-refresh {
    min-width: 38px;
    height: 38px;
    border-radius: 0px !important;
    border: 1px solid rgba(var(--glow-rgb), 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: var(--nm-text-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

body.light-theme .assistant-close,
body.light-theme .assistant-home,
body.light-theme .assistant-refresh {
    background: rgba(0, 0, 0, 0.04);
}


.assistant-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.assistant-chat {
    flex: 1 1 auto;
    min-height: 380px;
    max-height: min(68vh, 660px);
    overflow: auto;
    padding: 14px 14px 14px;
    background: linear-gradient(180deg, rgba(var(--glow-rgb), 0.04), rgba(0, 0, 0, 0));
}

.assistant-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.assistant-message {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 92%;
}

.assistant-message--user {
    align-self: flex-end;
    align-items: flex-end;
}

.assistant-message--assistant {
    align-self: flex-start;
    align-items: flex-start;
}

.assistant-message-label {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nm-text-muted);
    font-family: var(--font-mono);
    padding: 0 4px;
}

.assistant-bubble {
    border-radius: 0px !important;
    border: 1px solid rgba(var(--glow-rgb), 0.16);
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.assistant-message--user .assistant-bubble {
    background: linear-gradient(135deg, rgba(var(--glow-rgb), 0.22), rgba(42, 16, 62, 0.88));
    border-color: rgba(var(--glow-rgb), 0.34);
}

body.light-theme .assistant-bubble {
    background: rgba(0, 0, 0, 0.03);
}

body.light-theme .assistant-message--user .assistant-bubble {
    background: linear-gradient(135deg, rgba(var(--glow-rgb), 0.16), rgba(233, 225, 244, 1));
}

.assistant-bubble-heading {
    margin: 0 0 8px;
    color: var(--nm-text-accent);
    font-size: 0.92rem;
    line-height: 1.28;
}

.assistant-bubble-text {
    margin: 0;
    color: var(--nm-text);
    font-size: 0.86rem;
    line-height: 1.55;
    white-space: pre-line;
}

.assistant-bubble-rich {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.assistant-rich-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 0px !important;
    border: 1px solid rgba(var(--glow-rgb), 0.12);
    background: rgba(255, 255, 255, 0.025);
}

.assistant-rich-section + .assistant-rich-section {
    margin-top: 2px;
}

.assistant-rich-section-title {
    margin: 0;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nm-text-accent);
    font-family: var(--font-mono);
}

.assistant-rich-section-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assistant-inline-code {
    display: inline-block;
    margin: 2px 0;
    padding: 3px 7px;
    border-radius: 0px !important;
    border: 1px solid rgba(var(--glow-rgb), 0.18);
    background: rgba(var(--glow-rgb), 0.08);
    color: var(--nm-text-accent);
    font-family: var(--font-mono);
    font-size: 0.78em;
    white-space: normal;
    word-break: break-word;
}

body.light-theme .assistant-rich-section {
    background: rgba(0, 0, 0, 0.025);
}

body.light-theme .assistant-inline-code {
    background: rgba(var(--glow-rgb), 0.06);
}

.assistant-bubble-meta {
    margin-top: 10px;
    color: var(--nm-text-muted);
    font-size: 0.72rem;
    font-family: var(--font-mono);
}

.assistant-typing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
}

.assistant-typing span {
    width: 8px;
    height: 8px;
    border-radius: 0px !important;
    background: rgba(var(--glow-rgb), 0.78);
    animation: assistantTyping 1.1s infinite ease-in-out;
}

.assistant-typing span:nth-child(2) {
    animation-delay: 0.14s;
}

.assistant-typing span:nth-child(3) {
    animation-delay: 0.28s;
}

@keyframes assistantTyping {
    0%, 80%, 100% {
        opacity: 0.35;
        transform: translateY(0) scale(0.92);
    }
    40% {
        opacity: 1;
        transform: translateY(-2px) scale(1);
    }
}

.assistant-suggestion-section + .assistant-suggestion-section {
    margin-top: 12px;
}

.assistant-suggestion-title {
    margin: 0 0 8px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nm-text-muted);
    font-family: var(--font-mono);
}

.assistant-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.assistant-chip {
    border: 1px solid rgba(var(--glow-rgb), 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: var(--nm-text);
    border-radius: 0px !important;
    padding: 10px 12px;
    font-size: 0.77rem;
    line-height: 1.25;
    cursor: pointer;
    text-align: center !important;
}

body.light-theme .assistant-chip {
    background: rgba(0, 0, 0, 0.035);
}

.assistant-chip:hover,
.assistant-chip.is-active {
    border-color: rgba(var(--glow-rgb), 0.52);
    color: var(--nm-text-accent);
    box-shadow: 0 0 0 1px rgba(var(--glow-rgb), 0.14) inset;
}

.assistant-message--suggestions {
    align-self: stretch;
    max-width: 100%;
}

.assistant-message--suggestions .assistant-bubble {
    width: 100%;
}

.assistant-empty,
.assistant-status {
    color: var(--nm-text-muted);
    font-size: 0.84rem;
    padding: 2px 0;
}

.assistant-open-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 0px !important;
    border: 1px solid rgba(var(--glow-rgb), 0.26);
    text-decoration: none;
    color: var(--nm-text-accent);
    background: rgba(var(--glow-rgb), 0.1);
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 12px;
}

.assistant-open-link:hover {
    background: rgba(var(--glow-rgb), 0.16);
}

@media (max-width: 640px) {
    .assistant-panel {
        width: min(96vw, 420px);
        max-height: min(84vh, 800px);
    }

    .assistant-chat {
        min-height: 320px;
        max-height: min(68vh, 680px);
    }

    .assistant-trigger {
        width: 64px;
        height: 64px;
        border-radius: 0px !important;
    }

    .assistant-trigger-text {
        font-size: 0.58rem;
    }
}


.assistant-shell--page .assistant-panel {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(100%, 760px);
    max-height: none;
    margin: 0 auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transform-origin: center top;
}

.assistant-shell--page .assistant-trigger,
.assistant-shell--page .assistant-close {
    display: none;
}

.assistant-shell--page .assistant-chat {
    min-height: min(72vh, 760px);
    max-height: none;
}

.assistant-page-content {
    padding-bottom: 40px;
}

.assistant-page-note {
    max-width: 760px;
    margin: 0 auto 18px;
    padding: 14px 16px;
    border-radius: 0px !important;
    border: 1px solid var(--nm-border);
    background: rgba(var(--glow-rgb), 0.08);
    box-shadow: var(--shadow-elev-1);
}

.assistant-page-note p {
    margin: 0;
}

.assistant-page-root {
    width: 100%;
}

@media (max-width: 640px) {
    .assistant-shell--page .assistant-panel {
        width: 100%;
        border-radius: 0px !important;
    }

    .assistant-shell--page .assistant-chat {
        min-height: 68vh;
    }

    .assistant-page-note {
        padding: 13px 14px;
    }
}

.assistant-inline-link {
    color: var(--nm-text-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-word;
}

.assistant-inline-link:hover,
.assistant-inline-link:focus-visible {
    color: var(--nm-text-accent);
    opacity: 0.92;
}


/* === Compact nav controls + equal home cards (2026-04-05) === */
.nav-actions{
    gap:8px;
    align-items:center;
}

.nav-action-btn{
    min-width:44px;
    width:44px;
    height:44px;
    padding:0;
    border-radius: 0px !important;
    font-size:1rem;
    font-weight:700;
}

.nav-action-btn i{font-size:1rem;}

.nav-action-btn .nav-action-label{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    line-height:1;
    white-space:nowrap;
    text-align:center;
    font-size:0.95rem;
    font-weight:800;
    letter-spacing:0.03em;
}

.nav-theme-btn .nav-theme-label{
    font-size:1.18rem;
}

.nav-lang-btn .nav-lang-label{
    font-size:0.9rem;
}

.burger-menu{
    min-width:54px;
    width:54px;
    min-height:54px;
    gap:3px;
}

.burger-label{
    font-size:0.56rem;
    font-weight:800;
    letter-spacing:0.16em;
    text-transform:uppercase;
    margin-top:1px;
    line-height:1;
}

.home-screen .features-grid{
    grid-template-columns:repeat(auto-fit, minmax(180px, 220px));
    justify-content:center;
    justify-items:center;
    gap:16px;
    max-width:980px;
    margin:24px auto 44px;
}

.home-screen .feature-card{
    width:100%;
    max-width:220px;
    min-height:186px;
    padding:12px;
    border-radius: 0px !important;
}

.home-screen .feature-icon-wrapper{
    width:42px;
    height:42px;
    margin-bottom:10px;
}

.home-screen .feature-icon{
    font-size:1.35rem;
}

.home-screen .feature-title{
    font-size:0.92rem;
    margin-bottom:8px;
}

.home-screen .feature-description{
    font-size:0.72rem;
    line-height:1.25;
    margin-bottom:8px;
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.home-screen .feature-cta{
    margin-top:auto;
    font-size:0.78rem;
    gap:6px;
}

.home-screen .community-section{
    padding-top:18px;
    padding-bottom:18px;
}

.home-screen .community-grid{
    grid-template-columns:repeat(auto-fit, minmax(160px, 190px));
    justify-content:center;
    gap:14px;
    max-width:430px;
    margin:22px auto 0;
}

.home-screen .community-card{
    width:100%;
    max-width:190px;
    min-height:108px;
    padding:16px 12px;
    gap:10px;
    border-radius: 0px !important;
}

.home-screen .community-card i{
    font-size:1.8rem;
}

.home-screen .community-card span{
    font-size:0.82rem;
    line-height:1.2;
}

@media (min-width: 980px){
    .nav-action-btn{
        width:46px;
        min-width:46px;
        height:46px;
    }

    .home-screen .features-grid{
        grid-template-columns:repeat(4, 220px);
    }

    .home-screen .community-grid{
        grid-template-columns:repeat(2, 190px);
    }
}

@media (max-width: 520px){
    .nav-actions{gap:6px;}
    .nav-action-btn{
        width:42px;
        min-width:42px;
        height:42px;
    }
    .nav-action-btn .nav-action-label{font-size:0.88rem;}
    .nav-theme-btn .nav-theme-label{font-size:1.08rem;}
    .burger-menu{
        min-width:50px;
        width:50px;
        min-height:50px;
    }
    .home-screen .features-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        max-width:460px;
    }
    .home-screen .feature-card{
        max-width:none;
        min-height:178px;
    }
    .home-screen .community-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        max-width:400px;
    }
    .home-screen .community-card{
        max-width:none;
    }
}

@media (max-width: 360px){
    .home-screen .features-grid,
    .home-screen .community-grid{
        grid-template-columns:1fr;
        max-width:220px;
    }
}


/* === Final compact card pass (2026-04-05b) === */
.features-grid{
    justify-content:center;
    justify-items:center;
}

.features-grid .feature-card{
    width:100%;
    height:100%;
    min-height:190px;
    max-width:240px;
    padding:12px;
}

.features-grid .feature-card .feature-icon-wrapper,
.features-grid .feature-card > i:first-child{
    margin-bottom:10px;
}

.features-grid .feature-card > i:first-child{
    font-size:1.45rem;
    color:var(--nm-accent);
}

.features-grid .feature-card h3,
.features-grid .feature-card .feature-title{
    font-size:0.94rem;
    margin-bottom:8px;
}

.features-grid .feature-card p,
.features-grid .feature-card .feature-description{
    font-size:0.72rem;
    line-height:1.24;
}

.features-grid .feature-card .feature-cta{
    margin-top:auto;
}

.community-grid{
    justify-content:center;
    justify-items:center;
}

.community-grid .community-card{
    width:100%;
    max-width:190px;
    min-height:108px;
    padding:16px 12px;
    gap:10px;
}

.community-grid .community-card i{
    font-size:1.8rem;
}

.community-grid .community-card span{
    font-size:0.82rem;
    line-height:1.2;
}

/* Keep informational page cards readable while still uniform */
.page-content .features-grid{
    gap:16px;
}

.page-content .features-grid .feature-card{
    align-items:flex-start;
    text-align: center !important;
}

@media (min-width: 980px){
    .page-content .features-grid{
        grid-template-columns:repeat(auto-fit, minmax(200px, 240px));
    }
}

@media (max-width: 520px){
    .page-content .features-grid,
    .home-screen .features-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:12px;
    }
    .page-content .features-grid .feature-card,
    .home-screen .features-grid .feature-card{
        max-width:none;
        min-height:178px;
    }
    .community-grid{
        gap:12px;
    }
}

@media (max-width: 360px){
    .page-content .features-grid,
    .home-screen .features-grid,
    .community-grid{
        grid-template-columns:1fr;
        max-width:220px;
        margin-left:auto;
        margin-right:auto;
    }
}


/* === Unified square navbar controls + visible burger icon (2026-04-05c) === */
.nav-container{
    gap:8px;
    align-items:center;
}

.nav-actions{
    gap:8px !important;
    align-items:center;
}

.nav-action-btn,
.burger-menu{
    width:50px !important;
    min-width:50px !important;
    height:50px !important;
    min-height:50px !important;
    padding:6px !important;
    border-radius: 0px !important;
    background:var(--nm-container) !important;
    border:1px solid var(--nm-border) !important;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.burger-menu{
    gap:2px !important;
    margin-left:0 !important;
    margin-inline-start:0 !important;
}

.burger-menu:hover,
.nav-action-btn:hover{
    background:var(--nm-accent) !important;
    border-color:var(--nm-accent) !important;
}

.burger-menu .burger-line{
    display:block;
    width:20px !important;
    height:2px !important;
    border-radius: 0px !important;
    background:var(--nm-text) !important;
    opacity:1 !important;
}

.burger-menu:hover .burger-line{
    background:var(--nm-text-on-accent) !important;
}

.burger-label{
    font-size:0.44rem !important;
    font-weight:800;
    letter-spacing:0.14em;
    margin-top:1px;
    opacity:1 !important;
}

.burger-menu:hover .burger-label{
    color:var(--nm-text-on-accent) !important;
}

@media (max-width: 520px){
    .nav-container,
    .nav-actions{
        gap:6px !important;
    }

    .nav-action-btn,
    .burger-menu{
        width:46px !important;
        min-width:46px !important;
        height:46px !important;
        min-height:46px !important;
    }

    .burger-menu .burger-line{
        width:18px !important;
    }

    .burger-label{
        font-size:0.4rem !important;
    }
}


/* === MENU-only square button (2026-04-05d) === */
.burger-menu .burger-line{
    display:none !important;
}

.burger-menu{
    gap:0 !important;
}

.burger-label{
    margin-top:0 !important;
    font-size:0.56rem !important;
    letter-spacing:0.14em;
}


/* === Navbar centering + tighter bordered menu list (2026-04-05e) === */
.nav-action-btn{
    justify-content:center !important;
    align-items:center !important;
    text-align:center;
}

.nav-action-btn i,
.nav-action-btn .nav-action-label{
    margin:0 auto !important;
    align-self:center !important;
}

#nav-search{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

#nav-search span{
    display:none !important;
}

#nav-search i{
    margin:0 !important;
    font-size:1.15rem;
}

.nav-theme-btn .nav-theme-label,
.nav-lang-btn .nav-lang-label,
.burger-label{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100%;
    text-align:center;
}

.nav-menu{
    gap:11px !important;
    padding-top:14px !important;
    padding-bottom:14px !important;
}

.nav-menu .nav-link{
    border:1px solid var(--nm-border) !important;
    background:rgba(255,255,255,0.02) !important;
    min-height:44px;
    padding:6px 12px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 0px !important;
}

.nav-menu .nav-link:hover,
.nav-menu .nav-link.active{
    border-color:var(--nm-accent) !important;
}

@media (max-width:520px){
    .nav-menu{
        gap:10px !important;
        padding-top:12px !important;
        padding-bottom:12px !important;
    }

    .nav-menu .nav-link{
        min-height:40px;
        padding:5px 10px !important;
        font-size:0.86rem;
    }
}


/* === Assistant page full chat mode (2026-04-05f) === */
.assistant-page-body{
    overflow:hidden;
}

.assistant-page-body .page-header,
.assistant-page-body .assistant-page-note,
.assistant-page-body .main-footer{
    display:none !important;
}

.assistant-page-body .assistant-page-content{
    max-width:none;
    height:calc((var(--vh, 1vh) * 100) - var(--nav-h, 70px));
    padding:calc(var(--nav-h, 70px) + 10px) 12px 12px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.assistant-page-body .assistant-page-content > .content-section{
    flex:1 1 auto;
    min-height:0;
    padding:0;
    margin:0 auto;
    width:min(100%, 900px);
    background:transparent;
    border:none;
    box-shadow:none;
    overflow:hidden;
}

.assistant-page-body .assistant-page-root,
.assistant-page-body .assistant-shell,
.assistant-page-body .assistant-shell--page,
.assistant-page-body .assistant-shell--page .assistant-panel,
.assistant-page-body .assistant-shell--page .assistant-body,
.assistant-page-body .assistant-shell--page .assistant-chat{
    height:100%;
    min-height:0;
}

.assistant-page-body .assistant-shell--page .assistant-panel{
    width:min(100%, 900px);
    border-radius: 0px !important;
}

.assistant-page-body .assistant-shell--page .assistant-chat{
    max-height:none;
    min-height:0;
}

@media (max-width: 640px){
    .assistant-page-body .assistant-page-content{
        padding:calc(var(--nav-h, 70px) + 8px) 8px 8px;
    }

    .assistant-page-body .assistant-shell--page .assistant-panel{
        border-radius: 0px !important;
    }
}


/* === Hard-center top nav controls + cleaner assistant header (2026-04-05g) === */
.nav-action-btn,
.burger-menu{
    position:relative;
    overflow:hidden;
}

#nav-search i,
.nav-theme-btn .nav-theme-label,
.nav-lang-btn .nav-lang-label,
.burger-menu .burger-label{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;
    margin:0 !important;
    width:auto !important;
    height:auto !important;
    line-height:1 !important;
    text-align:center !important;
    display:block !important;
}

#nav-search i{
    font-size:1.2rem !important;
}

.nav-theme-btn .nav-theme-label{
    font-size:1.15rem !important;
}

.nav-lang-btn .nav-lang-label,
.burger-menu .burger-label{
    font-size:0.92rem !important;
}

.burger-menu .burger-label{
    font-size:0.52rem !important;
    letter-spacing:0.14em;
}

.assistant-page-body .assistant-subtitle{
    display:none !important;
}

.assistant-page-body .assistant-title{
    font-family:var(--font-secondary);
    font-size:1.6rem;
    line-height:1.12;
    color:var(--nm-text-accent);
    letter-spacing:0.01em;
}

.assistant-page-body .assistant-header{
    padding:18px 18px 14px;
}

.assistant-page-body .assistant-title-wrap{
    display:flex;
    align-items:center;
    min-height:38px;
}

@media (max-width:520px){
    .nav-lang-btn .nav-lang-label{font-size:0.88rem !important;}
    .burger-menu .burger-label{font-size:0.48rem !important;}
    .assistant-page-body .assistant-title{font-size:1.42rem;}
}


/* === Wider mobile reading layout with lighter framing (2026-04-05h) === */
@media (max-width: 640px){
    .phone-container{
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .home-screen,
    .page-content{
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .hero-section,
    .content-section{
        border:none !important;
        box-shadow:none !important;
    }

    .hero-section{
        padding:28px 10px 24px !important;
        margin-bottom:24px;
    }

    .content-section{
        padding:14px 8px !important;
        background:transparent !important;
        margin-bottom:14px;
    }

    .hero-subtitle,
    .hero-kicker,
    .content-section p,
    .content-section li,
    .assistant-bubble-text{
        max-width:none !important;
        width:100%;
    }

    .hero-kicker,
    .content-section p,
    .assistant-bubble-text{
        font-size:0.98rem;
        line-height:1.5;
    }

    .content-section h2{
        border-bottom:none !important;
        padding-bottom:0 !important;
        margin-bottom:14px;
    }
}


/* === Homepage badge stack for stars/forks/downloads (2026-04-05m) === */
.trust-item--badges{
    gap:6px;
}

.trust-badge-img{
    display:block;
    max-width:100%;
    height:20px;
}


/* === Snake removed + navbar controls squared harder (2026-04-05n) === */
html::before,
html::after,
body::before,
body::after,
#border-snake{
    display:none !important;
    content:none !important;
}

.nav-action-btn,
#nav-search,
.burger-menu,
.nav-menu,
.nav-menu .nav-link{
    border-radius: 0px !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    clip-path:inset(0) !important;
}

.nav-action-btn::before,
.nav-action-btn::after,
#nav-search::before,
#nav-search::after,
.burger-menu::before,
.burger-menu::after,
.nav-link::before,
.nav-link::after{
    border-radius: 0px !important;
}


/* === Remove community verified + square nav + 16:9 hero image (2026-04-05o) === */
.hero-logo-img{
    width:min(100%, 220px) !important;
    aspect-ratio:16 / 9;
    height:auto !important;
    object-fit:contain;
    display:block;
    margin:0 auto;
}

.nav-action-btn,
#nav-search,
.burger-menu,
.nav-menu .nav-link{
    border-radius: 0px !important;
}


/* === Explicit audited button corner pass (2026-04-05p) === */



/* === Broad sharp-corner pass from screenshot review (2026-04-05q) === */


.hero-logo-img{
    width: 240px !important;
    max-width: min(100%, 240px) !important;
    height: 135px !important;
    aspect-ratio: auto !important;
    object-fit: fill !important;
    display: block;
    margin: 0 auto;
}

@media (max-width: 640px){
    .hero-logo-img{
        width: min(100%, 220px) !important;
        height: calc(min(100%, 220px) * 9 / 16) !important;
    }
}


/* === Assistant/FAQ expansion + lavender accent + square hero logo (2026-04-05r) === */
:root{
    --lavender-accent: #A855F7;
    --nm-secondary: #A855F7;
}

.hero-logo-img{
    width: clamp(96px, 28vw, 180px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

.hero-section::before{
    background:
      radial-gradient(900px 420px at 12% -10%, rgba(168, 85, 247,0.12), transparent 58%),
      radial-gradient(820px 340px at 88% 12%, rgba(168, 85, 247,0.18), transparent 56%),
      radial-gradient(700px 260px at 50% 120%, rgba(168, 85, 247,0.10), transparent 60%);
}

.badge-alt2,
.assistant-open-link,
.note-success,
.copy-success,
.footer-mini-btn:hover,
.btn-ghost:hover{
    border-color: var(--nm-secondary) !important;
    color: var(--nm-secondary) !important;
}


/* === Lavender Purple integrated as secondary palette accent (2026-04-05s) === */
:root{
    --nm-secondary: #A855F7;
    --nm-secondary-soft: rgba(168, 85, 247,0.16);
    --nm-secondary-mid: rgba(168, 85, 247,0.34);
    --nm-secondary-glow: rgba(168, 85, 247,0.48);
}

body.light-theme{
    --nm-secondary-soft: rgba(168, 85, 247,0.10);
    --nm-secondary-mid: rgba(168, 85, 247,0.22);
    --nm-secondary-glow: rgba(168, 85, 247,0.32);
}

.main-nav{
    background-image: linear-gradient(90deg, rgba(168, 85, 247,0.10), rgba(168, 85, 247,0.08), rgba(168, 85, 247,0.10));
}

.hero-section,
.content-section,
.feature-card,
.community-card,
.tool-item,
.category-header,
.assistant-panel,
.search-modal,
.glance-card,
.callout{
    background-image:
        linear-gradient(180deg, rgba(168, 85, 247,0.06), rgba(168, 85, 247,0.04)),
        linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0));
}

.hero-section::before,
.feature-card::before,
.glance-card::after{
    box-shadow: 0 0 0 1px transparent;
}

.feature-icon,
.glance-card i,
.tool-expand-icon,
.toggle-icon,
.assistant-open-link,
.badge-alt2,
.hero-badge i,
.trust-item i{
    color: var(--nm-secondary) !important;
}

.assistant-open-link,
.btn-ghost,
.footer-mini-btn:hover,
.copy-success,
.note-success,
.badge-alt2{
    border-color: var(--nm-secondary-mid) !important;
    box-shadow: 0 0 0 1px rgba(168, 85, 247,0.10) inset;
}

.nav-link:hover,
.nav-link.active,
.nav-action-btn:hover,
.burger-menu:hover,
.assistant-chip:hover,
.assistant-chip.is-active{
    box-shadow: 0 0 0 1px var(--nm-secondary-mid) inset !important;
}

::selection{
    background: rgba(168, 85, 247,0.28);
    color: var(--nm-text);
}


/* === Stronger Lavender Purple usage + burger menu touch fix (2026-04-05t) === */
.main-nav{
    background-image: linear-gradient(90deg, rgba(168, 85, 247,0.14), rgba(168, 85, 247,0.12), rgba(168, 85, 247,0.14)) !important;
}

.nav-action-btn,
.burger-menu,
.nav-menu .nav-link,
.feature-card,
.community-card,
.trust-item,
.category-header,
.tool-item,
.assistant-panel,
.content-section,
.hero-section{
    box-shadow: 0 0 0 1px rgba(168, 85, 247,0.12) inset !important;
}

.hero-section{
    background-image:
      radial-gradient(900px 420px at 10% -10%, rgba(168, 85, 247,0.18), transparent 58%),
      radial-gradient(820px 340px at 90% 12%, rgba(168, 85, 247,0.18), transparent 56%),
      linear-gradient(180deg, rgba(168, 85, 247,0.08), rgba(168, 85, 247,0.05)) !important;
}

.page-header h1,
.content-section h2,
.content-section h3,
.tool-title,
.feature-title,
.community-card span,
.glance-title,
.assistant-title{
    text-shadow: 0 0 12px rgba(168, 85, 247,0.18);
}

.feature-icon,
.glance-card i,
.trust-item i,
.community-card i,
.tool-expand-icon,
.toggle-icon,
.assistant-open-link,
.hero-badge i,
.nav-action-btn:hover,
.burger-menu:hover{
    color: var(--nm-secondary) !important;
}

.nav-menu .nav-link,
.nav-menu .nav-link:visited{
    color: var(--nm-text) !important;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.nav-menu .nav-link:hover,
.nav-menu .nav-link:active,
.nav-menu .nav-link:focus,
.nav-menu .nav-link.active{
    color: var(--nm-text) !important;
    background: linear-gradient(90deg, rgba(168, 85, 247,0.12), rgba(168, 85, 247,0.10)) !important;
    border-color: rgba(168, 85, 247,0.45) !important;
    box-shadow: 0 0 0 1px rgba(168, 85, 247,0.18) inset !important;
}

.nav-link:hover i,
.nav-link:active i,
.nav-link:focus i,
.nav-link.active i{
    color: var(--nm-text) !important;
}

.nav-action-btn:hover,
.burger-menu:hover,
.nav-action-btn:active,
.burger-menu:active{
    background: linear-gradient(180deg, rgba(168, 85, 247,0.16), rgba(168, 85, 247,0.12)) !important;
    border-color: rgba(168, 85, 247,0.45) !important;
}

.badge,
.badge-alt,
.badge-alt2,
.footer-mini-btn,
.btn-ghost,
.assistant-chip,
.assistant-open-link{
    box-shadow: 0 0 0 1px rgba(168, 85, 247,0.14) inset !important;
}

::selection{
    background: rgba(168, 85, 247,0.34);
    color: #ffffff;
}


/* === Purple + Sage holographic effect pass (2026-04-05u) === */
:root{
    --nm-holo-purple: rgba(168, 85, 247,0.24);
    --nm-holo-purple: rgba(168, 85, 247,0.22);
    --nm-holo-white: rgba(255,255,255,0.10);
}

body{
    background-image:
      radial-gradient(1200px 520px at 8% -8%, rgba(168, 85, 247,0.16), transparent 58%),
      radial-gradient(1100px 460px at 92% 4%, rgba(168, 85, 247,0.12), transparent 56%),
      linear-gradient(180deg, rgba(168, 85, 247,0.02), rgba(168, 85, 247,0.02));
}

.main-nav,
.hero-section,
.content-section,
.feature-card,
.community-card,
.trust-item,
.category-header,
.tool-item,
.assistant-panel,
.search-modal,
.glance-card,
.callout{
    position: relative;
    background-image:
      linear-gradient(135deg, rgba(168, 85, 247,0.12), rgba(168, 85, 247,0.08) 42%, rgba(255,255,255,0.03) 52%, rgba(168, 85, 247,0.10) 78%, rgba(168, 85, 247,0.08)),
      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0));
    box-shadow:
      0 0 0 1px rgba(168, 85, 247,0.18) inset,
      0 0 0 1px rgba(168, 85, 247,0.12),
      0 14px 36px rgba(0,0,0,0.32) !important;
}

.main-nav::after,
.hero-section::after,
.content-section::after,
.feature-card::after,
.community-card::after,
.trust-item::after,
.category-header::after,
.tool-item::after,
.assistant-panel::after,
.search-modal::after,
.glance-card::after,
.callout::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(115deg, transparent 0%, transparent 28%, rgba(255,255,255,0.12) 40%, transparent 52%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0.55;
}

.nav-action-btn,
.burger-menu,
.nav-menu .nav-link,
.footer-mini-btn,
.btn,
.btn-ghost,
.assistant-chip,
.assistant-open-link,
.copy-btn,
.sponsor-btn{
    background-image: linear-gradient(135deg, rgba(168, 85, 247,0.14), rgba(168, 85, 247,0.10), rgba(255,255,255,0.03)) !important;
    box-shadow:
      0 0 0 1px rgba(168, 85, 247,0.22) inset,
      0 0 0 1px rgba(168, 85, 247,0.10) !important;
}

.nav-action-btn:hover,
.burger-menu:hover,
.nav-menu .nav-link:hover,
.nav-menu .nav-link:active,
.nav-menu .nav-link.active,
.footer-mini-btn:hover,
.btn:hover,
.assistant-chip:hover,
.assistant-chip.is-active,
.assistant-open-link:hover,
.sponsor-btn:hover{
    background-image: linear-gradient(135deg, rgba(168, 85, 247,0.22), rgba(168, 85, 247,0.16), rgba(255,255,255,0.05)) !important;
    box-shadow:
      0 0 0 1px rgba(168, 85, 247,0.32) inset,
      0 0 18px rgba(168, 85, 247,0.12),
      0 0 28px rgba(168, 85, 247,0.16) !important;
}

.feature-icon,
.glance-card i,
.community-card i,
.trust-item i,
.tool-expand-icon,
.toggle-icon,
.hero-badge i,
.assistant-open-link,
.feature-cta,
.nav-action-btn:hover,
.burger-menu:hover{
    text-shadow: 0 0 10px rgba(168, 85, 247,0.25), 0 0 14px rgba(168, 85, 247,0.18);
}

.hero-section::before{
    background:
      radial-gradient(1000px 440px at 10% -10%, rgba(168, 85, 247,0.18), transparent 56%),
      radial-gradient(880px 320px at 88% 10%, rgba(168, 85, 247,0.16), transparent 54%),
      linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.06) 48%, transparent 70%);
}

@media (prefers-reduced-motion: reduce){
    .main-nav::after,
    .hero-section::after,
    .content-section::after,
    .feature-card::after,
    .community-card::after,
    .trust-item::after,
    .category-header::after,
    .tool-item::after,
    .assistant-panel::after,
    .search-modal::after,
    .glance-card::after,
    .callout::after{
        opacity: 0.28;
    }
}


/* === Tighter hero spacing + square logos + stronger holo (2026-04-05v) === */
@keyframes holoShiftStrong {
    0% { background-position: -140% 0; }
    100% { background-position: 220% 0; }
}

.phone-container{
    padding-top: calc(var(--nav-h, 70px) + 4px) !important;
}

.home-screen{
    padding-top: 4px !important;
}

.hero-section{
    margin-top: 0 !important;
}

.hero-logo-img,
.nav-title .site-title img[data-site-logo="1"]{
    border-radius: 0px !important;
}

.main-nav,
.hero-section,
.content-section,
.feature-card,
.community-card,
.trust-item,
.category-header,
.tool-item,
.assistant-panel,
.search-modal,
.glance-card,
.callout{
    background-image:
      linear-gradient(135deg, rgba(168, 85, 247,0.20), rgba(168, 85, 247,0.14) 36%, rgba(255,255,255,0.06) 50%, rgba(168, 85, 247,0.18) 74%, rgba(168, 85, 247,0.12)),
      linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0)) !important;
    box-shadow:
      0 0 0 1px rgba(168, 85, 247,0.26) inset,
      0 0 0 1px rgba(168, 85, 247,0.18),
      0 0 18px rgba(168, 85, 247,0.10),
      0 0 28px rgba(168, 85, 247,0.08),
      0 18px 42px rgba(0,0,0,0.34) !important;
}

.main-nav::after,
.hero-section::after,
.content-section::after,
.feature-card::after,
.community-card::after,
.trust-item::after,
.category-header::after,
.tool-item::after,
.assistant-panel::after,
.search-modal::after,
.glance-card::after,
.callout::after{
    background:
      linear-gradient(112deg, transparent 0%, transparent 24%, rgba(255,255,255,0.22) 40%, rgba(168, 85, 247,0.14) 48%, rgba(168, 85, 247,0.14) 54%, transparent 68%, transparent 100%) !important;
    background-size: 220% 100% !important;
    opacity: 0.78 !important;
    animation: holoShiftStrong 7.5s linear infinite;
}

.nav-action-btn,
.burger-menu,
.nav-menu .nav-link,
.footer-mini-btn,
.btn,
.btn-ghost,
.assistant-chip,
.assistant-open-link,
.copy-btn,
.sponsor-btn{
    background-image: linear-gradient(135deg, rgba(168, 85, 247,0.20), rgba(168, 85, 247,0.14), rgba(255,255,255,0.05)) !important;
    box-shadow:
      0 0 0 1px rgba(168, 85, 247,0.28) inset,
      0 0 0 1px rgba(168, 85, 247,0.14),
      0 0 16px rgba(168, 85, 247,0.08) !important;
}

.hero-title,
.page-header h1,
.content-section h2,
.content-section h3,
.tool-title,
.feature-title,
.community-card span,
.glance-title,
.assistant-title{
    text-shadow: 0 0 18px rgba(168, 85, 247,0.18), 0 0 10px rgba(168, 85, 247,0.16) !important;
}


/* === Stronger holo background + scroll glass + menu text fix + tighter hero gap (2026-04-05x) === */
:root{
    --scroll-shift: 0px;
}

html,
body{
    background-color: #261d31 !important;
}

body{
    background-image:
      radial-gradient(1400px 720px at 6% -8%, rgba(168, 85, 247,0.28), transparent 56%),
      radial-gradient(1200px 640px at 92% 8%, rgba(168, 85, 247,0.24), transparent 54%),
      linear-gradient(135deg, rgba(66,49,83,0.98) 0%, rgba(48,36,63,0.98) 34%, rgba(35,23,48,0.94) 64%, rgba(58,40,74,0.98) 100%) !important;
    background-attachment: fixed, fixed, fixed;
    background-position:
      center calc(var(--scroll-shift) * -0.10),
      center calc(var(--scroll-shift) * 0.08),
      center calc(var(--scroll-shift) * 0.04);
}

.screen,
.phone-container,
.home-screen,
.page-content,
.assistant-page-content{
    background: transparent !important;
}

.main-nav,
.hero-section,
.content-section,
.feature-card,
.community-card,
.trust-item,
.category-header,
.tool-item,
.assistant-panel,
.search-modal,
.glance-card,
.callout{
    background-image:
      linear-gradient(135deg, rgba(168, 85, 247,0.24), rgba(168, 85, 247,0.18) 34%, rgba(255,255,255,0.09) 48%, rgba(168, 85, 247,0.20) 72%, rgba(168, 85, 247,0.16)),
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0)) !important;
}

.main-nav::after,
.hero-section::after,
.content-section::after,
.feature-card::after,
.community-card::after,
.trust-item::after,
.category-header::after,
.tool-item::after,
.assistant-panel::after,
.search-modal::after,
.glance-card::after,
.callout::after{
    background:
      linear-gradient(112deg, transparent 0%, transparent 24%, rgba(255,255,255,0.26) 40%, rgba(168, 85, 247,0.18) 48%, rgba(168, 85, 247,0.18) 54%, transparent 68%, transparent 100%) !important;
    background-size: 220% 100% !important;
    background-position: calc(-140% + (var(--scroll-shift) * 0.32)) 0 !important;
    opacity: 0.82 !important;
}

.burger-menu,
.burger-menu .burger-label,
.burger-menu:hover,
.burger-menu:hover .burger-label,
.burger-menu:focus,
.burger-menu:focus .burger-label,
.burger-menu:active,
.burger-menu:active .burger-label,
.burger-menu.active,
.burger-menu.active .burger-label{
    color: var(--nm-text) !important;
    -webkit-text-fill-color: var(--nm-text) !important;
}

.burger-menu{
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.burger-menu:active,
.burger-menu:hover,
.burger-menu:focus,
.burger-menu.active{
    background: linear-gradient(135deg, rgba(168, 85, 247,0.24), rgba(168, 85, 247,0.16), rgba(255,255,255,0.06)) !important;
    border-color: rgba(168, 85, 247,0.40) !important;
}

@media (max-width: 640px){
    .phone-container{
        padding-top: calc(var(--nav-h, 70px) - 22px) !important;
    }
    .home-screen{
        padding-top: 0 !important;
    }
    .hero-section{
        margin-top: 0 !important;
    }
}


/* === Performance pass: remove glass/sheen + theme-based icon colors (2026-04-05y) === */
body.dark-theme i,
body.dark-theme .feature-icon,
body.dark-theme .tool-expand-icon,
body.dark-theme .toggle-icon,
body.dark-theme .community-card i,
body.dark-theme .glance-card i,
body.dark-theme .trust-item i,
body.dark-theme .hero-badge i,
body.dark-theme .nav-action-btn i{
    color: #ffffff !important;
}

body.light-theme i,
body.light-theme .feature-icon,
body.light-theme .tool-expand-icon,
body.light-theme .toggle-icon,
body.light-theme .community-card i,
body.light-theme .glance-card i,
body.light-theme .trust-item i,
body.light-theme .hero-badge i,
body.light-theme .nav-action-btn i{
    color: var(--nm-accent) !important;
}

.main-nav::after,
.hero-section::after,
.content-section::after,
.feature-card::after,
.community-card::after,
.trust-item::after,
.category-header::after,
.tool-item::after,
.assistant-panel::after,
.search-modal::after,
.glance-card::after,
.callout::after{
    display: none !important;
    content: none !important;
    animation: none !important;
}

.main-nav,
.nav-menu,
.content-section,
.feature-card,
.tool-card,
.tool-item,
.category-header,
.modal-content,
.code-container,
.contact-grid .app-icon,
.community-card,
.nav-action-btn,
.assistant-panel,
.search-modal,
.glance-card,
.callout{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body{
    background-attachment: scroll, scroll, scroll !important;
}


/* === Clean light theme: remove dark overlay wall (2026-04-05z) === */
body.light-theme,
body.light-theme html{
    background-color: #ffffff !important;
    background-image:
      radial-gradient(1000px 520px at 8% -8%, rgba(168, 85, 247,0.08), transparent 58%),
      radial-gradient(900px 460px at 92% 8%, rgba(168, 85, 247,0.07), transparent 56%),
      linear-gradient(180deg, rgba(255,255,255,1), rgba(250,247,253,1)) !important;
}

body.light-theme .main-nav,
body.light-theme .hero-section,
body.light-theme .content-section,
body.light-theme .feature-card,
body.light-theme .community-card,
body.light-theme .trust-item,
body.light-theme .category-header,
body.light-theme .tool-item,
body.light-theme .assistant-panel,
body.light-theme .search-modal,
body.light-theme .glance-card,
body.light-theme .callout,
body.light-theme .nav-action-btn,
body.light-theme .burger-menu,
body.light-theme .nav-menu .nav-link,
body.light-theme .footer-mini-btn,
body.light-theme .btn,
body.light-theme .btn-ghost,
body.light-theme .assistant-chip,
body.light-theme .assistant-open-link,
body.light-theme .copy-btn,
body.light-theme .sponsor-btn{
    background-image: none !important;
    background-color: rgba(255,255,255,0.96) !important;
    box-shadow:
      0 0 0 1px rgba(168, 85, 247,0.20) inset,
      0 0 0 1px rgba(168, 85, 247,0.08) !important;
}

body.light-theme .main-nav::before,
body.light-theme .main-nav::after,
body.light-theme .hero-section::before,
body.light-theme .hero-section::after,
body.light-theme .content-section::after,
body.light-theme .feature-card::before,
body.light-theme .feature-card::after,
body.light-theme .community-card::after,
body.light-theme .trust-item::after,
body.light-theme .category-header::after,
body.light-theme .tool-item::after,
body.light-theme .assistant-panel::after,
body.light-theme .search-modal::after,
body.light-theme .glance-card::after,
body.light-theme .callout::after{
    display:none !important;
    content:none !important;
}


/* === Light theme holographic background parity (2026-04-05aa) === */
body.light-theme{
    background-color: #ffffff !important;
    background-image:
      radial-gradient(1400px 720px at 6% -8%, rgba(168, 85, 247,0.18), transparent 56%),
      radial-gradient(1200px 640px at 92% 8%, rgba(168, 85, 247,0.16), transparent 54%),
      linear-gradient(135deg, rgba(252,249,255,0.98) 0%, rgba(247,241,252,0.98) 34%, rgba(244,248,244,0.96) 64%, rgba(250,244,255,0.98) 100%) !important;
}

body.light-theme .main-nav,
body.light-theme .hero-section,
body.light-theme .content-section,
body.light-theme .feature-card,
body.light-theme .community-card,
body.light-theme .trust-item,
body.light-theme .category-header,
body.light-theme .tool-item,
body.light-theme .assistant-panel,
body.light-theme .search-modal,
body.light-theme .glance-card,
body.light-theme .callout,
body.light-theme .nav-action-btn,
body.light-theme .burger-menu,
body.light-theme .nav-menu .nav-link,
body.light-theme .footer-mini-btn,
body.light-theme .btn,
body.light-theme .btn-ghost,
body.light-theme .assistant-chip,
body.light-theme .assistant-open-link,
body.light-theme .copy-btn,
body.light-theme .sponsor-btn{
    background-image:
      linear-gradient(135deg, rgba(168, 85, 247,0.12), rgba(168, 85, 247,0.10) 34%, rgba(255,255,255,0.55) 50%, rgba(168, 85, 247,0.10) 72%, rgba(168, 85, 247,0.10)),
      linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.58)) !important;
    background-color: rgba(255,255,255,0.94) !important;
    box-shadow:
      0 0 0 1px rgba(168, 85, 247,0.18) inset,
      0 0 0 1px rgba(168, 85, 247,0.10),
      0 8px 22px rgba(168, 85, 247,0.05) !important;
}

body.light-theme .main-nav::after,
body.light-theme .hero-section::after,
body.light-theme .content-section::after,
body.light-theme .feature-card::after,
body.light-theme .community-card::after,
body.light-theme .trust-item::after,
body.light-theme .category-header::after,
body.light-theme .tool-item::after,
body.light-theme .assistant-panel::after,
body.light-theme .search-modal::after,
body.light-theme .glance-card::after,
body.light-theme .callout::after{
    display:block !important;
    content:"" !important;
    opacity:0.58 !important;
    background:
      linear-gradient(112deg, transparent 0%, transparent 24%, rgba(255,255,255,0.70) 40%, rgba(168, 85, 247,0.18) 48%, rgba(168, 85, 247,0.18) 54%, transparent 68%, transparent 100%) !important;
    background-size: 220% 100% !important;
}


/* === Stronger visible holographic background for white theme (2026-04-05ab) === */
body.light-theme{
    background-color: #f8f4fb !important;
    background-image:
      radial-gradient(1200px 720px at 4% -8%, rgba(168, 85, 247,0.30), transparent 52%),
      radial-gradient(1100px 660px at 96% 10%, rgba(168, 85, 247,0.22), transparent 50%),
      radial-gradient(900px 540px at 50% 36%, rgba(168, 85, 247,0.14), transparent 58%),
      linear-gradient(135deg, rgba(250,242,255,0.98) 0%, rgba(242,236,250,0.98) 34%, rgba(237,245,238,0.96) 64%, rgba(247,239,252,0.98) 100%) !important;
    background-attachment: fixed, fixed, fixed, fixed;
}

body.light-theme .screen,
body.light-theme .phone-container,
body.light-theme .home-screen,
body.light-theme .page-content,
body.light-theme .assistant-page-content{
    background: transparent !important;
}

body.light-theme .main-nav,
body.light-theme .hero-section,
body.light-theme .content-section,
body.light-theme .feature-card,
body.light-theme .community-card,
body.light-theme .trust-item,
body.light-theme .category-header,
body.light-theme .tool-item,
body.light-theme .assistant-panel,
body.light-theme .search-modal,
body.light-theme .glance-card,
body.light-theme .callout,
body.light-theme .nav-action-btn,
body.light-theme .burger-menu,
body.light-theme .nav-menu .nav-link,
body.light-theme .footer-mini-btn,
body.light-theme .btn,
body.light-theme .btn-ghost,
body.light-theme .assistant-chip,
body.light-theme .assistant-open-link,
body.light-theme .copy-btn,
body.light-theme .sponsor-btn{
    background-image:
      linear-gradient(135deg, rgba(168, 85, 247,0.18), rgba(168, 85, 247,0.14) 34%, rgba(255,255,255,0.72) 50%, rgba(168, 85, 247,0.16) 72%, rgba(168, 85, 247,0.12)),
      linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.66)) !important;
    background-color: rgba(255,255,255,0.88) !important;
    box-shadow:
      0 0 0 1px rgba(168, 85, 247,0.20) inset,
      0 0 0 1px rgba(168, 85, 247,0.12),
      0 12px 28px rgba(168, 85, 247,0.08) !important;
}


/* === Stronger white-theme holographic visibility + text cleanup (2026-04-05ac) === */
body.light-theme{
    background-color: #f6f0fa !important;
    background-image:
      radial-gradient(1400px 820px at 2% -8%, rgba(168, 85, 247,0.42), transparent 50%),
      radial-gradient(1250px 760px at 98% 10%, rgba(168, 85, 247,0.30), transparent 50%),
      radial-gradient(980px 620px at 52% 36%, rgba(168, 85, 247,0.24), transparent 56%),
      linear-gradient(135deg, rgba(248,238,255,0.99) 0%, rgba(240,232,250,0.99) 34%, rgba(232,243,233,0.97) 64%, rgba(244,236,252,0.99) 100%) !important;
}

body.light-theme .main-nav,
body.light-theme .hero-section,
body.light-theme .content-section,
body.light-theme .feature-card,
body.light-theme .community-card,
body.light-theme .trust-item,
body.light-theme .category-header,
body.light-theme .tool-item,
body.light-theme .assistant-panel,
body.light-theme .search-modal,
body.light-theme .glance-card,
body.light-theme .callout,
body.light-theme .nav-action-btn,
body.light-theme .burger-menu,
body.light-theme .nav-menu .nav-link,
body.light-theme .footer-mini-btn,
body.light-theme .btn,
body.light-theme .btn-ghost,
body.light-theme .assistant-chip,
body.light-theme .assistant-open-link,
body.light-theme .copy-btn,
body.light-theme .sponsor-btn{
    background-image:
      linear-gradient(135deg, rgba(168, 85, 247,0.24), rgba(168, 85, 247,0.18) 34%, rgba(255,255,255,0.82) 50%, rgba(168, 85, 247,0.22) 72%, rgba(168, 85, 247,0.16)),
      linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.72)) !important;
    background-color: rgba(255,255,255,0.84) !important;
    box-shadow:
      0 0 0 1px rgba(168, 85, 247,0.24) inset,
      0 0 0 1px rgba(168, 85, 247,0.14),
      0 14px 34px rgba(168, 85, 247,0.10),
      0 10px 24px rgba(168, 85, 247,0.06) !important;
}

body.light-theme,
body.light-theme p,
body.light-theme li,
body.light-theme span,
body.light-theme strong,
body.light-theme label,
body.light-theme code,
body.light-theme .nav-link,
body.light-theme .burger-label,
body.light-theme .nav-action-label,
body.light-theme .page-header p,
body.light-theme .feature-description,
body.light-theme .assistant-bubble-text,
body.light-theme .assistant-message-label,
body.light-theme .tool-description,
body.light-theme .content-section p,
body.light-theme .content-section li{
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.light-theme .page-header h1,
body.light-theme .hero-title,
body.light-theme .hero-subtitle,
body.light-theme .feature-title,
body.light-theme .tool-title,
body.light-theme .content-section h2,
body.light-theme .content-section h3,
body.light-theme .assistant-title{
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
}


/* === Light-theme text hard fix (2026-04-05ad) === */
body.light-theme {
    --nm-text: #111111;
    --nm-text-muted: #1b1b1b;
    --nm-text-accent: #080808;
}

body.light-theme,
body.light-theme p,
body.light-theme li,
body.light-theme span,
body.light-theme strong,
body.light-theme label,
body.light-theme code,
body.light-theme small,
body.light-theme .page-header p,
body.light-theme .feature-description,
body.light-theme .assistant-bubble-text,
body.light-theme .assistant-message-label,
body.light-theme .tool-description,
body.light-theme .tool-description *,
body.light-theme .tool-save-location,
body.light-theme .tool-save-location *,
body.light-theme .content-section p,
body.light-theme .content-section li,
body.light-theme .content-section li *,
body.light-theme .category-intro,
body.light-theme .category-intro *,
body.light-theme .support-section p,
body.light-theme .support-section li,
body.light-theme .support-section li *,
body.light-theme .sponsor-faq,
body.light-theme .sponsor-faq *,
body.light-theme .accordion-body,
body.light-theme .accordion-body *,
body.light-theme .accordion-content,
body.light-theme .accordion-content *,
body.light-theme .faq-answer,
body.light-theme .faq-answer *,
body.light-theme [style*="rgba(255,255,255"],
body.light-theme [style*="rgba(255, 255, 255"],
body.light-theme [style*="color: white"],
body.light-theme [style*="color:white"],
body.light-theme [style*="color:#fff"],
body.light-theme [style*="color: #fff"],
body.light-theme [style*="color:#ffffff"],
body.light-theme [style*="color: #ffffff"] {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.light-theme .page-header h1,
body.light-theme .hero-title,
body.light-theme .hero-subtitle,
body.light-theme .feature-title,
body.light-theme .tool-title,
body.light-theme .category-header h2,
body.light-theme .category-header h3,
body.light-theme .content-section h2,
body.light-theme .content-section h3,
body.light-theme .content-section h4,
body.light-theme .content-section h5,
body.light-theme .assistant-title,
body.light-theme .tool-header h4,
body.light-theme .faq-question,
body.light-theme .sponsor-faq h3 {
    color: #090909 !important;
    -webkit-text-fill-color: #090909 !important;
}

body.light-theme .tool-item:hover .tool-description p,
body.light-theme .tool-item:hover .tool-description *,
body.light-theme .tool-item:active .tool-description p,
body.light-theme .tool-item:active .tool-description *,
body.light-theme .category:hover .tool-description p,
body.light-theme .category:hover .tool-description * {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.light-theme .sponsor-btn,
body.light-theme .sponsor-btn *,
body.light-theme .faq-link-btn,
body.light-theme .faq-link-btn *,
body.light-theme .nav-link,
body.light-theme .nav-link *,
body.light-theme .burger-menu,
body.light-theme .burger-menu *,
body.light-theme .nav-action-btn,
body.light-theme .nav-action-btn * {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.light-theme .sponsor-btn i,
body.light-theme .faq-link-btn i,
body.light-theme .nav-action-btn i,
body.light-theme .burger-menu i,
body.light-theme .toggle-icon,
body.light-theme .tool-expand-icon {
    color: var(--nm-accent) !important;
    -webkit-text-fill-color: var(--nm-accent) !important;
}

body.light-theme .sponsor-btn:active,
body.light-theme .sponsor-btn:hover,
body.light-theme .faq-link-btn:active,
body.light-theme .faq-link-btn:hover,
body.light-theme .burger-menu:active,
body.light-theme .burger-menu:hover,
body.light-theme .nav-action-btn:active,
body.light-theme .nav-action-btn:hover,
body.light-theme .nav-link:active,
body.light-theme .nav-link:hover {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.light-theme a:not(.btn):not(.sponsor-btn):not(.faq-link-btn):not(.assistant-open-link):not(.assistant-chip) {
    color: #A855F7 !important;
    -webkit-text-fill-color: #A855F7 !important;
}

body.light-theme .hero-section,
body.light-theme .content-section,
body.light-theme .tool-description,
body.light-theme .tool-save-location,
body.light-theme .sponsor-faq,
body.light-theme .category-intro {
    opacity: 1 !important;
}


/* === Lock top navbar fixed / non-scrollable touch area (2026-04-05ae) === */
.main-nav,
.main-nav .nav-container,
.main-nav .nav-title,
.main-nav .nav-actions,
.main-nav .nav-action-btn,
.main-nav .burger-menu,
.main-nav .nav-link {
    touch-action: manipulation !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
}

.main-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

/* === Restore small gap under fixed navbar on home hero (2026-04-05af) === */
@media (max-width: 640px){
    .home-screen{
        padding-top: 8px !important;
    }
    .hero-section{
        margin-top: 8px !important;
    }
}

/* === Medium gap under fixed navbar on home hero (about half old oversized spacing) (2026-04-05ag) === */
@media (max-width: 640px){
    .home-screen{
        padding-top: 14px !important;
    }
    .hero-section{
        margin-top: 14px !important;
    }
}

/* === Fixed navbar spacing: always keep visible gap below nav (2026-04-05ah) === */
:root{
    --hero-nav-gap: 16px;
}

@media (max-width: 640px){
    .phone-container{
        padding-top: calc(var(--nav-h, 70px) + var(--hero-nav-gap)) !important;
    }
    .home-screen{
        padding-top: 0 !important;
    }
    .hero-section{
        margin-top: 0 !important;
    }
}


/* === Sitewide centered titles update (2026-04-19) === */
.hero-title,
.page-header h1,
.page-header p,
.content-section h2,
.content-section h3,
.feature-title,
.tool-title,
.community-card span,
.glance-title,
.assistant-title,
.assistant-rich-section-title,
.category-header {
    text-align: center;
}














@media (max-width: 820px){
  
}



















@media (max-width: 920px){
  
}
@media (max-width: 640px){
  
  
  
}














@media (max-width: 640px){
  
  
}



.content-section,
.feature-card,
.tool-item,
.category {
    content-visibility: visible;
    contain-intrinsic-size: auto;
}







@media (max-width: 820px) {
    

    
}









@media (max-width:420px){
  
}
@media (max-width:340px){
  
}




@media (max-width: 560px){
  
  
}




.value-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin:18px auto 0;
  width:100%;
}

.compact-value-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
.value-card{
  border:1px solid var(--nm-border);
  background:linear-gradient(145deg, rgba(var(--glow-rgb), .10), var(--nm-container));
  box-shadow:var(--shadow-elev-1);
  padding:16px;
  min-width:0;
  min-height:100%;
  border-radius: 0px !important;
  text-align: center !important;
}
.value-card i{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--nm-border);
  color:var(--nm-accent);
  background:rgba(var(--glow-rgb), .10);
  margin-bottom:10px;
}
.value-card h3{
  margin:0 0 8px 0;
  font-family:var(--font-secondary);
  color:var(--nm-text-accent);
  font-size:1.02rem;
}
.value-card p{
  margin:0;
  color:var(--nm-text-muted);
  line-height:1.55;
  font-size:.94rem;
}
.value-card a{
  display:inline-flex;
  margin-top:12px;
  color:var(--nm-accent);
  font-weight:800;
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
.featured-value-card{
  border-color:var(--nm-accent);
  box-shadow:0 0 24px rgba(var(--glow-rgb), .22), var(--shadow-elev-1);
}
.creator-note{
  border:1px solid var(--nm-border);
  background:rgba(var(--glow-rgb), .08);
  padding:14px 16px;
  margin:18px 0 0;
  border-radius: 0px !important;
}
.creator-note strong{
  display:block;
  color:var(--nm-accent);
  font-family:var(--font-secondary);
  margin-bottom:6px;
}
.creator-note p{margin:0; color:var(--nm-text-muted); line-height:1.55;}
.tool-personal-note{
  border-left:3px solid var(--nm-accent);
  background:rgba(var(--glow-rgb), .08);
  padding:10px 12px;
  margin:12px 0 0;
}
.tool-personal-note strong{
  display:block;
  color:var(--nm-accent);
  font-family:var(--font-secondary);
  font-size:.9rem;
  margin-bottom:5px;
}
.tool-description .tool-personal-note p{
  margin:0 !important;
  font-size:.92rem;
  color:var(--nm-text-muted);
}
.faq-support-list{
  margin:10px 0 0;
  padding-left:20px;
  color:var(--nm-text-muted);
  line-height:1.55;
}
.faq-cta{justify-content:flex-start; margin-top:14px;}
body.light-theme .value-card,
body.light-theme .creator-note,
body.light-theme .tool-personal-note{
  background:rgba(var(--glow-rgb), .07);
}
@media (max-width: 900px){
  
}
@media (max-width: 620px){
  
  .value-card{padding:14px;}
  .faq-cta{flex-direction:column; align-items:stretch;}
}






@media (max-width: 900px){
  
}
@media (max-width: 620px){
  
}


/* === Assistant page header + clean chat box fix (2026-05-16) === */
.assistant-page-body{
    overflow:auto !important;
}

.assistant-page-body .page-header{
    display:block !important;
    text-align:center;
    margin-bottom:30px;
}

.assistant-page-body .page-header h1{
    color:var(--nm-text-accent);
    font-family:var(--font-secondary);
    font-size:2.125rem;
    margin-bottom:10px;
}

.assistant-page-body .page-header p{
    color:var(--nm-text);
    font-size:1.1rem;
    max-width:600px;
    margin:0 auto;
}

.assistant-page-body .assistant-page-note{
    display:none !important;
}

.assistant-page-body .main-footer{
    display:block !important;
}

.assistant-page-body .assistant-page-content{
    max-width:1200px !important;
    height:auto !important;
    min-height:calc((var(--vh, 1vh) * 100) - var(--nav-h, 70px));
    padding:calc(var(--nav-h, 70px) + 20px) 20px 20px !important;
    overflow:visible !important;
    display:block !important;
}

.assistant-page-body .assistant-page-content > .content-section{
    width:min(100%, 900px) !important;
    margin:0 auto 20px !important;
    padding:0 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    overflow:visible !important;
}

.assistant-page-body .assistant-page-root,
.assistant-page-body .assistant-shell,
.assistant-page-body .assistant-shell--page,
.assistant-page-body .assistant-shell--page .assistant-panel,
.assistant-page-body .assistant-shell--page .assistant-body{
    height:auto !important;
    min-height:0 !important;
}

.assistant-page-body .assistant-shell--page .assistant-panel{
    width:min(100%, 900px) !important;
    border-radius: 0px !important;
}

.assistant-page-body .assistant-shell--page .assistant-header{
    padding:10px 12px !important;
}

.assistant-page-body .assistant-shell--page .assistant-header-top{
    justify-content:flex-end !important;
}

.assistant-page-body .assistant-shell--page .assistant-title-wrap{
    display:none !important;
}

.assistant-page-body .assistant-shell--page .assistant-refresh,
.assistant-refresh{
    display:none !important;
}

.assistant-page-body .assistant-shell--page .assistant-chat{
    height:min(62vh, 660px) !important;
    min-height:420px !important;
    max-height:660px !important;
}

@media (max-width:640px){
    .assistant-page-body .assistant-page-content{
        padding:calc(var(--nav-h, 70px) + 16px) 10px 12px !important;
    }

    .assistant-page-body .page-header{
        margin-bottom:22px;
    }

    .assistant-page-body .page-header h1{
        font-size:1.9rem;
    }

    .assistant-page-body .page-header p{
        font-size:1rem;
    }

    .assistant-page-body .assistant-shell--page .assistant-panel{
        border-radius: 0px !important;
    }

    .assistant-page-body .assistant-shell--page .assistant-chat{
        height:calc((var(--vh, 1vh) * 100) - var(--nav-h, 70px) - 210px) !important;
        min-height:360px !important;
        max-height:none !important;
    }
}


.assistant-page-body .assistant-page-content{
    box-sizing:border-box !important;
    overflow:visible !important;
}
.assistant-page-body .assistant-shell--page .assistant-panel{
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
}
.assistant-page-body .assistant-shell--page .assistant-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:hidden !important;
}
.assistant-page-body .assistant-shell--page .assistant-chat{
    height:clamp(240px, calc(100dvh - var(--nav-h, 70px) - 260px), 620px) !important;
    min-height:240px !important;
    max-height:620px !important;
    overscroll-behavior:contain;
}
@media (max-width:640px){
    .assistant-page-body .assistant-page-content{
        padding-left:10px !important;
        padding-right:10px !important;
        padding-bottom:10px !important;
    }
    .assistant-page-body .page-header{
        margin-bottom:16px !important;
    }
    .assistant-page-body .assistant-shell--page .assistant-chat{
        height:clamp(220px, calc(100dvh - var(--nav-h, 70px) - 225px), 540px) !important;
        min-height:220px !important;
        max-height:540px !important;
    }
}

/* === Home feature card mobile fit pass === */
.home-screen .features-grid{
    grid-template-columns:repeat(auto-fit, minmax(145px, 176px));
    gap:12px;
}
.home-screen .feature-card{
    max-width:176px;
    min-height:149px;
    padding:10px;
}
.home-screen .feature-icon-wrapper{
    width:34px;
    height:34px;
    margin-bottom:8px;
}
.home-screen .feature-icon{font-size:1.08rem;}
.home-screen .feature-title{font-size:0.76rem; margin-bottom:6px; line-height:1.15;}
.home-screen .feature-description{
    font-size:0.58rem;
    line-height:1.22;
    margin-bottom:6px;
    -webkit-line-clamp:3;
}
.home-screen .feature-cta{font-size:0.62rem; gap:5px;}
@media (min-width:980px){
    .home-screen .features-grid{grid-template-columns:repeat(4, 176px);}
}
@media (max-width:560px){
    .home-screen .features-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:10px !important;
        width:100%;
        max-width:360px !important;
        margin-left:auto;
        margin-right:auto;
    }
    .home-screen .features-grid .feature-card{
        width:100% !important;
        max-width:none !important;
        min-width:0;
        min-height:142px !important;
        padding:9px !important;
    }
    .home-screen .features-grid .feature-card:last-child:nth-child(odd){
        grid-column:1 / -1;
        width:calc(50% - 5px) !important;
        justify-self:center;
    }
}
@media (max-width:300px){
    .home-screen .features-grid{grid-template-columns:1fr !important; max-width:176px !important;}
    .home-screen .features-grid .feature-card:last-child:nth-child(odd){width:100% !important;}
}



/* === Main page cards: hard 2-column phone fit (2026-05-16) === */
.home-screen #highlights.features-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
    width:100% !important;
    max-width:min(100%, 420px) !important;
    margin:16px auto 34px !important;
    padding:0 6px !important;
    box-sizing:border-box !important;
}
.home-screen #highlights.features-grid > .feature-card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:124px !important;
    padding:8px !important;
    border-radius: 0px !important;
    box-sizing:border-box !important;
}
.home-screen #highlights.features-grid > .feature-card:last-child:nth-child(odd){
    grid-column:auto !important;
    width:100% !important;
    justify-self:stretch !important;
}
.home-screen #highlights.features-grid .feature-icon-wrapper{
    width:30px !important;
    height:30px !important;
    margin-bottom:7px !important;
}
.home-screen #highlights.features-grid .feature-icon{
    font-size:0.95rem !important;
}
.home-screen #highlights.features-grid .feature-title{
    font-size:clamp(0.66rem, 3.6vw, 0.78rem) !important;
    line-height:1.08 !important;
    margin-bottom:5px !important;
    overflow-wrap:anywhere !important;
}
.home-screen #highlights.features-grid .feature-description{
    font-size:clamp(0.49rem, 2.6vw, 0.58rem) !important;
    line-height:1.16 !important;
    margin-bottom:5px !important;
    -webkit-line-clamp:3 !important;
}
.home-screen #highlights.features-grid .feature-cta{
    font-size:clamp(0.52rem, 2.8vw, 0.62rem) !important;
    gap:4px !important;
    line-height:1.05 !important;
}
@media (min-width:760px){
    .home-screen #highlights.features-grid{
        grid-template-columns:repeat(4, minmax(0, 176px)) !important;
        max-width:760px !important;
        gap:12px !important;
    }
}
@media (max-width:260px){
    .home-screen #highlights.features-grid{
        gap:6px !important;
        padding:0 4px !important;
    }
    .home-screen #highlights.features-grid > .feature-card{
        padding:6px !important;
        min-height:116px !important;
    }
}








@media (max-width: 420px){
  
  
  
  
  
}













@media (max-width: 420px){
  
  
  
  
  
}
@media (max-width: 330px){
  
  
  
}


/* Instagram outage notice above main cards */
.instagram-alert{
  width:min(100%, 980px);
  margin:18px auto 22px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  border:2px solid rgba(255, 48, 64, .92);
  background:linear-gradient(135deg, rgba(108, 0, 14, .92), rgba(45, 4, 12, .94));
  box-shadow:0 0 22px rgba(255, 48, 64, .25), inset 0 0 18px rgba(255,255,255,.04);
  color:#fff;
}
.instagram-alert-icon{
  flex:0 0 46px;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.38);
  background:rgba(0,0,0,.22);
  font-size:1.45rem;
}
.instagram-alert-content{
  flex:1 1 auto;
  min-width:0;
  display:grid;
  gap:10px;
}
.instagram-alert p{
  margin:0;
  font-size:clamp(.82rem, 2.5vw, 1rem);
  line-height:1.45;
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.instagram-alert-btn{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.12);
  color:#fff;
  font-family:var(--font-display, "Orbitron", sans-serif);
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 0 14px rgba(255,255,255,.08);
}
.instagram-alert-btn:hover,
.instagram-alert-btn:focus-visible{
  background:rgba(255,255,255,.2);
  transform:translateY(-1px);
}
@media (max-width:520px){
  .instagram-alert{
    margin:14px auto 16px;
    padding:12px 10px;
    gap:10px;
  }
  .instagram-alert-icon{
    flex-basis:36px;
    width:36px;
    height:36px;
    font-size:1.08rem;
  }
  .instagram-alert-btn{
    min-height:34px;
    padding:7px 10px;
    font-size:.72rem;
  }
}

/* Final fixes: Instagram notice must stay a red box with white text in every theme */
.home-screen .instagram-alert,
body.light-theme .home-screen .instagram-alert{
  border:2px solid #ffffff !important;
  background:#b00020 !important;
  color:#ffffff !important;
  box-shadow:0 0 0 2px rgba(176,0,32,.38), 0 0 24px rgba(176,0,32,.42) !important;
}
.home-screen .instagram-alert p,
body.light-theme .home-screen .instagram-alert p{
  color:#ffffff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.45) !important;
}
.home-screen .instagram-alert-icon,
.home-screen .instagram-alert-btn,
body.light-theme .home-screen .instagram-alert-icon,
body.light-theme .home-screen .instagram-alert-btn{
  color:#ffffff !important;
  border-color:rgba(255,255,255,.72) !important;
  background:rgba(0,0,0,.18) !important;
}
.home-screen .instagram-alert-btn:hover,
.home-screen .instagram-alert-btn:focus-visible{
  background:rgba(255,255,255,.18) !important;
}







@media (max-width:420px){
  
  
  
}
@media (max-width:330px){
  
  
  
}


/* Final requested fixes: Instagram notice without icon, centered content */
.home-screen .instagram-alert,
body.light-theme .home-screen .instagram-alert{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  gap:0 !important;
}
.home-screen .instagram-alert-content,
body.light-theme .home-screen .instagram-alert-content{
  width:100% !important;
  max-width:860px !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  gap:12px !important;
}
.home-screen .instagram-alert-btn,
body.light-theme .home-screen .instagram-alert-btn{
  justify-self:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.home-screen .instagram-alert-icon,
body.light-theme .home-screen .instagram-alert-icon{
  display:none !important;
}







@media (max-width:420px){
  
  
  
  
}


/* Final correction: Instagram notice text and contact button centered */
.home-screen .instagram-alert,
body.light-theme .home-screen .instagram-alert{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
}
.home-screen .instagram-alert-content,
body.light-theme .home-screen .instagram-alert-content{
  width:100% !important;
  max-width:880px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:12px !important;
  margin:0 auto !important;
}
.home-screen .instagram-alert-content p,
body.light-theme .home-screen .instagram-alert-content p{
  width:100% !important;
  max-width:780px !important;
  margin:0 auto !important;
  text-align:center !important;
}
.home-screen .instagram-alert-button-row,
body.light-theme .home-screen .instagram-alert-button-row{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin:0 auto !important;
  text-align:center !important;
}
.home-screen .instagram-alert-btn,
body.light-theme .home-screen .instagram-alert-btn{
  display:inline-flex !important;
  width:auto !important;
  max-width:max-content !important;
  margin:0 auto !important;
  justify-self:center !important;
  align-self:center !important;
  place-self:center !important;
  text-align:center !important;
}


:root{
  --nm-text:#ffffff;
  --nm-text-muted:#ffffff;
  --nm-text-accent:#ffffff;
}
body.light-theme{
  --nm-text:#000000;
  --nm-text-muted:#000000;
  --nm-text-accent:#000000;
}

/* Keep normal text solid black/white instead of grey in both themes. */



/* Exception: the Instagram notice must stay a red box with white centered text. */
.home-screen .instagram-alert,
.home-screen .instagram-alert *,
body.light-theme .home-screen .instagram-alert,
body.light-theme .home-screen .instagram-alert *{
  color:#ffffff !important;
  text-align:center !important;
}
.home-screen .instagram-alert-content,
body.light-theme .home-screen .instagram-alert-content{
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.home-screen .instagram-alert-button-row,
body.light-theme .home-screen .instagram-alert-button-row{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
}
.home-screen .instagram-alert-btn,
body.light-theme .home-screen .instagram-alert-btn{
  margin-left:auto !important;
  margin-right:auto !important;
}










@media (max-width:420px){
  
  
  
  
}



/* === Final user requested polish: readable themes, no pink opened bullets, ButSystem cleanup === */
/* Base readable colors: solid white in dark theme, solid black in light theme. */
body.dark-theme,
body.dark-theme :where(.page-content, .home-screen, .main-footer, .category, .tool-item, .tool-description, .content-section, .feature-card, .value-card, .creator-note){
  --nm-text:#ffffff !important;
  --nm-text-muted:#ffffff !important;
  --nm-text-accent:#ffffff !important;
}
body.light-theme,
body.light-theme :where(.page-content, .home-screen, .main-footer, .category, .tool-item, .tool-description, .content-section, .feature-card, .value-card, .creator-note){
  --nm-text:#000000 !important;
  --nm-text-muted:#000000 !important;
  --nm-text-accent:#000000 !important;
}



/* Instagram notice is a deliberate red warning box: always white text in both themes. */
.home-screen .instagram-alert,
.home-screen .instagram-alert *,
body.light-theme .home-screen .instagram-alert,
body.light-theme .home-screen .instagram-alert *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-align:center !important;
}
.home-screen .instagram-alert,
body.light-theme .home-screen .instagram-alert{
  background:#b00020 !important;
  border-color:#ffffff !important;
}
.home-screen .instagram-alert-content,
body.light-theme .home-screen .instagram-alert-content{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  text-align:center !important;
}
.home-screen .instagram-alert-button-row,
body.light-theme .home-screen .instagram-alert-button-row{
  display:flex !important;
  width:100% !important;
  justify-content:center !important;
  align-items:center !important;
}
.home-screen .instagram-alert-btn,
body.light-theme .home-screen .instagram-alert-btn{
  margin-left:auto !important;
  margin-right:auto !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Opened FAQ/tool bullets should not turn into the old pink/purple overlay. */
.category.active .category-header,
.tool-item.active,
.tool-item.active:hover,
.tool-item.active:focus-within{
  background:var(--nm-container) !important;
  color:var(--nm-text) !important;
  border-color:var(--nm-border) !important;
  box-shadow:var(--nm-shadow) !important;
  transform:none !important;
}
.tool-item.active .tool-description,
.tool-item.active .tool-personal-note,
.tool-item.active .tool-save-location,
.tool-item.active .note,
.tool-item.active .note-warning{
  background:transparent !important;
  color:var(--nm-text) !important;
  -webkit-text-fill-color:var(--nm-text) !important;
  box-shadow:none !important;
}
.tool-item.active .tool-description p,
.tool-item.active .tool-description li,
.tool-item.active .tool-description span,
.tool-item.active .tool-description strong,
.tool-item.active .tool-description h5,
.tool-item.active .tool-title,
.tool-item.active .tool-expand-icon{
  color:var(--nm-text) !important;
  -webkit-text-fill-color:var(--nm-text) !important;
}
body.dark-theme .tool-item.active .tool-description *,
body.dark-theme .tool-item.active .tool-title,
body.dark-theme .tool-item.active .tool-expand-icon{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
body.light-theme .tool-item.active .tool-description *,
body.light-theme .tool-item.active .tool-title,
body.light-theme .tool-item.active .tool-expand-icon{
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}

/* Mobile browsers can keep :hover after a tap; prevent that sticky hover from recoloring opened bullets. */
@media (hover:none), (pointer:coarse){
  .tool-item:hover,
  .tool-item.active:hover,
  .category-header:hover,
  .category.active .category-header:hover{
    background:var(--nm-container) !important;
    color:var(--nm-text) !important;
    border-color:var(--nm-border) !important;
    transform:none !important;
  }
  .tool-item:hover .tool-title,
  .tool-item:hover .tool-expand-icon,
  .tool-item:hover .tool-description,
  .tool-item:hover .tool-description *,
  .category-header:hover h2,
  .category-header:hover h3,
  .category-header:hover .toggle-icon{
    color:var(--nm-text) !important;
    -webkit-text-fill-color:var(--nm-text) !important;
  }
  body.dark-theme .tool-item:hover .tool-description *,
  body.dark-theme .tool-item:hover .tool-title,
  body.dark-theme .tool-item:hover .tool-expand-icon{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }
  body.light-theme .tool-item:hover .tool-description *,
  body.light-theme .tool-item:hover .tool-title,
  body.light-theme .tool-item:hover .tool-expand-icon{
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
  }
}

/* FAQ contact button belongs after all FAQ categories. */
#faq-container > .contact-cta{
  margin-top:clamp(18px, 4vw, 32px) !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

/* === 2026-05-16 final visual fixes from mobile screenshots === */
/* Instagram warning: always red box, always white centered text/button in both themes. */
html body .home-screen .instagram-alert,
html body.light-theme .home-screen .instagram-alert,
html body.dark-theme .home-screen .instagram-alert{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:calc(100% - 20px) !important;
  max-width:880px !important;
  margin:clamp(16px, 4vw, 26px) auto !important;
  padding:clamp(16px, 4vw, 24px) !important;
  background:#b00020 !important;
  background-image:none !important;
  border:3px solid #ffffff !important;
  box-shadow:none !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-align:center !important;
}
html body .home-screen .instagram-alert::before,
html body .home-screen .instagram-alert::after,
html body.light-theme .home-screen .instagram-alert::before,
html body.light-theme .home-screen .instagram-alert::after,
html body.dark-theme .home-screen .instagram-alert::before,
html body.dark-theme .home-screen .instagram-alert::after{
  content:none !important;
  display:none !important;
}
html body .home-screen .instagram-alert .instagram-alert-content,
html body.light-theme .home-screen .instagram-alert .instagram-alert-content,
html body.dark-theme .home-screen .instagram-alert .instagram-alert-content{
  width:100% !important;
  max-width:780px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  margin:0 auto !important;
  text-align:center !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
html body .home-screen .instagram-alert p,
html body .home-screen .instagram-alert a,
html body .home-screen .instagram-alert span,
html body.light-theme .home-screen .instagram-alert p,
html body.light-theme .home-screen .instagram-alert a,
html body.light-theme .home-screen .instagram-alert span,
html body.dark-theme .home-screen .instagram-alert p,
html body.dark-theme .home-screen .instagram-alert a,
html body.dark-theme .home-screen .instagram-alert span{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-align:center !important;
}
html body .home-screen .instagram-alert p,
html body.light-theme .home-screen .instagram-alert p,
html body.dark-theme .home-screen .instagram-alert p{
  margin:0 auto !important;
  max-width:42rem !important;
  font-weight:700 !important;
  line-height:1.45 !important;
}
html body .home-screen .instagram-alert .instagram-alert-button-row,
html body.light-theme .home-screen .instagram-alert .instagram-alert-button-row,
html body.dark-theme .home-screen .instagram-alert .instagram-alert-button-row{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
}
html body .home-screen .instagram-alert .instagram-alert-btn,
html body.light-theme .home-screen .instagram-alert .instagram-alert-btn,
html body.dark-theme .home-screen .instagram-alert .instagram-alert-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:min(220px, 78vw) !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:10px 18px !important;
  background:transparent !important;
  background-image:none !important;
  border:2px solid #ffffff !important;
  box-shadow:none !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-align:center !important;
  text-decoration:none !important;
}

/* Kill the sticky pink/purple tap-hover overlay on mobile accordions. */
html body .category .tool-item,
html body .category .tool-item:hover,
html body .category .tool-item:active,
html body .category .tool-item:focus,
html body .category .tool-item:focus-within,
html body .category .tool-item.active,
html body .category .tool-item.active:hover,
html body .category .tool-item.active:active,
html body .category .tool-item.active:focus-within,
html body .category-header,
html body .category-header:hover,
html body .category-header:active,
html body .category.active .category-header,
html body .category.active .category-header:hover{
  background:var(--nm-container) !important;
  background-image:none !important;
  border-color:var(--nm-border) !important;
  box-shadow:var(--nm-shadow) !important;
  transform:none !important;
  color:var(--nm-text) !important;
  -webkit-text-fill-color:var(--nm-text) !important;
}
html body .category .tool-item::before,
html body .category .tool-item::after,
html body .category .tool-item:hover::before,
html body .category .tool-item:hover::after,
html body .category .tool-item:active::before,
html body .category .tool-item:active::after,
html body .category .tool-item.active::before,
html body .category .tool-item.active::after,
html body .category-header::before,
html body .category-header::after,
html body .category-header:hover::before,
html body .category-header:hover::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  background:none !important;
  background-image:none !important;
}
html body .category .tool-description,
html body .category .tool-description *,
html body .category .tool-personal-note,
html body .category .tool-personal-note *,
html body .category .tool-save-location,
html body .category .tool-save-location *,
html body .category .note,
html body .category .note *,
html body .category .note-warning,
html body .category .note-warning *,
html body .category .code-container,
html body .category .code-container *,
html body .category .copy-btn,
html body .category .copy-btn *{
  background-image:none !important;
  transform:none !important;
}
html body.dark-theme .category .tool-item,
html body.dark-theme .category .tool-item:hover,
html body.dark-theme .category .tool-item:active,
html body.dark-theme .category .tool-item:focus-within,
html body.dark-theme .category .tool-item.active,
html body.dark-theme .category .tool-item.active:hover,
html body.dark-theme .category-header,
html body.dark-theme .category-header:hover,
html body.dark-theme .category.active .category-header,
html body.dark-theme .category.active .category-header:hover{
  background:#2d2838 !important;
  background-image:none !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
html body.dark-theme .category .tool-item *,
html body.dark-theme .category-header *,
html body.dark-theme .tool-description *,
html body.dark-theme .tool-personal-note *,
html body.dark-theme .tool-save-location *,
html body.dark-theme .note *,
html body.dark-theme .note-warning *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
html body.light-theme .category .tool-item,
html body.light-theme .category .tool-item:hover,
html body.light-theme .category .tool-item:active,
html body.light-theme .category .tool-item:focus-within,
html body.light-theme .category .tool-item.active,
html body.light-theme .category .tool-item.active:hover,
html body.light-theme .category-header,
html body.light-theme .category-header:hover,
html body.light-theme .category.active .category-header,
html body.light-theme .category.active .category-header:hover{
  background:#ffffff !important;
  background-image:none !important;
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}
html body.light-theme .category .tool-item *,
html body.light-theme .category-header *,
html body.light-theme .tool-description *,
html body.light-theme .tool-personal-note *,
html body.light-theme .tool-save-location *,
html body.light-theme .note *,
html body.light-theme .note-warning *{
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}

/* General readability guard, without touching the red Instagram notice. */
html body.dark-theme :where(.page-content, .home-screen, .main-footer) :where(p,li,span,strong,small,label,h1,h2,h3,h4,h5,h6,.feature-description,.footer-note,.footer-tracker-note):not(.instagram-alert):not(.instagram-alert *){
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
html body.light-theme :where(.page-content, .home-screen, .main-footer) :where(p,li,span,strong,small,label,h1,h2,h3,h4,h5,h6,.feature-description,.footer-note,.footer-tracker-note):not(.instagram-alert):not(.instagram-alert *){
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}
html body .home-screen .instagram-alert,
html body .home-screen .instagram-alert *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}


html body.butsystem-page .page-content .features-grid.but-feature-summary,
html body.butsystem-page .features-grid.but-feature-summary,
html body.butsystem-page div.features-grid.but-feature-summary{
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
  grid-auto-flow:initial !important;
  gap:clamp(10px, 2.8vw, 16px) !important;
  width:100% !important;
  max-width:min(100%, 980px) !important;
  margin:clamp(12px, 3vw, 20px) auto 0 !important;
  padding:0 !important;
  align-items:stretch !important;
  justify-items:stretch !important;
}
html body.butsystem-page .features-grid.but-feature-summary > .feature-card{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:clamp(13px, 3vw, 20px) !important;
  display:grid !important;
  grid-template-columns:minmax(150px, .32fr) minmax(0, 1fr) !important;
  align-items:center !important;
  justify-content:stretch !important;
  gap:clamp(12px, 3vw, 22px) !important;
  text-align: center !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
html body.butsystem-page .features-grid.but-feature-summary .feature-card-compact-head{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:clamp(8px, 2.2vw, 12px) !important;
  margin:0 !important;
  min-width:0 !important;
  text-align: center !important;
}
html body.butsystem-page .features-grid.but-feature-summary .feature-card-compact-head i{
  flex:0 0 auto !important;
  font-size:clamp(1.2rem, 4vw, 1.7rem) !important;
  line-height:1 !important;
  margin:0 !important;
}
html body.butsystem-page .features-grid.but-feature-summary .feature-card h3{
  margin:0 !important;
  font-size:clamp(.92rem, 2.8vw, 1.16rem) !important;
  line-height:1.16 !important;
  text-align: center !important;
  overflow-wrap:anywhere !important;
}
html body.butsystem-page .features-grid.but-feature-summary .feature-card p{
  margin:0 !important;
  max-width:none !important;
  font-size:clamp(.82rem, 2.45vw, 1rem) !important;
  line-height:1.35 !important;
  text-align: center !important;
  overflow-wrap:anywhere !important;
}
@media (max-width:430px){
  html body.butsystem-page .features-grid.but-feature-summary > .feature-card{
    grid-template-columns:minmax(118px, .34fr) minmax(0, 1fr) !important;
    padding:12px 10px !important;
    gap:10px !important;
  }
  html body.butsystem-page .features-grid.but-feature-summary .feature-card-compact-head{
    gap:7px !important;
  }
  html body.butsystem-page .features-grid.but-feature-summary .feature-card-compact-head i{
    font-size:1.05rem !important;
  }
  html body.butsystem-page .features-grid.but-feature-summary .feature-card h3{
    font-size:.78rem !important;
    line-height:1.14 !important;
  }
  html body.butsystem-page .features-grid.but-feature-summary .feature-card p{
    font-size:.69rem !important;
    line-height:1.27 !important;
  }
}
@media (max-width:330px){
  html body.butsystem-page .features-grid.but-feature-summary > .feature-card{
    grid-template-columns:1fr !important;
  }
}

/* Keep Instagram notice as a red notice with white centered text in every theme. */
html body .instagram-alert,
html body.dark-theme .instagram-alert,
html body.light-theme .instagram-alert,
html body .home-screen .instagram-alert{
  background:#c40020 !important;
  background-image:none !important;
  border:3px solid #ffffff !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-align:center !important;
}
html body .instagram-alert *,
html body.dark-theme .instagram-alert *,
html body.light-theme .instagram-alert *,
html body .home-screen .instagram-alert *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-align:center !important;
}
html body .instagram-alert-content,
html body .instagram-alert-button-row{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}
html body .instagram-alert-btn{
  margin:10px auto 0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:2px solid #ffffff !important;
  background:transparent !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Final mobile tap fix: remove the temporary pink pressed state on accordion items. */
@media (hover:none), (pointer:coarse){
  html body .category .tool-item,
  html body .category .tool-item:hover,
  html body .category .tool-item:active,
  html body .category .tool-item:focus,
  html body .category .tool-item:focus-visible,
  html body .category .tool-item:focus-within,
  html body .category .tool-item.active,
  html body .category .tool-item.active:hover,
  html body .category .tool-item.active:active,
  html body .category .tool-item.active:focus-within,
  html body .category-header,
  html body .category-header:hover,
  html body .category-header:active,
  html body .category.active .category-header,
  html body .category.active .category-header:hover{
    background:var(--nm-container) !important;
    background-image:none !important;
    border-color:var(--nm-border) !important;
    box-shadow:var(--nm-shadow) !important;
    transform:none !important;
  }
  html body.dark-theme .category .tool-item,
  html body.dark-theme .category .tool-item:hover,
  html body.dark-theme .category .tool-item:active,
  html body.dark-theme .category .tool-item.active,
  html body.dark-theme .category-header,
  html body.dark-theme .category-header:hover,
  html body.dark-theme .category.active .category-header{
    background:#2d2838 !important;
    background-image:none !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }
  html body.light-theme .category .tool-item,
  html body.light-theme .category .tool-item:hover,
  html body.light-theme .category .tool-item:active,
  html body.light-theme .category .tool-item.active,
  html body.light-theme .category-header,
  html body.light-theme .category-header:hover,
  html body.light-theme .category.active .category-header{
    background:#ffffff !important;
    background-image:none !important;
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
  }
}



/* === Home free e-book card: brighter standout download card (2026-05-21) === */
.home-screen #highlights.features-grid > .feature-card.ebook-download-card{
    border:1px solid rgba(168, 85, 247, 0.92) !important;
    background-image:
      radial-gradient(360px 180px at 18% -18%, rgba(255,255,255,0.24), transparent 58%),
      radial-gradient(320px 190px at 105% 18%, rgba(168, 85, 247,0.44), transparent 58%),
      linear-gradient(135deg, rgba(168, 85, 247,0.34), rgba(168, 85, 247,0.18) 42%, rgba(255,255,255,0.10) 54%, rgba(168, 85, 247,0.28)) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.16) inset,
      0 0 22px rgba(168, 85, 247,0.42),
      0 12px 28px rgba(0,0,0,0.38) !important;
    isolation:isolate;
}
.home-screen #highlights.features-grid > .feature-card.ebook-download-card::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius: 0px !important;
    background:
      linear-gradient(112deg, transparent 0%, transparent 25%, rgba(255,255,255,0.72) 42%, rgba(168, 85, 247,0.42) 50%, transparent 66%, transparent 100%);
    background-size:240% 100%;
    animation:ebookCardShine 3.8s var(--ease-in-out-cubic) infinite;
    opacity:0.82;
    pointer-events:none;
    z-index:0;
}
.home-screen #highlights.features-grid > .feature-card.ebook-download-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius: 0px !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.28),
      inset 0 0 18px rgba(255,255,255,0.08);
    pointer-events:none;
    z-index:1;
}
.home-screen #highlights.features-grid > .feature-card.ebook-download-card > *{
    position:relative;
    z-index:2;
}
.home-screen #highlights.features-grid > .feature-card.ebook-download-card:hover{
    transform:translateY(-7px) scale(1.035) !important;
    border-color:rgba(255,255,255,0.95) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.22) inset,
      0 0 34px rgba(168, 85, 247,0.66),
      0 18px 36px rgba(0,0,0,0.46) !important;
}
.home-screen #highlights.features-grid > .feature-card.ebook-download-card .feature-icon-wrapper{
    border-color:rgba(255,255,255,0.52) !important;
    background:rgba(255,255,255,0.10) !important;
}
.home-screen #highlights.features-grid > .feature-card.ebook-download-card .feature-icon,
.home-screen #highlights.features-grid > .feature-card.ebook-download-card .feature-title,
.home-screen #highlights.features-grid > .feature-card.ebook-download-card .feature-cta{
    color:#ffffff !important;
    text-shadow:0 0 10px rgba(168, 85, 247,0.55);
}
.home-screen #highlights.features-grid > .feature-card.ebook-download-card .feature-description{
    color:rgba(255,255,255,0.88) !important;
}
.ebook-badge{
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:18px;
    padding:2px 6px;
    margin:0 0 6px 0;
    border:1px solid rgba(255,255,255,0.38);
    background:rgba(255,255,255,0.12);
    color:#ffffff;
    font-family:var(--font-mono);
    font-size:clamp(0.46rem, 2.3vw, 0.55rem);
    font-weight:800;
    letter-spacing:0.04em;
    text-transform:uppercase;
    line-height:1;
    box-shadow:0 0 12px rgba(168, 85, 247,0.28);
}
@keyframes ebookCardShine{
    0%, 18% { background-position:170% 0; opacity:0; }
    36% { opacity:0.9; }
    58%, 100% { background-position:-80% 0; opacity:0; }
}
body.light-theme .home-screen #highlights.features-grid > .feature-card.ebook-download-card{
    border-color:rgba(168, 85, 247,0.72) !important;
    background-image:
      radial-gradient(360px 180px at 18% -18%, rgba(255,255,255,0.82), transparent 58%),
      radial-gradient(320px 190px at 105% 18%, rgba(168, 85, 247,0.38), transparent 58%),
      linear-gradient(135deg, rgba(168, 85, 247,0.34), rgba(168, 85, 247,0.18) 42%, rgba(255,255,255,0.86) 58%, rgba(168, 85, 247,0.26)) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.54) inset,
      0 0 26px rgba(168, 85, 247,0.28),
      0 14px 30px rgba(168, 85, 247,0.16) !important;
}
body.light-theme .home-screen #highlights.features-grid > .feature-card.ebook-download-card .feature-icon,
body.light-theme .home-screen #highlights.features-grid > .feature-card.ebook-download-card .feature-title,
body.light-theme .home-screen #highlights.features-grid > .feature-card.ebook-download-card .feature-cta{
    color:#7E22CE !important;
    text-shadow:0 0 10px rgba(255,255,255,0.78);
}
body.light-theme .home-screen #highlights.features-grid > .feature-card.ebook-download-card .feature-description,
body.light-theme .home-screen #highlights.features-grid > .feature-card.ebook-download-card .ebook-badge{
    color:#7E22CE !important;
}
body.light-theme .ebook-badge{
    background:rgba(255,255,255,0.62);
    border-color:rgba(168, 85, 247,0.32);
}

/* === Homepage mission subline + guide PDF card (2026-05-22) === */
.hero-subline {
    max-width: 52ch;
    margin: 10px auto 0;
    color: var(--nm-text);
    font-family: var(--font-secondary);
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    font-weight: 800;
    line-height: 1.25;
    opacity: 0.95;
    letter-spacing: 0.01em;
}

.guide-pdf-grid {
    max-width: 720px;
    margin: 22px auto 18px;
    grid-template-columns: 1fr;
}

.guide-pdf-grid .ebook-download-card {
    border: 1px solid rgba(168, 85, 247, 0.92) !important;
    background-image:
      radial-gradient(360px 180px at 18% -18%, rgba(255,255,255,0.24), transparent 58%),
      radial-gradient(320px 190px at 105% 18%, rgba(168, 85, 247,0.44), transparent 58%),
      linear-gradient(135deg, rgba(168, 85, 247,0.34), rgba(168, 85, 247,0.18) 42%, rgba(255,255,255,0.10) 54%, rgba(168, 85, 247,0.28)) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.16) inset,
      0 0 22px rgba(168, 85, 247,0.42),
      0 12px 28px rgba(0,0,0,0.38) !important;
    isolation: isolate;
}

.guide-pdf-grid .ebook-download-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 0px !important;
    background:
      linear-gradient(112deg, transparent 0%, transparent 25%, rgba(255,255,255,0.72) 42%, rgba(168, 85, 247,0.42) 50%, transparent 66%, transparent 100%);
    background-size: 240% 100%;
    animation: ebookCardShine 3.8s var(--ease-in-out-cubic) infinite;
    opacity: 0.82;
    pointer-events: none;
    z-index: 0;
}

.guide-pdf-grid .ebook-download-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0px !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.28),
      inset 0 0 18px rgba(255,255,255,0.08);
    pointer-events: none;
    z-index: 1;
}

.guide-pdf-grid .ebook-download-card > * {
    position: relative;
    z-index: 2;
}

.guide-pdf-grid .ebook-download-card:hover {
    transform: translateY(-7px) scale(1.025) !important;
    border-color: rgba(255,255,255,0.95) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.22) inset,
      0 0 34px rgba(168, 85, 247,0.66),
      0 18px 36px rgba(0,0,0,0.46) !important;
}

.guide-pdf-grid .ebook-download-card .feature-icon-wrapper {
    border-color: rgba(255,255,255,0.52) !important;
    background: rgba(255,255,255,0.10) !important;
    margin: 0 auto 15px;
}

.guide-pdf-grid .ebook-download-card .feature-icon,
.guide-pdf-grid .ebook-download-card .feature-title,
.guide-pdf-grid .ebook-download-card .feature-cta {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(168, 85, 247,0.55);
}

.guide-pdf-grid .ebook-download-card .feature-description {
    color: rgba(255,255,255,0.88) !important;
}

body.light-theme .hero-subline {
    color: #1b1b1b !important;
    -webkit-text-fill-color: #1b1b1b !important;
}

body.light-theme .guide-pdf-grid .ebook-download-card {
    border-color: rgba(168, 85, 247,0.72) !important;
    background-image:
      radial-gradient(360px 180px at 18% -18%, rgba(255,255,255,0.82), transparent 58%),
      radial-gradient(320px 190px at 105% 18%, rgba(168, 85, 247,0.38), transparent 58%),
      linear-gradient(135deg, rgba(168, 85, 247,0.34), rgba(168, 85, 247,0.18) 42%, rgba(255,255,255,0.86) 58%, rgba(168, 85, 247,0.26)) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.54) inset,
      0 0 26px rgba(168, 85, 247,0.28),
      0 14px 30px rgba(168, 85, 247,0.16) !important;
}

body.light-theme .guide-pdf-grid .ebook-download-card .feature-icon,
body.light-theme .guide-pdf-grid .ebook-download-card .feature-title,
body.light-theme .guide-pdf-grid .ebook-download-card .feature-cta {
    color: #7E22CE !important;
    -webkit-text-fill-color: #7E22CE !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.78);
}

body.light-theme .guide-pdf-grid .ebook-download-card .feature-description,
body.light-theme .guide-pdf-grid .ebook-download-card .ebook-badge {
    color: #7E22CE !important;
    -webkit-text-fill-color: #7E22CE !important;
}

/* Instagram disabled notice: forced red box with white text in both themes. */
html body .home-screen .instagram-alert,
html body.dark-theme .home-screen .instagram-alert,
html body.light-theme .home-screen .instagram-alert{
  display:block !important;
  width:min(100%, 980px) !important;
  margin:18px auto 24px !important;
  padding:18px 16px !important;
  background:#c40020 !important;
  background-image:none !important;
  border:3px solid #ffffff !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-align:center !important;
  box-shadow:0 0 0 2px rgba(196,0,32,.25), 0 12px 30px rgba(0,0,0,.28) !important;
}
html body .home-screen .instagram-alert *,
html body.dark-theme .home-screen .instagram-alert *,
html body.light-theme .home-screen .instagram-alert *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-align:center !important;
}
html body .home-screen .instagram-alert-content,
html body .home-screen .instagram-alert-button-row{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}
html body .home-screen .instagram-alert p{
  margin:0 !important;
  font-weight:800 !important;
  line-height:1.45 !important;
}
html body .home-screen .instagram-alert-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:12px auto 0 !important;
  padding:10px 14px !important;
  border:2px solid #ffffff !important;
  background:transparent !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  font-weight:900 !important;
  text-decoration:none !important;
  box-shadow:none !important;
}



/* Main page starter path box replacing old feature cards. */
.home-screen .starter-path-section,
html body.dark-theme .home-screen .starter-path-section,
html body.light-theme .home-screen .starter-path-section{
  width:min(100%, 980px) !important;
  margin:22px auto 28px !important;
  padding:clamp(20px, 4vw, 34px) !important;
  border:2px solid var(--border-primary) !important;
  border-radius: 0px !important;
  text-align:center !important;
}
.home-screen .starter-path-section h2{
  margin:0 0 18px !important;
  text-align:center !important;
}
.home-screen .starter-path-block{
  display:grid !important;
  gap:16px !important;
  justify-items:center !important;
  width:100% !important;
}
.home-screen .starter-path-text{
  max-width:760px !important;
  margin:0 auto !important;
  font-weight:800 !important;
  line-height:1.45 !important;
  text-align:center !important;
}
.home-screen .starter-path-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
}
.home-screen .starter-path-btn,
html body.dark-theme .home-screen .starter-path-btn,
html body.light-theme .home-screen .starter-path-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:min(100%, 280px) !important;
  min-height:48px !important;
  padding:12px 18px !important;
  border:1px solid var(--nm-border) !important;
  border-radius: 0px !important;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  background:linear-gradient(135deg, rgba(168, 85, 247,0.14), rgba(168, 85, 247,0.10), rgba(255,255,255,0.03)) !important;
  color:var(--nm-text) !important;
  -webkit-text-fill-color:var(--nm-text) !important;
  font-family:var(--font-mono) !important;
  font-size:0.92rem !important;
  font-weight:900 !important;
  line-height:1.15 !important;
  text-decoration:none !important;
  text-align:center !important;
  box-shadow:
    0 0 0 1px rgba(168, 85, 247,0.22) inset,
    0 0 0 1px rgba(168, 85, 247,0.10) !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.home-screen .starter-path-btn:hover,
.home-screen .starter-path-btn:focus-visible{
  transform:translateY(-2px) !important;
  border-color:rgba(var(--glow-rgb), 0.75) !important;
  background:linear-gradient(135deg, rgba(168, 85, 247,0.22), rgba(168, 85, 247,0.16), rgba(255,255,255,0.05)) !important;
  box-shadow:
    0 0 0 1px rgba(168, 85, 247,0.32) inset,
    0 0 18px rgba(168, 85, 247,0.12),
    0 0 28px rgba(168, 85, 247,0.16) !important;
}
.home-screen .starter-path-btn--ebook{
  border-color:rgba(168, 85, 247,0.82) !important;
  background:linear-gradient(135deg, rgba(168, 85, 247,0.28), rgba(168, 85, 247,0.16), rgba(255,255,255,0.06)) !important;
}
@media (max-width:520px){
  .home-screen .starter-path-actions{
    flex-direction:column !important;
  }
  .home-screen .starter-path-btn{
    width:100% !important;
  }
}

/* Instagram disabled notice moved to Contact page: red box, white text, no contact button. */
html body .contact-instagram-alert,
html body.dark-theme .contact-instagram-alert,
html body.light-theme .contact-instagram-alert{
  display:block !important;
  width:min(100%, 900px) !important;
  margin:0 auto 22px !important;
  padding:18px 16px !important;
  background:#c40020 !important;
  background-image:none !important;
  border:3px solid #ffffff !important;
  border-radius: 0px !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-align:center !important;
  box-shadow:0 0 0 2px rgba(196,0,32,.25), 0 12px 30px rgba(0,0,0,.28) !important;
}
html body .contact-instagram-alert *,
html body.dark-theme .contact-instagram-alert *,
html body.light-theme .contact-instagram-alert *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-align:center !important;
}
html body .contact-instagram-alert .instagram-alert-content{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}
html body .contact-instagram-alert p{
  margin:0 !important;
  font-weight:800 !important;
  line-height:1.45 !important;
}

/* Homepage proof lines moved below the three proof boxes. */
.home-screen .trust-indicators,
html body.dark-theme .home-screen .trust-indicators,
html body.light-theme .home-screen .trust-indicators{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  max-width:760px !important;
  width:100% !important;
  margin:0 auto 12px !important;
}
.home-screen .trust-item,
html body.dark-theme .home-screen .trust-item,
html body.light-theme .home-screen .trust-item{
  border-radius: 0px !important;
}
.home-screen .trust-item--google-rank strong{
  display:block !important;
  color:var(--nm-text-accent) !important;
  -webkit-text-fill-color:var(--nm-text-accent) !important;
  font-family:var(--font-secondary) !important;
  font-size:1.45rem !important;
  font-weight:950 !important;
  line-height:1 !important;
}
.home-screen .trust-item--google-rank:hover strong{
  color:var(--nm-text-on-accent) !important;
  -webkit-text-fill-color:var(--nm-text-on-accent) !important;
}
.home-screen .hero-proof-lines{
  display:grid !important;
  gap:2px !important;
  justify-items:center !important;
  margin:0 auto 18px !important;
  text-align:center !important;
}
.home-screen .hero-proof-lines .hero-subtitle,
.home-screen .hero-proof-lines .hero-subline{
  margin:0 auto !important;
}
.home-screen .hero-proof-lines .hero-subline{
  margin-top:0 !important;
}
.home-screen .starter-path-btn--exclusive{
  border-color:rgba(168, 85, 247,0.88) !important;
  box-shadow:
    0 0 0 1px rgba(168, 85, 247,0.32) inset,
    0 0 20px rgba(168, 85, 247,0.14) !important;
}
.home-screen .starter-path-menu-note{
  max-width:820px !important;
}
@media (max-width:700px){
  .home-screen .trust-indicators,
  html body.dark-theme .home-screen .trust-indicators,
  html body.light-theme .home-screen .trust-indicators{
    grid-template-columns:1fr !important;
    max-width:360px !important;
  }
}

/* Keep the #1 / Stars / Forks proof boxes on one line as requested. */
@media (max-width:700px){
  .home-screen .trust-indicators,
  html body.dark-theme .home-screen .trust-indicators,
  html body.light-theme .home-screen .trust-indicators{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    max-width:100% !important;
    gap:8px !important;
  }
  .home-screen .trust-item{
    padding:12px 6px !important;
  }
  .home-screen .trust-item span{
    font-size:0.66rem !important;
  }
  .home-screen .trust-badge-img{
    max-width:86px !important;
  }
  .home-screen .trust-item--google-rank strong{
    font-size:1.2rem !important;
  }
}

/* Final home layout fix: proof boxes stay on one row, proof lines have no gap, creator text is boxed. */
body .home-screen .hero-section .trust-indicators,
html body.dark-theme .home-screen .hero-section .trust-indicators,
html body.light-theme .home-screen .hero-section .trust-indicators{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:8px !important;
  width:100% !important;
  max-width:760px !important;
  margin:0 auto 12px !important;
  align-items:stretch !important;
}
body .home-screen .hero-section .trust-item,
html body.dark-theme .home-screen .hero-section .trust-item,
html body.light-theme .home-screen .hero-section .trust-item{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  padding:12px 6px !important;
  border-radius: 0px !important;
}
body .home-screen .hero-section .trust-badge-img{
  display:block !important;
  width:min(94px, 100%) !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
}
body .home-screen .hero-section .trust-item span{
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
body .home-screen .hero-proof-lines,
html body.dark-theme .home-screen .hero-proof-lines,
html body.light-theme .home-screen .hero-proof-lines{
  display:block !important;
  margin:0 auto 18px !important;
  padding:0 !important;
  text-align:center !important;
}
body .home-screen .hero-proof-lines .hero-subtitle,
body .home-screen .hero-proof-lines .hero-subline,
html body.dark-theme .home-screen .hero-proof-lines .hero-subtitle,
html body.dark-theme .home-screen .hero-proof-lines .hero-subline,
html body.light-theme .home-screen .hero-proof-lines .hero-subtitle,
html body.light-theme .home-screen .hero-proof-lines .hero-subline{
  display:block !important;
  margin:0 auto !important;
  padding:0 !important;
  line-height:1.15 !important;
}
body .home-screen .hero-proof-lines .hero-subtitle{
  margin-bottom:0 !important;
}
body .home-screen .hero-proof-lines .hero-subline{
  margin-top:0 !important;
}
body .home-screen .creator-intro-box,
html body.dark-theme .home-screen .creator-intro-box,
html body.light-theme .home-screen .creator-intro-box{
  width:min(100%, 980px) !important;
  margin:0 auto 28px !important;
  padding:clamp(18px, 3.5vw, 30px) !important;
  border:2px solid var(--border-primary) !important;
  border-radius: 0px !important;
  background-color:var(--nm-container) !important;
  background-image:
    linear-gradient(135deg, rgba(168, 85, 247,0.20), rgba(168, 85, 247,0.14) 36%, rgba(255,255,255,0.06) 50%, rgba(168, 85, 247,0.18) 74%, rgba(168, 85, 247,0.12)),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0)) !important;
  box-shadow:
    0 0 0 1px rgba(168, 85, 247,0.26) inset,
    0 0 0 1px rgba(168, 85, 247,0.12),
    0 14px 36px rgba(0,0,0,0.32) !important;
  text-align:center !important;
  position:relative !important;
  overflow:hidden !important;
}
html body.light-theme .home-screen .creator-intro-box{
  background-color:rgba(255,255,255,0.94) !important;
  background-image:
    linear-gradient(135deg, rgba(168, 85, 247,0.12), rgba(168, 85, 247,0.10) 34%, rgba(255,255,255,0.55) 50%, rgba(168, 85, 247,0.10) 72%, rgba(168, 85, 247,0.10)),
    linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.58)) !important;
  box-shadow:
    0 0 0 1px rgba(168, 85, 247,0.18) inset,
    0 0 0 1px rgba(168, 85, 247,0.10),
    0 8px 22px rgba(168, 85, 247,0.05) !important;
}
body .home-screen .creator-intro-box .hero-kicker,
html body.dark-theme .home-screen .creator-intro-box .hero-kicker,
html body.light-theme .home-screen .creator-intro-box .hero-kicker{
  margin:0 auto !important;
  padding:0 !important;
  max-width:860px !important;
  width:100% !important;
  color:var(--nm-text) !important;
  font-weight:700 !important;
  line-height:1.55 !important;
}
@media (max-width:700px){
  body .home-screen .hero-section .trust-indicators,
  html body.dark-theme .home-screen .hero-section .trust-indicators,
  html body.light-theme .home-screen .hero-section .trust-indicators{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:6px !important;
    max-width:100% !important;
  }
  body .home-screen .hero-section .trust-item{
    padding:10px 3px !important;
    gap:5px !important;
  }
  body .home-screen .hero-section .trust-badge-img{
    width:min(78px, 100%) !important;
  }
  body .home-screen .hero-section .trust-item span{
    font-size:0.58rem !important;
    line-height:1.12 !important;
  }
  body .home-screen .hero-section .trust-item--google-rank strong{
    font-size:1.05rem !important;
  }
  body .home-screen .creator-intro-box,
  html body.dark-theme .home-screen .creator-intro-box,
  html body.light-theme .home-screen .creator-intro-box{
    padding:16px 10px !important;
    margin-bottom:24px !important;
  }
}
@media (max-width:360px){
  body .home-screen .hero-section .trust-badge-img{
    width:min(66px, 100%) !important;
  }
  body .home-screen .hero-section .trust-item span{
    font-size:0.52rem !important;
  }
}

/* Creator text box color parity: match the Best Path box exactly. */
body .home-screen .creator-intro-box,
html body.dark-theme .home-screen .creator-intro-box{
  background-color:var(--nm-container) !important;
  background-image:
    linear-gradient(135deg, rgba(168, 85, 247,0.24), rgba(168, 85, 247,0.18) 34%, rgba(255,255,255,0.09) 48%, rgba(168, 85, 247,0.20) 72%, rgba(168, 85, 247,0.16)),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0)) !important;
  border:2px solid var(--border-primary) !important;
  box-shadow:
    0 0 0 1px rgba(168, 85, 247,0.26) inset,
    0 0 0 1px rgba(168, 85, 247,0.18),
    0 0 18px rgba(168, 85, 247,0.10),
    0 0 28px rgba(168, 85, 247,0.08),
    0 18px 42px rgba(0,0,0,0.34) !important;
}

html body.light-theme .home-screen .creator-intro-box{
  background-color:rgba(255,255,255,0.94) !important;
  background-image:
    linear-gradient(135deg, rgba(168, 85, 247,0.12), rgba(168, 85, 247,0.10) 34%, rgba(255,255,255,0.55) 50%, rgba(168, 85, 247,0.10) 72%, rgba(168, 85, 247,0.10)),
    linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.58)) !important;
  border:2px solid var(--border-primary) !important;
  box-shadow:
    0 0 0 1px rgba(168, 85, 247,0.18) inset,
    0 0 0 1px rgba(168, 85, 247,0.10),
    0 8px 22px rgba(168, 85, 247,0.05) !important;
}

/* === v23: consistent page CTA buttons and FAQ subtitle cleanup === */
html body .page-content a.starter-path-btn,
html body .page-content .starter-path-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:min(100%, 210px) !important;
  max-width:100% !important;
  min-height:46px !important;
  padding:11px 16px !important;
  border:1px solid var(--nm-border) !important;
  border-radius: 0px !important;
  background:linear-gradient(135deg, rgba(168, 85, 247,0.14), rgba(168, 85, 247,0.08), rgba(255,255,255,0.025)) !important;
  color:var(--nm-text) !important;
  -webkit-text-fill-color:var(--nm-text) !important;
  font-family:var(--font-mono, monospace) !important;
  font-size:0.9rem !important;
  font-weight:900 !important;
  line-height:1.15 !important;
  letter-spacing:.03em !important;
  text-align:center !important;
  text-decoration:none !important;
  box-shadow:0 0 0 1px rgba(168, 85, 247,0.16) inset !important;
  box-sizing:border-box !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
html body .page-content a.starter-path-btn:hover,
html body .page-content a.starter-path-btn:focus-visible{
  border-color:var(--nm-accent) !important;
  background:linear-gradient(135deg, rgba(168, 85, 247,0.24), rgba(168, 85, 247,0.12), rgba(255,255,255,0.04)) !important;
  box-shadow:0 0 0 1px rgba(168, 85, 247,0.34) inset, 0 0 18px rgba(168, 85, 247,0.14) !important;
  transform:translateY(-1px) !important;
}
html body .page-content .starter-path-btn--exclusive{
  border-color:var(--nm-accent) !important;
}
html body .page-content .assistance-path-section{
  text-align:center !important;
}
html body .page-content .assistance-path-section .starter-path-btn{
  margin:14px auto 0 !important;
}
html body .page-content .assistance-quick-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  margin:16px auto 0 !important;
}
@media (max-width:560px){
  html body .page-content .assistance-quick-actions{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  html body .page-content .assistance-quick-actions .starter-path-btn{
    width:100% !important;
  }
}


/* === Uniform burger menu link spacing fix (2026-06-01) === */
.nav-menu{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    gap:12px !important;
}

.nav-menu .nav-link{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:44px !important;
    margin:0 !important;
    line-height:1.25 !important;
    box-sizing:border-box !important;
}

.nav-menu .nav-link + .nav-link{
    margin-top:0 !important;
}

@media (max-width:520px){
    .nav-menu{
        gap:10px !important;
    }

    .nav-menu .nav-link{
        min-height:42px !important;
    }
}


/* === v24: exact equal spacing for burger menu buttons === */
html body .nav-menu,
html body .main-nav .nav-menu{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  row-gap: 12px !important;
  column-gap: 0 !important;
  padding-top: 14px !important;
  padding-bottom: calc(14px + var(--safe-area-inset-bottom, 0px)) !important;
}
html body .nav-menu > .nav-link,
html body .main-nav .nav-menu > .nav-link{
  flex: 0 0 50px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.18 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transform: none !important;
}
html body .nav-menu > .nav-link + .nav-link,
html body .main-nav .nav-menu > .nav-link + .nav-link{
  margin-top: 0 !important;
}
@media (max-width: 520px){
  html body .nav-menu,
  html body .main-nav .nav-menu{
    row-gap: 12px !important;
    padding-top: 14px !important;
  }
  html body .nav-menu > .nav-link,
  html body .main-nav .nav-menu > .nav-link{
    flex-basis: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
@media (max-width: 380px){
  html body .nav-menu,
  html body .main-nav .nav-menu{
    row-gap: 10px !important;
    padding-top: 12px !important;
  }
  html body .nav-menu > .nav-link,
  html body .main-nav .nav-menu > .nav-link{
    flex-basis: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    font-size: 0.82rem !important;
  }
}
/* === End v24 === */


/* === v25: burger menu auto-fit without scrolling === */
html body .nav-menu,
html body .main-nav .nav-menu{
  height: calc((var(--vh, 1vh) * 100) - var(--nav-h, 70px)) !important;
  max-height: calc((var(--vh, 1vh) * 100) - var(--nav-h, 70px)) !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  row-gap: clamp(6px, 1.05vh, 12px) !important;
  column-gap: 0 !important;
  padding-top: clamp(8px, 1.35vh, 14px) !important;
  padding-bottom: calc(clamp(8px, 1.35vh, 14px) + var(--safe-area-inset-bottom, 0px)) !important;
}

html body .nav-menu > .nav-link,
html body .main-nav .nav-menu > .nav-link{
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(2px, 0.75vh, 7px) 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.04 !important;
  font-size: clamp(0.68rem, 1.55vh, 0.92rem) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-wrap: balance;
}

html body .nav-menu > .nav-link + .nav-link,
html body .main-nav .nav-menu > .nav-link + .nav-link{
  margin-top: 0 !important;
}

@media (max-height: 700px){
  html body .nav-menu,
  html body .main-nav .nav-menu{
    row-gap: 6px !important;
    padding-top: 8px !important;
    padding-bottom: calc(8px + var(--safe-area-inset-bottom, 0px)) !important;
  }
  html body .nav-menu > .nav-link,
  html body .main-nav .nav-menu > .nav-link{
    font-size: clamp(0.6rem, 1.45vh, 0.78rem) !important;
    line-height: 1.02 !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
  }
}

@media (max-width: 380px){
  html body .nav-menu,
  html body .main-nav .nav-menu{
    row-gap: 5px !important;
  }
  html body .nav-menu > .nav-link,
  html body .main-nav .nav-menu > .nav-link{
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: clamp(0.58rem, 1.45vh, 0.8rem) !important;
  }
}
/* === End v25 === */

/* === v26: slightly larger burger menu text without changing button size === */
html body .nav-menu > .nav-link,
html body .main-nav .nav-menu > .nav-link{
  font-size: clamp(0.76rem, 1.72vh, 0.98rem) !important;
  line-height: 1.05 !important;
}

@media (max-height: 700px){
  html body .nav-menu > .nav-link,
  html body .main-nav .nav-menu > .nav-link{
    font-size: clamp(0.68rem, 1.62vh, 0.86rem) !important;
    line-height: 1.03 !important;
  }
}

@media (max-width: 380px){
  html body .nav-menu > .nav-link,
  html body .main-nav .nav-menu > .nav-link{
    font-size: clamp(0.66rem, 1.58vh, 0.86rem) !important;
  }
}
/* === End v26 === */

/* === v29: unified two-theme colors across backgrounds, cards and buttons === */
/* The site should keep one clear dark/light color system: dark transparent purple/black surfaces, light white surfaces, lavender borders/accent. */
html body {
  background-color: var(--nm-abyss-blue) !important;
  color: var(--nm-text) !important;
}

html body .main-nav {
  background: var(--nm-nav-solid) !important;
  border-bottom-color: var(--nm-border) !important;
}

html body .page-content {
  color: var(--nm-text) !important;
}

/* Normal page titles: text only, never boxed. */


html body .page-header h1,
html body .page-header p {
  color: var(--nm-text-accent) !important;
}

html body .page-header p {
  color: var(--nm-text) !important;
}






/* Shared text colors. */
html body .content-section h2,
html body .content-section h3,
html body .feature-card h3,
html body .tool-card h4,
html body .assistance-page h1,
html body .assistance-page h2,
html body .assistance-page h3,
html body .assistance-page summary,
html body .faq-item summary,
html body details summary {
  color: var(--nm-text-accent) !important;
}

html body .content-section p,
html body .content-section li,
html body .feature-card p,
html body .tool-card p,
html body .assistance-page p,
html body .assistance-page li,
html body .assistance-page code,
html body .faq-item p,
html body details p {
  color: var(--nm-text) !important;
}

/* Shared button system: same background/border colors in dark and light mode. */
html body :is(.btn,.btn-primary,.starter-path-btn,.faq-link-btn,.footer-mini-btn,.copy-btn,.contact-page-btn,.contact-cta,.hero-cta,.feature-cta),
html body a:is(.btn,.btn-primary,.starter-path-btn,.faq-link-btn,.footer-mini-btn,.contact-page-btn,.contact-cta,.hero-cta,.feature-cta),
html body button:is(.btn,.btn-primary,.starter-path-btn,.faq-link-btn,.footer-mini-btn,.copy-btn,.contact-page-btn,.contact-cta,.hero-cta,.feature-cta) {
  background: var(--nm-container) !important;
  background-image: none !important;
  border: 1px solid var(--nm-border) !important;
  color: var(--nm-text) !important;
  box-shadow: none !important;
}

html body :is(.btn,.btn-primary,.starter-path-btn,.faq-link-btn,.footer-mini-btn,.copy-btn,.contact-page-btn,.contact-cta,.hero-cta,.feature-cta):hover,
html body a:is(.btn,.btn-primary,.starter-path-btn,.faq-link-btn,.footer-mini-btn,.contact-page-btn,.contact-cta,.hero-cta,.feature-cta):hover,
html body button:is(.btn,.btn-primary,.starter-path-btn,.faq-link-btn,.footer-mini-btn,.copy-btn,.contact-page-btn,.contact-cta,.hero-cta,.feature-cta):hover {
  background: var(--nm-accent) !important;
  border-color: var(--nm-accent) !important;
  color: var(--nm-text-on-accent) !important;
  transform: translateY(-2px);
}

/* Top navbar buttons use the same two-theme palette without changing the original layout. */
html body .nav-action-btn,
html body .hamburger-btn,
html body .menu-toggle,
html body .language-toggle,
html body .theme-toggle {
  background: var(--nm-container) !important;
  border-color: var(--nm-border) !important;
  color: var(--nm-text) !important;
  box-shadow: none !important;
}

html body .nav-action-btn:hover,
html body .hamburger-btn:hover,
html body .menu-toggle:hover,
html body .language-toggle:hover,
html body .theme-toggle:hover {
  border-color: var(--nm-accent) !important;
  color: var(--nm-accent) !important;
}

/* Burger menu buttons: same palette and equal spacing from earlier passes. */
html body .nav-menu,
html body .main-nav .nav-menu {
  background: var(--nm-menu-solid) !important;
  border-left-color: var(--nm-border) !important;
}

html body .nav-menu > .nav-link,
html body .main-nav .nav-menu > .nav-link {
  background: var(--nm-container) !important;
  border: 1px solid var(--nm-border) !important;
  color: var(--nm-text) !important;
  box-shadow: none !important;
}

html body .nav-menu > .nav-link:hover,
html body .main-nav .nav-menu > .nav-link:hover {
  background: var(--nm-accent) !important;
  color: var(--nm-text-on-accent) !important;
  border-color: var(--nm-accent) !important;
}

/* Assistance stays consistent with the FAQ/Learn pages: no title box, same card colors. */
html body .assistance-page .page-header {
  padding: 0 !important;
  margin: 0 auto 30px !important;
  max-width: 900px !important;
}

html body .assistance-page .page-header h1,
html body .assistance-page .page-header p {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .assistance-page .assistance-intro,
html body .assistance-page .assistance-category-section,
html body .assistance-page .assistance-path-section {
  background: var(--nm-container) !important;
  border: 1px solid var(--nm-border) !important;
}

/* === End v29 === */

/* === v30: bigger readable burger menu text without increasing button size === */
html body .nav-menu > .nav-link,
html body .main-nav .nav-menu > .nav-link{
  font-size: clamp(0.92rem, 2.05vh, 1.14rem) !important;
  line-height: 1.07 !important;
}

@media (max-height: 700px){
  html body .nav-menu > .nav-link,
  html body .main-nav .nav-menu > .nav-link{
    font-size: clamp(0.82rem, 1.92vh, 1rem) !important;
    line-height: 1.04 !important;
  }
}

@media (max-height: 620px){
  html body .nav-menu > .nav-link,
  html body .main-nav .nav-menu > .nav-link{
    font-size: clamp(0.76rem, 1.78vh, 0.92rem) !important;
    line-height: 1.02 !important;
  }
}

@media (max-width: 380px){
  html body .nav-menu > .nav-link,
  html body .main-nav .nav-menu > .nav-link{
    font-size: clamp(0.78rem, 1.86vh, 0.98rem) !important;
  }
}
/* === End v30 === */

/* ================================================================
   PC ACCESSIBLE MENU FIX (safe desktop-only layout)
   - Keeps the existing mobile navigation untouched.
   - On PC/tablet width, the menu opens as a wide centered grid instead
     of a narrow phone side drawer.
   - The hamburger remains available, but the opened menu is easier to
     scan and click with a mouse.
   ================================================================ */
@media (min-width: 900px) {
  html body .main-nav .nav-container {
    max-width: 1400px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  html body .main-nav .nav-title {
    flex: 0 1 auto !important;
    min-width: 190px !important;
  }

  html body .main-nav .nav-title .site-title {
    white-space: normal !important;
    font-size: clamp(0.92rem, 1.15vw, 1.15rem) !important;
    line-height: 1.15 !important;
  }

  html body .main-nav .burger-menu {
    border: 1px solid var(--nm-border) !important;
    background: var(--nm-container) !important;
    border-radius: 0px !important;
    padding: 8px 12px !important;
    min-width: 74px !important;
  }

  html body .main-nav .burger-label {
    font-size: 0.72rem !important;
    letter-spacing: 0.06em !important;
  }

  html body .main-nav .nav-menu {
    position: fixed !important;
    top: calc(var(--nav-h, 70px) + 14px) !important;
    left: 50% !important;
    right: auto !important;
    inset-inline-end: auto !important;
    width: min(960px, calc(100vw - 48px)) !important;
    max-width: 960px !important;
    height: auto !important;
    max-height: calc((var(--vh, 1vh) * 100) - var(--nav-h, 70px) - 44px) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 18px !important;
    border: 1px solid var(--nm-border) !important;
    border-radius: 0px !important;
    background: var(--nm-menu-solid) !important;
    box-shadow: var(--shadow-elev-3) !important;
    overflow-y: auto !important;
    transform: translate(-50%, -10px) scale(0.98) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.18s var(--ease-out-cubic), transform 0.18s var(--ease-out-cubic), visibility 0.18s !important;
  }

  html body .main-nav .nav-menu.active {
    transform: translate(-50%, 0) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body .main-nav .nav-menu::before {
    border-radius: 0px !important;
  }

  html body .main-nav .nav-menu .nav-link {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    border: 1px solid var(--nm-border) !important;
    border-radius: 0px !important;
    background: var(--nm-container) !important;
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
    transform: none !important;
  }

  html body .main-nav .nav-menu .nav-link:hover,
  html body .main-nav .nav-menu .nav-link.active,
  html body .main-nav .nav-menu .nav-link:focus-visible {
    background: var(--nm-accent) !important;
    color: var(--nm-text-on-accent) !important;
    border-color: var(--nm-accent) !important;
    transform: none !important;
  }
}

@media (min-width: 900px) and (max-width: 1100px) {
  html body .main-nav .nav-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(760px, calc(100vw - 36px)) !important;
  }
}









/* === v31: global button integrity pass (2026-06-30) === */
/* Keeps CTA links visually complete even if a content block is moved outside its old wrapper. */
html body a:is(
  .starter-path-btn,
  .faq-link-btn,
  .contact-page-btn,
  .contact-cta,
  .hero-cta,
  .feature-cta,
  .btn
) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-height: 46px !important;
  max-width: 100% !important;
  padding: 11px 16px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--nm-border) !important;
  border-radius: 0px !important;
  background: var(--nm-container) !important;
  background-image: none !important;
  color: var(--nm-text) !important;
  -webkit-text-fill-color: var(--nm-text) !important;
  font-family: var(--font-mono, "Roboto Mono", monospace) !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

html body a:is(
  .starter-path-btn,
  .faq-link-btn,
  .contact-page-btn,
  .contact-cta,
  .hero-cta,
  .feature-cta,
  .btn
):is(:hover, :focus-visible) {
  background: var(--nm-accent) !important;
  border-color: var(--nm-accent) !important;
  color: var(--nm-text-on-accent) !important;
  -webkit-text-fill-color: var(--nm-text-on-accent) !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
}

html body a.starter-path-btn--exclusive {
  border-color: var(--nm-accent) !important;
}

html body :is(.assistance-quick-actions, .inline-action-buttons) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 16px auto 0 !important;
}

html body :is(.assistance-quick-actions, .inline-action-buttons) > a:is(.starter-path-btn, .btn) {
  flex: 1 1 220px !important;
  width: auto !important;
  max-width: 360px !important;
}

@media (max-width: 560px) {
  html body :is(.assistance-quick-actions, .inline-action-buttons) {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  html body :is(.assistance-quick-actions, .inline-action-buttons) > a:is(.starter-path-btn, .btn) {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* === v32: Featured Articles And Centered CTA Alignment (2026-07-11) === */



html body :is(.assistance-path-section, .text-center) {
  text-align: center !important;
}



html body .contact-grid {
  justify-items: center !important;
  align-items: stretch !important;
}

html body .contact-grid > a {
  width: min(100%, 360px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}







.featured-articles-section,
html body.dark-theme .featured-articles-section,
html body.light-theme .featured-articles-section {
  width: min(100%, 1100px) !important;
  margin: 34px auto 0 !important;
  padding: clamp(20px, 4vw, 34px) !important;
  border: 2px solid var(--border-primary) !important;
  border-radius: 0px !important;
  background: var(--nm-container) !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.featured-articles-section > h2 {
  margin: 0 0 10px !important;
  text-align: center !important;
}

.featured-articles-intro {
  max-width: 780px !important;
  margin: 0 auto !important;
  color: var(--nm-text-muted) !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

.featured-articles-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 780px) !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 22px auto 0 !important;
}

.featured-article-card {
  display: flex !important;
  min-width: 0 !important;
  min-height: 100% !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid var(--nm-border) !important;
  border-radius: 0px !important;
  background:
    linear-gradient(135deg, rgba(168, 85, 247,0.10), rgba(168, 85, 247,0.06)),
    var(--nm-dark) !important;
  color: var(--nm-text) !important;
  text-decoration: none !important;
  text-align: center !important;
  box-shadow: none !important;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease !important;
}

.featured-article-card:hover,
.featured-article-card:focus-visible {
  transform: translateY(-3px) !important;
  border-color: var(--nm-accent) !important;
  color: var(--nm-text) !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(168, 85, 247,0.18) !important;
}

.featured-article-image,
.featured-article-placeholder {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nm-border) !important;
  background: var(--nm-container) !important;
}

.featured-article-image {
  height: auto !important;
  object-fit: cover !important;
}

.featured-article-placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at center, rgba(168, 85, 247,0.20), transparent 58%),
    var(--nm-container) !important;
}

.featured-article-placeholder i {
  font-size: clamp(2.2rem, 8vw, 4.4rem) !important;
  color: var(--nm-accent) !important;
}

.featured-article-body {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 18px !important;
}

.featured-article-source {
  display: inline-flex !important;
  align-self: flex-start !important;
  width: fit-content !important;
  margin: 0 0 10px !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(168, 85, 247,0.42) !important;
  background: rgba(168, 85, 247,0.10) !important;
  color: var(--nm-text-accent) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.featured-article-card h3 {
  margin: 0 0 10px !important;
  color: var(--nm-text-accent) !important;
  font-family: var(--font-secondary) !important;
  font-size: clamp(1rem, 2vw, 1.18rem) !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

.featured-article-card p {
  margin: 0 0 16px !important;
  color: var(--nm-text-muted) !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

.featured-article-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  width: min(100%, 220px) !important;
  min-height: 44px !important;
  margin: auto auto 0 !important;
  padding: 10px 14px !important;
  border: 1px solid var(--nm-accent) !important;
  background: var(--nm-container) !important;
  color: var(--nm-text) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.84rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

.featured-article-card:hover .featured-article-cta,
.featured-article-card:focus-visible .featured-article-cta {
  background: var(--nm-accent) !important;
  color: var(--nm-text-on-accent) !important;
}

@media (max-width: 760px) {
  .featured-articles-grid {
    grid-template-columns: 1fr !important;
  }

  .featured-article-body {
    padding: 16px !important;
  }
}

@media (max-width: 520px) {
  .featured-articles-section {
    width: calc(100% - 12px) !important;
    padding: 18px 12px !important;
  }

  
}



/* === v33: Menu Border And Mobile Button Alignment Fix (2026-07-12) === */

/*
 * Desktop menu border integrity:
 * draw the outline inside each grid item so sub-pixel clipping or overlap
 * cannot hide the right edge of the middle-column buttons.
 */
@media (min-width: 900px) {
  html body .main-nav .nav-menu > .nav-link {
    position: relative !important;
    isolation: isolate !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    clip-path: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body .main-nav .nav-menu > .nav-link::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    display: block !important;
    box-sizing: border-box !important;
    border: 1px solid var(--nm-border) !important;
    border-radius: 0px !important;
    pointer-events: none !important;
  }

  html body .main-nav .nav-menu > .nav-link:is(
    :hover,
    :focus-visible,
    .active
  )::after {
    border-color: var(--nm-accent) !important;
  }
}

/*
 * Homepage mobile CTA alignment:
 * use a centered one-column grid and give every button an explicit,
 * centered width instead of allowing older flex rules to pull it left.
 */
@media (max-width: 640px) {
  html body .home-screen .inline-action-buttons {
    display: grid !important;
    grid-template-columns: minmax(0, min(100%, 360px)) !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px auto 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html body .home-screen .inline-action-buttons > a:is(
    .starter-path-btn,
    .btn
  ) {
    display: inline-flex !important;
    flex: none !important;
    justify-self: center !important;
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* === v64: Featured Articles Carousel And Centered Actions === */
.featured-articles-carousel {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 780px) 52px !important;
  grid-template-areas: "previous viewport next" !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 22px auto 0 !important;
}

.featured-article-viewport {
  grid-area: viewport !important;
  min-width: 0 !important;
  width: 100% !important;
}

.featured-article-viewport.is-entering {
  animation: featuredArticleEnter 0.34s ease both !important;
}

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

.featured-article-nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 1px solid var(--nm-accent) !important;
  border-radius: 0px !important;
  background: var(--nm-container) !important;
  color: var(--nm-text-accent) !important;
  font-family: var(--font-mono) !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease !important;
}

.featured-article-previous {
  grid-area: previous !important;
}

.featured-article-next {
  grid-area: next !important;
}

.featured-article-nav:hover,
.featured-article-nav:focus-visible {
  background: var(--nm-accent) !important;
  color: var(--nm-text-on-accent) !important;
  outline: none !important;
  transform: scale(1.06) !important;
}

.featured-article-counter {
  width: fit-content !important;
  margin: 12px auto 0 !important;
  color: var(--nm-text-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}





html body :is(
  .content-section > .assistance-expand-btn,
  .content-section > .starter-path-btn,
  .page-content > .btn,
  .page-content > .starter-path-btn
) {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 700px) {
  .featured-articles-carousel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "viewport viewport"
      "previous next" !important;
    gap: 12px !important;
  }

  .featured-article-nav {
    width: min(100%, 150px) !important;
    min-width: 48px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured-article-viewport.is-entering {
    animation: none !important;
  }
}


/* Preferred-source footer action */
.main-footer .footer-preferred-source-row {
  margin: 2px 0 12px !important;
}

.main-footer .footer-preferred-source-btn {
  width: min(100%, 430px) !important;
  min-height: 38px !important;
  text-align: center !important;
}

/* ========================================================================== 
   Legacy learning styles — native DedSec Project presentation
   Uses the same variables, typography, cards, navigation and themes as the site.
   ========================================================================== */
.academy-page{width:min(1320px,100%);margin-inline:auto}
.academy-dedsec-page .page-content{padding-bottom:24px}
.academy-main-header,.academy-lesson-header{position:relative;overflow:hidden;text-align:center;background:linear-gradient(145deg,var(--nm-darkest),var(--nm-container));border:1px solid var(--nm-border);box-shadow:var(--shadow-elev-2)}
.academy-main-header::before,.academy-lesson-header::before{content:"";position:absolute;inset:0;background:radial-gradient(720px 330px at 10% 0,rgba(var(--glow-rgb),.19),transparent 70%),radial-gradient(520px 300px at 95% 100%,rgba(var(--glow-rgb),.11),transparent 72%);pointer-events:none}
.academy-main-header>* ,.academy-lesson-header>*{position:relative}
.academy-main-header{padding:clamp(38px,7vw,78px) clamp(18px,5vw,62px)}
.academy-main-header h1{max-width:960px;margin:12px auto 16px;font-size:clamp(2.2rem,7vw,4.8rem);line-height:1.02}
.academy-main-header>p{max-width:850px;margin-inline:auto;font-size:clamp(1rem,2vw,1.2rem)}
.academy-hero-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:26px}
.academy-module-label{display:inline-flex;align-items:center;gap:8px;color:var(--nm-accent);font-family:var(--font-mono);font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.academy-meta-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:20px}
.academy-meta-row span{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--nm-border);background:rgba(var(--glow-rgb),.07);color:var(--nm-text-muted);font-family:var(--font-mono);font-size:.76rem}
.academy-breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px;color:var(--nm-text-muted);font-family:var(--font-mono);font-size:.75rem}
.academy-breadcrumbs a{color:var(--nm-accent);text-decoration:none}.academy-breadcrumbs a:hover{text-decoration:underline}.academy-breadcrumbs i{font-size:.62rem;opacity:.65}
.academy-stats{margin:22px 0}.academy-stats .stat-number i{font-size:1.25em}
.academy-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}.academy-section-heading h2{margin:5px 0 0}.academy-section-heading p{max-width:780px;margin:8px 0 0}
.academy-filter{display:flex;align-items:center;gap:10px;width:min(100%,360px);padding:0 14px;border:1px solid var(--nm-border);background:var(--nm-dark)}
.academy-filter input{width:100%;min-width:0;height:46px;border:0;outline:0;background:transparent;color:var(--nm-text);font:600 .85rem var(--font-primary)}
.academy-filter input::placeholder{color:var(--nm-text-muted)}
.academy-module-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.academy-module-card{text-decoration:none}.academy-module-card[hidden]{display:none!important}.academy-module-card .feature-cta{margin-top:auto}
.academy-empty-state{text-align:center;color:var(--nm-text-muted);font-family:var(--font-mono)}
.academy-command-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.academy-command-list>div{display:grid;grid-template-columns:42px minmax(0,1fr);gap:5px 12px;align-items:center;padding:17px;border:1px solid var(--nm-border);background:var(--nm-dark)}
.academy-command-list b{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;background:var(--nm-accent);color:var(--nm-text-on-accent);font-family:var(--font-mono)}
.academy-command-list span{font-weight:700}.academy-command-list code{min-width:0;overflow-wrap:anywhere;color:var(--nm-accent);font-size:.78rem}
.academy-safety-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.academy-safety-banner .academy-hero-actions{margin:0}
.academy-lesson-header{padding:clamp(30px,6vw,62px) clamp(18px,5vw,56px);margin-bottom:18px}.academy-lesson-header h1{max-width:980px;margin:10px auto 12px;font-size:clamp(2rem,6vw,4.25rem);line-height:1.04}.academy-lesson-header>p{max-width:820px;margin-inline:auto}
.academy-lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;align-items:start}.academy-lesson-article{display:grid;gap:16px;min-width:0}.academy-lesson-aside{position:sticky;top:calc(var(--nav-h,70px) + 16px);display:grid;gap:16px}.academy-lesson-aside .content-section{margin:0}.academy-lesson-aside .btn{width:100%;margin-top:12px}
.academy-lesson-section{margin:0}.academy-lesson-section>h2:first-child{margin-top:0}.academy-lesson-section h3{margin-top:22px}.academy-lesson-section a{color:var(--nm-accent)}
.academy-table-wrap{width:100%;overflow-x:auto;margin:14px 0;border:1px solid var(--nm-border)}.academy-table-wrap table{width:100%;min-width:620px;border-collapse:collapse;background:var(--nm-dark)}.academy-table-wrap th,.academy-table-wrap td{padding:12px 14px;border:1px solid var(--nm-border);text-align: center !important;vertical-align:top}.academy-table-wrap th{background:rgba(var(--glow-rgb),.12);color:var(--nm-text-accent);font-family:var(--font-secondary)}
.academy-lab-brief{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}.academy-brief-card,.academy-platform-card,.academy-evidence-box{padding:16px;border:1px solid var(--nm-border);background:rgba(var(--glow-rgb),.07)}.academy-brief-card small,.academy-evidence-box small{display:block;margin-bottom:7px;color:var(--nm-accent);font-family:var(--font-mono);font-weight:800;letter-spacing:.08em}.academy-brief-card p,.academy-evidence-box p{margin:0}
.academy-callout{padding:16px 18px;margin:16px 0;border-left:4px solid var(--nm-accent);background:rgba(var(--glow-rgb),.08)}.academy-callout.warning{border-left-color:var(--nm-warning);background:rgba(255,212,59,.08)}.academy-callout strong{display:block;margin-bottom:6px;color:var(--nm-text-accent)}.academy-callout p{margin:0}
.academy-platform-grid{display:grid;gap:12px;margin:14px 0}.academy-platform-card{display:grid;gap:8px}.academy-platform-card strong{font-family:var(--font-secondary)}.academy-platform-card code{width:fit-content;max-width:100%;overflow-wrap:anywhere;color:var(--nm-accent)}.academy-platform-card span{color:var(--nm-text-muted)}
.academy-task-list{display:grid;gap:10px;padding-left:24px}.academy-task-list li{padding-left:4px}.academy-task-list li::marker{color:var(--nm-accent);font-family:var(--font-mono);font-weight:800}
.academy-evidence-box{margin:16px 0;border-color:rgba(var(--glow-rgb),.75);box-shadow:inset 4px 0 0 var(--nm-accent)}
.academy-quality-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.academy-quality-item{display:flex;align-items:flex-start;gap:10px;padding:13px;border:1px solid var(--nm-border);background:var(--nm-dark)}.academy-quality-item i{margin-top:3px;color:var(--nm-success)}
.academy-bottom-navigation{margin-top:18px}.academy-navigation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.academy-navigation-card{text-decoration:none;min-height:180px}.academy-navigation-card .feature-description{font-weight:700;color:var(--nm-text)}
.academy-ethics-card{border-color:rgba(255,212,59,.5)}
@media(max-width:1000px){.academy-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.academy-lesson-layout{grid-template-columns:1fr}.academy-lesson-aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.academy-main-header,.academy-lesson-header{padding-inline:16px}.academy-hero-actions .btn{width:100%}.academy-module-grid,.academy-command-list,.academy-lab-brief,.academy-quality-grid,.academy-navigation-grid,.academy-lesson-aside{grid-template-columns:1fr}.academy-section-heading{align-items:stretch}.academy-filter{width:100%}.academy-safety-banner{align-items:stretch}.academy-safety-banner .academy-hero-actions{width:100%}.academy-breadcrumbs{font-size:.68rem}.academy-meta-row{align-items:stretch}.academy-meta-row span{flex:1 1 100%;justify-content:center}}

/* === Legacy learning styles v67: sharp DedSec geometry ===
   Every Academy surface uses true square corners. This intentionally overrides
   inherited card, pill, button, input, code-block and icon rounding. */
html body.academy-dedsec-page,
html body.academy-dedsec-page * {
  --radius-sm: 0px !important;
  --radius-md: 0px !important;
  --radius-lg: 0px !important;
  --radius-xl: 0px !important;
  --radius-pill: 0px !important;
}
html body.academy-dedsec-page :is(
  .main-nav,
  .nav-container,
  .nav-title,
  .nav-menu,
  .nav-link,
  .nav-action-btn,
  .burger-menu,
  .page-header,
  .hero-section,
  .content-section,
  .features-grid,
  .feature-card,
  .stat-card,
  .academy-meta-row span,
  .academy-filter,
  .academy-filter input,
  .academy-command-list > div,
  .academy-command-list b,
  .academy-brief-card,
  .academy-platform-card,
  .academy-evidence-box,
  .academy-quality-item,
  .academy-table-wrap,
  .academy-table-wrap table,
  .academy-callout,
  .academy-navigation-card,
  .academy-ethics-card,
  .btn,
  button,
  input,
  textarea,
  select,
  pre,
  code,
  .code-container,
  .footer-mini-btn,
  .main-footer
) {
  border-radius: 0px !important;
  -webkit-border-radius: 0px !important;
}
html body.academy-dedsec-page .academy-module-grid {
  align-items: stretch;
}
@media (min-width: 701px) and (max-width: 1100px) {
  html body.academy-dedsec-page .academy-module-grid > :last-child:nth-child(odd),
  html body.academy-dedsec-page .academy-navigation-grid > :last-child:nth-child(odd),
  html body.academy-dedsec-page .academy-three-card-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: min(100%, 440px);
    justify-self: center;
  }
}
@media (max-width: 700px) {
  html body.academy-dedsec-page .academy-module-grid,
  html body.academy-dedsec-page .academy-navigation-grid,
  html body.academy-dedsec-page .academy-three-card-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body.academy-dedsec-page .academy-module-grid > *,
  html body.academy-dedsec-page .academy-navigation-grid > *,
  html body.academy-dedsec-page .academy-three-card-grid > * {
    width: 100% !important;
    grid-column: auto !important;
  }
}

/* === Legacy learning styles v68: compact three-card overview grid ===
   The public Academy overview keeps three equally sized cards on every row,
   including narrow phone layouts, without changing the larger curriculum grid. */
html body.academy-dedsec-page .academy-three-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(8px, 1.5vw, 18px) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}
html body.academy-dedsec-page .academy-three-card-grid > .feature-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(12px, 1.8vw, 20px) !important;
  align-items: center !important;
  text-align: center !important;
}
html body.academy-dedsec-page .academy-three-card-grid .feature-icon-wrapper {
  flex: 0 0 auto;
  margin-inline: auto !important;
}
html body.academy-dedsec-page .academy-three-card-grid .feature-title,
html body.academy-dedsec-page .academy-three-card-grid .feature-description {
  width: 100%;
  overflow-wrap: anywhere;
  hyphens: auto;
}
@media (max-width: 700px) {
  html body.academy-dedsec-page .academy-three-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-block: 18px 28px !important;
  }
  html body.academy-dedsec-page .academy-three-card-grid > .feature-card {
    grid-column: auto !important;
    width: 100% !important;
    padding: 10px 7px !important;
  }
  html body.academy-dedsec-page .academy-three-card-grid .feature-icon-wrapper {
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 9px !important;
  }
  html body.academy-dedsec-page .academy-three-card-grid .feature-icon {
    font-size: 1.25rem !important;
  }
  html body.academy-dedsec-page .academy-three-card-grid .feature-title {
    font-size: clamp(.66rem, 2.75vw, .82rem) !important;
    line-height: 1.16 !important;
    margin-bottom: 7px !important;
  }
  html body.academy-dedsec-page .academy-three-card-grid .feature-description {
    font-size: clamp(.56rem, 2.25vw, .68rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 0 !important;
  }
}






@media (max-width: 700px) {
  
}


/* === Global desktop footer centering and width normalization === */
html body .main-footer {
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* === Legacy practical curriculum buttons — repaired v70 === */
.curriculum-list {
  display: grid;
  gap: 22px;
  margin-top: 18px;
}

.curriculum-module {
  overflow: hidden;
  border: 1px solid var(--nm-border);
  background: linear-gradient(145deg, var(--nm-dark), var(--nm-container));
  box-shadow: var(--shadow-elev-1);
}

.curriculum-module > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid var(--nm-border);
  background: rgba(var(--glow-rgb), 0.10);
}

.curriculum-module > header > div {
  min-width: 0;
}

.curriculum-module h2 {
  margin: 0 0 7px;
  color: var(--nm-text-accent);
}

.curriculum-module p {
  margin: 0;
  color: var(--nm-text-muted);
}

.curriculum-module > header > strong {
  display: grid;
  place-items: center;
  min-width: 64px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--nm-border);
  background: var(--nm-accent);
  color: var(--nm-text-on-accent);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.curriculum-module ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 16px;
  list-style: none;
}

.curriculum-module li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.curriculum-module li::marker {
  content: "";
}

.curriculum-module li > a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 58px;
  padding: 13px 16px;
  border: 1px solid var(--nm-border);
  background: linear-gradient(145deg, rgba(var(--glow-rgb), 0.10), var(--nm-dark));
  color: var(--nm-text) !important;
  text-decoration: none;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
  box-shadow: inset 3px 0 0 rgba(var(--glow-rgb), 0.72);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
  cursor: pointer;
  touch-action: manipulation;
}

.curriculum-module li > a::before {
  content: "›";
  flex: 0 0 auto;
  color: var(--nm-accent);
  font-family: var(--font-secondary);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
}

.curriculum-module li > a:hover,
.curriculum-module li > a:focus-visible {
  transform: translateY(-2px);
  border-color: var(--nm-accent);
  background: linear-gradient(145deg, rgba(var(--glow-rgb), 0.22), var(--nm-container));
  box-shadow: inset 5px 0 0 var(--nm-accent), 0 8px 22px rgba(var(--glow-rgb), 0.13);
  outline: none;
}

.curriculum-module li > a:active {
  transform: translateY(0);
}

.curriculum-module li > span {
  display: grid;
  place-items: center;
  min-width: 60px;
  min-height: 58px;
  padding: 10px 9px;
  border: 1px solid var(--nm-border);
  background: rgba(var(--glow-rgb), 0.16);
  color: var(--nm-accent);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .curriculum-list {
    gap: 16px;
  }

  .curriculum-module > header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 15px;
  }

  .curriculum-module > header > strong {
    min-width: 56px;
    min-height: 40px;
    padding: 7px 8px;
    font-size: 0.80rem;
  }

  .curriculum-module ol {
    gap: 8px;
    padding: 12px;
  }

  .curriculum-module li {
    grid-template-columns: minmax(0, 1fr) 54px;
    gap: 8px;
  }

  .curriculum-module li > a {
    min-height: 62px;
    padding: 12px;
    font-size: 0.94rem;
  }

  .curriculum-module li > a::before {
    font-size: 1.25rem;
  }

  .curriculum-module li > span {
    min-width: 54px;
    min-height: 62px;
    padding: 8px 5px;
    font-size: 0.76rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .curriculum-module li > a {
    transition: none;
  }
}


/* === Product landing pages and homepage sales paths v71 === */
.home-sales-section{width:min(100%,1120px)!important;margin:22px auto 28px!important;padding:clamp(20px,4vw,34px)!important;text-align:center!important}.home-sales-intro{max-width:780px!important;margin:0 auto 22px!important;font-weight:700!important}.home-sales-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}.home-sales-card{display:flex!important;flex-direction:column!important;align-items:center!important;gap:12px!important;padding:22px 18px!important;background:var(--nm-container)!important;border:1px solid var(--nm-border)!important}.home-sales-card p{flex:1 1 auto!important}.home-sales-icon{display:flex!important;align-items:center!important;justify-content:center!important;width:58px!important;height:58px!important;border:1px solid var(--nm-border)!important;color:var(--nm-text-accent)!important;font-size:1.45rem!important}.home-sales-btn{width:100%!important;max-width:none!important}.home-screen .support-section .contact-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.home-screen .sponsor-tier-btn{min-height:112px!important;height:auto!important;padding:16px 12px!important}@media(max-width:860px){}@media(max-width:620px){}







@media (max-width: 620px) {
  
}

/* ========================================================================== 
   FINAL SITEWIDE ALIGNMENT + SHARP-CORNER OVERRIDE (v73)
   Requested visual system: every content block is centered and every framed
   interface surface uses pointy 90-degree corners.
   ========================================================================== */
:root {
  --radius-sm: 0px !important;
  --radius-md: 0px !important;
  --radius-lg: 0px !important;
  --radius-pill: 0px !important;
}

/* Remove rounded corners from every visual surface, including rules defined
   in older component-specific and mobile-specific styles. */
html body *,
html body *::before,
html body *::after {
  border-radius: 0px !important;
}

/* Native selection controls stay recognizable and usable. */
html body input[type="radio"],
html body input[type="checkbox"] {
  border-radius: 0px !important;
}

/* Center all normal page copy. Code, terminal output, and editable fields stay
   left-aligned because their character layout is functional rather than decorative. */
html body main,
html body main :not(pre):not(code):not(kbd):not(samp):not(input):not(textarea):not(select),
html body .page-content,
html body .page-content :not(pre):not(code):not(kbd):not(samp):not(input):not(textarea):not(select),
html body .main-footer,
html body .main-footer * {
  text-align: center !important;
}

html body pre,
html body code,
html body kbd,
html body samp,
html body .code-container,
html body .code-container *,
html body .terminal,
html body .terminal *,
html body .terminal-output,
html body .terminal-output * {
  text-align: center !important;
}

/* Flex/grid children that formerly remained visually anchored to the left. */








/* Keep tick/check lists centered as complete icon + text units instead of
   leaving an absolutely positioned tick on the far-left edge. */




/* Center media and action rows inside commercial cards. */








/* Center headings and descriptive copy in the exact Custom Development area
   shown in the mobile report. */






/* Pointy floating cookie control and modals. */
html body .dedsec-cookie-settings,
html body .cookie-banner,
html body .modal-content,
html body .modal-overlay,
html body details,
html body summary,
html body button,
html body .btn,
html body [class*="-btn"] {
  border-radius: 0px !important;
}


/* Functional monospace exception after the global centering pass. */
html body pre,
html body pre *,
html body code,
html body kbd,
html body samp,
html body .code-container,
html body .code-container *,
html body .terminal,
html body .terminal *,
html body .terminal-output,
html body .terminal-output * {
  text-align: left !important;
}


/* ========================================================================== 
   NAVBAR LOGO EXPANSION + MENU ORDER SUPPORT (v74).
   The top-left logo opens as a centered, theme-aware image and closes when the
   enlarged image, backdrop, or Escape key is used.
   ========================================================================== */
html body .nav-title img[data-site-logo="1"] {
  cursor: zoom-in !important;
  touch-action: manipulation !important;
  outline-offset: 4px !important;
}

html body .nav-title img[data-site-logo="1"]:focus-visible {
  outline: 2px solid var(--nm-text-accent) !important;
}

html body .brand-logo-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: grid !important;
  place-items: center !important;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)) !important;
  background: rgba(4, 2, 10, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 160ms ease, visibility 160ms ease !important;
}

html body.light-theme .brand-logo-overlay {
  background: rgba(245, 240, 255, 0.88) !important;
}

html body .brand-logo-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body.brand-logo-open {
  overflow: hidden !important;
}

html body .brand-logo-expanded {
  display: grid !important;
  place-items: center !important;
  width: min(72vw, 420px) !important;
  max-height: min(72vh, 420px) !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: clamp(12px, 3vw, 24px) !important;
  border: 2px solid var(--nm-border) !important;
  background: var(--nm-container) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55) !important;
  cursor: zoom-out !important;
}

html body .brand-logo-expanded img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border: 0 !important;
  background: transparent !important;
  cursor: zoom-out !important;
}

@media (max-width: 520px) {
  html body .brand-logo-expanded {
    width: min(78vw, 330px) !important;
    max-height: min(64vh, 330px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .brand-logo-overlay {
    transition: none !important;
  }
}


/* === SOLID THEME PAGE BACKGROUND (2026-08-05) === */
/* Only the page backdrop changes. Cards and accent surfaces keep the purple brand styling. */
html,
body,
body.dark-theme {
    background-color: #000000 !important;
    background-image: none !important;
    background-attachment: scroll !important;
}

body.light-theme {
    background-color: #ffffff !important;
    background-image: none !important;
    background-attachment: scroll !important;
}

body.dark-theme .screen,
body.dark-theme .phone-container,
body.dark-theme .home-screen,
body.dark-theme .page-content,
body.dark-theme .assistant-page-content,
body.light-theme .screen,
body.light-theme .phone-container,
body.light-theme .home-screen,
body.light-theme .page-content,
body.light-theme .assistant-page-content {
    background-color: transparent !important;
}


/* ========================================================================== 
   FINAL THEME CONSISTENCY PASS (2026-08-05).
   - The bright lavender/pink accent is replaced by the muted navigation purple.
   - Every textual element is white in dark mode and black in light mode.
   - The homepage starts at the same visual distance below the fixed navigation
     as the standard page headers.
   ========================================================================== */
:root,
body.dark-theme {
    --nm-accent: #A855F7 !important;
    --nm-accent-hover: #9333EA !important;
    --nm-border: rgba(168, 85, 247, 0.78) !important;
    --glow-rgb: 168, 85, 247 !important;
    --nm-text: #ffffff !important;
    --nm-text-muted: #ffffff !important;
    --nm-text-accent: #ffffff !important;
    --nm-text-on-accent: #ffffff !important;
    --nm-text-on-status: #ffffff !important;
}

body.light-theme {
    --nm-accent: #A855F7 !important;
    --nm-accent-hover: #9333EA !important;
    --nm-border: rgba(168, 85, 247, 0.62) !important;
    --glow-rgb: 168, 85, 247 !important;
    --nm-text: #000000 !important;
    --nm-text-muted: #000000 !important;
    --nm-text-accent: #000000 !important;
    --nm-text-on-accent: #000000 !important;
    --nm-text-on-status: #000000 !important;
}

/* Match the main page's first baseline to the spacing used by normal pages. */
body.home-page .phone-container {
    padding-top: var(--nav-h, 70px) !important;
}
body.home-page .home-screen {
    padding-top: 0 !important;
}
body.home-page .home-screen > .home-page-header {
    padding-top: 8px !important;
}
@media (max-width: 640px) {
    body.home-page .phone-container {
        padding-top: var(--nav-h, 70px) !important;
    }
    body.home-page .home-screen > .home-page-header {
        padding-top: 4px !important;
    }
}

/* Use the same muted purple family as the top navigation for accent surfaces. */



/* Light mode keeps black text while using a lighter tint of the same purple. */



/* Explicit text-color guarantee. Icons and borders remain purple accents. */
body.dark-theme :is(
    h1,h2,h3,h4,h5,h6,p,a,button,label,span,strong,b,small,summary,
    dt,dd,li,th,td,figcaption,legend,blockquote
) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.light-theme :is(
    h1,h2,h3,h4,h5,h6,p,a,button,label,span,strong,b,small,summary,
    dt,dd,li,th,td,figcaption,legend,blockquote
) {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

body.dark-theme :is(i,.material-icons,.fa,.fab,.fas,.far),
body.light-theme :is(i,.material-icons,.fa,.fab,.fas,.far) {
    color: #A855F7 !important;
    -webkit-text-fill-color: #A855F7 !important;
}

/* Preserve readable command output, which may contain semantic ANSI colors. */
body.dark-theme :is(pre,code,kbd,samp) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.light-theme :is(pre,code,kbd,samp) {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}


/* ========================================================================== 
   FINAL HOMEPAGE GAP + THEME TEXT GUARANTEE (2026-08-05).
   ========================================================================== */
body.home-page .home-screen > .home-page-header {
    padding-top: 8px !important;
}
@media (max-width: 640px) {
    body.home-page .home-screen > .home-page-header {
        padding-top: 4px !important;
    }
}

/* Every actual text-bearing control follows the active theme exactly. */
body.dark-theme :is(
    h1,h2,h3,h4,h5,h6,p,a,button,label,span,strong,b,em,small,summary,
    dt,dd,li,th,td,figcaption,legend,blockquote,input,textarea,select,option,
    code,pre,kbd,samp
) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.light-theme :is(
    h1,h2,h3,h4,h5,h6,p,a,button,label,span,strong,b,em,small,summary,
    dt,dd,li,th,td,figcaption,legend,blockquote,input,textarea,select,option,
    code,pre,kbd,samp
) {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}
body.dark-theme :is(input,textarea)::placeholder {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}
body.light-theme :is(input,textarea)::placeholder {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
}

/* Icons remain the muted navigation purple; text never inherits the accent. */
body.dark-theme :is(i,.material-icons,.fa,.fab,.fas,.far),
body.light-theme :is(i,.material-icons,.fa,.fab,.fas,.far) {
    color: #A855F7 !important;
    -webkit-text-fill-color: #A855F7 !important;
}


/* Absolute theme text-color lock: no muted gray or pink text remains. */
html body.dark-theme *:not(i):not(svg):not(path):not(.material-icons):not(.fa):not(.fab):not(.fas):not(.far) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body.light-theme *:not(i):not(svg):not(path):not(.material-icons):not(.fa):not(.fab):not(.fas):not(.far) {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}
html body.dark-theme :is(input,textarea)::placeholder {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}
html body.light-theme :is(input,textarea)::placeholder {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
}
html body.dark-theme :is(i,.material-icons,.fa,.fab,.fas,.far),
html body.light-theme :is(i,.material-icons,.fa,.fab,.fas,.far) {
    color: #A855F7 !important;
    -webkit-text-fill-color: #A855F7 !important;
}


/* ========================================================================== 
   SATURATED LAVENDER-PURPLE + CONTROL ICON COLOR PASS (2026-08-05).
   - Uses a vivid, non-gray lavender-purple for all accent surfaces.
   - Icons/arrows inside buttons and button-like links inherit the text color.
   ========================================================================== */
:root,
body.dark-theme,
body.light-theme {
    --nm-accent: #A855F7 !important;
    --nm-accent-hover: #9333EA !important;
    --nm-border: rgba(168, 85, 247, 0.78) !important;
    --nm-success: #A855F7 !important;
    --nm-secondary: #A855F7 !important;
    --lavender-accent: #A855F7 !important;
    --glow-rgb: 168, 85, 247 !important;
    --focus-ring: 0 0 0 3px rgba(168, 85, 247, 0.38) !important;
}

/* Saturated lavender-purple fills. No muted gray-purple button surfaces. */




/* Button text follows the active theme exactly. */



/* Arrows, chevrons, book/play symbols, and any other icon inside controls
   always match the control's text instead of using a separate accent color. */




/* Final control-icon lock: control symbols use the exact same color as text. */




/* === LOCAL ICON RELIABILITY + BUTSYSTEM CTA (2026-08-06) === */
/* Font Awesome is bundled under Assets/vendor/fontawesome so icons remain visible offline. */
.fa,
.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands {
    display: inline-block !important;
    width: auto !important;
    min-width: 1em !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    line-height: 1 !important;
    text-align: center !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Every icon inside a control uses exactly the control text color. */




.sponsors-exclusive-cta {
    width: min(100%, 960px) !important;
    margin: 18px auto 28px !important;
    padding: 0 16px !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.sponsors-exclusive-cta .sponsors-exclusive-btn {
    width: min(100%, 560px) !important;
    min-height: 58px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 14px 20px !important;
    border-radius: 0 !important;
    text-align: center !important;
    font-weight: 900 !important;
}

.sponsors-exclusive-cta .sponsors-exclusive-btn i {
    flex: 0 0 auto !important;
    font-size: 1.2em !important;
}

/* === VERDANA + MENU/COOKIE FINAL OVERRIDES (2026-08-06) === */
:root,
body.dark-theme,
body.light-theme {
    --font-primary: Verdana, Geneva, Tahoma, sans-serif !important;
    --font-secondary: Verdana, Geneva, Tahoma, sans-serif !important;
    --font-mono: Verdana, Geneva, Tahoma, sans-serif !important;
}

/* Verdana is the single typeface for all visible written content. */
html,
body,
body *:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.material-icons) {
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

/* Preserve icon fonts after the universal Verdana rule. */
.fa,
.fas,
.fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}
.far,
.fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}
.fab,
.fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* Hide the floating Cookie Settings control while the burger menu is open. */
body.burger-menu-open .dedsec-cookie-settings {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(0.86) !important;
}
.dedsec-cookie-settings {
    transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease !important;
}

/* Desktop burger menu and every bordered menu rectangle remain square. */
@media (min-width: 641px) {
    #nav-menu,
    #nav-menu *,
    .nav-menu,
    .nav-menu *,
    #burger-menu,
    .burger-menu,
    .nav-action-btn {
        border-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    #nav-menu::before,
    #nav-menu::after,
    #nav-menu *::before,
    #nav-menu *::after,
    .nav-menu::before,
    .nav-menu::after,
    .nav-menu *::before,
    .nav-menu *::after,
    #burger-menu::before,
    #burger-menu::after,
    .burger-menu::before,
    .burger-menu::after {
        border-radius: 0 !important;
    }
}



/* === CENTERED SPONSOR BUTTONS + BUTSYSTEM DESCRIPTION (2026-08-06) === */
.sponsors-exclusive-cta {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: center !important;
}
.sponsors-exclusive-description {
    width: min(100%, 760px) !important;
    margin: 0 auto !important;
    color: inherit !important;
    line-height: 1.65 !important;
    text-align: center !important;
}
.sponsors-exclusive-cta .sponsors-exclusive-btn {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* === ASSISTANCE + SMARTPHONE ACADEMY REVIEW (2026-08-06) === */
/* Previous/next lesson controls are compact navigation buttons, not oversized cards. */
html body.academy-dedsec-page .academy-bottom-navigation {
  padding: clamp(14px, 2vw, 20px) !important;
}
html body.academy-dedsec-page .academy-bottom-navigation .academy-section-heading {
  align-items: center !important;
  margin-bottom: 12px !important;
}
html body.academy-dedsec-page .academy-bottom-navigation .academy-section-heading .btn {
  width: auto !important;
  min-height: 40px !important;
  padding: 9px 13px !important;
  font-size: 0.82rem !important;
  line-height: 1.25 !important;
}
html body.academy-dedsec-page .academy-navigation-grid {
  gap: 12px !important;
  align-items: stretch !important;
}
html body.academy-dedsec-page .academy-navigation-card {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-areas: "icon title" "icon description" !important;
  column-gap: 12px !important;
  row-gap: 3px !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 13px 15px !important;
  text-align: left !important;
}
html body.academy-dedsec-page .academy-navigation-card .feature-icon-wrapper {
  grid-area: icon !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  margin: 0 !important;
  color: inherit !important;
  background: rgba(var(--glow-rgb), 0.10) !important;
}
html body.academy-dedsec-page .academy-navigation-card .feature-icon {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 1rem !important;
}
html body.academy-dedsec-page .academy-navigation-card .feature-title {
  grid-area: title !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: clamp(0.84rem, 1.4vw, 1rem) !important;
  line-height: 1.25 !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
}
html body.academy-dedsec-page .academy-navigation-card .feature-description {
  grid-area: description !important;
  width: 100% !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: clamp(0.74rem, 1.25vw, 0.88rem) !important;
  font-weight: 600 !important;
  line-height: 1.38 !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
}
html body.academy-dedsec-page :is(.academy-lesson-header h1, .academy-section-heading h2, .academy-module-card h3, .academy-navigation-card h3) {
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}
html body.academy-dedsec-page :is(pre, code) {
  max-width: 100% !important;
}
html body.academy-dedsec-page pre {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 700px) {
  html body.academy-dedsec-page .academy-bottom-navigation {
    padding: 12px !important;
  }
  html body.academy-dedsec-page .academy-bottom-navigation .academy-section-heading {
    gap: 10px !important;
  }
  html body.academy-dedsec-page .academy-bottom-navigation .academy-section-heading .btn {
    width: 100% !important;
  }
  html body.academy-dedsec-page .academy-navigation-grid {
    gap: 8px !important;
  }
  html body.academy-dedsec-page .academy-navigation-card {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    padding: 10px 11px !important;
  }
  html body.academy-dedsec-page .academy-navigation-card .feature-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
  html body.academy-dedsec-page .academy-navigation-card .feature-title {
    font-size: 0.82rem !important;
  }
  html body.academy-dedsec-page .academy-navigation-card .feature-description {
    font-size: 0.72rem !important;
  }
  html body.academy-dedsec-page .academy-lesson-header {
    padding-block: 24px !important;
  }
  html body.academy-dedsec-page .academy-lesson-section,
  html body.academy-dedsec-page .academy-lesson-aside .content-section {
    padding: 14px !important;
  }
}


/* === Legacy learning width reflow v85 === */
html body.academy-dedsec-page .academy-three-card-grid {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}
html body.academy-dedsec-page .academy-three-card-grid > .feature-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 14px 10px !important;
}
html body.academy-dedsec-page .academy-three-card-grid .feature-title,
html body.academy-dedsec-page .academy-three-card-grid .feature-description {
  width: 100% !important;
}
@media (max-width: 700px) {
  html body.academy-dedsec-page .content-section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  html body.academy-dedsec-page .academy-three-card-grid {
    width: 100% !important;
    max-width: none !important;
    margin: 18px 0 24px !important;
    gap: 8px !important;
  }
  html body.academy-dedsec-page .academy-three-card-grid > .feature-card {
    width: 100% !important;
    max-width: none !important;
    padding: 12px 6px !important;
  }
  html body.academy-dedsec-page .academy-three-card-grid .feature-icon-wrapper {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 8px !important;
  }
  html body.academy-dedsec-page .academy-three-card-grid .feature-title {
    font-size: clamp(.74rem, 2.85vw, .9rem) !important;
    line-height: 1.14 !important;
  }
  html body.academy-dedsec-page .academy-three-card-grid .feature-description {
    font-size: clamp(.62rem, 2.35vw, .76rem) !important;
    line-height: 1.22 !important;
  }
}


/* === Global white icon pass v86 === */




/* === Theme-aware icon colors v87 === */






/* === Definitive theme-aware icon colors v88 ===
   This selector intentionally matches or exceeds the specificity of earlier
   Font Awesome accent rules, so !important cannot leave icons purple. */






/* === FOUNDER / EBOOK PREVIEW / PRIMARY PATH UPDATE === */
.home-choice-card {
    align-items: stretch !important;
    text-align: center !important;
}
.home-choice-card > * { width: 100%; }


.home-choice-actions-single .sales-btn { flex: 0 1 320px; }


.homepage-lower-section {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    text-align: left !important;
}
.homepage-lower-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid var(--nm-border);
    background: rgba(var(--glow-rgb), .08);
}
.homepage-lower-icon i { color: var(--nm-accent); font-size: 1.65rem; }
.homepage-lower-section h2 { margin: 8px 0 10px; }
.homepage-lower-section p { color: var(--nm-text-muted); line-height: 1.65; }
.homepage-lower-section .homepage-lower-actions,
.homepage-lower-section > div > .sales-btn { margin-top: 14px; }



.home-product-bottom { flex-wrap: wrap !important; }
.home-product-bottom .ebook-preview-link { flex-basis: 100%; }




.custom-scope-note,
.butsystem-free-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 14px 0;
    padding: 14px 16px;
    border: 1px solid var(--nm-border);
    background: rgba(var(--glow-rgb), .08);
    text-align: left;
}
.custom-scope-note i,
.butsystem-free-banner > i { color: var(--nm-accent); margin-top: 3px; }
.custom-scope-note p,
.butsystem-free-banner p { margin: 0 !important; color: var(--nm-text-muted); line-height: 1.58; }
.butsystem-free-banner strong { display: block; margin-bottom: 4px; color: var(--nm-text-accent); }

.founder-home-layout {
    display: grid;
    grid-template-columns: minmax(120px, 190px) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 38px);
    align-items: center;
    text-align: left;
}
.founder-home-mark {
    display: grid;
    place-items: center;
    padding: 14px;
    border: 1px solid var(--nm-border);
    background: rgba(var(--glow-rgb), .06);
}
.founder-home-mark img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.founder-home-layout h2 { margin: 8px 0 10px; }
.founder-home-layout p { color: var(--nm-text-muted); line-height: 1.65; }

.founder-page-header { max-width: 980px; margin-inline: auto; }
.founder-story-section { text-align: left !important; }
.founder-story-copy { max-width: 900px; margin: 0 auto; }
.founder-story-copy h2 { margin: 9px 0 16px; }
.founder-story-copy p { color: var(--nm-text-muted); line-height: 1.75; }
.founder-story-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}
.founder-story-grid article {
    padding: 18px;
    border: 1px solid rgba(var(--glow-rgb), .26);
    background: rgba(var(--glow-rgb), .04);
    text-align: center;
}
.founder-story-grid i { color: var(--nm-accent); font-size: 1.45rem; }
.founder-story-grid h3 { margin: 10px 0 7px; }
.founder-story-grid p { margin: 0; color: var(--nm-text-muted); line-height: 1.55; }
.founder-vision-intro { scroll-margin-top: calc(var(--nav-h) + 20px); text-align: center; }
.founder-vision-intro p { max-width: 820px; margin: 0 auto; color: var(--nm-text-muted); line-height: 1.68; }
.moved-page-card { text-align: center; }
.moved-page-card .sales-btn { margin-top: 14px; }

@media (max-width: 820px) {
    .homepage-lower-section,
    .founder-home-layout { grid-template-columns: 1fr; text-align: center !important; }
    .homepage-lower-icon { margin: 0 auto; }
    .founder-home-mark { width: min(180px, 60vw); margin: 0 auto; }
    .founder-story-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    
    
    
}

/* === GLOBAL THEME SURFACES + LAVENDER BORDER ACCENTS (2026-08-07c) ===
   Site-wide rule: cards/boxes/panels use the same solid surface as the page
   (#000 dark / #fff light). Purple and lavender are reserved for borders,
   icons, links and other accents instead of tinting the card interior. */
:root {
  --ded-card-surface-dark: #000000;
  --ded-card-surface-light: #ffffff;
  --ded-accent-purple: #a855f7;
  --ded-accent-lavender: #c084fc;
  --ded-border-dark: rgba(192, 132, 252, .72);
  --ded-border-light: rgba(126, 34, 206, .58);
}

/* Keep variable-driven containers solid as well. */
html body.dark-theme {
  --nm-dark: #000000;
  --nm-container: #000000;
}
html body.light-theme {
  --nm-dark: #ffffff;
  --nm-container: #ffffff;
}






/* Make the lavender identity visible on the border while the interior stays
   neutral. A stronger left edge and softer top edge create the accent. */


/* Text follows the theme. Links and icons are deliberately excluded so the
   site can retain purple accent affordances. Buttons keep their own colors. */




/* Do not let the global surface rule recolor real controls. */
html body :is(.btn, .sales-btn, .starter-path-btn, button, [role="button"]) {
  -webkit-text-fill-color: currentColor !important;
}

/* The combined founder page intentionally has no small all-caps labels above its titles. */
body.founder-page .founder-page-header > .sales-section-label,
body.founder-page .founder-story-section .sales-section-label { display: none !important; }
body.founder-page .founder-page-header { padding-top: clamp(24px, 5vw, 48px) !important; }
body.founder-page .founder-page-header h1 { margin-top: 0 !important; }
body.founder-page .founder-story-copy > h2 { text-align: center !important; margin-bottom: 20px !important; }
body.founder-page .founder-story-copy { max-width: 1020px !important; }
.founder-narrative-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 22px;
}
.founder-story-card,
.founder-vision-card {
  padding: clamp(18px, 3vw, 24px) !important;
  border: 1px solid var(--nm-border);
  text-align: left !important;
}
.founder-story-card h3,
.founder-vision-card h3 { margin: 0 0 10px !important; }
.founder-story-card p,
.founder-vision-card p { margin: 0 0 12px !important; line-height: 1.68 !important; }
.founder-story-card p:last-child,
.founder-vision-card p:last-child { margin-bottom: 0 !important; }
.founder-vision-content { scroll-margin-top: calc(var(--nav-h) + 20px); }
.founder-vision-content > h2 { text-align: center; margin: 0 0 20px !important; }
.founder-vision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.founder-vision-lead-card { grid-column: 1 / -1; }
.founder-vision-section-card { border: 1px solid var(--nm-border) !important; }
.legacy-anchor { display: block; position: relative; top: calc(-1 * var(--nav-h)); visibility: hidden; }

/* Long combined title remains readable in the burger menu and on mobile. */
.nav-menu .nav-link { overflow-wrap: anywhere; }
body.founder-page .founder-page-header h1 { font-size: clamp(2rem, 7vw, 4.4rem) !important; line-height: 1.04 !important; }

@media (max-width: 820px) {
  .founder-narrative-grid,
  .founder-vision-grid { grid-template-columns: 1fr; }
  .founder-vision-lead-card { grid-column: auto; }
}


/* === FOUNDER THEME SURFACES + LAVENDER BORDER ACCENTS (2026-08-07b) ===
   Founder/Vision cards use the page surface itself (black in dark theme,
   white in light theme). Purple/lavender is reserved for borders/accents. */
:root {
    --founder-accent-purple: #a855f7;
    --founder-accent-lavender: #c084fc;
    --founder-border-dark: rgba(192, 132, 252, 0.72);
    --founder-border-light: rgba(126, 34, 206, 0.58);
}

/* Override the site-wide lavender-filled box system on this page only. */
body.founder-page.dark-theme .page-content :is(
    .content-section,
    .founder-story-card,
    .founder-vision-card,
    .founder-vision-section-card,
    .vision-support-section,
    .keep-android-open-section,
    .mini-card,
    .quote-card,
    .kao-banner-box
) {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--founder-border-dark) !important;
}

body.founder-page.light-theme .page-content :is(
    .content-section,
    .founder-story-card,
    .founder-vision-card,
    .founder-vision-section-card,
    .vision-support-section,
    .keep-android-open-section,
    .mini-card,
    .quote-card,
    .kao-banner-box
) {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border-color: var(--founder-border-light) !important;
}

/* Card borders carry the lavender identity without tinting the card surface. */
body.founder-page .page-content :is(
    .founder-story-card,
    .founder-vision-card,
    .mini-card,
    .quote-card,
    .kao-banner-box
) {
    border-style: solid !important;
    border-width: 1px 1px 1px 3px !important;
    border-left-color: var(--founder-accent-purple) !important;
    border-top-color: var(--founder-accent-lavender) !important;
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.08) !important;
}

/* Major combined sections get a quieter lavender outline. */
body.founder-page .page-content :is(
    .founder-story-section,
    .founder-vision-section-card,
    .vision-support-section,
    .keep-android-open-section
) {
    border: 1px solid rgba(168, 85, 247, 0.46) !important;
    box-shadow: inset 0 2px 0 rgba(192, 132, 252, 0.34) !important;
}

/* Alternate the leading accent slightly to keep the long page visually structured. */
body.founder-page .founder-narrative-grid > :nth-child(even),
body.founder-page .founder-vision-grid > :nth-child(even),
body.founder-page .two-col-grid > :nth-child(even),
body.founder-page .quotes-grid > :nth-child(even) {
    border-left-color: var(--founder-accent-lavender) !important;
    border-top-color: var(--founder-accent-purple) !important;
}

/* Explicit theme text lock for the Founder/Vision page, including the
   Keep Android Open content whose legacy inline CSS hard-coded white links. */
body.founder-page.dark-theme .page-content :is(
    .founder-page-header,
    .founder-story-section,
    .founder-vision-content,
    .vision-support-section,
    .keep-android-open-section
) :where(h1,h2,h3,h4,h5,h6,p,li,span,strong,em,small,blockquote,a) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.founder-page.light-theme .page-content :is(
    .founder-page-header,
    .founder-story-section,
    .founder-vision-content,
    .vision-support-section,
    .keep-android-open-section
) :where(h1,h2,h3,h4,h5,h6,p,li,span,strong,em,small,blockquote,a) {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Keep actual CTA/button surfaces distinct; only their containing cards
   follow the black/white surface rule above. */
body.founder-page .page-content :is(.btn, button, [role="button"]) {
    -webkit-text-fill-color: currentColor !important;
}

/* === PURE LIGHT THEME + TEXT CLEANUP + FOUNDER TOUCH TARGETS (2026-08-07d) ===
   White theme is intentionally pure white. Purple/lavender stays on borders,
   icons and controls, not as a page/nav tint or heading glow. */
html:has(body.light-theme),
html body.light-theme {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

html body.light-theme :is(
    .screen,
    .phone-container,
    .home-screen,
    .page-content,
    .assistant-page-content
) {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Top navigation must be a true white surface in light mode. */
html body.light-theme .main-nav {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}
html body.light-theme .main-nav::before,
html body.light-theme .main-nav::after {
    display: none !important;
    content: none !important;
    background: none !important;
}
html body.light-theme :is(
    .nav-action-btn,
    .burger-menu,
    .nav-menu,
    .nav-menu .nav-link
) {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Remove lavender/purple glow from text in the white theme. */
html body.light-theme :where(
    h1,h2,h3,h4,h5,h6,p,span,strong,em,small,label,li,a,
    .hero-title,.hero-subtitle,.hero-subline,.page-header h1,.page-header p,
    .feature-title,.feature-description,.tool-title,.glance-title,
    .assistant-title,.community-card span
) {
    text-shadow: none !important;
    filter: none !important;
}

/* Founder/Vision collapsible actions need real mobile touch targets. */
body.founder-page details > summary {
    width: 100% !important;
    min-height: 52px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: clamp(1rem, 3.2vw, 1.08rem) !important;
    line-height: 1.25 !important;
    font-weight: 750 !important;
    text-align: center !important;
    cursor: pointer !important;
    border: 1px solid var(--ded-accent-lavender) !important;
    border-left: 4px solid var(--ded-accent-purple) !important;
    box-sizing: border-box !important;
}
body.founder-page.dark-theme details > summary {
    background: #000000 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.founder-page.light-theme details > summary {
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    text-shadow: none !important;
}

/* Keep standard Founder CTAs comfortably tappable too. */
body.founder-page :is(.btn, .footer-mini-btn, .sales-btn, .starter-path-btn) {
    min-height: 48px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

@media (max-width: 640px) {
    body.founder-page details > summary {
        min-height: 54px !important;
        padding: 13px 14px !important;
        font-size: 1rem !important;
    }
}


/* Founder compact vision + Keep Android Open */
.founder-section-intro{max-width:860px;margin:0 auto 1.5rem;line-height:1.7;text-align:center}
.founder-vision-grid-compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.founder-vision-grid-compact .founder-vision-card{padding:1.25rem;min-height:0}
.founder-vision-grid-compact .founder-vision-card h3{margin-top:0}
.founder-compact-header{margin-bottom:1.25rem}
.founder-compact-header h2{margin-bottom:.6rem}
.founder-compact-actions{margin-top:1.25rem}
.founder-compact-actions .btn{min-height:52px;padding:.8rem 1.2rem}
@media (max-width:820px){.founder-vision-grid-compact{grid-template-columns:1fr}.founder-section-intro{text-align:left}.founder-compact-actions .btn{width:100%}}

/* === STRICT BORDER-ONLY SURFACE SYSTEM (2026-08-07i) === */
/*
   Global visual rule:
   - Dark theme boxed surfaces use pure black.
   - Light theme boxed surfaces use pure white.
   - Lavender/purple is an accent for borders, icons and intentional controls.
   - Decorative card/panel overlays must never tint the interior.
*/
html body.dark-theme {
  --ded-page-surface: #000000;
  --nm-darkest: #000000;
  --nm-dark: #000000;
  --nm-container: #000000;
  background: #000000 !important;
  background-image: none !important;
}
html body.light-theme {
  --ded-page-surface: #ffffff;
  --nm-darkest: #ffffff;
  --nm-dark: #ffffff;
  --nm-container: #ffffff;
  background: #ffffff !important;
  background-image: none !important;
}

/* Navigation is part of the page surface, never a lavender-filled slab. */
html body.dark-theme :is(.main-nav, .nav-menu, .nav-action-btn, .burger-menu, .nav-menu .nav-link) {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body.light-theme :is(.main-nav, .nav-menu, .nav-action-btn, .burger-menu, .nav-menu .nav-link) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body .main-nav {
  border-color: var(--ded-border-dark) !important;
  border-bottom-color: var(--ded-accent-lavender) !important;
}
html body.light-theme .main-nav {
  border-color: var(--ded-border-light) !important;
  border-bottom-color: var(--ded-accent-purple) !important;
}
html body :is(.main-nav, .nav-menu, .nav-action-btn, .burger-menu, .nav-menu .nav-link)::before,
html body :is(.main-nav, .nav-menu, .nav-action-btn, .burger-menu, .nav-menu .nav-link)::after {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* All semantic box/card/panel surfaces. Academy-specific items are explicit
   because many legacy rules use rgba fills even when they are not named card. */
html body.dark-theme :is(
  .page-header, .hero-section, .content-section,
  .feature-card, .community-card, .tool-card, .stat-card, .glance-card, .step-card,
  .trust-item, .category, .category-header, .tool-item,
  [class*="-card"], [class*="_card"], [class*="Card"],
  [class*="-box"], [class*="_box"],
  [class*="-panel"], [class*="_panel"],
  .callout, .note, .warning, .note-warning, .danger, .tip, details,
  .code-container, pre, .cookie-banner, .modal-content, .modal-disclaimer,
  .butsystem-free-banner, .custom-scope-note, .founder-home-mark,
  .search-modal, .dedsec-cookie-settings,
  .academy-main-header, .academy-lesson-header,
  .academy-meta-row span, .academy-filter, .academy-command-list > div,
  .academy-table-wrap, .academy-table-wrap table, .academy-table-wrap th,
  .academy-brief-card, .academy-platform-card, .academy-evidence-box,
  .academy-callout, .academy-quality-item
) {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
}
html body.light-theme :is(
  .page-header, .hero-section, .content-section,
  .feature-card, .community-card, .tool-card, .stat-card, .glance-card, .step-card,
  .trust-item, .category, .category-header, .tool-item,
  [class*="-card"], [class*="_card"], [class*="Card"],
  [class*="-box"], [class*="_box"],
  [class*="-panel"], [class*="_panel"],
  .callout, .note, .warning, .note-warning, .danger, .tip, details,
  .code-container, pre, .cookie-banner, .modal-content, .modal-disclaimer,
  .butsystem-free-banner, .custom-scope-note, .founder-home-mark,
  .search-modal, .dedsec-cookie-settings,
  .academy-main-header, .academy-lesson-header,
  .academy-meta-row span, .academy-filter, .academy-command-list > div,
  .academy-table-wrap, .academy-table-wrap table, .academy-table-wrap th,
  .academy-brief-card, .academy-platform-card, .academy-evidence-box,
  .academy-callout, .academy-quality-item
) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  box-shadow: none !important;
}

/* The color identity belongs to the outline, not the card interior. */
html body :is(
  .page-header, .hero-section, .content-section,
  .feature-card, .community-card, .tool-card, .stat-card, .glance-card, .step-card,
  .trust-item, .category, .category-header, .tool-item,
  [class*="-card"], [class*="_card"], [class*="Card"],
  [class*="-box"], [class*="_box"],
  [class*="-panel"], [class*="_panel"],
  .callout, .note, .warning, .note-warning, .danger, .tip, details,
  .code-container, pre,
  .academy-meta-row span, .academy-filter, .academy-command-list > div,
  .academy-table-wrap, .academy-table-wrap th,
  .academy-brief-card, .academy-platform-card, .academy-evidence-box,
  .academy-callout, .academy-quality-item
) {
  border-style: solid !important;
  border-color: var(--ded-border-dark) !important;
  border-left-color: var(--ded-accent-purple) !important;
}
html body.light-theme :is(
  .page-header, .hero-section, .content-section,
  .feature-card, .community-card, .tool-card, .stat-card, .glance-card, .step-card,
  .trust-item, .category, .category-header, .tool-item,
  [class*="-card"], [class*="_card"], [class*="Card"],
  [class*="-box"], [class*="_box"],
  [class*="-panel"], [class*="_panel"],
  .callout, .note, .warning, .note-warning, .danger, .tip, details,
  .code-container, pre,
  .academy-meta-row span, .academy-filter, .academy-command-list > div,
  .academy-table-wrap, .academy-table-wrap th,
  .academy-brief-card, .academy-platform-card, .academy-evidence-box,
  .academy-callout, .academy-quality-item
) {
  border-color: var(--ded-border-light) !important;
  border-left-color: var(--ded-accent-purple) !important;
}

/* Kill legacy gradient/radial layers that were responsible for the purple
   interiors visible in Academy cards and navigation cards. */
html body :is(
  .page-header, .hero-section, .content-section,
  .feature-card, .community-card, .tool-card, .stat-card, .glance-card, .step-card,
  .trust-item, .category, .category-header, .tool-item,
  [class*="-card"], [class*="_card"], [class*="Card"],
  [class*="-box"], [class*="_box"],
  [class*="-panel"], [class*="_panel"],
  .academy-main-header, .academy-lesson-header,
  .academy-brief-card, .academy-platform-card, .academy-evidence-box,
  .academy-callout, .academy-quality-item
)::before,
html body :is(
  .page-header, .hero-section, .content-section,
  .feature-card, .community-card, .tool-card, .stat-card, .glance-card, .step-card,
  .trust-item, .category, .category-header, .tool-item,
  [class*="-card"], [class*="_card"], [class*="Card"],
  [class*="-box"], [class*="_box"],
  [class*="-panel"], [class*="_panel"],
  .academy-main-header, .academy-lesson-header,
  .academy-brief-card, .academy-platform-card, .academy-evidence-box,
  .academy-callout, .academy-quality-item
)::after {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Icon containers also remain neutral; hover changes the outline only. */


html body :is(.feature-card:hover .feature-icon-wrapper, .tool-card:hover .feature-icon-wrapper) {
  background: var(--ded-page-surface) !important;
  background-image: none !important;
  border-color: var(--ded-accent-purple) !important;
}

/* Keep warning/success semantics on the border only. */
html body .academy-callout.warning,
html body .warning,
html body .note-warning { background: var(--ded-page-surface) !important; background-image: none !important; }

/* Theme text remains high contrast after neutralizing every surface. */
html body.dark-theme :is(.page-content, .home-screen, .main-footer) { color: #ffffff !important; }
html body.light-theme :is(.page-content, .home-screen, .main-footer) { color: #000000 !important; }
html body.light-theme :where(h1,h2,h3,h4,h5,h6,p,li,small,label,strong,em) {
  text-shadow: none !important;
  filter: none !important;
}

/* 404 page: compact, deliberate and mobile-safe. */
body.not-found-page .not-found-shell {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px) 0;
}
body.not-found-page .not-found-card {
  min-height: min(560px, 70vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(28px, 6vw, 64px) clamp(18px, 5vw, 52px) !important;
}
body.not-found-page .not-found-code {
  margin: 0 0 8px;
  color: var(--ded-accent-lavender) !important;
  -webkit-text-fill-color: var(--ded-accent-lavender) !important;
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: clamp(4.2rem, 18vw, 9rem);
  line-height: .9;
  letter-spacing: -.06em;
}
body.not-found-page .not-found-card h1 {
  margin: 14px 0 12px;
  font-size: clamp(1.8rem, 6vw, 3.4rem);
  line-height: 1.05;
}
body.not-found-page .not-found-card > p {
  max-width: 680px;
  margin: 0 auto 24px;
  line-height: 1.65;
}
body.not-found-page .not-found-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(680px, 100%);
  gap: 10px;
  margin-top: 6px;
}
body.not-found-page .not-found-actions .btn {
  width: 100%;
  min-height: 50px;
  margin: 0;
}
@media (max-width: 620px) {
  body.not-found-page .not-found-shell { padding: 20px 0 38px; }
  body.not-found-page .not-found-card { min-height: auto; padding: 30px 14px !important; }
  body.not-found-page .not-found-actions { grid-template-columns: 1fr; }
}


/* === ABSOLUTE BORDER-ONLY LOCK (2026-08-07i.1) ===
   Extra specificity deliberately beats legacy !important Academy/card rules. */





/* Academy icon squares had a more-specific legacy rgba fill. */



/* Homepage lower informational icon square follows the same rule. */
html body.dark-theme .homepage-lower-icon:not(#dedsec-border-only-lock) { background:#000000 !important; background-image:none !important; }
html body.light-theme .homepage-lower-icon:not(#dedsec-border-only-lock) { background:#ffffff !important; background-image:none !important; }

/* Navigation absolute surface lock: prevents legacy hover/gradient rules from
   reintroducing lavender fills into the fixed header. */
html body.dark-theme :is(.main-nav, .nav-menu, .nav-action-btn, .burger-menu, .nav-menu .nav-link):not(#dedsec-nav-surface-lock) {
  background:#000000 !important;
  background-color:#000000 !important;
  background-image:none !important;
  box-shadow:none !important;
}
html body.light-theme :is(.main-nav, .nav-menu, .nav-action-btn, .burger-menu, .nav-menu .nav-link):not(#dedsec-nav-surface-lock) {
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
  box-shadow:none !important;
}
html body :is(.main-nav, .nav-menu, .nav-action-btn, .burger-menu, .nav-menu .nav-link):not(#dedsec-nav-surface-lock)::before,
html body :is(.main-nav, .nav-menu, .nav-action-btn, .burger-menu, .nav-menu .nav-link):not(#dedsec-nav-surface-lock)::after {
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
}


/* === SALES CONTEXT BRIDGES 20260807j ===
   Value-led CTAs. Surfaces deliberately obey the site's border-only rule. */



.tool-use-case { margin: 0 0 14px; padding: 12px 14px; }




.home-buy-nudge { max-width:900px; margin:18px auto 14px; text-align:center; line-height:1.65; }
.installation-next-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; }
.installation-next-card { padding:18px; }
.installation-next-card h3 { margin-top:0; }
.installation-next-card .starter-path-btn { width:100%; min-height:50px; margin-top:10px; }
.sponsor-conversion-note { padding:16px 18px 18px; border-top:1px solid var(--ded-accent-lavender,#c084fc); }
.sponsor-conversion-note .starter-path-btn { margin-top:10px; min-height:50px; }
.academy-ebook-bridge { margin-top:26px; padding:clamp(18px,4vw,30px) !important; }
.academy-ebook-bridge h2 { margin-bottom:12px; }
.academy-ebook-bridge h3 { margin:0 0 10px; }
.academy-ebook-bridge p { max-width:900px; line-height:1.65; }
.academy-ebook-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.academy-ebook-actions .starter-path-btn { flex:1 1 260px; min-height:50px; }
@media (max-width:700px) {
  .installation-next-grid { grid-template-columns:1fr; }
  .academy-ebook-actions { display:grid; grid-template-columns:1fr; }
  .academy-ebook-actions .starter-path-btn { width:100%; }
}


/* === CONTROLLED FUNNEL + BORDER-ONLY CONTROLS 20260807k === */
/* Buttons use accent on borders/icons only. No purple/lavender button fills. */



html body.dark-theme :is(button,a[class*="btn"],a[class*="button"],a[role="button"],.app-icon):is(:hover,:focus,:focus-visible,:active) {
  background:#000000 !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
}
html body.light-theme :is(button,a[class*="btn"],a[class*="button"],a[role="button"],.app-icon):is(:hover,:focus,:focus-visible,:active) {
  background:#ffffff !important; color:#000000 !important; -webkit-text-fill-color:#000000 !important;
}
html body :is(button,a[class*="btn"],a[class*="button"],a[role="button"],.app-icon)::before,
html body :is(button,a[class*="btn"],a[class*="button"],a[role="button"],.app-icon)::after {
  background:none !important; background-image:none !important; box-shadow:none !important;
}
/* Let icons carry the accent without recoloring the button surface. */
html body :is(button,a[class*="btn"],a[class*="button"],a[role="button"],.app-icon) i {
  color:var(--ded-accent-lavender,#c084fc) !important;
  -webkit-text-fill-color:var(--ded-accent-lavender,#c084fc) !important;
}

.home-decision-section{max-width:1040px;margin:22px auto 30px;padding:clamp(22px,4vw,36px);text-align:center}
.home-decision-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.home-decision-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:clamp(20px,4vw,30px);border:1px solid var(--ded-accent-lavender,#c084fc);border-left:4px solid var(--ded-accent-purple,#a855f7);background:var(--nm-container)!important;background-image:none!important;box-shadow:none!important}
.home-decision-card p{margin:0;line-height:1.62}.home-decision-card h3{margin:4px 0 0}.home-decision-number{font-family:var(--font-mono);font-weight:900;letter-spacing:.08em;color:var(--nm-text-accent)}
.home-decision-flow{margin-top:auto!important;padding-top:4px}.home-decision-card .sales-btn{width:100%;min-height:54px;margin-top:8px}.home-decision-note{max-width:820px;margin:18px auto 0;line-height:1.6}
.installation-primary-next{max-width:680px;margin:18px auto}.installation-primary-next .starter-path-btn{width:100%;min-height:54px}
.installation-sponsor-nudge{max-width:820px;margin:24px auto 12px;padding:18px;border:1px solid var(--ded-accent-lavender,#c084fc);border-left:4px solid var(--ded-accent-purple,#a855f7);background:var(--nm-container)!important;background-image:none!important}.installation-sponsor-nudge h3{margin-top:0}.installation-sponsor-nudge .starter-path-btn{width:100%;min-height:50px;margin-top:8px}.installation-recovery-link{margin-top:18px}
.academy-entry-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}.academy-entry-actions .starter-path-btn{flex:1 1 260px;min-height:52px}
@media(max-width:720px){.home-decision-grid{grid-template-columns:1fr}.academy-entry-actions{display:grid;grid-template-columns:1fr}.academy-entry-actions .starter-path-btn{width:100%}}

/* Button contents follow theme contrast; the border is the only accent color. */
html body.dark-theme :is(button,a[class*="btn"],a[class*="button"],a[role="button"],.app-icon) :is(i,svg,span,strong) {
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
html body.light-theme :is(button,a[class*="btn"],a[class*="button"],a[role="button"],.app-icon) :is(i,svg,span,strong) {
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}

/* === CTA ALIGNMENT + HOME ACADEMY BRIDGE 20260807m === */
/* Main-content CTAs are visually centered. Header/nav controls are intentionally excluded. */








.home-decision-academy {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 14px auto 0 !important;
}
.home-decision-academy .sales-btn {
  width: min(100%, 430px) !important;
  min-height: 52px !important;
}


/* === GLOBAL CONTENT CTA CENTERING LOCK 20260807n ===
   Center every user-facing content CTA regardless of legacy page wrapper.
   Navigation, filters, modal controls and code-copy controls are intentionally excluded. */


/* Center the common action wrappers too, so legacy flex/grid rules cannot pin CTAs to an edge. */


/* Single prominent CTAs should stay visibly centered instead of inheriting a start alignment. */



/* === ABSOLUTE CONTENT CTA PHYSICAL CENTERING 20260807o ===
   A CTA must be centered as an element, not merely have centered text.
   This intentionally excludes header/navigation/filter/copy controls. */


/* Inline-level buttons ignore auto margins in normal flow. Make the main CTA
   families real flex boxes so their horizontal auto margins actually work. */
html body a.sales-btn {
  display: flex !important;
  width: min(100%, 520px) !important;
}


html body a.sponsor-btn {
  display: flex !important;
  width: min(100%, 430px) !important;
}
html body a.starter-path-btn {
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
  justify-self: center !important;
  text-align: center !important;
  justify-content: center !important;
}




/* Labels that are actual short sentences use sentence case and punctuation.
   Heading/category labels remain uppercase and do not use a trailing period. */
html body .sales-section-label.sales-sentence-label {
  text-transform: none !important;
  letter-spacing: .035em !important;
}


/* Native-button CTA parity for Assistance and legacy content controls. */
html body :is(button.starter-path-btn, button.assistance-report-btn, button.assistance-expand-btn) {
  display: flex !important;
  width: min(100%, 520px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* === SMARTPHONE ACADEMY MOBILE CTA ALIGNMENT 20260807o ===
   Keep each primary Academy action on its own centered row on phones. */
@media (max-width: 700px) {
  html body .academy-hero-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body .academy-hero-actions > a.btn {
    width: min(100%, 520px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html body .academy-entry-next .academy-entry-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body .academy-entry-next .academy-entry-actions > .starter-path-btn {
    flex: 0 0 auto !important;
    width: min(100%, 520px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* === ACADEMY SECTION ACTION CENTERING 20260807o ===
   Section-level Academy actions (Back to Academy, safety rules, etc.) are
   content buttons, so keep them centered at every viewport width. */
html body :is(.academy-section-heading, .academy-section-heading--actions) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
html body :is(.academy-section-heading, .academy-section-heading--actions) > :is(a.btn, a.starter-path-btn) {
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
  justify-self: center !important;
}






/* === CONTEXTUAL JOURNEY & CONVERSION FLOW 20260807p === */
.home-hero-support-line{margin:8px auto 0;max-width:760px;text-align:center;font-family:var(--font-mono);font-weight:800;color:var(--nm-text-accent)}
.home-github-cta{margin-top:10px!important}.home-github-star-count:empty{display:none}.home-github-star-symbol{font-size:1.05em}

.github-discovery-block{max-width:820px}
.post-install-sponsor-note{margin-top:16px!important;font-size:.92rem}.post-install-sponsor-note a,.assistance-github-followup a{font-weight:800}
.assistance-contextual-recommendation{max-width:780px;margin:16px auto}.assistance-github-followup{max-width:760px;margin:14px auto 0;text-align:center;line-height:1.6}
.academy-contextual-bridge{max-width:980px;margin:20px auto}



@media(max-width:700px){}


/* === FOUNDER TECHNOLOGIES + GITHUB ACTIVITY (2026-08-11) === */
body.founder-page .founder-skills-section {
  scroll-margin-top: calc(var(--nav-h) + 20px);
}

body.founder-page .founder-skills-section > .founder-compact-header {
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}

body.founder-page .founder-skills-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1080px;
  margin: 0 auto;
}

body.founder-page .founder-skill-group {
  padding: 1.15rem;
  border: 1px solid var(--founder-border-dark);
  border-left: 3px solid var(--founder-accent-purple);
  border-top-color: var(--founder-accent-lavender);
  border-radius: var(--radius-md);
  background: transparent;
}

body.founder-page.light-theme .founder-skill-group {
  border-color: var(--founder-border-light);
  border-left-color: var(--founder-accent-purple);
  border-top-color: var(--founder-accent-lavender);
}

body.founder-page .founder-skill-group h3 {
  margin: 0 0 .85rem;
}

body.founder-page .founder-skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

body.founder-page .founder-skill-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .42rem .72rem;
  border: 1px solid rgba(192, 132, 252, .66);
  border-radius: 999px;
  background: transparent;
  font-size: .92rem;
  line-height: 1.2;
  font-weight: 650;
}

body.founder-page.light-theme .founder-skill-chip {
  border-color: rgba(126, 34, 206, .52);
}

body.founder-page .founder-github-activity {
  max-width: 1080px;
  margin: 1.5rem auto 0;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(192, 132, 252, .38);
}

body.founder-page .founder-github-activity > h3 {
  margin: 0 0 1rem;
  text-align: center;
}

body.founder-page .founder-github-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

body.founder-page .founder-github-stat-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: .55rem;
  border: 1px solid var(--founder-accent-lavender);
  border-left: 3px solid var(--founder-accent-purple);
  border-radius: var(--radius-md);
  background: #261d31;
  box-shadow: 0 10px 30px rgba(168, 85, 247, .14);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.founder-page .founder-github-stat-card:hover,
body.founder-page .founder-github-stat-card:focus-visible {
  transform: translateY(-2px);
  border-color: #d8b4fe;
  box-shadow: 0 14px 34px rgba(168, 85, 247, .22);
}

body.founder-page .founder-github-stat-card img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 10px;
}

body.founder-page .founder-github-stats-grid > :nth-child(3) {
  grid-column: 1 / -1;
  width: min(100%, 540px);
  justify-self: center;
}

@media (max-width: 820px) {
  body.founder-page .founder-skills-grid,
  body.founder-page .founder-github-stats-grid {
    grid-template-columns: 1fr;
  }

  body.founder-page .founder-github-stats-grid > :nth-child(3) {
    grid-column: auto;
    width: 100%;
  }
}


/* Founder GitHub cards split into ordered standalone sections. */
body.founder-page .founder-github-section {
  scroll-margin-top: calc(var(--nav-h) + 20px);
}

body.founder-page .founder-github-section > .founder-compact-header {
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}

body.founder-page .founder-github-section .founder-github-activity {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

body.founder-page .founder-github-single-card-grid {
  grid-template-columns: 1fr;
  max-width: 560px;
  margin-inline: auto;
}

body.founder-page .founder-github-single-card-grid > .founder-github-stat-card {
  grid-column: auto;
  width: 100%;
  justify-self: stretch;
}

/* === FOUNDER VISUAL FIX (2026-08-11) === */
body.founder-page .founder-skill-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center;
  column-gap: .55rem !important;
  row-gap: .55rem !important;
}

body.founder-page .founder-skill-chip {
  display: inline-flex !important;
  flex: 0 0 auto;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.founder-page .founder-github-stat-card {
  padding: .5rem;
}

body.founder-page .founder-github-stat-card img {
  width: 100%;
  max-width: 520px;
  min-height: 0;
  object-fit: contain;
}

@media (max-width: 560px) {
  body.founder-page .founder-skill-group {
    padding: 1rem .8rem;
  }
  body.founder-page .founder-skill-chip {
    font-size: .86rem;
    padding: .38rem .62rem;
  }
  body.founder-page .founder-github-stat-card {
    padding: .35rem;
  }
}

/* GitHub Sponsors tier and ebook components */
.sponsors-page .sponsor-hero{max-width:980px;margin:0 auto;}
.sponsor-eyebrow,.sponsor-card-kicker,.sponsor-tier-price{display:inline-block;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-color,#9d5cff);}
.sponsor-tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px;}
.sponsor-tier-card,.sponsor-ebook-card,.sponsor-access-note{border:1px solid rgba(173,117,255,.28);background:rgba(20,15,31,.72);border-radius:18px;padding:22px;box-shadow:0 16px 36px rgba(0,0,0,.18);}
.sponsor-tier-card--featured{border-color:rgba(173,117,255,.72);box-shadow:0 18px 44px rgba(123,72,214,.2);}
.sponsor-tier-card h3,.sponsor-ebook-card h3,.sponsor-access-note h3{margin:10px 0 12px;}
.sponsor-tier-card h4,.sponsor-ebook-card h4{margin:10px 0 12px;font-size:1.08rem;}
.sponsor-inline-library{padding:6px 18px 24px;border-top:1px solid rgba(173,117,255,.18);}
.sponsor-inline-library .academy-section-heading{margin:0 0 18px;}
.sponsor-inline-library .sponsor-inline-tier-card{margin:0 0 18px;}
.sponsor-inline-library .sponsor-library-intro{margin:18px 0 0;line-height:1.7;opacity:.92;}
.sponsor-inline-library .anchor-target{display:block;position:relative;top:-84px;visibility:hidden;}
body.light-theme .sponsor-inline-library .sponsor-tier-card,body.light-theme .sponsor-inline-library .sponsor-ebook-card{background:rgba(255,255,255,.92);border-color:rgba(94,52,153,.22);}
.sponsor-tier-card ul{margin:16px 0 0;padding-left:20px;}
.sponsor-tier-card li{margin:.55rem 0;line-height:1.55;}
.sponsor-tier-card .starter-path-btn{margin-top:18px;}
.sponsor-ebook-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px;}
.sponsor-ebook-card p{line-height:1.7;}
.sponsor-ebook-tags{font-size:.9rem;font-weight:700;opacity:.82;margin-bottom:0;}
.sponsor-access-note{margin-top:22px;}
.sponsor-access-note .btn{margin-top:10px;}
body.light-theme.sponsors-page .sponsor-tier-card,body.light-theme.sponsors-page .sponsor-ebook-card,body.light-theme.sponsors-page .sponsor-access-note{background:rgba(255,255,255,.92);border-color:rgba(94,52,153,.22);}
@media(max-width:900px){.sponsor-tier-grid{grid-template-columns:1fr;}.sponsor-ebook-grid{grid-template-columns:1fr;}}

/* === DARK LAVENDER THEME + CENTERED INTERACTIVE LABELS (2026-09-18) ===
   Dark palette reduced by 15% from the previous lavender-dark values.
   Requested polish:
   - Dark mode uses a dark purple/lavender surface system instead of pure black.
   - Accordion/category/tool labels and standard button labels are visually centered.
*/
html body.dark-theme {
  --ded-page-surface: #140e1a !important;
  --ded-card-surface-dark: #1c1426 !important;
  --nm-abyss-blue: #140e1a !important;
  --nm-darkest: #171020 !important;
  --nm-nav-solid: #191223 !important;
  --nm-menu-solid: #1c1426 !important;
  --nm-dark: #1c1426 !important;
  --nm-container: #20172b !important;
  --nm-disclaimer-bg: #191223 !important;
  --nm-fade: rgba(20, 14, 26, 0) !important;
  background: #140e1a !important;
  background-color: #140e1a !important;
  background-image: none !important;
}

/* Fixed navigation and menu surfaces now match the lavender-dark palette. */
html body.dark-theme :is(.main-nav, .nav-menu, .nav-action-btn, .burger-menu, .nav-menu .nav-link):not(#dedsec-nav-surface-lock) {
  background: #191223 !important;
  background-color: #191223 !important;
  background-image: none !important;
}

/* Boxed surfaces stay dark, but no longer collapse into pure black. */
html body.dark-theme :is(
  .page-header, .hero-section, .content-section,
  .feature-card, .community-card, .tool-card, .stat-card, .glance-card, .step-card,
  .trust-item, .category, .category-header, .tool-item,
  [class*="-card"], [class*="_card"], [class*="Card"],
  [class*="-box"], [class*="_box"],
  [class*="-panel"], [class*="_panel"],
  .callout, .note, .warning, .note-warning, .danger, .tip, details,
  .cookie-banner, .modal-content, .modal-disclaimer,
  .butsystem-free-banner, .custom-scope-note, .founder-home-mark,
  .search-modal, .dedsec-cookie-settings,
  .academy-main-header, .academy-lesson-header,
  .academy-meta-row span, .academy-filter, .academy-command-list > div,
  .academy-table-wrap, .academy-table-wrap table, .academy-table-wrap th,
  .academy-brief-card, .academy-platform-card, .academy-evidence-box,
  .academy-callout, .academy-quality-item
) {
  background: #1c1426 !important;
  background-color: #1c1426 !important;
  background-image: none !important;
}

/* Keep code areas slightly deeper for contrast while retaining the purple cast. */
html body.dark-theme :is(.code-container, pre) {
  background: #110d17 !important;
  background-color: #110d17 !important;
  background-image: none !important;
}

/* Accordion/category buttons: true visual centering with the chevron pinned right. */
html body .category-header,
html body .tool-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
html body .category-header > :is(h2, h3),
html body .tool-header > .tool-title {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 2.75rem !important;
  padding-right: 2.75rem !important;
  text-align: center !important;
  overflow-wrap: anywhere;
}
html body .category-header > .toggle-icon,
html body .tool-header > .tool-expand-icon {
  position: absolute !important;
  right: 1rem !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%);
}
html body .category.active .category-header > .toggle-icon,
html body .tool-item.active .tool-header > .tool-expand-icon {
  transform: translateY(-50%) rotate(180deg) !important;
}

/* Standard controls: keep their labels centered across desktop and mobile. */
html body :is(
  button,
  .btn,
  .btn-primary,
  .sales-btn,
  .starter-path-btn,
  .faq-link-btn,
  .footer-mini-btn,
  .copy-btn,
  .contact-page-btn,
  .contact-cta,
  .hero-cta,
  .feature-cta
) {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
}

/* === SPONSOR TIER SUB-BUTTONS (2026-09-18) === */
.sponsor-tier-summary-group{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  width:100%;
  max-width:560px;
  margin:0 auto;
  padding:0 14px 16px;
  box-sizing:border-box;
}
.sponsor-tier-summary-group .sponsor-tier-summary{
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(173,117,255,.42) !important;
  border-radius:10px !important;
  overflow:hidden;
}
.sponsor-tier-summary-group .sponsor-tier-summary-header{
  min-height:44px;
  padding:8px 12px !important;
  cursor:pointer;
  user-select:none;
}
.sponsor-tier-summary-group .sponsor-tier-summary-header .tool-title{
  font-size:.82rem !important;
  line-height:1.25 !important;
}
.sponsor-tier-summary-group .sponsor-tier-summary-header:focus-visible{
  outline:3px solid var(--nm-secondary, #a855f7) !important;
  outline-offset:-3px;
}
.sponsor-tier-summary-group .sponsor-tier-summary-body{
  padding-left:14px;
  padding-right:14px;
}
.sponsor-tier-summary-group .sponsor-tier-summary-copy{
  margin-bottom:12px !important;
  text-align:center;
  line-height:1.55 !important;
}
.sponsor-tier-summary-group .sponsor-tier-benefits{
  margin:0 0 18px;
  padding-left:1.25rem;
  text-align:left;
}
.sponsor-tier-summary-group .sponsor-tier-benefits li{
  margin:.55rem 0;
  line-height:1.55;
  color:var(--nm-text-muted);
}
.sponsor-tier-summary-group .sponsor-tier-open-btn{
  display:flex !important;
  width:100%;
  margin:0 0 18px !important;
}
body.light-theme .sponsor-tier-summary-group .sponsor-tier-benefits li{
  color:var(--nm-text-muted);
}



/* DedSec platform installation selector */
.platform-selector-intro{max-width:760px;margin:0 auto 18px;text-align:center;}
.platform-install-selector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0 28px;align-items:start;}
.platform-install-card{margin:0!important;padding:0!important;border:1px solid var(--nm-border)!important;background:var(--nm-container)!important;overflow:hidden;}
.platform-install-card>summary{display:flex!important;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:16px 18px!important;cursor:pointer;font-weight:800;text-align:center;color:var(--nm-text-accent)!important;list-style:none;background:var(--nm-container)!important;border:0!important;}
.platform-install-card>summary::-webkit-details-marker{display:none;}
.platform-install-card>summary::after{content:"+";margin-left:auto;font-size:1.35rem;line-height:1;}
.platform-install-card[open]>summary::after{content:"−";}
.platform-install-card>summary i{font-size:1.25rem;min-width:24px;}
.platform-install-card[open]{grid-column:1/-1;}
.platform-install-body{padding:20px clamp(14px,3vw,26px) 24px;border-top:1px solid var(--nm-border);}
.platform-install-body>h3:first-child{margin-top:0;}
.platform-install-body .code-container{margin:10px 0 18px;}
.platform-install-body .contact-grid{max-width:780px;margin-left:auto!important;margin-right:auto!important;}
@media(max-width:720px){.platform-install-selector{grid-template-columns:1fr}.platform-install-card[open]{grid-column:auto}.platform-install-card>summary{min-height:54px;}}


/* 2026-10-09: Founder's Story — closed-by-default, accessible native accordions. */
body.founder-page .founder-founded-line { max-width: 920px; margin: 12px auto 18px; text-align:center; color: var(--nm-accent, #c084fc); font-weight: 650; line-height: 1.6; }
body.founder-page .founder-section-disclosure,
body.founder-page .founder-card-disclosure { width: 100%; }
body.founder-page .founder-section-summary,
body.founder-page .founder-card-disclosure > summary { display: flex; cursor: pointer; align-items:center; text-align:left; gap: 12px; list-style: none; user-select:none; }
body.founder-page .founder-section-summary::-webkit-details-marker,
body.founder-page .founder-card-disclosure > summary::-webkit-details-marker { display:none; }
body.founder-page .founder-section-summary::before,
body.founder-page .founder-card-disclosure > summary::before { content:'•'; font-size:1.65rem; line-height:1; color:var(--nm-accent, #c084fc); flex:none; }
body.founder-page .founder-section-summary::after,
body.founder-page .founder-card-disclosure > summary::after { content:'⌄'; margin-left:auto; color:var(--nm-accent, #c084fc); font-size:1.8rem; font-weight:700; line-height:1; transition:transform .22s ease; }
body.founder-page details[open] > summary::after { transform:rotate(180deg); }
body.founder-page .founder-section-summary { padding: 8px 2px; min-height: 48px; }
body.founder-page .founder-section-summary h2 { margin:0 !important; text-align:left !important; font-size:clamp(1.13rem, 2.4vw, 1.55rem); }
body.founder-page .founder-section-disclosure-body { padding-top:16px; }
body.founder-page .founder-section-disclosure-body > .page-header:empty { display:none; }
body.founder-page .founder-card-disclosure > summary { padding: 2px 0; min-height: 32px; }
body.founder-page .founder-card-disclosure > summary h3 { margin:0 !important; font-size:1.05rem; }
body.founder-page .founder-card-disclosure-body { padding-top:14px; }
body.founder-page .founder-section-summary:focus-visible,
body.founder-page .founder-card-disclosure > summary:focus-visible { outline:2px solid var(--nm-accent, #c084fc); outline-offset:5px; border-radius:6px; }
body.founder-page .founder-world-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr)); }
body.founder-page .founder-section-disclosure-body .founder-compact-header { margin:0 0 15px; }
@media(max-width:640px) { body.founder-page .founder-section-summary h2 { font-size:1.1rem; } body.founder-page .founder-section-summary::before {font-size:1.3rem;} }

/* Easter egg: visually shatters live page elements after seven title taps.
   No normal layout, navigation, or colors change before activation. */
.main-nav .site-title[role="button"] { cursor: pointer; }
body.dedsec-collapse-active { overflow: hidden !important; }
/* The existing cookie panel normally sits above everything else. Move its
   stacking level below the shatter stage only while the Easter egg runs. */
body.dedsec-collapse-active .dedsec-cookie-banner,
body.dedsec-collapse-active .dedsec-cookie-settings,
body.dedsec-collapse-active .dedsec-cookie-status { z-index:2147483590 !important; }
body.dedsec-collapse-active .dedsec-collapse-fragment { transform-origin: center 35%; will-change: transform, opacity, filter; }
body.dedsec-collapse-active .dedsec-collapse-fragment-fallback { animation: dedsec-fragment-fall var(--collapse-duration,1600ms) var(--collapse-delay,0ms) ease-in forwards !important; }
@keyframes dedsec-fragment-fall { to { transform:translate3d(var(--collapse-shift,150px),var(--collapse-fall,120vh),0) rotate(var(--collapse-tilt,28deg)) scale(.6); opacity:0; filter:blur(7px); } }
.dedsec-collapse-stage { position:fixed; inset:0; width:100vw; height:100vh; z-index:2147483600; pointer-events:none; overflow:hidden; isolation:isolate; }
.dedsec-collapse-flash { position:absolute; inset:0; background:#df9fff; opacity:0; animation:dedsec-break-flash 820ms steps(1,end) forwards; }
@keyframes dedsec-break-flash {0%{opacity:0} 7%{opacity:.45} 12%{opacity:0} 19%{opacity:.28} 23%,100%{opacity:0} }
.dedsec-collapse-cracks { position:absolute; width:100%;height:100%;top:0;left:0; overflow:visible; filter:drop-shadow(0 0 5px rgba(198,117,255,.84)); }
.dedsec-collapse-cracks path { fill:none; stroke:rgba(210,151,255,.8); stroke-width:1.65px; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1900; stroke-dashoffset:1900; animation:dedsec-cracks-spread 480ms var(--crack-delay,0ms) cubic-bezier(.24,.7,.7,1) forwards, dedsec-cracks-fade 1100ms 1100ms forwards; }
.dedsec-collapse-cracks .dedsec-crack-bright { stroke:rgba(249,230,255,.96);stroke-width:2.4px; }
@keyframes dedsec-cracks-spread { to{ stroke-dashoffset:0; } }
@keyframes dedsec-cracks-fade {to{ opacity:0; }}
.dedsec-collapse-shard { position:absolute; display:block; width:clamp(7px,2vw,17px);height:clamp(10px,2.8vw,25px); background:linear-gradient(130deg,rgba(218,150,255,.85),rgba(43,7,78,.28)); border:1px solid rgba(233,193,255,.8);clip-path:polygon(50% 0,100% 85%,0 100%);filter:drop-shadow(0 0 8px #b77af8);opacity:0; animation:dedsec-shard-flight 1700ms var(--shard-delay,0ms) cubic-bezier(.19,.42,.65,.9) forwards; }
@keyframes dedsec-shard-flight {0%{opacity:0;transform:translate(0,0) rotate(0) scale(.6)}9%{opacity:1}65%{opacity:1}100%{opacity:0;transform:translate(var(--shard-x,90px),var(--shard-y,400px)) rotate(var(--shard-rot,180deg)) scale(.5)} }
.dedsec-collapse-finale { position:absolute;inset:0;display:grid;place-items:center;padding:20px; opacity:0;background:rgba(5,4,11,.91);animation:dedsec-final-reveal 950ms 2950ms forwards; }
.dedsec-collapse-finale-inner {display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center;max-width:90vw;transform:translateY(10px);}
.dedsec-collapse-status {font:700 clamp(1.05rem,4vw,2rem)/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.065em;color:#ead3ff;text-shadow:0 0 25px #a855f7;}
.dedsec-collapse-restore {cursor:pointer;pointer-events:auto;color:#fff;background:#7133b1;border:1px solid #c591fa;box-shadow:0 0 25px rgba(168,85,247,.28);border-radius:10px;padding:13px 22px;font:700 1rem/1.3 system-ui,sans-serif;min-height:47px;}
.dedsec-collapse-restore:hover,.dedsec-collapse-restore:focus-visible {background:#873dce;outline:2px solid #f0caff;outline-offset:3px;}
@keyframes dedsec-final-reveal {to{opacity:1;pointer-events:auto}}
body.dedsec-collapse-ended > :not(.dedsec-collapse-stage):not(script):not(style) { visibility:hidden !important; }
@media (prefers-reduced-motion: reduce) {
  .dedsec-collapse-flash,.dedsec-collapse-cracks,.dedsec-collapse-shard{display:none !important;}
  .dedsec-collapse-finale{animation:dedsec-final-reveal .12s .15s forwards;}
}


/* Founder page: combine four related blocks under the single GitHub Stats disclosure.
   Scoped decorative styling only: the existing grids/cards and theme variables remain intact. */
body.founder-page #github-stats .founder-github-subsection {
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--nm-border);
  scroll-margin-top: calc(var(--nav-h, 70px) + 20px);
}
body.founder-page #github-stats .founder-github-subsection-title {
  color: var(--nm-text-accent);
  text-align: center;
  font-family: var(--font-secondary);
  font-size: clamp(1.02rem, 2.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 1rem;
}