html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    scroll-padding-top: 168px;
}

/* Ensure the base page doesn't try to scroll vertically */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

a {
    color:inherit;
    text-decoration: none;
    margin-bottom:0;
    padding-bottom:0;
}

a:hover {
    color: rgba(255,255,255,0.8);
}


.header-left, .header-right {
    flex: 1; /* These must be identical to force center the logo */
    display: flex;
    align-items: center;
}

.header-right {
    justify-content: flex-end;
    gap: 25px;
}

.header-center {
    flex: 0 0 auto;
    text-align: center;
}

/* This is the magic for horizontal Login/Register */
.auth-wrapper {
    display: flex;
    flex-direction: row !important; 
    gap: 20px;
}

.header-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Keeps the text labels on the same line */
    height: 50px; /* Force a consistent height so the badge doesn't push things */
    text-decoration: none;
    color: inherit;
    min-width: 54px;
    border-radius: var(--radius-sm);
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.header-center h1 {
    font-size: 2rem; /* Smaller for the header */
    margin: 0;
    letter-spacing: 4px;
    white-space: nowrap;
}

.header-center h3 {
    font-size: 0.75rem; /* Much smaller subtitle */
    font-weight: 300;
    margin: 2px 0 0 0;
    opacity: 0.7;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.icon-label {
    font-size: 0.7rem;
    margin-top: 4px;
    color: rgba(255,255,255,0.8);
    transition: color 0.3s ease;
}


/* Cart Icon */
.cart-wrapper {
    position: relative;
    text-decoration: none;
}

.icon-container {
    position: relative;
    /* This ensures the 🛒 emoji stays in place while the badge floats outside the box */
    height: 24px; 
    display: flex;
    align-items: center;
}

.badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background: #ff3b3b; /* Bright red/pink to pop against the glass */
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(255, 59, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
    padding-bottom:1px;
}

.hidden {
    display: none;
}


.main-header h1 {
    font-size: 2rem;
    margin: 0;
    letter-spacing: 4px;
    text-shadow: 0px 4px 10px rgba(0,0,0,0.3);
}

.main-header h3 {
    font-weight: 300;
    opacity: 0.9;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Bokeh Container */
.bokeh-container {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1; /* Keep behind everything */
    background: linear-gradient(45deg, #0d0a2e, #090829, #171742) fixed;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: drift 20s infinite alternate ease-in-out;
}

.orb, .bokeh-container {
    will-change: transform;
    transform: translateZ(0);
}

.orb-1 {
    width: 200px;
    height: 200px;
    background: #748804;
    top: 50%;
    left: 30%;
    animation: drift 22s infinite linear; /* Smooth linear loop */
}

.orb-2 {
    width: 200px;
    height: 200px;
    background: var(--blue);
    bottom: 60%;
    left: 10%;
    animation: drift 35s infinite linear reverse; /* Moves in reverse */
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: #7c2424;
    top: 30%;
    left: 70%;
    animation: drift 28s infinite linear;
}

/* Update the drift animation for 2D movement */
@keyframes drift {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(15vw, 10vh) scale(1.1); }
    50% { transform: translate(-5vw, 20vh) scale(0.9); }
    75% { transform: translate(-15vw, -10vh) scale(1.15); }
    100% { transform: translate(0, 0) scale(1); }
}


.about-wrapper {
    margin: 40px auto 60px auto;
    width: 90%;
    max-width: 850px;
    padding: 50px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
}

.about-title {
    text-align: center; 
    letter-spacing: 4px; 
    margin-bottom: 35px; 
    color: var(--accent);
    text-transform: uppercase; 
    font-size: 1.2rem;
    text-shadow: 0 0 15px rgba(var(--accent-rgb), 0.3);
}

.about-features {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two column list */
    gap: 20px;
}

.about-features li {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.about-features li span i {
    color: var(--accent);
    font-size: 1.1rem;
    margin-top: 3px;
}

.mission-statement {
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
    margin-top: 40px;
    font-style: italic;
    opacity: 0.9;
}

.compatibility-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.compatibility-footer span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.3);
}

.brand-badges {
    display: flex;
    gap: 15px;
}

.badge-tag {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
}

/* Mobile fix for the list */
@media (max-width: 768px) {
    .about-features {
        grid-template-columns: 1fr;
    }
}

/* Update the wrapper to be the reference point */
.page-wrapper {
    position: relative; /* This is the anchor for the absolute buttons */
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100vw;
    z-index: 10;
}

.page-wrapper::before,
.page-wrapper::after {
    content: "";
    position: fixed;
    top: 0;
    width: 15vw;
    height: 100vh;
    z-index: 15;
    pointer-events: none;
}

.page-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(10, 10, 20, 1), transparent);
}

.page-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(10, 10, 20, 1), transparent);
}

.carousel-viewport {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel-viewport::-webkit-scrollbar {
    display: none;
}

/* Create invisible spacers on both sides */
.carousel-track::before,
.carousel-track::after {
    content: "";
    flex: 0 0 calc(50vw - 225px); /* 225px = half of 450px card width */
}


.product-info {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.product-footer {
    flex: 0 0 auto;
    margin-top: auto;
    margin-bottom: 30px; /* As requested: last element margin */
}

/* Ensure the button inside the form is the final element */
.product-footer form button {
    margin-bottom: 0; 
}

.product-card-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-card-actions form {
    width: 100%;
    margin: 0;
}

.product-card-actions .glass-button,
.product-detail-link {
    width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

/* This is a CSS trick: when a window is centered (snapped), 
   it can be targeted. Since pure CSS can't detect 'snapped' easily 
   without JS, we'll use a simple hover for now or 
   I can give you the Intersection Observer JS if you're ready for it! */
.product-window:hover {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
    animation: none !important;
} 

.product-window.centered {
    opacity: 1;
    transform: scale(1.01); 
    filter: drop-shadow(0 0 25px rgba(var(--accent-rgb), 0.35)) 
            drop-shadow(0 0 45px rgba(var(--blue-rgb), 0.25)); 
}

.carousel-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    /* Use 'calc' to ensure they stay away from the screen edges */
    padding: 0 5vw; 
    z-index: 5000; /* Bump this up to be higher than product-window */
    pointer-events: none;
    width: 100%;
    box-sizing: border-box; /* Crucial to keep padding inside the width */
}

.control-btn {
    pointer-events: auto;
    background: transparent;
    border: none;
    color: var(--accent); /* Giving it your brand cyan for visibility */
    font-size: 3.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 10px rgba(var(--accent-rgb), 0.5);
    opacity: 0.7;
}

.control-btn:hover {
    opacity: 1;
    transform: scale(1.2);
    color: white;
}
/* Floating Navigation */
.carousel-navigation {
    position: relative; /* Changing from 'fixed' to 'relative' */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 0; /* Creates space below the carousel */
    margin-bottom: 30px;
    z-index: 100;
    width: 100%;
}

/* Ensure the dots themselves still look the same */
.nav-dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-dot.active {
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    transform: scale(1.3);
}

.nav-dot:hover {
    background: var(--accent);
    box-shadow: 0 0 15px var(--accent);
}

.glass-container {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    width: 600px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    text-align: center;
}

.glass-container h1 {
    margin-bottom: 0px;
    font-size: 1.8em;
}

.glass-container p {
    margin-top: 2px;
}

.glass-container hr {
    background-color: #584e70;
    margin-top: 0;
    padding: 0;
    height: 2px;
    border: none;
}

.glass-input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: white;
    outline: none;
}

/* Bullet List */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 25px 0;
    text-align: left; /* Easier to read for lists */
    display: inline-block; /* Keeps the list centered relative to the container */
}

.feature-list li {
    margin-bottom: 12px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.9);
}

.feature-list li span {
    color: var(--accent); /* Matching your cyan orb */
    font-weight: bold;
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
}

/* Dropdown Container */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    cursor: pointer;
}

/* Hidden by default */
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    /* Remove the 'margin-top' and set 'top' to 100% or a specific pixel height */
    top: 100%; 
    padding-top: 10px; /* Use padding instead of margin to keep the "bridge" active */
    min-width: 160px;
    z-index: 1001;
}

/* Add this to create the visual menu inside the padded container */
.glass-dropdown {
    /* Increased opacity from 0.08 to 0.15 for a more solid feel */
    background: rgba(34, 34, 77, 0.9); 
    backdrop-filter: blur(25px); /* Increased blur to make it less transparent */
    -webkit-backdrop-filter: blur(25px);
    
    /* Matching the border to the purple/blue theme */
    border: 1px solid rgba(var(--blue-rgb), 0.3); 
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    padding-bottom: 10px;
    margin-top: 0; /* Adds a tiny gap if preferred, or keep at 0 */
}

.glass-dropdown .icon-container {
    justify-content: left;
    display: table-row
}

.glass-dropdown .icon-label {
    text-align: left;
}

/* Show the dropdown on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Dropdown Links */
.user-greeting {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.85rem;
    transition: background 0.2s;
}

/* --- UPDATED DESKTOP DROPDOWN LINKS --- */
.dropdown-content a {
    color: #e0e0e0;
    padding: 12px 20px;
    text-decoration: none;
    display: flex;          /* Changed from block to flex */
    align-items: center;    /* Vertically center icon and text */
    gap: 12px;              /* Space between icon and text */
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

/* Ensure icons inside the dropdown don't use the column-based header-icon style */
.dropdown-content .icon-container {
    height: auto;
    width: 20px;           /* Fixed width keeps text aligned vertically */
    display: flex;
    justify-content: center;
}

.dropdown-content .icon-label {
    margin-top: 0;         /* Remove the top margin used in the header */
}

/* Hover state using the cyan color from your third orb */
.dropdown-content a:hover {
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
    padding-left: 25px; /* Subtle slide effect on hover */
}

.user-greeting {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 600;
    color: var(--blue); /* Purple matching orb-2 */
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/** LOGIN **/
/* Ensure the wrapper takes up the full width and centers content */
.auth-page {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    width: 100vw;            /* Full viewport width */
    min-height: calc(100vh - 100px); /* Full height minus header */
    padding: 0;
    margin: 0;
}

/* Ensure the container itself doesn't have weird margins */
.auth-container {
    width: 95%; /* Responsive padding */
    max-width: 600px; /* Increased from 450px */
    margin: 0 auto;
    padding: 40px;
    box-sizing: border-box;
}

/* Force the headers to take up the full width so they center properly */
.auth-section h2 {
    grid-column: span 2; /* If inside the grid */
    text-align: center;  /* Centers the text within the container */
    margin-bottom: 20px;
    width: 100%;
}

.auth-section .input-group {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.auth-tabs {
    display: flex;
    justify-content: center;
    gap: 0; /* Remove gap if we want them to meet in the middle */
    margin-bottom: 0; /* We'll handle spacing with the rule */
    width: 100%;
}

.tab-btn {
    flex: 1; /* Each tab takes up 50% of the width */
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    padding: 10px 0;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1); /* The default "rule" */
}

.tab-btn.active {
    color: var(--accent);
    background: linear-gradient(to top, rgba(var(--accent-rgb), 0.05), transparent);
}

.tab-btn:hover:not(.active) {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.02);
}

/* Optional: Add a dedicated margin to the section below the rule */
.auth-section {
    padding-top: 10px;
}

.hidden {
    display: none;
}

/* Style the boxes themselves */
.input-group input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0; /* Slightly larger padding since there are no labels */
    border-radius: var(--radius-sm);
    color: white;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
}

/* Subtle glow on focus */
.input-group input:focus {
    border-color: rgba(99, 156, 240, 0.04);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 15px rgba(99, 156, 240, 0.822);
}

/* Style the placeholder text specifically */
.input-group input::placeholder {
    color: rgba(255, 255, 255, 0.3); /* Faded white */
    font-weight: 300;
}

/* If the user types a wrong format, give the box a subtle red warning */
.input-group input:not(:placeholder-shown):invalid {
    border-color: #ff4b4b;
    box-shadow: 0 0 10px rgba(255, 75, 75, 0.2);
}

/* If the email or phone matches the pattern, give it a soft green/cyan glow */
.input-group input:not(:placeholder-shown):valid {
    border-color: var(--accent);
}

/* 2. The "Tone Down" Autofill fix */
/* This stops Chrome/Edge from turning the box white when you select saved data */
.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover, 
.input-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0px 1000px rgba(20, 20, 45, 1) inset; /* Matches your dark theme */
    transition: background-color 5000s ease-in-out 0s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 3. Handle 'Valid' data state */
/* If you want a subtle hint that the field is filled, use a dim border instead of white */
.input-group input:not(:placeholder-shown):not(:focus) {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Styling the Select Box */
/* 1. Universal Select Styling */
.input-group select {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    background-color: rgba(255, 255, 255, 0.05) !important; /* Force background */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: white;
    font-size: 0.95rem;
    box-sizing: border-box;
    cursor: pointer;
    
    /* REMOVE ALL BROWSER DEFAULTS */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    /* RE-APPLY ARROW FOR ALL STATES */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2368e0cf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 14px !important;
}

/* Adjust the SVG background position if needed now that height is fixed */
/* Hover/Focus Glow */
.input-group select:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.1);
}

