/* =============================================================================
   EnterraHost — enterra-theme.css
   =============================================================================
   DERIVED FILE. Basis: the live Enterramon child theme stylesheet
       https://enterramon.com/wp-content/themes/EnterramonTheme/style.css
       Theme Name: Enterramon   Version: 2.0.0

   What changed vs. the original: ONLY the color layer. The orange scale was
   remapped to a strict monochrome scale, the surface scale was inverted to a
   dark-first palette, and chart/error accents were neutralised to grays.
   Light mode lives at html[data-theme="light"].

   What is unchanged: every class name, selector, layout rule, spacing scale,
   radius scale, component and utility. Markup written for the Enterramon
   theme renders identically here, minus the color.

   Regenerate with: python3 build-theme.py <EnterramonTheme-style.css>
   ============================================================================= */

/*/*
Theme Name: Enterramon
Description: Main stylesheet - Refactored for maintainability
Template: generatepress
Version: 2.0.0
*/

/* =============================================================================
   TABLE OF CONTENTS
   =============================================================================
   0. ROOT
   1. CSS Variables & Design Tokens
   2. Base / Reset
   3. Typography
   4. Layout & Spacing Utilities
   5. Flexbox & Grid Utilities
   6. Component Classes
      6.1 Buttons
      6.2 Inputs & Forms
      6.3 Cards & Containers
      6.4 Navigation & Dropdowns
      6.5 Icons
   7. Effects (Shadows, Blur, Gradients)
   8. Responsive Utilities
   9. Print Styles
   ============================================================================= */

/*
================================================================================
    IMPORTS
================================================================================
*/

/* Regular */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/PlusJakartaText-Regular.woff2') format('woff2');
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 800; /* Map 800 to the Display-Bold file */
    src: url('../fonts/PlusJakartaDisplay-Bold.woff2') format('woff2');
    font-display: swap;
}

/* Italic */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/PlusJakartaText-Italic.woff2') format('woff2');
    font-display: swap;
}

/*
================================================================================
    ROOT
================================================================================
*/

:root {

    /* ========== ACCENT SCALE (monochrome: accent == white on dark) ========== */
    --color-primary: #ffffff;
    /* Main action color */
    --color-primary-dark: #d5d5d5;
    /* Hover / active state */
    --color-primary-darker: #a4a4a4;
    --color-primary-light: #cbcbcb;
    /* Gradient end */
    --color-primary-dim: rgba(255, 255, 255, 0.08);
    /* Subtle backgrounds */
    --color-primary-dim-20: rgba(255, 255, 255, 0.16);

    /* ========== NEUTRAL SURFACE SCALE ========== */
    --color-white: #050505;
    /* The foreground for a button painted on the --color-primary gradient.
       IT FLIPS WITH THE GRADIENT, NOT WITH NOTHING: in the dark theme
       --color-primary is #ffffff (a LIGHT gradient) so the text is dark. */
    --color-btn-primary-fg: #050505;
    /* Page background */
    --color-surface: #050505;
    /* Page background */
    --color-surface-elevated: #101010;
    /* Cards, modals */
    --color-surface-variant: #1d1d1d;
    /* Subtle borders / dividers */
    --color-on-surface: #fafafa;
    /* Primary text */
    --color-on-surface-variant: #a3a3a3;
    /* Secondary text */
    --color-on-surface-inverse: #6e6e6e;
    /* Disabled / placeholder text */

    /* ========== SUPPORTING SURFACES ========== */
    --color-secondary: #171717;
    /* Soft raised background */
    --color-secondary-container: #222222;
    /* Subtle UI elements */
    --color-on-secondary: #e7e7e7;
    /* Text on secondary backgrounds */

    --color-error: #e5e5e5;
    --color-error-container: #a4a4a4;

    /* ========== GLASS ========== */
    --glass: rgba(255, 255, 255, 0.045);
    --glass-2: rgba(255, 255, 255, 0.075);
    --glass-brd: rgba(255, 255, 255, 0.12);
    --glass-blur: saturate(160%) blur(22px);

    /* ========== EFFECTS & UTILITIES ========== */
    --color-border-glow: rgba(255, 255, 255, 0.16);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
    --shadow-orange-glow: 0 10px 30px -10px rgba(255, 255, 255, 0.28);
    --glow: 0 10px 30px -10px rgba(255, 255, 255, 0.28);
    --glow-strong: 0 18px 44px -12px rgba(255, 255, 255, 0.36);

    /* ========== TYPOGRAPHY ========== */
    --font-headline: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ========== SPACING SCALE (8px base) ========== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-40: 10rem;

    /* ========== BORDER RADIUS ========== */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-l: 2.5rem;
    --radius-xl: 3rem;
    --radius-full: 9999px;
}