/* Style the actual list options for dark mode */
.input-group select option {
    background-color: #1a1a2e; /* Match your darkest background color */
    color: white;
}

/* Hover & Focus states */
.input-group select:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.1);
}

.input-group select option {
    background-color: #1a1a2e; /* Match your darkest theme color */
    color: white;
    padding: 10px;
}

/* 3. Placeholder Styling */
/* This makes the "Select Country" look like a dimmed placeholder */
.input-group select:invalid,
.input-group select option[value=""] {
    color: rgba(255, 255, 255, 0.3);
}

/* 1. The most important fix for uneven margins */
.auth-container, .auth-container * {
    box-sizing: border-box; 
}

/* 2. Fix the overlap by ensuring the grid handles the button sizing */
.auth-section .full {
    grid-column: span 2;
    width: 100%; /* Ensures it fills the 2-column span */
    margin: 0;   /* Let the grid gap handle the spacing */
}

/* 3. Tighten the form-grid to prevent overflow */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
    padding: 0;
}

/* 4. Ensure inputs don't 'poke out' of their boxes */
.input-group input {
    width: 100%;
    display: block;
}

.auth-subtitle {
    text-align: center; 
    color: rgba(255,255,255,0.5); 
    font-size: 0.9rem;
    margin-bottom: 25px;
    padding: 0 10px;
}

/* Ensure the footer spans both columns of the grid */
.form-footer.left-align {
    grid-column: span 2;      /* Takes up the full width of the form */
    display: flex;            /* Enables flex alignment */
    justify-content: flex-start; /* Forces content to the LEFT */
    padding-left: 0;          /* Removes any accidental padding */
    margin-top: 15px;
    width: 100%;
}

/* Ensure the link itself isn't centered by a parent text-align */
.form-footer.helper-link {
    text-align: left;
    display: inline-block;
}

.helper-link i {
    font-size: 0.7rem;
    margin-right: 5px;
}

.helper-link:hover i {
    transform: translateX(-3px); /* Subtle arrow nudge */
}


/** PRODUCT DETAIL **/
.product-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.product-breadcrumb a {
    color: var(--accent);
}

.product-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.9fr);
    gap: 24px;
    width: 100%;
}

.product-hero-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.product-hero-card,
.product-purchase-card {
    position: relative;
    overflow: hidden;
}

.product-hero-card::before,
.product-purchase-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--product-accent, var(--accent));
}

.product-detail-page .product-eyebrow {
    color: var(--product-accent, var(--accent-warm));
}

.product-hero-card,
.product-purchase-card,
.product-detail-panel,
.product-requirements-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.product-hero-card,
.product-purchase-card,
.product-detail-panel {
    text-align: left;
}

.product-eyebrow,
.product-section-label {
    margin: 0 0 10px 0;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
}

.product-hero-title {
    margin: 0;
    font-size: clamp(2.4rem, 4vw, 4.2rem);
    line-height: 1;
}

.product-hero-tagline {
    margin: 16px 0 10px 0;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.92);
}

.product-hero-summary,
.product-detail-panel p,
.product-purchase-note {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
}

.product-hero-summary > p {
    margin: 12px 0 0 0;
}

.product-hero-summary .product-summary-section {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--product-accent, var(--accent));
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.product-hero-summary .product-summary-section strong {
    font-weight: 700;
}

.product-hero-summary > p.product-summary-section:first-child,
.product-hero-summary .product-summary-section:first-child {
    margin-top: 22px;
}

.product-hero-summary .product-bullet-list {
    gap: 8px;
    margin-top: 10px;
}

.product-hero-summary .product-summary-footnote {
    margin-top: 16px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.62);
}

.product-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.product-meta-chip {
    padding: 10px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
}

.product-price {
    margin: 12px 0 18px 0;
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent);
    text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.18);
}

.product-pricing-options {
    display: grid;
    gap: 14px;
    margin: 22px 0 0;
}

.product-pricing-option {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
    padding: 0 16px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
}

.product-pricing-option.is-best-value {
    border-color: rgba(var(--accent-rgb), 0.38);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.09), rgba(255, 255, 255, 0.035));
}

.best-value-ribbon {
    position: absolute;
    top: 13px;
    right: -40px;
    width: 150px;
    padding: 5px 0;
    transform: rotate(35deg);
    background: linear-gradient(135deg, var(--gold), var(--accent-warm));
    color: #07131f;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0 10px 26px rgba(var(--gold-rgb), 0.35);
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.best-value-ribbon::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 45%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    animation: bestValueSweep 2.8s ease-in-out infinite;
}

@keyframes bestValueSweep {
    0% {
        left: -75%;
    }
    45%, 100% {
        left: 125%;
    }
}

.product-pricing-option-header {
    margin: 0 -16px;
    padding: 18px 52px 16px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.28), rgba(123, 231, 215, 0.16));
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}

.product-pricing-option h3 {
    margin: 0;
    color: #fff;
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-pricing-option-note {
    margin: 0;
    color: rgba(226, 237, 246, 0.72);
    font-size: 0.86rem;
    line-height: 1.45;
    text-align: center;
}

.product-pricing-option-price {
    text-align: center;
    min-width: 0;
}

.product-pricing-option-price strong {
    display: block;
    color: var(--system-cyan, #39c9ff);
    font-size: 1.18rem;
}

.product-pricing-option-price small {
    color: rgba(226, 237, 246, 0.62);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.66rem;
}

.product-pricing-option .glass-button {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 1 / -1;
    width: 100%;
    min-height: 52px;
    margin-top: 0;
    padding: 12px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

.product-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-actions form {
    margin: 0;
}

.product-back-link {
    text-align: center;
    margin-top: 6px;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.7);
}

.product-gallery-topline {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end;
    text-align: left;
    margin-bottom: 24px;
}

.product-gallery-topline h2,
.product-detail-panel h2,
.product-purchase-card h2 {
    margin: 0;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    width: 100%;
}

.product-rich-copy p,
.product-rich-copy ul,
.product-rich-copy li {
    text-align: left;
}

.product-rich-copy ul {
    padding-left: 20px;
}

.product-bullet-list {
    list-style: none;
    padding: 0;
    margin: 18px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-bullet-list li {
    position: relative;
    padding-left: 18px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.product-bullet-list li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55);
}

.product-hero-summary .product-bullet-list li::before {
    background: var(--product-accent, var(--accent));
    box-shadow: 0 0 12px color-mix(in srgb, var(--product-accent, var(--accent)) 55%, transparent);
}

.product-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.product-feature-row {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(280px, 0.86fr) minmax(360px, 1.14fr);
    align-items: center;
    gap: clamp(24px, 4vw, 54px);
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--product-accent, var(--accent)) 16%, transparent), transparent 34%),
        rgba(255, 255, 255, 0.025);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.product-feature-row:nth-child(even) {
    grid-template-columns: minmax(360px, 1.14fr) minmax(280px, 0.86fr);
}

.product-feature-row:nth-child(even) .product-feature-copy {
    order: 2;
}

.product-feature-row:nth-child(even) .product-feature-visual {
    order: 1;
}

.product-feature-index {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--product-accent, var(--accent));
    font-variant-numeric: tabular-nums;
}

.product-feature-copy h3 {
    margin: 0;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 2.3rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.product-feature-copy p {
    margin: 14px 0 0;
    max-width: 58ch;
    color: var(--ink-soft);
    line-height: 1.7;
}

.product-feature-visual {
    min-height: 260px;
    display: grid;
    place-items: center;
}

.product-feature-row .product-spotlight-mock {
    width: 100%;
    max-width: 420px;
}

.product-feature-visual img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.product-bottom-cta {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.product-bottom-cta .product-section-label {
    color: var(--product-accent, var(--accent));
}

.product-bottom-cta h2 {
    margin: 0;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    letter-spacing: -0.02em;
}


/** CART **/
.cart-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 120px; /* Space for the fixed header */
}

.cart-main {
    width: 90%;
    max-width: 800px;
    padding: 40px;
}

.account-hero,
.account-empty,
.account-card {
    width: 100%;
    box-sizing: border-box;
}

.account-wrapper .glass-container {
    width: 100%;
    max-width: none;
    margin: 0;
}

.account-card h2 {
    margin-bottom: 10px;
    padding-bottom: 0;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 0px;
}

.account-platform-note {
    margin: 12px 0 0 0;
    opacity: 0.82;
}

.account-primary-download {
    margin-top: 0;
}

.account-alt-downloads {
    margin-top: 14px;
    text-align: left;
}

.account-alt-label {
    display: block;
    margin-bottom: 0px;
    font-size: 0.85rem;
    opacity: 0.7;
    text-align:center;
}

.account-download-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.58;
    cursor: not-allowed;
    pointer-events: none;
    background: rgba(65, 15, 15, 0.479);
}

.cart-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.item-info h3 { margin: 0; color: #fff; }
.item-info p { margin: 5px 0 0; font-size: 0.8rem; color: rgba(255,255,255,0.5); }


/* Column Width Definitions */
.col-item { flex: 2; text-align: left; }     /* Takes most space */
.col-price { flex: 0 0 100px; text-align: center; font-weight: bold; }
.col-action { flex: 0 0 50px; text-align: right; }

/* The Header Row */
.cart-header-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
}

.cart-row {
    display: flex;
    align-items: center;
    padding: 25px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* The Trash Can Styling */
.remove-icon-btn {
    color: rgba(255, 59, 59, 0.5);
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.remove-icon-btn:hover {
    color: #ff3b3b;
    transform: scale(1.2);
}

.cart-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Keeps the 'Clear' link bottom-aligned with the button */
    margin-top: 40px;
}

.footer-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Aligns price and button to the right edge */
    gap: 15px;
}

.total-display {
    text-align:right;
}

.total-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    display: block;
    margin-bottom: 5px;
}

.total-price {
    font-size: 2rem;
    color: var(--accent);
    font-weight: bold;
    display: block;
}

.checkout-btn {
    display: inline-flex; /* Allows for icon alignment */
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none; /* Removes the underline */
    width: auto;
    min-width: 180px;
    margin-top: 15px;
    padding: 13px 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
    align-self: flex-end;
    font-size: 0.88rem;
    min-height: 44px;
}

.clear-cart-link {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.clear-cart-link:hover {
    color: #ff3b3b; /* Turns red when you really mean it */
}

.clear-cart-link i {
    margin-right: 8px;
}

.empty-state p {
    padding: 12px 0px;
}

/* Checkout Flow */
.checkout-page {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 120px 0; /* Ensures the fixed header doesn't cover the title */
}

.checkout-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Summary slightly narrower than form */
    gap: 0;
    width: 90%;
    max-width: 1000px;
    padding: 0; /* Remove padding to let the halves divide the space */
    overflow: hidden;
}

.checkout-summary, .checkout-form-section {
    padding: 50px;
}

/* Add a subtle divider between the two halves */
.checkout-summary {
    background: rgba(255, 255, 255, 0.03);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    color: rgba(255,255,255,0.7);
}

.summary-total {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    font-size: 1.4rem;
    font-weight: bold;
}

/* Input Styling */
.input-group {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
}

.input-group label {
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--accent);
}

.input-group input,
.input-group textarea {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    color: white;
    outline: none;
}

.input-group textarea {
    resize: vertical;
    min-height: 120px;
    font: inherit;
}

.input-group input:focus,
.input-group textarea:focus {
    border-color: var(--accent);
}

@media (max-width: 1200px) {
    .glass-container {
        width: 450px;
        padding: 30px;
    }

    .account-wrapper .glass-container {
        width: 100%;
    }
}

/* Mobile Optimization (Screens smaller than 768px) */
@media (max-width: 768px) {
    body {
        margin: 30;
        padding: 60px 10px 0 10px;
    }


    .main-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        height: 80px;
    }

    /* Left: Toggle */
    .mobile-menu-toggle {
        text-align: left;
    }

    /* Center: Logo */
    .header-center {
        flex: 2;
        text-align: center;
    }
    .header-center h1 { font-size: 1.2rem; letter-spacing: 2px; }
    .header-center h3 { display: none; } /* Hide subtitle on small screens */

    /* Update these in the main section of style.css (Desktop mode) */
    .header-right {
        display: flex;
        flex: 1;
        justify-content: flex-end;
        align-items: center; /* Changed from flex-end to center */
        gap: 30px;
    }

    /* Ensure the auth buttons wrapper also stays horizontal */
    .auth-buttons {
        display: flex;
        gap: 20px;
        align-items: center;
    }

    .header-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto; /* Allow content to dictate height */
        min-width: 60px;
    }

    .dropdown .account-info {
        display: table;
        text-align: center;
        margin-bottom: 30px;
    }

    .dropdown .account-info .icon-container {
        justify-content: center;
    }

    .glass-dropdown {
        border: 0px;
    }

    .glass-dropdown .icon-container {
        justify-content: center;
    }

    /* Ensure icons and labels don't wrap onto new lines */
    .icon-label {
        white-space: nowrap;
    }

    /* Only show the Cart icon in the header bar */
    .nav-links-container {
        display: none; /* Hidden by default */
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background: rgba(15, 12, 41, 0.98);
        flex-direction: column;

        align-items: center;
        padding: 20px 0;
        border-bottom: 1px solid var(--accent);
        z-index: 1000;
    }

    /* When menu is toggled open */
    #nav-menu.mobile-active .nav-links-container {
        display: flex;
    }

    /* Style the dropdown links for mobile */
    .nav-links-container a, 
    .nav-links-container .dropdown {
        width: 100%;
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    /* Ensure dropdown content (Dashboard/Logout) is visible */
    .nav-links-container .dropdown-content {
        display: block; 
        position: static;
        background: none;
        box-shadow: none;
        padding: 0 20px;   /* Indent the sub-menu items */
    }

    .nav-links-container .dropdown-content a {
        justify-content: flex-start; /* Align icon/text to the left */
        width: 100%;
        border-bottom: none;         /* Remove extra lines inside the dropdown */
        padding: 12px 0;
    }

    /* Force the Dashboard/Logout text to be visible on mobile */
    .nav-links-container .dropdown-content .icon-label {
        display: inline-block !important;
    }

    /* Hide the 'Cart' text label to keep header clean */
    .cart-wrapper .icon-label {
        display: none;
    }


    .about-wrapper {
        padding: 60px 20px;
        margin: 20px 0;
        width: 90%;
        box-sizing: border-box;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    .about-content {
        padding: 0 10px;
    }

    .header-center h1 { font-size: 1.5rem; }
    .header-center h3 { font-size: 0.8rem; }
    
    
    /* 3. Scale down the Bokeh Orbs (Prevents lag on mobile GPUs) */
    .orb {
        width: 200px;
        height: 200px;
        filter: blur(50px);
    }

    /* 4. Form Adjustments */
    .form-grid {
        grid-template-columns: 1fr !important; /* Force single column for inputs */
    }

    .product-window.centered {
        transform: scale(1.01);
    }

    .product-detail-page {
        width: min(100%, calc(100% - 20px));
        margin: 20px auto 48px auto;
        gap: 18px;
    }

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

    .product-hero-grid {
        grid-template-columns: 1fr;
    }

    .product-gallery-topline {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-detail-grid {
        grid-template-columns: 1fr;
    }
    
    .glass-container {
        padding: 20px;
        width: 300px;
    }

    .account-wrapper {
        width: min(100%, calc(100% - 20px));
        margin: 20px auto 48px auto;
        gap: 16px;
    }

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

    .account-wrapper .glass-container {
        width: 100%;
    }
}



@media (pointer: coarse) {
    .header-icon, .glass-button, .tab-btn {
        min-height: 44px; /* Apple/Google recommended minimum touch size */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .dropdown-content a {
        padding: 15px 20px; /* Thicker links in the dropdown for easier tapping */
    }
}

/* Modern storefront refresh */
:root {
    /* Core surfaces and glass panels */
    --glass-bg: rgba(16, 22, 35, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --surface-1: rgba(12, 18, 31, 0.72);
    --surface-2: rgba(20, 28, 43, 0.88);
    --surface-3: rgba(255, 255, 255, 0.04);
    --site-bg-deep: #05080d;
    --site-bg: #08111d;
    --panel-deep: rgba(8, 13, 22, 0.92);
    --panel-mid: rgba(13, 21, 34, 0.86);
    --panel-soft: rgba(255, 255, 255, 0.045);

    /* Text */
    --text-color: #f4f7fb;
    --ink-soft: rgba(var(--ink-rgb), 0.72);
    --ink-muted: rgba(var(--ink-rgb), 0.5);
    --faint: rgba(var(--ink-rgb), 0.52);

    /* Borders and lines */
    --line: rgba(255, 255, 255, 0.11);
    --line-soft: rgba(255, 255, 255, 0.09);
    --line-bright: rgba(108, 232, 211, 0.22);

    /* Brand accents */
    --accent: #68e0cf;
    --accent-strong: #20c997;
    --accent-warm: #ffb36b;
    --blue: #1f6feb;
    --gold: #d28b26;
    --teal: #32d1b6;
    --danger: #ff5c5c;
    --cratetag: #3b7dff;
    --crateclean: #16d97b;
    --cratedupe: #ff4fd1;

    /* RGB triplets for the same accents, for rgba(var(--x-rgb), alpha) use */
    --accent-rgb: 104, 224, 207;
    --accent-strong-rgb: 32, 201, 151;
    --accent-warm-rgb: 255, 179, 107;
    --blue-rgb: 31, 111, 235;
    --gold-rgb: 210, 139, 38;
    --teal-rgb: 50, 209, 182;
    --cratetag-rgb: 59, 125, 255;
    --crateclean-rgb: 22, 217, 123;
    --cratedupe-rgb: 255, 79, 209;
    --ink-rgb: 244, 247, 251;

    /* Radius scale */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-pill: 999px;

    /* Spacing scale */
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 20px;
    --space-5: 24px;
    --space-6: 28px;

    /* Shadows */
    --shadow-deep: 0 22px 54px rgba(0, 0, 0, 0.34);
}

.header-center h1,
.main-header h1,
.storefront-title,
.product-hero-title,
.storefront-products-head h2,
.product-card-title {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
}

.header-center h1 {
    font-size: 1.5rem;
    letter-spacing: 0.18em;
}

.header-center h3 {
    margin-top: 6px;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    color: var(--ink-muted);
}

.icon-label,
.dropdown-content a,
.user-greeting {
    color: var(--ink-soft);
}

.badge {
    background: linear-gradient(135deg, var(--accent-strong), var(--accent));
    color: #07131f;
    box-shadow: 0 10px 22px rgba(var(--accent-strong-rgb), 0.35);
    border: none;
}

.bokeh-container {
    background:
        radial-gradient(circle at 18% 18%, rgba(var(--accent-warm-rgb), 0.1), transparent 20%),
        radial-gradient(circle at 82% 22%, rgba(var(--accent-rgb), 0.1), transparent 18%),
        linear-gradient(180deg, #07111d 0%, #0d1725 45%, #111b29 100%) fixed;
}

.orb {
    filter: blur(100px);
    opacity: 0.35;
}

.orb-1 {
    background: #f0a868;
}

.orb-2 {
    background: #3dc4c4;
}

.orb-3 {
    background: #205072;
}

.glass-container {
    background: linear-gradient(180deg, rgba(18, 26, 40, 0.9), rgba(11, 17, 27, 0.82));
    border: 1px solid var(--line-soft);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
    border-radius: var(--radius-xl);
}

.glass-button:hover {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.68), rgba(var(--blue-rgb), 0.56));
    border-color: rgba(var(--accent-rgb), 0.5);
    color: #ffffff;
    transform: translateY(-2px);
}

.glass-button.alt:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.content-frame {
    width: min(1240px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* body is a flex column, and its page-wrapper children are themselves
   flex/grid containers - flex/grid items default to min-width: auto,
   which refuses to shrink below the content's intrinsic width instead of
   respecting the parent's actual width. Without this, narrow viewports
   silently overflow (clipped by body's overflow-x: hidden) rather than
   wrapping. */
.storefront-page,
.sportscue-page,
.public-page,
.product-detail-page,
.account-wrapper,
.cart-shell,
.page-wrapper,
.auth-portal,
.storefront-page > *,
.sportscue-page > *,
.public-page > *,
.product-detail-page > *,
.account-wrapper > *,
.cart-shell > *,
.page-wrapper > *,
.auth-portal > * {
    min-width: 0;
}

.content-frame.narrow {
    width: min(1120px, calc(100% - 40px));
}

.storefront-page {
    width: 100%;
    margin: 28px auto 84px auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.storefront-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
    gap: 24px;
    align-items: stretch;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
}

.storefront-hero-panel,
.storefront-compatibility,
.storefront-products-head {
    background: linear-gradient(180deg, rgba(17, 24, 38, 0.88), rgba(10, 15, 25, 0.86));
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
}

.storefront-hero-copy {
    padding: 42px;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.storefront-hero-copy::after {
    content: none;
    position: absolute;
    inset: auto -60px -60px auto;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(var(--accent-warm-rgb), 0.16), transparent 68%);
    pointer-events: none;
}

.storefront-kicker,
.product-eyebrow,
.product-section-label,
.compatibility-label {
    margin: 0 0 14px 0;
    color: var(--accent-warm);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.storefront-title {
    margin: 0;
    max-width: 12ch;
    font-size: clamp(3.35rem, 6.8vw, 7.25rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
}

h1 span {
    background: linear-gradient(100deg, var(--blue), var(--gold) 78%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.storefront-intro {
    max-width: 640px;
    margin: 22px 0 0 0;
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--ink-soft);
}

.storefront-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 34px;
}

.storefront-stat {
    padding: 18px 18px 16px 18px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.storefront-stat strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
}

.storefront-stat span {
    color: var(--ink-muted);
    font-size: 0.88rem;
}

.storefront-hero-panel {
    padding: 18px;
}

.hero-panel-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
        rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.storefront-mini-label {
    margin: 0 0 20px 0;
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.storefront-feature-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.storefront-feature-grid li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.storefront-feature-grid li span {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
}

.storefront-feature-grid strong {
    display: block;
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.storefront-feature-grid p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--ink-soft);
}

.storefront-compatibility,
.storefront-products-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 22px 26px;
}

.compatibility-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.brand-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.badge-tag {
    border-radius: var(--radius-pill);
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #f3f6fa !important;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.storefront-products-head h2 {
    margin: 0;
    font-size: clamp(1.9rem, 3vw, 3rem);
    letter-spacing: -0.03em;
}

.storefront-products-note {
    max-width: 480px;
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.8;
}

.rec {
    background: linear-gradient(135deg, rgba(var(--blue-rgb), 0.10), rgba(var(--gold-rgb), 0.08));
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 28px 30px;
    margin-bottom: 56px;
}

.rec h2,
.rec h3 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 10px;
    color: var(--teal);
}

.rec p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.75;
}

.section-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 20px;
}

.next {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.next .step {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 18px 18px 20px;
}

.next .step .k {
    font-family: "SFMono-Regular", "Consolas", monospace;
    font-size: 11px;
    color: var(--faint);
    letter-spacing: 0.08em;
}

.mono {
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
    font-variant-numeric: tabular-nums;
}

.next .step p {
    margin: 8px 0 0;
    font-size: 13.5px;
    color: var(--muted, var(--ink-muted));
}

.product-bento-grid {
    position: relative;
}

.product-spotlight-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.product-spotlight-topline h2,
.sportscue-section-head h2,
.sportscue-rec h2 {
    margin: 0;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
}

.sportscue-nav a {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink-soft);
}

.sportscue-nav a:hover {
    color: #ffffff;
    border-color: rgba(var(--accent-rgb), 0.35);
}

.product-bento-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.product-bento-tile {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-4);
    overflow: hidden;
    box-sizing: border-box;
    flex: 1 1 240px;
    min-width: 240px;
    max-width: 460px;
}

.product-bento-tile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--tile-accent, var(--accent));
}

.product-bento-tile.featured {
    flex: 1 1 100%;
    min-width: 100%;
    max-width: none;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6);
}

.bento-tile-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.bento-tile-head .section-label {
    margin: 0;
    color: var(--tile-accent, var(--faint));
}

.bento-tile-index {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.product-spotlight-visual {
    display: grid;
    place-items: center;
    min-height: 150px;
}

.product-spotlight-photo {
    display: block;
    width: 100%;
    max-height: 330px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.product-spotlight-mock {
    width: min(390px, 84%);
    padding: 18px;
    border-radius: var(--radius-lg);
    background: rgba(7, 12, 20, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}

.mock-topbar {
    display: flex;
    gap: 7px;
    margin-bottom: 16px;
}

.mock-topbar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--teal);
}

.mock-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.mock-grid span {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-warm-rgb), 0.14));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mock-meter,
.sportscue-meter {
    height: 8px;
    margin-top: 18px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.mock-meter span,
.sportscue-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue), var(--teal), var(--gold));
}

.product-spotlight-title {
    margin: 0;
    line-height: 1.08;
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
}

.product-bento-tile.featured .product-spotlight-title {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
}

.product-bento-tile:not(.featured) .product-spotlight-title {
    font-size: 1.15rem;
}

.product-spotlight-title > span {
    display: block;
    margin-top: 6px;
    color: var(--ink-soft);
    font-size: 0.48em;
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    font-weight: 700;
}

.product-bento-tile:not(.featured) .product-spotlight-title > span {
    display: none;
}

.product-bento-tile:not(.featured) .product-spotlight-title > .cratetag-name {
    display: inline;
}

.product-spotlight-copy p:not(.section-label),
.sportscue-tagline,
.sportscue-intro {
    color: var(--ink-soft);
    line-height: 1.75;
}

.product-bento-tile:not(.featured) .product-spotlight-copy p:not(.section-label) {
    font-size: 0.84rem;
    line-height: 1.55;
}

.bento-spotlight-bullets {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.bento-spotlight-bullets li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.4;
}