/* Light mode: same token names, inverted monochrome. */
html[data-theme="light"] {
    --color-primary: #0a0a0a;
    --color-primary-dark: #414141;
    --color-primary-darker: #555555;
    --color-primary-light: #555555;
    --color-primary-dim: rgba(0, 0, 0, 0.06);
    --color-primary-dim-20: rgba(0, 0, 0, 0.12);

    --color-white: #ffffff;
    /* In the light theme --color-primary is #0a0a0a, so the gradient is DARK and
       the button's text must be LIGHT. Pairing a fixed dark foreground with it
       would be black on near-black — which is the same defect in the other
       direction, and the reason this token exists per theme rather than once. */
    --color-btn-primary-fg: #ffffff;
    --color-surface: #f6f6f6;
    --color-surface-elevated: #ffffff;
    --color-surface-variant: #e5e5e5;
    --color-on-surface: #0a0a0a;
    --color-on-surface-variant: #555555;
    --color-on-surface-inverse: #a4a4a4;

    --color-secondary: #f1f1f1;
    --color-secondary-container: #e5e5e5;
    --color-on-secondary: #282828;

    --color-error: #555555;
    --color-error-container: #a4a4a4;

    --glass: rgba(255, 255, 255, 0.62);
    --glass-2: rgba(255, 255, 255, 0.80);
    --glass-brd: rgba(255, 255, 255, 0.85);

    --color-border-glow: rgba(255, 255, 255, 0.85);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 18px 40px -18px rgba(0, 0, 0, 0.22);
    --shadow-orange-glow: 0 10px 30px -10px rgba(0, 0, 0, 0.30);
    --glow: 0 10px 30px -10px rgba(0, 0, 0, 0.30);
    --glow-strong: 0 18px 44px -12px rgba(0, 0, 0, 0.38);
}

/* =============================================================================
   2. BASE / RESET
   ============================================================================= */

::selection {
    background-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    color: var(--on-surface);
}