.bento-spotlight-bullets li i {
    color: var(--tile-accent, var(--accent));
    font-size: 0.7rem;
}

.product-bento-tile.featured .bento-spotlight-bullets {
    gap: 8px;
}

.product-bento-tile.featured .bento-spotlight-bullets li {
    font-size: 0.9rem;
}

.product-bento-tile:not(.featured) .bento-spotlight-bullets li {
    font-size: 0.76rem;
}

.bento-plus-more {
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-style: italic;
    opacity: 0.85;
}

.product-spotlight-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 24px 0;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.product-bento-tile:not(.featured) .product-spotlight-meta {
    margin: 12px 0;
    padding: 10px 0;
    gap: 8px;
}

.product-spotlight-meta span {
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.product-bento-tile:not(.featured) .product-spotlight-meta span {
    font-size: 0.76rem;
}

.product-spotlight-meta strong {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
}

.product-bento-tile:not(.featured) .product-spotlight-meta strong {
    font-size: 1.05rem;
}

.product-spotlight-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.product-bento-tile:not(.featured) .product-spotlight-actions {
    gap: 8px;
}

.product-bento-tile:not(.featured) .product-spotlight-actions .glass-button {
    min-height: 40px;
    font-size: 0.82rem;
}

.product-spotlight-actions.single-action {
    grid-template-columns: minmax(0, 1fr);
}

.product-spotlight-actions .glass-button {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-inline: 14px;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
}


.sportscue-page {
    width: 100%;
    margin: 26px auto 84px;
    display: grid;
    gap: 28px;
    position: relative;
    z-index: 20;
}

.sportscue-page [id] {
    scroll-margin-top: 168px;
}

.sportscue-nav {
    position: sticky;
    top: 92px;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line);
}

.sportscue-nav a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 800;
}

.sportscue-nav a.is-active {
    color: #ffffff;
    border-color: rgba(var(--accent-rgb), 0.45);
    background: rgba(var(--accent-rgb), 0.11);
}

.sportscue-hero {
    position: relative;
    overflow: hidden;
}

.sportscue-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 32px;
    align-items: center;
    padding: 42px clamp(20px, 4vw, 60px);
    max-width: 1400px;
    margin: 0 auto;
}

.sportscue-hero-copy {
    position: relative;
    z-index: 1;
    padding-left: clamp(8px, 3vw, 40px);
}

.sportscue-title {
    margin: 0;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 0.94;
}

/* CrateTag vinyl badge lockup - matches the rebrand concept exactly */
.product-title-lockup {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 20px);
}

.product-title-vinyl {
    --c: var(--cratetag);
    width: clamp(80px, 12vw, 132px);
    height: clamp(80px, 12vw, 132px);
    border-radius: 50%;
    flex: none;
    background:
        radial-gradient(circle at 50% 50%, #050505 0 14%, transparent 14.5%),
        repeating-radial-gradient(circle at 50% 50%, var(--c) 0 1px, transparent 1px 6px);
    border: 3px solid var(--c);
    box-shadow: 0 0 0 1px #0a0a0a, 0 10px 30px -8px var(--c);
    position: relative;
    transition: box-shadow 0.3s ease;
}

.product-title-vinyl:hover {
    animation: vinylGlowPulse 1.6s ease-in-out infinite;
}

@keyframes vinylGlowPulse {
    0%, 100% {
        box-shadow: 0 0 0 1px #0a0a0a, 0 10px 30px -8px var(--c), 0 0 0 0 var(--c);
    }
    50% {
        box-shadow: 0 0 0 1px #0a0a0a, 0 10px 34px -6px var(--c), 0 0 28px 6px var(--c);
    }
}

.product-title-vinyl::after {
    content: attr(data-mark);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-weight: 800;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    line-height: 1;
    margin: 0;
    padding: 0;
    color: #050505;
    background: var(--c);
    width: clamp(30px, 5vw, 48px);
    height: clamp(30px, 5vw, 48px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.product-title-vinyl:hover::after {
    animation: vinylLetterSpin 1.6s linear infinite;
}

@keyframes vinylLetterSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.product-title-lockup .sportscue-title,
.product-title-lockup .sportscue-title .cratetag-word {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #ffffff;
    font-size: clamp(3.6rem, 7.4vw, 7.2rem);
}

.product-title-lockup .sportscue-title .cratetag-word {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
}

.product-title-lockup .sportscue-title span {
    display: inline;
    margin-top: 0;
    font-size: inherit;
}

.product-title-vinyl {
    margin-top: 0;
}

.cratetag-name {
    display: inline;
    margin-top: 0;
    font-size: inherit;
    font-family: inherit;
    font-weight: 700;
    color: #ffffff;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

.cratetag-word {
    display: inline;
    margin-top: 0;
    font-size: inherit;
    font-family: inherit;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

.product-title-vinyl.small {
    width: 40px;
    height: 40px;
    border-width: 2.5px;
    box-shadow: 0 0 0 1px #0a0a0a, 0 6px 18px -6px var(--c);
    flex: none;
}

.product-title-vinyl.small::after {
    font-size: 0.85rem;
    width: 18px;
    height: 18px;
}

.product-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.product-title-row .product-spotlight-title {
    margin: 0;
}

.product-spotlight-title > .cratetag-name {
    display: inline;
    margin-top: 0;
    font-size: 1.5rem;
    font-family: inherit;
    font-weight: 700;
    color: #ffffff;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

.sportscue-title span {
    display: block;
}

.sportscue-tagline {
    max-width: 720px;
    margin: 24px 0 0;
    font-size: 1.18rem;
}

.sportscue-tagline span {
    background: linear-gradient(100deg, var(--blue), var(--gold) 78%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}

.sportscue-intro {
    max-width: 720px;
    margin: 16px 0 0;
}

.sportscue-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.sportscue-actions .glass-button,
.sportscue-primary-action {
    width: auto;
    min-width: 160px;
    padding-inline: 22px;
}

.sportscue-visual {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 420px;
}

.sportscue-feature-shot img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top;
    border-radius: inherit;
}

/* CrateTag "Review-First Workflow" screenshot (tag-it_..._test3.png) is
   1613x931 (1.733 ratio), narrower than this card renders at, so the
   shared cover/crop rule above cuts off its left and right edges.
   object-fit: contain fixed the crop but left an empty gap (visible on
   tilt-card hover) since the container still filled its normal height
   while the image only used part of it. Matching the container's own
   shape to the image's ratio removes the crop AND the gap - once they're
   the same shape, cover/contain give an identical, exact fit. */
.sportscue-key-card[data-feature-id="6"] .sportscue-feature-shot {
    aspect-ratio: 1613 / 931;
    min-height: 0;
}

.sportscue-key-card[data-feature-id="6"] .sportscue-feature-shot img {
    object-fit: cover;
}

/* Same image/same fix, but for the CrateTag hero shot at the top of the
   page (a different .sportscue-feature-shot instance, inside
   .sportscue-visual rather than a .sportscue-key-card, with its own
   inline height:100% that needs !important to override). */
.sportscue-visual[data-product-id="1"] .sportscue-feature-shot {
    aspect-ratio: 1613 / 931;
    height: auto !important;
}

.sportscue-visual[data-product-id="1"] .sportscue-feature-shot img {
    object-fit: cover;
}

.sportscue-scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.tilt-card {
    transition: transform 150ms ease-out;
    will-change: transform;
}

.sportscue-hero-photo {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1244 / 1106;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.sportscue-hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sportscue-deck {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.sportscue-deck div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.sportscue-deck span {
    color: var(--faint);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sportscue-deck strong {
    color: #ffffff;
}

.sportscue-cue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.sportscue-cue-grid span {
    min-height: 68px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(var(--blue-rgb), 0.22), rgba(var(--gold-rgb), 0.12));
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
}

.sportscue-rec {
    margin-bottom: 0;
}

.sportscue-section {
    padding: 34px 0;
}

.site-statement {
    padding: clamp(56px, 10vw, 120px) 34px;
    text-align: center;
}

.site-statement h2 {
    max-width: 20ch;
    margin: 0 auto;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.site-statement h2 span {
    background: linear-gradient(100deg, var(--blue), var(--gold) 78%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sportscue-section-head {
    display: block;
    margin-bottom: 32px;
    padding: 0 clamp(20px, 4vw, 60px);
}

.sportscue-section-head.align-right {
    text-align: right;
}

.sportscue-section-head h2 {
    max-width: none;
    margin: 0;
    font-size: clamp(1.7rem, 3.1vw, 3.1rem);
    line-height: 1.08;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .sportscue-section-head h2 {
        white-space: normal;
    }
}

.sportscue-section-head h2 span {
    background: linear-gradient(100deg, var(--blue), var(--gold) 78%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sportscue-section-copy {
    max-width: 680px;
    margin: 14px 0 0;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.7;
}

.sportscue-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.sportscue-feature-grid article,
.sportscue-price-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--line);
}

.sportscue-feature-grid i {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: rgba(var(--teal-rgb), 0.11);
    color: var(--teal);
}

.sportscue-feature-grid h3,
.sportscue-price-card h3 {
    margin: 16px 0 10px;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
}

.sportscue-feature-grid p,
.sportscue-rich-copy,
.sportscue-price-card p {
    color: var(--ink-soft);
    line-height: 1.75;
}

.sportscue-key-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.sportscue-diff-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.sportscue-diff-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(var(--accent-warm-rgb), 0.10), rgba(255, 255, 255, 0.035));
    border: 1px solid rgba(var(--accent-warm-rgb), 0.22);
}

.sportscue-diff-card i {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: rgba(var(--accent-warm-rgb), 0.16);
    color: var(--accent-warm);
    font-size: 1.1rem;
}

/* Dark-mode-adapted neumorphism: a soft light/dark dual shadow that reads
   as embossed on this theme's near-black chip backgrounds - a literal
   light-neumorphism shadow pair would wash out against the dark glass UI. */
.neu-badge {
    box-shadow:
        -3px -3px 6px rgba(255, 255, 255, 0.06),
        4px 4px 10px rgba(0, 0, 0, 0.5);
}

.sportscue-diff-card h3 {
    margin: 16px 0 10px;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 1.15rem;
}

.sportscue-diff-card p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.7;
}

.sportscue-key-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(420px, 1.18fr);
    align-items: center;
    gap: clamp(24px, 4vw, 54px);
    min-height: 430px;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid var(--line-bright);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 82% 18%, rgba(var(--teal-rgb), 0.15), transparent 34%),
        linear-gradient(135deg, rgba(var(--blue-rgb), 0.12), rgba(var(--gold-rgb), 0.08)),
        rgba(255, 255, 255, 0.025);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.sportscue-key-card:nth-child(even) {
    grid-template-columns: minmax(420px, 1.18fr) minmax(260px, 0.82fr);
}

.sportscue-key-card:nth-child(even) .sportscue-key-copy {
    order: 2;
}

.sportscue-key-card:nth-child(even) .sportscue-feature-shot {
    order: 1;
}

.sportscue-key-card h3 {
    margin: 0;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: clamp(1.7rem, 3vw, 3rem);
    line-height: 1.08;
}

.sportscue-key-card p {
    margin: 18px 0 0;
    max-width: 62ch;
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.35vw, 1.1rem);
    line-height: 1.75;
}

.sportscue-key-card li,
.sportscue-capability-grid li {
    color: var(--ink-soft);
    line-height: 1.75;
}

.sportscue-key-copy .mono {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--teal);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.sportscue-feature-shot {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 330px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
}

.shot-window-bar,
.shot-deck-row,
.shot-control-strip,
.shot-remote-row,
.shot-event-layout {
    position: relative;
    z-index: 1;
}

.shot-window-bar {
    display: grid;
    grid-template-columns: repeat(3, 9px) minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding-bottom: 2px;
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.shot-window-bar span {
    width: 9px;
    height: 9px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.28);
}

.shot-window-bar strong {
    text-align: right;
    letter-spacing: 0.08em;
}

.shot-deck-row {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(150px, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 74px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.055);
}

.shot-deck-row span,
.shot-roster span {
    display: block;
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
}

.shot-deck-row strong,
.shot-roster strong,
.shot-cue-list strong {
    color: #ffffff;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 1.05rem;
}

.shot-deck-row em,
.shot-slider-stack em {
    height: 10px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--blue), var(--teal), var(--gold));
}

.shot-deck-row.alt em {
    width: 64%;
}

.shot-pad-grid,
.shot-control-strip,
.shot-remote-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.shot-pad-grid span,
.shot-control-strip span,
.shot-remote-row span {
    min-height: 72px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.055);
    color: #ffffff;
    font-weight: 800;
    text-align: center;
}

.shot-waveform {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    min-height: 150px;
    padding: 18px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
}

.shot-waveform i {
    display: block;
    min-height: 72px;
    border-radius: var(--radius-pill) 999px 12px 12px;
    background: linear-gradient(180deg, var(--teal), rgba(var(--blue-rgb), 0.4));
}

.shot-waveform i:nth-child(2) {
    min-height: 118px;
}

.shot-waveform i:nth-child(3) {
    min-height: 92px;
}

.shot-waveform i:nth-child(4) {
    min-height: 136px;
}

.shot-control-strip span,
.shot-remote-row span {
    min-height: 46px;
    font-size: 0.82rem;
}

.shot-slider-stack {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
}

.shot-slider-stack em:nth-child(2) {
    width: 72%;
}

.shot-slider-stack em:nth-child(3) {
    width: 48%;
}

.shot-event-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 12px;
}

.shot-roster,
.shot-cue-list {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
}

.shot-cue-list em {
    min-height: 50px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(var(--blue-rgb), 0.34), rgba(var(--teal-rgb), 0.16));
    color: #ffffff;
    font-style: normal;
    font-weight: 800;
}

.sportscue-capability-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    padding: 0 clamp(20px, 4vw, 60px);
    box-sizing: border-box;
}

.sportscue-capability-grid .rec {
    display: block;
    margin-bottom: 0;
}

.sportscue-capability-grid.is-centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.sportscue-capability-grid.is-centered .rec {
    flex: 0 1 calc((100% - 4 * 16px) / 5);
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 1500px) {
    .sportscue-capability-grid.is-centered .rec {
        flex-basis: calc((100% - 2 * 16px) / 3);
    }
}

@media (max-width: 1100px) {
    .sportscue-capability-grid.is-centered .rec {
        flex-basis: calc((100% - 16px) / 2);
    }
}

@media (max-width: 600px) {
    .sportscue-capability-grid.is-centered .rec {
        flex-basis: 100%;
    }
}

.sportscue-capability-grid .rec-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sportscue-capability-grid .rec i {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: var(--radius-sm);
    background: rgba(var(--teal-rgb), 0.14);
    color: var(--teal);
    font-size: 1.05rem;
}

.sportscue-capability-grid ul {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding-left: 18px;
}

@media (max-width: 1500px) {
    .sportscue-capability-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .sportscue-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .sportscue-capability-grid {
        grid-template-columns: 1fr;
    }
}

.sportscue-platform-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.sportscue-rich-copy p:first-child {
    margin-top: 0;
}

.sportscue-rich-copy ul {
    margin: 0;
    padding-left: 20px;
}

.sportscue-platform-card {
    display: grid;
    gap: 10px;
    min-height: 190px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, rgba(var(--blue-rgb), 0.10), rgba(var(--teal-rgb), 0.06)),
        rgba(255, 255, 255, 0.035);
}

.sportscue-platform-card i {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: rgba(var(--teal-rgb), 0.11);
    color: var(--teal);
    font-size: 1.25rem;
}

.sportscue-platform-card h3 {
    margin: 8px 0 0;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 1.35rem;
}

.sportscue-platform-card p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.65;
}

.sportscue-requirements {
    padding: 28px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--line);
}

.sportscue-requirements-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
}

.sportscue-requirements-platform {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.sportscue-requirements-platform i {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: rgba(var(--teal-rgb), 0.14);
    color: var(--teal);
    font-size: 1.2rem;
}

.sportscue-requirements-platform h3 {
    margin: 0;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 1.25rem;
}

.sportscue-requirements-col ul,
.sportscue-requirements-storage ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    color: var(--ink-soft);
    line-height: 1.6;
}

.sportscue-requirements-storage {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.sportscue-requirements-storage h3 {
    margin: 0 0 12px;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 1.25rem;
}

@media (max-width: 700px) {
    .sportscue-requirements-columns {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.sportscue-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.sportscue-price-card {
    display: grid;
    grid-template-rows: auto minmax(112px, 1fr) auto auto;
    align-content: stretch;
    gap: 14px;
    min-height: 300px;
}

.sportscue-price-card.is-best-value {
    border-color: rgba(var(--teal-rgb), 0.45);
    background: linear-gradient(180deg, rgba(var(--teal-rgb), 0.10), rgba(255, 255, 255, 0.035));
}

.sportscue-price-card h3 {
    margin-top: 0;
    font-size: 1.45rem;
}

.sportscue-price {
    align-self: end;
}

.sportscue-price strong {
    display: block;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 2rem;
}

.sportscue-price span {
    color: var(--faint);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.sportscue-price-card .glass-button {
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: end;
    padding: 12px 16px;
    line-height: 1.2;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .orb,
    .hero-screenshot-track {
        animation: none;
    }

    .tilt-card {
        transition: none;
    }

    .reveal-on-scroll {
        transition-delay: 0ms !important;
        opacity: 1;
        transform: none;
    }
}

.storefront-carousel-shell {
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    --store-card-width: 630px;
}

.storefront-carousel-shell .carousel-controls {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    z-index: 8;
    transform: translateY(-50%);
    width: auto;
    padding: 0;
    margin: 0;
    justify-content: space-between;
    gap: 12px;
    pointer-events: none;
}

.storefront-carousel-shell .carousel-controls .control-btn {
    pointer-events: auto;
}

.page-wrapper::before,
.page-wrapper::after {
    background: none;
}

.storefront-carousel-shell .carousel-viewport {
    box-sizing: border-box;
    padding-inline: max(20px, calc((100% - var(--store-card-width)) / 2));
}

.carousel-track {
    display: flex;
    gap: 28px;
    margin: 20px 0;
    padding: 8px 0;
}

.storefront-carousel-shell .carousel-track::before,
.storefront-carousel-shell .carousel-track::after {
    content: none;
    flex: 0 0 0;
}

.product-window {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: min(630px, calc(100vw - 72px));
    min-height: 470px;
    padding: 26px;
    scroll-snap-align: center;
    opacity: 0.46;
    transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.product-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.product-footer {
    margin-top: auto;
    margin-bottom: 0;
}

.product-window:hover,
.product-window.centered {
    opacity: 1;
    border-color: rgba(var(--accent-rgb), 0.34);
}

.product-window.centered {
    transform: translateY(-6px) scale(1.01);
    filter: none;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
}

.product-card-topline {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.product-card-label,
.product-card-slug {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.product-card-label {
    background: rgba(var(--accent-warm-rgb), 0.12);
    color: var(--accent-warm);
}

.product-card-slug {
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink-muted);
}

.product-card-title {
    margin: 0 0 14px 0;
    font-size: 2rem;
    letter-spacing: -0.04em;
}

.product-card-copy,
.product-card-copy p,
.product-card-copy ul,
.product-card-copy li {
    color: var(--ink-soft);
    text-align: left;
    line-height: 1.8;
}

.product-card-copy ul {
    padding-left: 18px;
    margin: 14px 0 0 0;
}

.product-card-suite-note {
    margin: 0 0 12px 0;
    color: var(--accent-warm);
    font-size: 0.88rem;
    line-height: 1.6;
}

.product-card-price-block {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-end;
    padding: 20px 0 22px 0;
    margin-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.product-license-title {
    margin: 0 0 6px 0;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.product-license-note {
    margin: 0;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.product-card-price {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 2.35rem;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #ffffff;
}

.product-card-price .price-prefix {
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: 0.12em;
    color: rgba(226, 237, 246, 0.72);
}

.product-card-actions {
    gap: 10px;
}

.product-card-actions .glass-button,
.product-detail-link {
    min-height: 50px;
}

.control-btn {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(8, 12, 18, 0.72);
    color: var(--accent);
    font-size: 1.35rem;
    text-shadow: none;
    opacity: 1;
}

.control-btn:hover {
    color: #ffffff;
    border-color: rgba(var(--accent-rgb), 0.34);
    transform: translateY(-2px);
}

.carousel-navigation {
    margin-top: -6px;
    margin-bottom: 0;
}

.nav-dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.18);
}

.nav-dot.active {
    background: var(--accent);
    box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.12);
}

.product-detail-page {
    width: 100%;
    margin: 28px auto 84px auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
    z-index: 20;
    box-sizing: border-box;
}

.product-breadcrumb {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.product-breadcrumb a {
    color: var(--accent);
}

.product-hero-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.86fr);
    gap: 24px;
}

.product-hero-card,
.product-purchase-card,
.product-detail-panel {
    padding: 34px;
    border-radius: var(--radius-xl);
}

.product-hero-title {
    letter-spacing: -0.04em;
}

.product-hero-tagline {
    font-size: 1.14rem;
    color: #ffffff;
}

.product-meta-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: var(--ink-soft);
}

.product-suite-summary {
    margin-top: 24px;
}

.product-suite-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.product-suite-chip {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: var(--radius-pill);
    background: rgba(var(--accent-warm-rgb), 0.12);
    border: 1px solid rgba(var(--accent-warm-rgb), 0.18);
    color: #ffd6af;
    font-size: 0.88rem;
}

.product-suite-chip:hover {
    color: #fff2e2;
    background: rgba(var(--accent-warm-rgb), 0.18);
}

.product-purchase-card {
    background:
        radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.08), transparent 38%),
        linear-gradient(180deg, rgba(17, 25, 39, 0.92), rgba(10, 15, 25, 0.9));
}

.product-purchase-card h2,
.product-gallery-topline h2 {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    letter-spacing: -0.03em;
}

.product-price {
    color: #ffffff;
    text-shadow: none;
}

.product-back-link {
    color: var(--ink-soft);
}

.product-gallery-topline {
    margin-bottom: 20px;
}

.product-rich-copy p,
.product-rich-copy ul,
.product-rich-copy li {
    color: var(--ink-soft);
    line-height: 1.8;
}

.product-rich-copy h3,
.product-rich-copy h4 {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    margin: 0 0 10px 0;
    letter-spacing: -0.02em;
}

@media (max-width: 1100px) {
    .storefront-hero,
    .storefront-hero-main,
    .product-hero-grid,
    .storefront-compatibility,
    .storefront-products-head {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

    .storefront-products-note {
        max-width: none;
    }

    .storefront-title {
        max-width: none;
    }

    .hero-screenshot-carousel {
        width: 100%;
        max-width: none;
        margin: 0;
        align-self: auto;
    }

    .product-bento-tile.featured,
    .sportscue-hero-inner {
        grid-template-columns: 1fr;
    }

    .sportscue-feature-grid,
    .sportscue-diff-grid,
    .sportscue-platform-grid,
    .sportscue-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sportscue-key-grid,
    .sportscue-key-card,
    .sportscue-key-card:nth-child(even) {
        grid-template-columns: 1fr;
    }

    .sportscue-key-card:nth-child(even) .sportscue-key-copy,
    .sportscue-key-card:nth-child(even) .sportscue-feature-shot {
        order: initial;
    }

    .product-feature-grid,
    .product-feature-row,
    .product-feature-row:nth-child(even) {
        grid-template-columns: 1fr;
    }

    .product-feature-row:nth-child(even) .product-feature-copy,
    .product-feature-row:nth-child(even) .product-feature-visual {
        order: initial;
    }

    .sportscue-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 92px;
    }

    body {
        padding-top: 82px;
    }

    .main-header {
        height: 72px;
        padding: 0 16px;
    }

    .header-center h1 {
        font-size: 1.08rem;
        letter-spacing: 0.14em;
    }

    .storefront-page,
    .product-detail-page {
        width: min(100%, calc(100% - 20px));
        margin: 18px auto 48px auto;
        gap: 18px;
    }

    .storefront-hero-panel,
    .storefront-compatibility,
    .storefront-products-head,
    .product-hero-card,
    .product-purchase-card,
    .product-detail-panel {
        padding: 22px;
        border-radius: var(--radius-lg);
    }

    .storefront-stat-row {
        grid-template-columns: 1fr;
    }

    .storefront-title {
        max-width: 8.2ch;
        font-size: clamp(2.65rem, 11.5vw, 4.2rem);
    }

    .hero-screenshot-slide {
        min-height: 230px;
    }

    .hero-screenshot-slide img,
    .hero-screenshot-placeholder {
        height: 190px;
    }

    .product-bento-tile,
    .sportscue-hero,
    .sportscue-section {
        padding: 22px;
        border-radius: var(--radius-lg);
    }

    .product-spotlight-topline,
    .sportscue-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-bento-tile.featured,
    .product-spotlight-actions,
    .product-spotlight-meta {
        grid-template-columns: 1fr;
    }

    .product-spotlight-meta {
        align-items: flex-start;
    }

    .product-spotlight-actions {
        display: grid;
    }

    .sportscue-page {
        width: min(100%, calc(100% - 20px));
        margin: 18px auto 48px;
        gap: 18px;
    }

    .sportscue-page [id] {
        scroll-margin-top: 92px;
    }

    .sportscue-nav {
        position: relative;
        top: auto;
    }

    .sportscue-title {
        font-size: clamp(2.55rem, 13vw, 4.2rem);
    }

    .sportscue-cue-grid,
    .sportscue-feature-grid,
    .sportscue-diff-grid,
    .sportscue-key-grid,
    .sportscue-capability-grid,
    .sportscue-pricing-grid,
    .next {
        grid-template-columns: 1fr;
    }

    .sportscue-key-card {
        min-height: auto;
    }

    .carousel-controls {
        margin-bottom: 12px;
    }

    .storefront-carousel-shell .carousel-controls {
        left: 8px;
        right: 8px;
    }

    .storefront-carousel-shell {
        --store-card-width: 460px;
    }

    .storefront-carousel-shell .carousel-viewport {
        padding-inline: max(10px, calc((100% - var(--store-card-width)) / 2));
    }

    .carousel-track {
        gap: 16px;
    }

    .storefront-carousel-shell .carousel-track::before,
    .storefront-carousel-shell .carousel-track::after {
        flex: 0 0 0;
    }

    .product-window {
        width: min(460px, calc(100vw - 40px));
        min-height: 440px;
        padding: 22px;
    }

    .product-card-price-block {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-card-title {
        font-size: 1.7rem;
    }
}

/* Public auth, cart, and account refresh */
.auth-portal,
.cart-shell,
.account-wrapper {
    width: 100%;
    margin: 40px auto 84px auto;
    position: relative;
    z-index: 20;
    box-sizing: border-box;
}

.auth-layout {
    display: grid;
    gap: 24px;
    align-items: stretch;
}

.auth-layout-login {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr);
}

.auth-layout-register {
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
}

.auth-side-panel,
.modern-auth-card,
.cart-main-card,
.cart-summary-card,
.cart-empty-card,
.account-hero,
.account-card,
.account-empty {
    border-radius: var(--radius-xl);
}

.auth-side-panel {
    padding: 36px;
    background: linear-gradient(180deg, rgba(17, 24, 38, 0.88), rgba(10, 15, 25, 0.86));
    border: 1px solid var(--line-soft);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
}

.auth-display-title,
.auth-card-title,
.cart-title,
.account-title,
.cart-summary-card h2,
.cart-empty-card h2,
.account-empty h2 {
    margin: 0;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    letter-spacing: -0.04em;
    line-height: 1;
}

.auth-display-title {
    font-size: clamp(2.3rem, 4vw, 4.2rem);
    max-width: 12ch;
}

.auth-display-copy,
.auth-card-copy,
.cart-copy,
.cart-summary-copy,
.account-copy,
.account-empty p {
    color: var(--ink-soft);
    line-height: 1.8;
}

.auth-side-points {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}

.auth-side-point {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-side-point strong {
    font-size: 0.96rem;
}

.auth-side-point span {
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.7;
}

.modern-auth-card {
    padding: 34px;
}

.auth-card-title {
    font-size: clamp(2rem, 3vw, 3rem);
}

.auth-form-stack,
.auth-grid-form {
    margin-top: 24px;
}

.auth-form-stack {
    display: grid;
    gap: 18px;
}

.auth-grid-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.auth-field-full {
    grid-column: 1 / -1;
}

.auth-field label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.auth-field input,
.auth-field select,
.auth-field textarea {
    width: 100%;
    min-height: 54px;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-color);
    padding: 14px 16px;
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    font-size: 0.96rem;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.auth-field textarea {
    min-height: 170px;
    resize: vertical;
    line-height: 1.7;
}

.auth-field select option {
    background: #0d1725;
    color: #f4f7fb;
}

.auth-field input:focus,
.auth-field select:focus,
.auth-field textarea:focus {
    border-color: rgba(var(--accent-rgb), 0.55);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.08);
}

.auth-flash-stack {
    display: grid;
    gap: 10px;
}

.auth-flash {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    line-height: 1.6;
}

.auth-flash-error {
    background: rgba(255, 107, 107, 0.08);
    border: 1px solid rgba(255, 107, 107, 0.22);
    color: #ffd5d5;
}

.auth-flash-success {
    background: rgba(var(--accent-rgb), 0.09);
    border: 1px solid rgba(var(--accent-rgb), 0.24);
    color: #d9fff8;
}

.auth-actions-row {
    display: flex;
    justify-content: flex-end;
}

.auth-inline-link {
    color: var(--accent);
    font-weight: 700;
}

.auth-inline-link:hover {
    color: #9bf1e4;
}

.auth-submit {
    width: 100%;
}

.auth-card-footer {
    margin: 22px 0 0 0;
    color: var(--ink-soft);
    text-align: center;
}

.cart-shell {
    display: grid;
    gap: 28px;
    width: min(1120px, calc(100% - 40px));
    margin: 28px auto 84px auto;
}

.cart-hero {
    text-align: left;
    padding: 0 4px;
}

.cart-hero-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}

.cart-hero-count {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cart-copy {
    max-width: 640px;
}

.cart-empty-card,
.cart-main-card,
.cart-summary-card {
    padding: 32px;
    width: 100%;
    box-sizing: border-box;
}

.cart-title {
    font-size: clamp(2rem, 3.6vw, 3.4rem);
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 28px;
    align-items: start;
}

.cart-main-card,
.cart-summary-card {
    text-align: left;
}

.cart-summary-card {
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 96px;
}

.cart-summary-card .checkout-btn {
    width: 100%;
    margin-top: 22px;
    box-shadow: 0 14px 32px rgba(var(--accent-strong-rgb), 0.2);
}

.cart-table-head,
.cart-item-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1.5fr) 140px 120px 56px;
    gap: 16px;
    align-items: center;
}