::-moz-selection {
    background-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    color: var(--on-surface);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

.site-content {
    display: block;
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-on-surface);
    background-color: var(--color-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    overscroll-behavior: none;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease;
}

button {
    font: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

input,
select,
textarea {
    font: inherit;
    color: inherit;
}

ul,
ol {
    margin: 0 0 0 1rem;
}

/* Remove default focus outlines, use custom */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.grid-container{
    min-width:100% !important;
}

input:focus-visible,
button:focus-visible {
    outline: none;
}

.hidden{
    display: none;
}

/* =============================================================================
   3. Header
   ============================================================================= */

.header {
    background-color: var(--color-white);
    position: fixed;
    width: 100%;
    z-index: 9999;
    top: 0;
}

.mb-dropdown-menu {
    background-color: var(--color-white);
    position: fixed;
    width: 100%;
    right: 0;
    height: 8rem;
    z-index: 99;

    top: -30rem;
    transition: top 0.35s ease;

    display: block;
}

.mb-dropdown-menu.open {
    top: 0;
}

/* =============================================================================
   4. Footer
   ============================================================================= */

.footer {
    background-color: var(--color-primary);
    padding: 5rem 0rem !important;
    border-radius: 3rem 3rem 0rem 0rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5rem;
    position: relative;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 4rem;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-title {
    margin-bottom: 0.75rem;
}

.footer-link {
    color: var(--on-surface-variant);
    font-size: 0.875rem;
    transition: color 150ms ease;
}

.footer-link:hover {
    color: var(--color-white) !important;
    text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .footer {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-column {
        align-items: center;
    }
}

/* =============================================================================
   3. TYPOGRAPHY
   ============================================================================= */

/* Font Families */
.font-headline {
    font-family: var(--font-headline);
}

.font-body {
    font-family: var(--font-body);
}

/* Font Weights */
.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

.font-black {
    font-weight: 900;
}

/* Font Sizes (Responsive scale) */
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}

.text-7xl {
    font-size: 4.5rem;
    line-height: 1;
}

.text-8xl {
    font-size: 6rem;
    line-height: 1;
}

/* Line Height */
.leading-none {
    line-height: 1;
}

.leading-tight {
    line-height: 1.25;
}

.leading-normal {
    line-height: 1.5;
}

.leading-relaxed {
    line-height: 1.75;
}

.leading-loose {
    line-height: 2;
}

/* Letter Spacing */
.tracking-tighter {
    letter-spacing: -0.05em;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-normal {
    letter-spacing: 0;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

/* Text Transform */
.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

/* Text Colors */
.text-primary {
    color: var(--color-primary);
}

.text-primary-dark {
    color: var(--color-primary-dark);
}

.text-on-surface {
    color: var(--color-on-surface);
}

.text-on-surface-variant {
    color: var(--color-on-surface-variant);
}

.text-on-surface-inverse {
    color: var(--color-on-surface-inverse);
}

.text-black {
    color: #000000;
}

.text-error {
    color: var(--color-error);
}

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

.text-a-left {
    text-align: left;
}

.text-a-right {
    text-align: right;
}

.text-a-just {
    text-align: justify;
}

h2 {
    color: var(--color-on-surface-variant);
    font-weight: 800;
}

h3 {
    color: var(--color-on-surface-variant);
    font-weight: 200;
}

h4 {
    color: var(--color-on-surface-variant);
    font-weight: 800;
}

h5 {
    color: var(--color-on-surface-inverse);
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin: 0
}

p,
li {
    color: var(--color-on-surface-variant);
    font-weight: 300;
    font-size: var(--space-4);
}

.text-orange {
    color: var(--color-primary);
}

.o-a {
    color: var(--color-primary)
}

.o-a:hover {
    color: var(--color-primary-light) !important
}

.page-subtitle { 
    font-size: 1.5rem; line-height: 1.4;
}

/* =============================================================================
   4. LAYOUT & SPACING UTILITIES
   ============================================================================= */
/* Display */
.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.flex-sb {
    display: flex;
    justify-content: space-between;
}

.flex-sb-v {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.flex-left {
    display: flex;
    justify-content: left;
}

.flex-center {
    display: flex;
    justify-content: center;
}

.flex-right {
    display: flex;
    justify-content: right;
}

.inline-flex {
    display: inline-flex;
}

.grid {
    display: grid;
}

.flex-wrap {
    flex-direction: wrap;
}

.hidden {
    display: none;
}

.flex-grid {
    display: grid;
}

.gc-2 { grid-template-columns: repeat(2, 1fr); }
.gc-3 { grid-template-columns: repeat(3, 1fr); }
.gc-4 { grid-template-columns: repeat(4, 1fr); }
.gc-5 { grid-template-columns: repeat(5, 1fr); }
.gc-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1400px) {
    .gc-4 { grid-template-columns: repeat(3, 1fr); }
    .gc-5 { grid-template-columns: repeat(3, 1fr); }
    .gc-6 { grid-template-columns: repeat(3, 1fr); }
}

/* Row utilities */
.gr-2 {
    grid-template-rows: repeat(2, 1fr);
}

.gr-3 {
    grid-template-rows: repeat(3, 1fr);
}

.gr-4 {
    grid-template-rows: repeat(4, 1fr);
}

/* Flexbox */
.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
    align-content: center;
    align-self: center
}

.items-end {
    align-items: flex-end;
    align-content: end;
    align-self: end
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.gap-2 {
    gap: var(--space-2);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-6 {
    gap: var(--space-6);
}

.gap-8 {
    gap: var(--space-8);
}

.gap-12 {
    gap: var(--space-12);
}

.gap-16 {
    gap: var(--space-16);
}

.gap-20 {
    gap: var(--space-20);
}

/* Width */
.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.w-fit {
    width: fit-content;
}

.w-20 {
    width: 20%;
}

.w-33 {
    width: 33.3333%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-66 {
    width: 66.666%;
}

.w-80 {
    width: 80%;
}

.w-60r {
    max-width: 15rem;
}

.w-80r {
    max-width: 20rem;
}

.w-160r {
    max-width: 40rem;
}

.w-240r {
    max-width: 60rem;
}

.max-w-xl {
    max-width: 36rem;
}

.max-w-2xl {
    max-width: 42rem;
}

.max-w-4xl {
    max-width: 56rem;
}

.max-w-container {
    max-width: 90%;
    width: 1200px;
}

.w-s {
    width: 1200px;
}

/* Height */
.h-auto {
    height: auto;
}

.h-full {
    height: 100%;
}

/* Margin */
.m-auto {
    margin: auto;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.m-0 {
    margin: 0;
}

.my-2 {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
}

.my-4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.my-6 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

.my-8 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
}

.my-16 {
    margin-top: var(--space-16);
    margin-bottom: var(--space-16);
}

.my-20 {
    margin-top: var(--space-20);
    margin-bottom: var(--space-20);
}

.my-40 {
    margin-top: var(--space-40);
    margin-bottom: var(--space-40);
}

.mt-2 {
    margin-top: var(--space-2);
}

.mt-4 {
    margin-top: var(--space-4);
}

.mt-6 {
    margin-top: var(--space-6);
}

.mt-8 {
    margin-top: var(--space-8);
}

.mt-12 {
    margin-top: var(--space-12);
}

.mt-16 {
    margin-top: var(--space-16);
}

.mt-20 {
    margin-top: var(--space-20);
}

.mt-40 {
    margin-top: var(--space-40);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-6 {
    margin-bottom: var(--space-6);
}

.mb-8 {
    margin-bottom: var(--space-8);
}

.mb-12 {
    margin-bottom: var(--space-12);
}

.mb-16 {
    margin-bottom: var(--space-16);
}

.mb-20 {
    margin-bottom: var(--space-20);
}

.mb-40 {
    margin-bottom: var(--space-40);
}

/* Padding */
.p-0 {
    padding: 0;
}

.p-2 {
    padding: var(--space-2);
}

.p-4 {
    padding: var(--space-4);
}

.p-6 {
    padding: var(--space-6);
}

.p-8 {
    padding: var(--space-8);
}

.p-16 {
    padding: var(--space-16);
}

.px-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

.px-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.px-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.px-8 {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}

.py-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}

.py-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.py-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.py-6 {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

.py-8 {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.py-20 {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
}

.py-40 {
    padding-top: var(--space-40);
    padding-bottom: var(--space-40);
}

.pt-4 {
    padding-top: var(--space-4);
}

.pt-8 {
    padding-top: var(--space-8);
}

.pt-16 {
    padding-top: var(--space-16);
}

.pt-20 {
    padding-top: var(--space-20);
}

.pt-40 {
    padding-top: var(--space-40);
}

.pb-8 {
    padding-bottom: var(--space-8);
}

.pb-16 {
    padding-bottom: var(--space-16);
}

.pb-20 {
    padding-bottom: var(--space-20);
}

/* Position */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.fixed-5-5 {
    position: fixed;
    top: 5%;
}

.sticky {
    position: sticky;
}

.top-0 {
    top: 0;
}

.top-2 {
    top: var(--space-2);
}

.top-4 {
    top: var(--space-4);
}

.top-10 {
    top: var(--space-10);
}

.top-20 {
    top: var(--space-20);
}

.top--4 {
    top: -4rem;
}

.right-0 {
    right: 0;
}

.right-2 {
    right: var(--space-2);
}

.right-3 {
    right: var(--space-3);
}

.right-4 {
    right: var(--space-4);
}

.right-10 {
    right: var(--space-10);
}

.right-20 {
    right: var(--space-20);
}

.left-30 {
    right: var(--space-30);
}

.left-0 {
    left: 0;
}

.bottom-0 {
    bottom: 0;
}

.translate-y-1\/2 {
    transform: translateY(-50%);
}

/* Overflow & Z-Index */
.overflow-hidden {
    overflow: hidden;
}

.z-0 {
    z-index: 0;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-50 {
    z-index: 50;
}

.z-100 {
    z-index: 100;
}

.z-999 {
    z-index: 999;
}

.brr-xl {
    border-radius: var(--radius-xl);
}

.brr-2 {
    border-radius: 2rem !important;
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

/* =============================================================================
   5. COMPONENT CLASSES
   ============================================================================= */

/* --- 5.1 Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-6);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--radius-full);
    transition: all 150ms ease;
    cursor: pointer;
    user-select: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: #ffffff;
    box-shadow: var(--shadow-orange-glow);
    border: 1px solid var(--color-border-glow);
    will-change: scale;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

button:hover {
    background-color: var(--color-secondary) !important;
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 35px -10px var(--glow-strong);
    background-color: 0 15px 35px -10px var(--glow-strong) !important;
    color: #ffffff;
}

.btn-primary:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.btn-secondary {
    background: linear-gradient(135deg, #ffffff 0%, var(--color-surface) 100%);
    color: var(--color-on-surface);
    border: 1px solid var(--color-border-glow);
    box-shadow: var(--shadow-md);
    will-change: scale;
}

.btn-secondary:hover {
    color: var(--color-primary-dark);
    transform: scale(1.05);
}

.btn-secondary-ns:hover {
    transform: scale(1) !important;
}

.btn-sm {
    padding: var(--space-1) var(--space-4);
    font-size: 0.75rem;
}

.btn-lg {
    padding: var(--space-3) var(--space-8);
    font-size: 1rem;
}

.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
}

.btn-ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-text {
    cursor: pointer;
    color: var(--color-on-surface);
    padding: 0rem;
}

.btn-text:hover {
    color: var(--color-primary);
    opacity: 80%;
    background-color: transparent;
}

.btn-text.active {
    color: var(--color-primary);
}

/* --- 5.2 Inputs & Forms --- */
.input {
    width: 100% !important;
    padding: var(--space-3) var(--space-4) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-full) !important;
    background: transparent !important;
    color: var(--color-on-secondary) !important;
    transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

.number-input{
    border: solid 1px var(--color-surface-variant) !important;
    padding: 0.25rem 0.5rem !important;
}

.input::placeholder {
    color: var(--color-on-surface-inverse);
}

.input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.input-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-2);
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    border-radius: var(--radius-full);
    background: var(--color-surface-elevated);
}

.input-group .input {
    border: none;
    padding: var(--space-2) var(--space-4);
}

.input-group .btn {
    flex-shrink: 0;
}

/* --- 5.3 Cards & Containers --- */
.card {
    background: var(--color-surface-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
}

.card-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border-glow);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.card-glass-orange {
    background: var(--color-primary-light);
}

.card-glass-glow {
    border: 5px solid var(--color-primary-light);
}

.card-glass-mag {
    will-change: scale;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-glass-mag:hover {
    transform: scale(1.01);
}

.card-glass-dark {
    background-color: var(--color-on-secondary);
}

.card-glass-onblack {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: var(--color-primary-dim);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.badge-single {
    color: var(--color-primary);
    font-size: 2rem !important;
}

.badge-text-center-block-button {
    align-items: center;
    display: flex;
    gap: 1rem;
    cursor: pointer;
}

.badge-button {
    color: #ffffff !important;
    box-shadow: 1px 1px 1px var(--shadow-orange-glow);
    display: flex;
    gap: 1rem;
    border-radius: 999px;
    padding: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.badge-button-mini {
    color: var(--shadow-orange-glow) !important;
    box-shadow: 1px 1px 1px var(--shadow-orange-glow);
    display: flex;
    padding: 0.5rem;
    gap: 1rem;
    border-radius: 999px;
    padding: 0rem;
    border: 1px solid transparent;
    cursor: pointer;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.badge-button-w {
    color: var(--color-on-surface);
    box-shadow: 1px 1px 1px var(--shadow-orange-glow);
    display: flex;
    gap: 1rem;
    border-radius: 999px;
    padding: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.badge-text {
    color: var(--color-on-secondary);
    align-self: center;
    font-weight: 500;
}

.badge-button-mini .badge-text {
    font-weight: 800 !important;
}

.badge-button-mini:hover {
    opacity: 70%;
}

.badge-button-mini:hover .badge-icon {
    transform: scale(1.05);
}

.badge-icon-t {
    height: 3rem;
    padding: var(--space-3) var(--space-6);
}

.badge-icon {
    height: 3rem;
    min-width: 3rem;
    width: 3rem;
    padding: 0;
}

.badge-icon>span {
    margin: auto;
}

.black-container {
    background-color: var(--color-on-surface);
    padding-top: 7rem;
    padding-bottom: 10rem;
    margin-bottom: -10rem;
}

.black-inner {
    width: 90%;
    margin: auto;
}


/* --- 5.4 Dropdowns --- */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-secondary);
    border: 1px solid var(--color-border-glow);
    border-radius: var(--radius-full);
    font-weight: 500;
    color: var(--color-on-secondary);
    cursor: pointer;
    transition: all 150ms ease;
}

.dropdown-trigger:hover {
    color: var(--color-primary) !important;
}

.dropdown-trigger .icon {
    margin-left: auto;
    transition: transform 200ms ease;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    padding: var(--space-2);
    background: var(--color-surface-elevated);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    white-space: nowrap;
    z-index: 100;

    /* Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 200ms ease;
}

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

.dropdown:hover .dropdown-trigger .icon {
    transform: rotate(180deg);
}

.dropdown-item {
    display: block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--color-on-surface);
    transition: all 150ms ease;
    cursor: pointer;
}

.dropdown-item:hover {
    background: var(--color-primary-dim);
    color: var(--color-primary);
}

.dropdown-item.selected {
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-dim-20);
}

/* --- 5.5 Icons --- */
.icon {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-feature-settings: 'liga';
    font-size: 1.5rem;
    color: transparent;
    text-shadow: 0 0 0 currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    line-height: 1;
    color: var(--color-on-surface);
}

.icon-sm {
    font-size: 1.25rem;
}

.icon-lg {
    font-size: 2rem;
}

.icon-btn {
    padding: var(--space-1);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 150ms ease;
}

.icon-btn:hover {
    background: var(--color-primary-dim);
    transform: scale(1.1);
    color: var(--color-on-surface);
}

.icon-btn:focus,
.icon-btn:active {
    background: none;
    outline: none;
    box-shadow: none;
    color: var(--color-on-surface);
}

.card-bg-decal {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.card-bg-decal::before {
    content: "";
    position: absolute;
    top: -10rem;
    right: -4rem;
    width: 24rem;
    height: 24rem;

    background-image: var(--bg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    opacity: 0.1;
}

.card-bg-decal-b {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.card-bg-decal-b::before {
    content: "";
    position: absolute;
    bottom: -5rem;
    right: -4rem;
    width: 24rem;
    height: 24rem;

    background-image: var(--bg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    opacity: 0.02;
}

.blank-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blank-ul li {
    margin-top: 1rem;
}

.clickable {
    cursor: pointer;
}

@media (max-width: 768px) {
    .perf-block.active-block {
        grid-template-columns: 1fr;
    }
}

.perf-block.active-block { display: grid; }
.perf-block:not(.active-block) { display: none; }

[id^="ts-block-"] { display: none; }
[id^="ts-block-"].active-block { display: block; }

/* =============================================================================
   5. BORDERS
   ============================================================================= */

.br-top-orange-1 {
    border-top: 1px solid var(--color-primary)
}

/* =============================================================================
   6. EFFECTS
   ============================================================================= */
/* Shadows */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-orange-glow {
    box-shadow: var(--shadow-orange-glow);
}

.blur-decal-sm {
    width: 16rem;
    height: 16rem;
}

.blur-decal-md {
    width: 20rem;
    height: 20rem;
}

.blur-decal-lg {
    width: 24rem;
    height: 24rem;
    opacity: 80%;
}

.blur-decal-ms {
    width: 32rem;
    height: 32rem;
    opacity: 50%;
}

/* Gradients */
.gradient-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, #ffffff 0%, var(--color-surface) 100%);
}

/* Transitions */
.transition {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-slow {
    transition-duration: 300ms;
}

.blur-decal {
        position: absolute;
        border-radius: 50%;
        background: var(--color-primary-dim-20);
        filter: blur(100px);
        pointer-events: none;
        z-index: 0;
    }

/* =============================================================================
   7. TABLE
   ============================================================================= */


.highlight {
    color: var(--color-primary) !important;
    font-weight: 600;
    background-color: transparent;
}

@media (max-width: 768px) {

    .pricing-table th,
    .pricing-table td {
        padding: 16px 12px;
        font-size: 14px;
    }

    .features-header {
        font-size: 14px;
    }

    .blur-decal {
        filter: blur(40px);

        transform: translate3d(0,0,0);
        will-change: transform;

        pointer-events: none;
        z-index: 0;
    }
}

/* Table styling - matches ping tool pattern */
.enterra-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    border: 0px !important;
}


.enterra-table {
    border: none;
}

/* Thick line under headers */
.enterra-table thead th {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    border: 0px solid var(--color-surface-variant);
    border-bottom: 2px solid var(--color-surface-variant);
    text-align: right;
}

/* Very light row dividers */
.enterra-table tbody td {
    padding: 0.45rem 0.75rem;
    border: 0px solid var(--color-surface-variant);
    border-bottom: 1px solid var(--color-surface-variant);
}

.enterra-table tbody tr:last-child td {
    border-bottom: none;
}

/* Sequence column: left-aligned, shrink to content */
.enterra-table th:nth-child(1),
.enterra-table td:nth-child(1) {
    width: 1%;
    white-space: nowrap;
    text-align: left;
}

/* TTL & ms columns: right-aligned, 50% each of remaining space */
.enterra-table th:nth-child(2),
.enterra-table td:nth-child(2),
.enterra-table th:nth-child(3),
.enterra-table td:nth-child(3) {
    width: 50%;
    text-align: right;
}

.enterra-table-container {
    position: relative;
    overflow-x: auto;
}

/* =============================================================================
   7. RESPONSIVE UTILITIES
   ============================================================================= */

.mb-only,
.show-m1,
.show-m2 {
    display: none;
}

@media (max-width: 1300px) {
    .md\:text-8xl {
        font-size: 3.5rem;
        line-height: 1;
    }

    .md\:text-6xl {
        font-size: 3rem;
        line-height: 1;
    }

    .md\:center {
        text-align: center;
        align-self: center !important;
    }

    .w-80r {
        width: 10rem;
    }

    .mb-only {
        display: flex;
    }

    .dk-only {
        display: none;
    }

    .w-s {
        width: 90%
    }

    .w-mb-100 {
        width: 100%;
        max-width: 100%;
    }

    .hide-m1 {
        display: none;
    }

    .show-m1 {
        display: flex;
    }
}

@media (max-width: 768px) {
    .md\:c {
        font-size: 5.5rem;
        line-height: 1;
    }

    .md\:flex-row {
        flex-direction: row;
    }

    .md\:gap-8 {
        gap: var(--space-8);
    }

    .md\:bt-m {
        margin-bottom: var(--space-8);
    }

    .flex-mb {
        flex-direction: column;
    }

    .flex-mb-gap-1 {
        gap: 1rem;
    }

    .mb-full {
        width: 100%
    }

    .mb-mt-16r {
        margin-top: 0rem;
    }

    .p-8 {
        padding: var(--space-4);
    }

    .p-6 {
        padding: var(--space-4);
    }

    .card-glass {
        border-radius: var(--radius-l)
    }

    ;

    .block-recenter {
        margin-left: auto;
        margin-right: auto;
    }

    .hide-m2 {
        display: none;
    }

    .show-m2 {
        display: block;
    }

    .mobile\:max-w-container {
        max-width: 90%;
        width: 1000px;
    }
}

@media (max-width: 767px) {
    .mobile\:text-center {
        text-align: center;
    }

    .mobile\:w-full {
        width: 100%;
    }

    .mobile\:flex-col {
        flex-direction: column;
    }

    .flex-grid {
        display: flex;
        flex-direction: column;
    }
}


/* =============================================================================
   8. PRINT STYLES
   ============================================================================= */

@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: #ffffff;
        color: #000000;
    }
}

/* =============================================================================
   8. CHARTINGS
   ============================================================================= */

/* ===========  GAUGE =========== */

.etm-gauge {
    position: relative;
    width: 180px;
    height: 180px;
    margin: auto;
}

.etm-gauge svg {
    transform: rotate(-90deg);
}

.etm-gauge-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 14;
}

.etm-gauge-progress {
    fill: none;
    stroke-width: 14;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease;
}

.etm-root-color {
    stroke: var(--color-primary);
}

.etm-80-100 {
    stroke: var(--color-primary-light);
}

.etm-60-79 {
    stroke: var(--color-primary-light);
}

.etm-40-59 {
    stroke: var(--color-primary);
}

.etm-0-39 {
    stroke: var(--color-error);
}

.etm-gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 700;
    color: var(--color-on-surface);
    aspect-ratio: 1;
    width: 100%;
    margin: 0 auto;
}

/* =========== BAR =========== */

.ent-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ent-row {
    display: grid;
    grid-template-columns: 120px 1fr 15%;
    align-items: center;
    gap: 12px;
}

.ent-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    white-space: normal;
    overflow: visible;
    line-height: 1.25;
}

.ent-track {
    height: 6px;
    background: var(--color-background-secondary);
    border-radius: 3px;
    overflow: hidden;
}

.ent-bar {
    height: 100%;
    background: var(--color-primary);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.ent-count {
    font-size: 12px;
    color: var(--color-text-tertiary);
    text-align: right;
    font-variant-numeric: tabular-nums;
    width: max-content;
    margin: 0 0 0 auto;
}

/* =========== BAR =========== */

.ent-donut-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ent-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ent-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.ent-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ent-legend-label {
    flex: 1;
    color: var(--color-text-secondary);
}

.ent-legend-val {
    font-weight: 500;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* =========== LIST =========== */

.ent-simple-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ent-simple-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.ent-simple-num {
    color: var(--color-text-tertiary);
    min-width: 18px;
    font-variant-numeric: tabular-nums;
}

.ent-simple-label {
    flex: 1;
    color: var(--color-text-secondary);
}

.ent-simple-pct {
    color: var(--color-text-primary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ===========  Bell =========== */

/* Container for the visual area */
.performance-visual {
    position: relative;
    width: 100%;
    height: 12rem;
    /* h-48 */
    margin-top: 1rem;
}

/* --- Bell Curve Background --- */
.ent-curve-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

/* Create the curve shape using an SVG mask */
.ent-curve-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--color-primary, var(--color-primary)), transparent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 Q50,100 75,40 Q100,0 125,40 Q150,100 200,100 L200,100 L0,100 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 Q50,100 75,40 Q100,0 125,40 Q150,100 200,100 L200,100 L0,100 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Data Points --- */
.ent-point {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.ent-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text, var(--color-on-surface));
    line-height: 1.2;
}

.ent-point .ent-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted, var(--color-on-surface-variant));
    margin-top: 0.25rem;
    width: max-content;
}

/* Positioning */
.ent-point.low {
    bottom: 0.5rem;
    left: 0.5rem;
    text-align: left;
}

.ent-point.avg {
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.ent-point.avg .ent-value {
    font-size: 1.75rem;
    /* Make average larger */
    color: var(--color-primary, var(--color-primary));
}

.ent-point.high {
    bottom: 0.5rem;
    right: 0.5rem;
    text-align: right;
}

/* Color coding for values */
.ent-point.low .ent-value {
    color: var(--color-primary);
}

/* Green */
.ent-point.high .ent-value {
    color: var(--color-on-surface-variant);
}

/* Red */

/* ===========  SCREENSHOTS =========== */

.etm-screenshot-viewer {
    max-width: 900px;
    margin: auto;
}

.etm-screenshot-slider {
    width: 100%;
    margin-top: 16px;
}

.etm-screenshot-meta {
    margin-top: 6px;
    font-size: 14px;
    opacity: 0.7;
}

@media (max-width: 767px) {
    .etm-gauge-center {
        font-size: 28px;
    }
}





@supports (-webkit-touch-callout: none) {
    .card-bg-decal::before {
        transform: translateZ(0);
        /* forces proper rendering */
    }
}

.article-thumb {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
}

.article-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.article-body h4 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.4;
}

.article-body p {
    font-size: 0.9rem;
    color: var(--color-on-surface-variant);
    flex: 1;
}

.article-date {
    font-size: 0.8rem;
    color: var(--color-on-surface-inverse);
}

.article-tag {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-primary);
    letter-spacing: 0.05em;
}


/* =============================================================================
   9. FEATURE CAROUSEL — "What You Get in Every Website Scan" (homepage.php)
   Mouse-drag + 30s autoplay carousel. Without JavaScript the section stays a
   scrollable strip with every card visible/crawlable; the script adds
   .js-carousel to switch it into paged carousel mode with buttons + dots.
   ============================================================================= */

/* Missing utility: hide the scrollbar on the no-JS strip */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.card-carousel {
    --per-view: 1;                 /* cards per view - updated by breakpoints */
    --carousel-gap: var(--space-6);
    --carousel-shadow-space: 2rem; /* gutter inside the viewport so card-glass
                                      shadows are never cropped by overflow */
}

/* ---------- Default (no JS): scrollable strip, all cards visible ---------- */
.card-carousel .carousel-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: var(--carousel-shadow-space) var(--carousel-gap);
    /* top/bottom: 2rem shadow room; sides = the card gap, so the next/previous
       card can never peek into the gutter */
    /* Soft fade on the left/right edges (100% -> 0% over 2rem) so cards blur
       in/out while sliding instead of hard-clipping at the viewport edge */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0,
        #000000 var(--carousel-shadow-space),
        #000000 calc(100% - var(--carousel-shadow-space)),
        transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0,
        #000000 var(--carousel-shadow-space),
        #000000 calc(100% - var(--carousel-shadow-space)),
        transparent 100%);
}
.card-carousel .carousel-track {
    display: flex;
    gap: var(--carousel-gap);
    margin: 0;                     /* override the ul default margin */
    padding: 0;
    list-style: none;
}
.card-carousel .carousel-slide {
    flex: 0 0 auto;
    width: min(88%, 24rem);
    min-width: 0;
    box-sizing: border-box;
}

/* Navigation is hidden until the script switches the section on */
.card-carousel .carousel-nav { display: none; }

/* ---------- JS mode (.js-carousel added by the script) ---------- */
.card-carousel.js-carousel .carousel-viewport {
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;           /* keep vertical page scrolling on touch */
}
.card-carousel.js-carousel .carousel-track {
    flex-wrap: nowrap;
    width: 100%;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.card-carousel.js-carousel .carousel-slide {
    width: calc((100% - (var(--per-view) - 1) * var(--carousel-gap)) / var(--per-view));
}
.card-carousel.js-carousel .carousel-track.is-dragging,
.card-carousel.js-carousel .carousel-track.no-anim {
    transition: none !important;
}
.card-carousel.js-carousel .carousel-track.is-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

/* ---------- Prev / next buttons ---------- */
.card-carousel.js-carousel .carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    margin-top: var(--space-6);
}
.card-carousel .carousel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--color-border-glow);
    border-radius: var(--radius-full);
    background: var(--color-surface-elevated);
    box-shadow: var(--shadow-md);
    color: var(--color-on-surface);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.card-carousel .carousel-btn:hover {
    background-color: var(--color-primary-dim) !important; /* beats global button:hover */
    color: var(--color-primary);
    transform: scale(1.06);
}
.card-carousel .carousel-btn:focus-visible,
.card-carousel .carousel-dot:focus-visible {
    outline: 2px solid var(--color-primary); /* theme removes button outlines globally */
    outline-offset: 2px;
}

/* ---------- Dots ---------- */
.card-carousel .carousel-dots {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.card-carousel .carousel-dot {
    width: 0.65rem;
    height: 0.65rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface-variant);
    transition: width 0.25s ease, background-color 0.25s ease;
}
.card-carousel .carousel-dot:hover {
    background-color: color-mix(in srgb, var(--color-primary) 45%, transparent) !important;
}
.card-carousel .carousel-dot.is-active {
    width: 1.75rem;
    background: var(--color-primary);
}

/* ---------- Cards per view (keep in sync with MAX_PER_VIEW in the JS) ---------- */
@media (min-width: 640px)  { .card-carousel { --per-view: 2; } }
@media (min-width: 1024px) { .card-carousel { --per-view: 3; } }

/* ---------- Reduced motion: no slide animation (drag still snaps) ---------- */
@media (prefers-reduced-motion: reduce) {
    .card-carousel.js-carousel .carousel-track { transition: none; }
}

/* =============================================================================
   MONOCHROME ADAPTATION LAYER
   Only the rules below are EnterraHost-authored. Everything above is the
   Enterramon theme, recolored. Each fix exists because the original assumed
   a white page background and an orange accent.
   ============================================================================= */

html {
    background-color: var(--color-surface);
}

/* Buttons: the FOREGROUND MUST BE PAIRED WITH THE BACKGROUND IT SITS ON.
   ---------------------------------------------------------------------
   This said `color: var(--color-white)` with the note "text must be the page
   color, not a hardcoded white". But `--color-white` is #050505 in the dark
   theme — it is BLACK — while `--color-primary` is #ffffff, so the gradient is
   LIGHT. The button was black-on-light, which reads fine until hover, where the
   rule below sets `background-color: transparent` and leaves BLACK TEXT ON A DARK
   PAGE. That is the "black and black hover" the owner reported, and it hit every
   primary button at once: Choose Pro, Add to cart, Checkout with Payfast.

   The token is not renamed. After the seven dead rules were deleted (see the
   note further down) it has SIX live uses, and they are all correct — each pairs
   the colour with a background in the SAME rule, so the two cannot disagree:

     .header / .mb-dropdown-menu  background-color  (the text colour comes from
                                  the theme's own body tokens, which flip with it)
     .footer                      color AND background-color together
     .footer a / :hover           over that footer background
     .footer-link:hover           the same

   The button was the ONE case where a foreground was set without its ground, and
   that is the whole bug. It now declares what it actually needs — a foreground
   that pairs with ITS OWN gradient — which is the rule the email templates
   already carry: never let a colour depend on a rule surviving a state change.

   `--color-btn-primary-fg` is defined per theme beside the other tokens, so the
   light theme keeps a light button with dark text and the dark theme a light
   button with dark text, deliberately and in both cases legibly. */
.btn-primary {
    color: var(--color-btn-primary-fg);
    border-color: var(--color-border-glow);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    box-shadow: var(--glow);
}

/* HOVER KEEPS A GROUND TO SIT ON. `background-color: transparent` removed the
   button's own background and left the text on whatever was behind it, which is
   the page. A hover state must not do that: it changes the ground, it does not
   delete it. */
.btn-primary:hover {
    color: var(--color-btn-primary-fg);
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    box-shadow: var(--glow-strong);
}

/* Secondary was a hardcoded white gradient: unusable on a dark page. */
.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-on-surface);
    border: 1px solid var(--color-border-glow);
    box-shadow: var(--shadow-md);
}

.btn-secondary:hover {
    color: var(--color-primary);
    background-color: var(--color-secondary-container);
}

.gradient-secondary {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-surface-elevated) 100%);
}

/* Header becomes a glass bar rather than a solid block. */
.header {
    background-color: var(--glass);
    border-bottom: 1px solid var(--color-surface-variant);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* Footer sits on the accent (white) surface in dark mode, so its text
   palette must invert. In light mode the accent is black, so the same
   override works in both directions. */
.footer {
    color: var(--color-white);
    background-color: var(--color-primary);
}

.footer .footer-link,
.footer a {
    color: color-mix(in srgb, var(--color-white) 66%, transparent);
}

.footer .footer-link:hover,
.footer a:hover {
    color: var(--color-white) !important;
}

/* Inputs need a visible edge on both themes (original relied on orange). */
.input {
    border: 1px solid var(--color-surface-variant) !important;
    background: var(--color-surface-elevated) !important;
}

.input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px var(--color-primary-dim);
}

/* Glass surfaces: tokenise so the light theme works too. */
.card-glass {
    background: var(--glass);
    border: 1px solid var(--glass-brd);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.card-glass-orange {
    background: var(--color-surface-elevated);
}

.card-glass-glow {
    border: 5px solid var(--color-primary-dim-20);
}

.card-glass-onblack {
    background: var(--glass);
    border: 1px solid var(--glass-brd);
}

.card {
    background: var(--color-surface-elevated);
    color: var(--color-on-surface);
}

/* Data tables: the originals used hardcoded light grays. */
.enterra-table thead th {
    border-bottom: 2px solid var(--color-on-surface-variant);
}

.enterra-table tbody td {
    border-bottom: 1px solid var(--color-surface-variant);
}

/* Ambient blur decals read as a soft white glow, not an orange haze. */
.blur-decal {
    background: var(--color-primary-dim-20);
}

/* Reduced motion: honor the OS setting. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Print: no chrome, no glass, no color. */
@media print {
    .header, .footer, .mb-dropdown-menu, .blur-decal { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .card, .card-glass, .card-glass-onblack { background: #fff !important; border: 1px solid #ccc !important; }
}

/* =============================================================================
   SUPPLEMENTARY WEBFONT FACES
   Real files for the weights the source theme left to the browser to
   synthesise. Additive only: the three faces declared above are untouched.
   ============================================================================= */

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/PlusJakartaDisplay-Light.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/PlusJakartaDisplay-LightItalic.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/PlusJakartaDisplay-Regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/PlusJakartaDisplay-Medium.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/PlusJakartaDisplay-MediumItalic.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/PlusJakartaText-Bold.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/PlusJakartaText-BoldItalic.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: italic;
    font-weight: 800;
    src: url('../fonts/PlusJakartaDisplay-BoldItalic.woff2') format('woff2');
    font-display: swap;
}