.cart-table-head {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cart-item-list {
    display: grid;
}

.cart-item-row {
    padding: 20px 12px;
    margin: 0 -12px;
    border-radius: var(--radius-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease;
}

.cart-item-row:hover {
    background: rgba(255, 255, 255, 0.025);
}

.cart-item-thumb {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: grid;
    place-items: center;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    color: var(--accent);
    font-size: 1.25rem;
}

.cart-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cart-item-main h3 {
    margin: 0 0 8px 0;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 1.45rem;
    letter-spacing: -0.03em;
}

.cart-item-main p,
.cart-item-license {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.7;
}

.cart-item-license {
    font-size: 0.92rem;
}

.cart-item-price {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
}

.cart-item-actions {
    display: flex;
    justify-content: flex-end;
}

.cart-remove-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: #ff9d9d;
}

.cart-remove-btn:hover {
    background: rgba(255, 107, 107, 0.1);
    color: #ffd5d5;
}

.cart-summary-metrics {
    display: grid;
    gap: 14px;
    margin: 22px 0 26px 0;
}

.cart-summary-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--ink-soft);
}

.cart-summary-line strong {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    color: #ffffff;
}

.cart-summary-line.total strong {
    font-size: 1.55rem;
}

.cart-clear-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    margin-top: 14px;
    align-self: flex-start;
}

.cart-empty-card {
    display: grid;
    gap: 14px;
    justify-items: start;
    text-align: left;
}

.cart-empty-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-lg);
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: var(--accent);
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.cart-empty-card h2,
.account-empty h2 {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.cart-empty-card p,
.account-empty p {
    margin: 0;
}

.account-wrapper {
    display: grid;
    gap: 24px;
}

.account-hero {
    padding: 34px;
}

.account-title {
    font-size: clamp(2.2rem, 4vw, 4rem);
}

.account-platform-note {
    margin: 18px 0 0 0;
    color: var(--ink-soft);
}

.account-mac-helper {
    margin: 10px 0 0 0;
    color: var(--ink-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.account-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    align-items: stretch;
}

.account-section {
    display: grid;
    gap: 18px;
}

.account-section-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
}

.account-section-header h2 {
    margin: 0;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.account-section-header.discontinued h2 {
    color: #ffb3b3;
}

.account-section-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

.account-card {
    padding: 28px;
    min-width: 0;
}

.account-card-topline {
    margin-bottom: 16px;
}

.account-card-label {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.account-card-title {
    margin: 0 0 10px 0;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 1.8rem;
    letter-spacing: -0.03em;
}

.account-card-version {
    margin: 0 0 18px 0;
    color: var(--ink-soft);
    min-height: 48px;
}

.account-card-suite-note {
    margin: -8px 0 18px 0;
    color: var(--accent-warm);
    font-size: 0.88rem;
    line-height: 1.6;
}

.account-actions {
    gap: 10px;
    align-items: center;
}

.account-alt-downloads {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.account-alt-label {
    margin-bottom: 10px;
    color: var(--ink-muted);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.74rem;
}

.account-card .glass-button,
.account-card .account-download-disabled {
    width: auto;
    min-width: 0;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    font-size: 0.84rem;
    line-height: 1.2;
    text-align: center;
}

.account-card .account-download-disabled,
.account-card .glass-button.account-download-disabled {
    background: rgba(78, 28, 28, 0.62);
    border: 1px solid rgba(255, 148, 148, 0.16);
    color: rgba(255, 226, 226, 0.72);
    box-shadow: none;
}

.account-card .account-detected-download {
    border-color: rgba(var(--accent-rgb), 0.45);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.16), 0 14px 34px rgba(var(--accent-rgb), 0.12);
}

.account-primary-download {
    margin-top: 0;
    align-self: flex-start;
}

.account-alt-downloads .account-actions {
    justify-content: flex-start;
}

.account-empty {
    padding: 34px;
    display: grid;
    gap: 14px;
    justify-items: start;
}

@media (max-width: 1100px) {
    .auth-layout-login,
    .auth-layout-register,
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary-card {
        position: static;
    }
}

@media (max-width: 768px) {
    .auth-portal,
    .account-wrapper {
        width: min(100%, calc(100% - 20px));
        margin: 18px auto 48px auto;
    }

    .cart-shell {
        width: min(100%, calc(100% - 20px));
        margin: 18px auto 48px auto;
    }

    .auth-side-panel,
    .modern-auth-card,
    .cart-main-card,
    .cart-summary-card,
    .cart-empty-card,
    .account-hero,
    .account-card,
    .account-empty {
        padding: 22px;
        border-radius: var(--radius-lg);
    }

    .auth-grid-form,
    .cart-table-head,
    .cart-item-row {
        grid-template-columns: 1fr;
    }

    .auth-field-full {
        grid-column: auto;
    }

    .cart-table-head {
        display: none;
    }

    .cart-item-row {
        gap: 10px;
        margin: 0;
        padding: 18px 0;
    }

    .cart-item-thumb {
        display: none;
    }

    .cart-item-license,
    .cart-item-price {
        font-size: 0.98rem;
    }

    .cart-item-actions {
        justify-content: flex-start;
    }

    .cart-hero-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Public footer and legal/contact pages */
.site-footer {
    width: 100%;
    box-sizing: border-box;
    margin-top: auto;
    padding: 24px 32px 30px 32px;
    position: relative;
    z-index: 20;
}

.site-footer-inner {
    width: min(1280px, 100%);
    margin: 0 auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    color: var(--ink-muted);
    font-size: 0.88rem;
}

.site-footer-inner p {
    margin: 0;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.site-footer-links a {
    color: var(--ink-soft);
    font-weight: 700;
}

.site-footer-links a:hover {
    color: var(--accent);
}

.back-to-top-button {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 850;
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    background: rgba(5, 9, 15, 0.82);
    color: rgba(var(--ink-rgb), 0.72);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px);
    transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.back-to-top-button.is-visible {
    opacity: 0.78;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top-button:hover {
    opacity: 1;
    color: #ffffff;
    border-color: rgba(var(--accent-rgb), 0.26);
    background: rgba(10, 16, 26, 0.92);
    transform: translateY(-2px);
}

.back-to-top-button i {
    font-size: 1rem;
}

.checkout-policy-note {
    margin-top: 28px;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: rgba(var(--accent-warm-rgb), 0.08);
    border: 1px solid rgba(var(--accent-warm-rgb), 0.18);
    text-align: left;
}

.checkout-policy-note h3 {
    margin: 0 0 8px 0;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 1.1rem;
}

.checkout-policy-note p {
    margin: 0 0 10px 0;
    color: var(--ink-soft);
    line-height: 1.65;
    font-size: 0.9rem;
}

.checkout-policy-note a,
.checkout-legal-option a {
    color: var(--accent);
    font-weight: 800;
}

.checkout-legal-checklist {
    display: grid;
    gap: 12px;
    margin: 20px 0 8px 0;
}

.checkout-legal-option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.65;
    cursor: pointer;
}

.checkout-legal-option input {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 4px 0 0 0;
    accent-color: var(--accent);
}

.checkout-legal-version {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.78rem;
}

.product-notice-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    text-align: left;
}

.product-notice-card p:not(.product-section-label) {
    color: var(--ink-soft);
    line-height: 1.75;
}

.public-page {
    width: 100%;
    margin: 28px auto 84px auto;
    display: grid;
    gap: 24px;
    position: relative;
    z-index: 20;
}

.public-hero,
.public-card,
.terms-card {
    width: 100%;
    box-sizing: border-box;
}

.public-hero {
    padding: 36px;
    text-align: left;
}

.public-title {
    margin: 0;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.public-copy {
    max-width: 760px;
    margin: 18px 0 0 0;
    color: var(--ink-soft);
    line-height: 1.8;
}

.public-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    gap: 24px;
    align-items: start;
}

.public-side-panel {
    padding: 32px;
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(17, 24, 38, 0.88), rgba(10, 15, 25, 0.86));
    border: 1px solid var(--line-soft);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
}

.public-card {
    padding: 32px;
}

.contact-grid {
    margin-top: 0;
}

.contact-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.terms-card {
    padding: 38px;
    display: grid;
    gap: 28px;
    text-align: left;
}

.terms-section {
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.terms-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.terms-section h2 {
    margin: 0 0 12px 0;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

.terms-section p {
    margin: 0 0 14px 0;
    color: var(--ink-soft);
    line-height: 1.85;
}

.terms-section p:last-child {
    margin-bottom: 0;
}

.terms-section a {
    color: var(--accent);
    font-weight: 700;
}

@media (max-width: 900px) {
    .public-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding: 18px 16px 24px 16px;
    }

    .site-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .public-page {
        width: min(100%, calc(100% - 20px));
        margin: 18px auto 48px auto;
    }

    .public-hero,
    .public-side-panel,
    .public-card,
    .terms-card {
        padding: 22px;
        border-radius: var(--radius-lg);
    }
}

.price-was {
    display: block;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.52em;
    line-height: 1.1;
    text-decoration: line-through;
    text-shadow: none;
}

.product-card-price,
.product-price,
.cart-item-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-card-price small,
.product-price small,
.cart-item-price small {
    color: #68e0cf;
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: uppercase;
}

.cart-flash-stack {
    width: min(1180px, calc(100% - 32px));
    display: grid;
    gap: 10px;
    margin: 0 auto 18px auto;
}

.cart-flash {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.cart-flash-success {
    border-color: rgba(var(--accent-rgb), 0.35);
}

.cart-flash-danger,
.cart-flash-warning {
    border-color: rgba(255, 157, 157, 0.35);
}

.coupon-form {
    display: grid;
    gap: 8px;
    margin: 22px 0 12px 0;
}

.coupon-form label {
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.coupon-form div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.coupon-form input {
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.coupon-form button,
.coupon-remove-btn {
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: var(--radius-md);
    background: rgba(var(--accent-rgb), 0.09);
    color: #d9fff9;
    cursor: pointer;
    font-weight: 800;
    padding: 0 14px;
}

.coupon-remove-btn {
    min-height: 38px;
    margin-bottom: 8px;
}

.cart-summary-line.discount strong,
.checkout-discount-line span:last-child {
    color: #68e0cf;
}

.checkout-discount-line {
    margin-bottom: 10px;
}

.summary-item .price-was {
    display: inline;
    margin-right: 8px;
    font-size: 0.82rem;
}

.site-state-page {
    width: min(900px, calc(100% - 32px));
    min-height: calc(100vh - 240px);
    display: grid;
    place-items: center;
    margin: 0 auto;
}

.site-state-body {
    min-height: 100vh;
    padding-top: 0;
    justify-content: center;
}

.site-state-body .site-state-page {
    min-height: calc(100vh - 140px);
}

.site-state-panel {
    text-align: center;
    padding: clamp(32px, 7vw, 74px);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}

.site-state-icon {
    width: 72px;
    height: 72px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    margin-bottom: 18px;
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    color: #68e0cf;
    font-size: 1.8rem;
}

.site-state-panel h1 {
    max-width: 760px;
    margin: 0 auto 16px auto;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: clamp(2rem, 5vw, 4.2rem);
    line-height: 1;
}

.site-state-panel p:last-child,
.site-state-panel .site-state-lede {
    max-width: 560px;
    margin: 0 auto;
    color: var(--ink-soft);
    line-height: 1.7;
}

.site-state-page-wide {
    width: min(1100px, calc(100% - 32px));
}

.site-state-countdown-panel {
    width: 100%;
    box-sizing: border-box;
}

.site-state-timer {
    display: flex;
    justify-content: center;
    gap: clamp(10px, 2.5vw, 22px);
    margin: 32px 0;
}

.site-state-timer-unit {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 72px;
    padding: 16px 10px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.site-state-timer-value {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.site-state-timer-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.site-state-timer-message {
    max-width: 560px;
    margin: 0 auto 32px auto;
    color: var(--accent);
    font-weight: 700;
}

.site-state-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 36px;
    text-align: left;
}

.site-state-product-card {
    padding: 20px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.site-state-product-card h3 {
    margin: 0 0 8px 0;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 1.1rem;
}

.site-state-product-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .site-state-timer {
        flex-wrap: wrap;
    }

    .site-state-timer-unit {
        min-width: 64px;
    }
}

/* Tailwind-style utility classes.
   Hand-rolled subset - there's no Tailwind build step on this site, so
   only the exact class names defined below will do anything. Add more
   following the same pattern (scale value * 0.25rem) if a new size is
   needed. */
*, ::before, ::after {
    --tw-gradient-from: transparent;
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }
.from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-transparent { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to); }
.to-transparent { --tw-gradient-to: transparent; }
.from-slate-700 { --tw-gradient-from: #334155; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-slate-700 { --tw-gradient-stops: var(--tw-gradient-from), #334155, var(--tw-gradient-to); }
.to-slate-700 { --tw-gradient-to: #334155; }

.h-\[1px\] { height: 1px; }
.mx-auto { margin-left: auto; margin-right: auto; }

.w-0  { width: 0; }        .pt-0  { padding-top: 0; }
.w-1  { width: 0.25rem; }  .pt-1  { padding-top: 0.25rem; }
.w-2  { width: 0.5rem; }   .pt-2  { padding-top: 0.5rem; }
.w-3  { width: 0.75rem; }  .pt-3  { padding-top: 0.75rem; }
.w-4  { width: 1rem; }     .pt-4  { padding-top: 1rem; }
.w-5  { width: 1.25rem; }  .pt-5  { padding-top: 1.25rem; }
.w-6  { width: 1.5rem; }   .pt-6  { padding-top: 1.5rem; }
.w-8  { width: 2rem; }     .pt-8  { padding-top: 2rem; }
.w-10 { width: 2.5rem; }   .pt-10 { padding-top: 2.5rem; }
.w-12 { width: 3rem; }     .pt-12 { padding-top: 3rem; }
.w-16 { width: 4rem; }     .pt-16 { padding-top: 4rem; }
.w-20 { width: 5rem; }     .pt-20 { padding-top: 5rem; }
.w-24 { width: 6rem; }     .pt-24 { padding-top: 6rem; }
.w-32 { width: 8rem; }     .pt-32 { padding-top: 8rem; }
.w-40 { width: 10rem; }    .pt-40 { padding-top: 10rem; }
.w-48 { width: 12rem; }    .pt-48 { padding-top: 12rem; }
.w-64 { width: 16rem; }    .pt-64 { padding-top: 16rem; }
.w-96 { width: 24rem; }    .pt-96 { padding-top: 24rem; }

.mobile-menu-toggle {
    width: 44px;
    height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    font-size: 1.15rem;
    cursor: pointer;
    z-index: 1100;
}

.mobile-menu-toggle:hover {
    border-color: rgba(var(--accent-rgb), 0.32);
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent);
}

.store-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1190;
    display: block;
    border: 0;
    background: rgba(2, 7, 13, 0.7);
    opacity: 0;
    visibility: hidden;
    cursor: default;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.store-menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

.store-menu {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1200;
    width: min(340px, calc(100vw - 44px));
    box-sizing: border-box;
    padding: 22px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: #0b1420;
    box-shadow: 24px 0 70px rgba(0, 0, 0, 0.38);
    transform: translateX(-102%);
    transition: transform 220ms ease;
    overflow-y: auto;
}

.store-menu.open {
    transform: translateX(0);
}

.store-menu-open {
    overflow: hidden;
}

.store-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    letter-spacing: 0.08em;
}

.store-menu-close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}

.store-menu-close:hover {
    color: #ffffff;
    border-color: rgba(var(--accent-rgb), 0.3);
}

.store-menu-nav {
    display: grid;
    gap: 4px;
    padding-top: 18px;
}

.store-menu-nav > a,
.store-products-toggle {
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.store-menu-nav > a:hover,
.store-products-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.store-menu-nav > a i,
.store-products-toggle span i {
    width: 20px;
    color: var(--accent);
    text-align: center;
}

.store-products-toggle {
    justify-content: space-between;
}

.store-products-toggle span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.store-products-toggle > i {
    font-size: 0.72rem;
    transition: transform 160ms ease;
}

.store-products-toggle[aria-expanded="false"] > i {
    transform: rotate(-90deg);
}

.store-product-links {
    display: grid;
    gap: 2px;
    padding: 2px 0 8px 32px;
}

.store-product-links[hidden] {
    display: none;
}

.store-product-links a {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 7px 12px;
    border-left: 1px solid rgba(var(--accent-rgb), 0.25);
    color: var(--ink-muted);
    font-size: 0.9rem;
}

.store-product-links a:hover {
    color: #ffffff;
    border-left-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.05);
}

.store-menu-divider {
    height: 1px;
    margin: 12px 0;
    background: rgba(255, 255, 255, 0.09);
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }

    .store-menu {
        padding: 18px;
    }
}
/* Commerce and catalog enhancements */
.site-announcement {
    position: relative;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 38px;
    padding: 7px 18px;
    color: #07130f;
    background: #64e6b3;
    font-size: 0.85rem;
    font-weight: 800;
    text-align: center;
}

.catalog-tools {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto 20px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 12px;
    align-items: center;
}

.catalog-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px;
    background: rgba(13, 16, 22, 0.92);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-sm);
}

.catalog-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font: inherit;
}

.catalog-filters {
    display: flex;
    min-height: 44px;
    padding: 3px;
    background: #11151c;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
}

.catalog-filter,
.catalog-filter {
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    color: rgba(255,255,255,0.68);
    background: transparent;
    cursor: pointer;
}

.catalog-filter.active {
    color: #fff;
    background: #2d3949;
}

.product-window[hidden] {
    display: none !important;
}

.product-owned-button {
    flex: 1;
}

.release-history-section {
    width: min(1180px, calc(100% - 40px));
    margin: 34px auto;
}

.release-history-list {
    display: grid;
    gap: 12px;
}

.release-history-item {
    padding: 20px;
    background: #11151c;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--radius-sm);
}

.release-history-item header,
.release-build-list > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.release-history-item h3 {
    margin: 0;
}

.release-history-item time,
.release-build-list span {
    color: rgba(255,255,255,.55);
    font-size: .82rem;
}

.release-build-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.account-license-summary {
    display: grid;
    gap: 5px;
    margin: 14px 0;
    padding: 12px;
    background: rgba(0,0,0,.28);
    border-left: 3px solid #64e6b3;
}

.account-license-summary span,
.account-license-summary small,
.account-release-history small {
    color: rgba(255,255,255,.58);
}

.account-release-history {
    margin-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.account-release-history summary {
    padding: 14px 0;
    cursor: pointer;
}

.account-release-history > div {
    display: grid;
    gap: 5px;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,.06);
}

.account-release-history p {
    margin: 4px 0 8px;
    color: rgba(255,255,255,.7);
}

.account-release-build {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.account-build-download,
.release-build-download {
    color: #8bdcff;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.account-build-download:hover,
.release-build-download:hover {
    color: #ffffff;
}

.account-purchase-history > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 0;
    border-top: 1px solid rgba(255,255,255,.08);
}

.account-purchase-history span {
    display: grid;
    gap: 5px;
}

.account-purchase-history small,
.coupon-message {
    color: rgba(255,255,255,.58);
}

@media (max-width: 760px) {
    .catalog-tools {
        grid-template-columns: 1fr;
    }

    .catalog-filters {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .release-history-item header,
    .release-build-list > div,
    .account-purchase-history > div {
        flex-direction: column;
    }
}

/* Platform UI pass inspired by the current visual references */
body {
    margin: 0;
    padding: 0;
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column; /* Stack vertically */
    justify-content: flex-start;
    align-items: center;
    color: var(--text-color);
    padding-top: 96px;
    overflow-x: hidden;
    position: relative;
    background:
        linear-gradient(180deg, rgba(5, 8, 13, 0.94) 0%, rgba(8, 17, 29, 0.98) 44%, #05080d 100%),
        linear-gradient(135deg, rgba(var(--blue-rgb), 0.16), transparent 38%),
        linear-gradient(315deg, rgba(var(--gold-rgb), 0.11), transparent 34%);
}

body::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 900px;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: 0.34;
}

.site-title {
    font-size: clamp(1.15rem, 2.2vw, 1.6rem);
}

.main-header {
    position: fixed;
    top: 12px;
    left: 50%;
    width: min(1240px, calc(100% - 32px));
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    background: rgba(5, 9, 15, 0.92);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 1000;
    box-sizing: border-box;
}

.product-sticky-buy {
    position: fixed;
    top: 96px;
    right: 24px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: rgba(5, 9, 15, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.product-sticky-buy-price {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    white-space: nowrap;
}

.product-sticky-buy .glass-button {
    width: auto;
    min-width: 0;
    padding-inline: 18px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .product-sticky-buy {
        display: none;
    }
}

.header-center h1 a {
    background: linear-gradient(100deg, #ffffff, var(--teal) 52%, var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.header-icon:hover {
    background: rgba(255, 255, 255, 0.055);
    transform: translateY(-1px);
}

.glass-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    min-width: 0;
    min-height: 52px;
    justify-self: start;
    box-sizing: border-box;
    padding: 12px 18px;
    margin-top: 0;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.5), rgba(var(--blue-rgb), 0.4));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 28px rgba(var(--blue-rgb), 0.16);
    color: #f2fffb;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: 0.3s;
}

.glass-button.full,
.glass-button.full-width,
.glass-button.auth-submit {
    width: 100%;
}

.glass-button.alt {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text-color);
    box-shadow: none;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 520ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.storefront-page,
.sportscue-page {
    gap: 48px;
    margin-top: 40px;
}

@supports (content-visibility: auto) {
    .storefront-compatibility,
    .product-bento-grid,
    .sportscue-section {
        content-visibility: auto;
        contain-intrinsic-size: auto 620px;
    }
}

.storefront-hero,
.sportscue-hero {
    min-height: min(680px, calc(100vh - 150px));
    background:
        linear-gradient(120deg, rgba(var(--blue-rgb), 0.18), transparent 32%),
        linear-gradient(300deg, rgba(var(--gold-rgb), 0.13), transparent 36%),
        linear-gradient(180deg, rgba(13, 21, 34, 0.94), rgba(5, 9, 15, 0.92));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.storefront-hero {
    grid-template-columns: 1fr;
    padding: 20px 0px;
}

.product-bento-tile {
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(12, 19, 31, 0.94), rgba(5, 9, 15, 0.86));
    border: 1px solid rgba(255, 255, 255, 0.105);
    box-shadow: var(--shadow-deep);
}

.storefront-hero-copy {
    padding: clamp(34px, 5vw, 78px) clamp(24px, 4.5vw, 72px);
    min-height: 660px;
}

.storefront-hero-main {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 540px;
    display: block;
}

.storefront-hero-text {
    position: relative;
    z-index: 4;
    min-width: 0;
    width: min(72vw, 1500px);
    max-width: none;
}

.storefront-title,
.sportscue-title {
    max-width: 11ch;
    letter-spacing: 0;
    text-wrap: balance;
}

.storefront-title {
    max-width: min(72vw, 1500px);
    text-wrap: normal;
}

.storefront-intro,
.sportscue-tagline,
.sportscue-intro {
    color: rgba(var(--ink-rgb), 0.78);
}

.hero-screenshot-carousel {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    width: min(82vw, 1240px);
    min-width: min(100%, 720px);
    transform: translateY(-50%);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;
}

.hero-screenshot-carousel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    width: 54%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(12, 19, 31, 0.98) 0%, rgba(12, 19, 31, 0.82) 28%, rgba(12, 19, 31, 0.28) 62%, transparent 100%);
}

.hero-screenshot-track {
    position: relative;
    z-index: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    overflow: visible;
    animation: heroScreenshotCycle 22s ease-in-out infinite;
    will-change: transform;
}

.is-scrolling .hero-screenshot-track {
    animation-play-state: paused;
}

.hero-screenshot-slide {
    position: relative;
    scroll-snap-align: start;
    min-height: 540px;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg) 0 0 22px;
    background: transparent;
    border: 0;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.hero-screenshot-slide img,
.hero-screenshot-placeholder {
    width: 100%;
    height: 540px;
    display: block;
    object-fit: cover;
    background: #070b12;
}

.hero-screenshot-placeholder {
    position: relative;
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 16px;
    box-sizing: border-box;
}

.hero-screenshot-placeholder span {
    display: block;
    border-radius: var(--radius-sm);
}

.placeholder-window-bar {
    height: 20px;
    background:
        radial-gradient(circle at 12px 50%, rgba(255, 255, 255, 0.72) 0 3px, transparent 4px),
        radial-gradient(circle at 26px 50%, rgba(255, 255, 255, 0.42) 0 3px, transparent 4px),
        radial-gradient(circle at 40px 50%, rgba(255, 255, 255, 0.28) 0 3px, transparent 4px),
        rgba(255, 255, 255, 0.08);
}

.placeholder-wave {
    height: 72px;
    background:
        linear-gradient(90deg, transparent 0 6%, rgba(var(--teal-rgb), 0.76) 6% 10%, transparent 10% 16%, rgba(var(--teal-rgb), 0.48) 16% 22%, transparent 22% 30%, rgba(var(--teal-rgb), 0.86) 30% 36%, transparent 36% 44%, rgba(var(--teal-rgb), 0.42) 44% 49%, transparent 49% 57%, rgba(var(--teal-rgb), 0.7) 57% 64%, transparent 64% 100%),
        rgba(255, 255, 255, 0.055);
}

.placeholder-edit-row,
.placeholder-list-row {
    height: 20px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
}

.placeholder-edit-row.short {
    width: 70%;
}

.placeholder-list-row.active {
    background: linear-gradient(90deg, rgba(var(--blue-rgb), 0.62), rgba(var(--teal-rgb), 0.28));
}

.placeholder-cue-grid {
    height: 74px;
    background:
        linear-gradient(90deg, rgba(var(--blue-rgb), 0.52) 0 31%, transparent 31% 35%, rgba(var(--gold-rgb), 0.54) 35% 66%, transparent 66% 70%, rgba(var(--teal-rgb), 0.46) 70% 100%);
}

.placeholder-cue-grid.alt {
    background:
        linear-gradient(90deg, rgba(var(--teal-rgb), 0.42) 0 31%, transparent 31% 35%, rgba(var(--blue-rgb), 0.48) 35% 66%, transparent 66% 70%, rgba(var(--gold-rgb), 0.5) 70% 100%);
}

.placeholder-censorit {
    background: radial-gradient(circle at 75% 20%, rgba(var(--gold-rgb), 0.18), transparent 34%), #070b12;
}

.placeholder-dupeit {
    background: radial-gradient(circle at 72% 28%, rgba(var(--blue-rgb), 0.2), transparent 36%), #070b12;
}

.placeholder-sportscue {
    background: radial-gradient(circle at 68% 22%, rgba(var(--teal-rgb), 0.18), transparent 36%), #070b12;
}

.hero-screenshot-caption {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: min(240px, calc(100% - 36px));
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    background: rgba(5, 9, 15, 0.88);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: rgba(var(--ink-rgb), 0.82);
}

.hero-screenshot-caption strong {
    color: #ffffff;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
}

.hero-screenshot-caption span {
    font-size: 0.78rem;
    color: var(--ink-muted);
}

.hero-screenshot-hint {
    position: absolute;
    right: 18px;
    bottom: -26px;
    display: flex;
    justify-content: center;
    gap: 7px;
    padding-top: 0;
}

.hero-screenshot-hint span {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-pill);
    background: rgba(var(--ink-rgb), 0.25);
}

.hero-screenshot-hint span:first-child {
    width: 22px;
    background: var(--teal);
}

@keyframes heroScreenshotCycle {
    0%, 18% {
        transform: translateX(0);
    }
    25%, 43% {
        transform: translateX(-100%);
    }
    50%, 68% {
        transform: translateX(-200%);
    }
    75%, 93% {
        transform: translateX(-300%);
    }
    100% {
        transform: translateX(0);
    }
}

.storefront-stat {
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, rgba(var(--blue-rgb), 0.08), rgba(var(--gold-rgb), 0.04)),
        rgba(255, 255, 255, 0.035);
}

.hero-panel-card,
.product-spotlight-visual,
.product-spotlight-mock,
.sportscue-story-visual {
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, rgba(var(--blue-rgb), 0.14), rgba(var(--teal-rgb), 0.06) 48%, rgba(var(--gold-rgb), 0.08)),
        rgba(3, 7, 12, 0.72);
    border: 1px solid var(--line-bright);
}

.storefront-feature-grid li,
.sportscue-feature-grid article,
.sportscue-price-card,
.sportscue-requirements,
.next .step {
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.02);
}

.product-spotlight-topline h2 {
    margin: 0;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: clamp(2rem, 4vw, 4.2rem);
    line-height: 1;
    text-wrap: balance;
}

.product-spotlight-topline h2 span {
    background: linear-gradient(100deg, var(--blue), var(--gold) 78%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.product-bento-tile.featured {
    padding: clamp(24px, 4vw, 42px);
    gap: clamp(24px, 5vw, 56px);
}

.product-bento-tile.featured .product-spotlight-visual {
    min-height: 370px;
}

.mock-grid span,
.sportscue-cue-grid span,
.story-cue-pad span {
    border-radius: var(--radius-sm);
}

.sportscue-nav {
    border-radius: var(--radius-md);
    background: rgba(5, 9, 15, 0.94);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.sportscue-scroll-story {
    overflow: visible;
}

.sportscue-story-grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
    gap: 24px;
    align-items: start;
}

.sportscue-story-visual {
    position: sticky;
    top: 184px;
    display: grid;
    padding: 0;
    overflow: hidden;
    min-height: 360px;
}

.sportscue-story-visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top;
    border-radius: inherit;
}

.story-display {
    padding: 20px;
    border-radius: var(--radius-md);
    background: rgba(3, 7, 12, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.story-display span,
.sportscue-story-step .k {
    color: var(--faint);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
}

.story-display strong {
    display: block;
    margin-top: 12px;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: clamp(1.3rem, 3vw, 2.2rem);
}

.story-display-meter {
    height: 9px;
    margin-top: 24px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.story-display-meter span {
    display: block;
    width: 72%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue), var(--teal), var(--gold));
}

.story-cue-pad {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.story-cue-pad span {
    min-height: 74px;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(135deg, rgba(var(--blue-rgb), 0.25), rgba(var(--gold-rgb), 0.12));
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sportscue-story-steps {
    display: grid;
    gap: 16px;
}

.sportscue-story-step {
    min-height: 220px;
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, rgba(var(--blue-rgb), 0.08), rgba(var(--gold-rgb), 0.04)),
        rgba(255, 255, 255, 0.035);
}

.sportscue-story-step h3 {
    margin: 18px 0 12px;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    line-height: 1.05;
}

.sportscue-story-step p {
    max-width: 620px;
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.75;
}

.sportscue-price-card {
    min-height: 340px;
    border-color: rgba(255, 255, 255, 0.12);
}

.site-footer-inner {
    border-top-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 1100px) {
    .storefront-hero-main {
        min-height: 500px;
    }

    .hero-screenshot-carousel {
        right: -72px;
        width: min(92vw, 900px);
        min-width: 0;
        opacity: 0.82;
    }

    .sportscue-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sportscue-key-grid,
    .sportscue-key-card,
    .sportscue-key-card:nth-child(even) {
        grid-template-columns: 1fr;
    }

    .sportscue-key-card:nth-child(even) .sportscue-key-copy,
    .sportscue-key-card:nth-child(even) .sportscue-feature-shot {
        order: initial;
    }

    .sportscue-story-grid {
        grid-template-columns: 1fr;
    }

    .sportscue-story-visual {
        position: relative;
        top: auto;
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .main-header {
        top: 8px;
        width: min(100% - 16px, 1240px);
        height: 68px;
    }

    .back-to-top-button {
        right: 14px;
        bottom: 14px;
        width: 42px;
        height: 42px;
    }

    .storefront-hero,
    .sportscue-hero {
        min-height: auto;
    }

    .storefront-page {
        width: 100%;
    }

    .storefront-hero-copy {
        min-height: auto;
    }

    .storefront-title {
        max-width: min(100%, 560px);
    }

    .storefront-hero-main {
        min-height: 620px;
        display: grid;
        align-content: start;
    }

    .hero-screenshot-carousel {
        top: auto;
        right: -28px;
        bottom: 0;
        width: min(100% + 56px, 760px);
        transform: none;
        opacity: 0.72;
    }

    .hero-screenshot-carousel::before {
        width: 58%;
        background: linear-gradient(90deg, rgba(12, 19, 31, 0.98) 0%, rgba(12, 19, 31, 0.78) 34%, rgba(12, 19, 31, 0.18) 70%, transparent 100%);
    }

    .hero-screenshot-slide {
        min-height: 340px;
        border-radius: var(--radius-md);
    }

    .hero-screenshot-slide img,
    .hero-screenshot-placeholder {
        height: 340px;
    }
}

@media (max-width: 640px) {
    /* The enlarged carousel turns into background texture below small-tablet
       widths, where it starts competing with the headline and intro copy. */
    .hero-screenshot-carousel {
        display: none;
    }

    .storefront-hero-main {
        min-height: 0;
    }

    /* The capability grid never dropped below 2 columns at any existing
       breakpoint, so its long bullet text clips on phones instead of
       wrapping into a readable single column. */
    .sportscue-capability-grid {
        grid-template-columns: 1fr;
    }

    .sportscue-capability-grid .rec-wide {
        grid-column: auto;
    }
}

@media (max-width: 480px) {
    .sportscue-key-grid,
    .sportscue-platform-grid,
    .sportscue-capability-grid,
    .sportscue-story-grid,
    .story-cue-pad {
        grid-template-columns: 1fr;
    }

    .sportscue-key-card,
    .sportscue-story-step {
        min-height: auto;
    }

    .product-spotlight-visual {
        min-height: 240px;
    }
}