/* GSR (Get Site Ready) — Mobile-first SWMS platform design */

/* Fonts loaded via <link> in base.html to avoid render-blocking @import */

/* ── Design Tokens ────────────────────────────────────── */
:root {
    /* Primary: Trust + Authority */
    --primary: #0D6E8C;
    --primary-hover: #0A5A73;
    --primary-light: #E0F4F9;
    --primary-dark: #094D61;

    /* Secondary: Safety Green */
    --green: #1FAC5C;
    --green-light: #E6F9EE;
    --green-dark: #178A49;

    /* Alert: High-Visibility Amber */
    --amber: #FF9800;
    --amber-light: #FFF3E0;

    /* Danger */
    --red: #dc2626;
    --red-light: #fee2e2;

    /* Accent: Bright Blue */
    --accent: #00B4D8;
    --accent-light: #E0F7FA;

    /* Neutrals */
    --charcoal: #2C3E50;
    --gray-50: #F5F7FA;
    --gray-100: #EEF1F5;
    --gray-200: #DEE3EA;
    --gray-300: #C5CDD8;
    --gray-400: #94A3B8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #2C3E50;
    --gray-900: #1a2332;
    --white: #ffffff;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Layout */
    --radius: 12px;
    --radius-sm: 6px;
    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
    --shadow-lg: 0 12px 24px -4px rgba(0,0,0,0.1), 0 4px 8px -2px rgba(0,0,0,0.06);

    /* Typography */
    --pico-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Courier Prime', ui-monospace, monospace;

    /* Semantic aliases */
    --text-muted: var(--gray-500);
    --green-bg: #f0fdf4;
    --green-border: #bbf7d0;
    --green-text: #14532d;
}

/* ── CSS Reset ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* ── Base Element Styles ──────────────────────────────── */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-family: var(--pico-font-family);
    color: var(--charcoal);
    background: var(--gray-50);
    line-height: 1.6;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-weight: 700;
    line-height: 1.2;
    color: var(--charcoal);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

small { font-size: 0.875em; }

hr {
    border: none;
    border-top: 1px solid var(--gray-200);
    margin: 1.5rem 0;
}

/* Links */
a {
    color: var(--primary);
    text-decoration: underline;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--primary-hover);
}

/* Forms */
input,
select,
textarea {
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-300);
    padding: 0.75rem 1rem;
    font-size: 16px; /* Prevents iOS zoom on focus */
    background: var(--white);
    color: var(--charcoal);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 140, 0.12);
}

input:invalid:not(:placeholder-shown) {
    border-color: var(--red);
}

input:invalid:not(:placeholder-shown):focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

input[type="checkbox"] {
    width: auto;
}

select {
    cursor: pointer;
    appearance: auto;
}

textarea {
    resize: vertical;
}

label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-700);
    display: block;
}

/* Buttons */
button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
    padding: 0;
}

/* Tables */
table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    background: var(--white);
    width: 100%;
}

table thead th {
    background: var(--gray-50);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--gray-200);
    text-align: left;
}

table tbody td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
    font-size: 0.88rem;
}

table tbody tr:hover {
    background: var(--gray-50);
}

/* Details/Summary */
details summary {
    cursor: pointer;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::marker {
    display: none;
    content: '';
}

/* Lists */
ul, ol {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.25rem;
}

/* ── Layout containers ────────────────────────────────── */
header.container,
main.container,
footer.container {
    max-width: 1200px;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}

/* ── Skip to content ──────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    background: var(--primary);
    color: var(--white);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    z-index: 1000;
    font-weight: 600;
    text-decoration: none;
}

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

/* ── Navigation (Mobile-first) ────────────────────────── */
header.container {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 0;
    max-width: 100%;
    width: 100%;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: box-shadow 0.25s ease;
}

header.container.header-scrolled {
    box-shadow: var(--shadow-md);
    border-bottom-color: transparent;
}

header.container.header-scrolled .brand-logo {
    width: 28px;
    height: 28px;
}

header.container.header-scrolled nav {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

header.container nav {
    padding: 0.75rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

header.container nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.brand {
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--charcoal);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.brand:hover {
    color: var(--charcoal);
    text-decoration: none;
}

.brand strong {
    display: inline;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.brand-logo {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    transition: width 0.25s ease, height 0.25s ease;
}

/* Header trust badges */
.header-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.header-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.4rem;
    border-radius: 100px;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: var(--gray-50);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
    line-height: 1.3;
}

.header-badge-primary {
    background: var(--green-bg);
    color: var(--green-dark);
    border-color: var(--green-border);
}

/* Hamburger toggle */
.nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    min-height: 44px;
    min-width: 44px;
    align-items: center;
    justify-content: center;
}

.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--charcoal);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Nav links — hidden by default, toggled by burger */
.nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: var(--space-3) 0;
    align-items: flex-end;
}

.nav-links[data-open="true"] {
    display: flex;
}

.nav-links a {
    color: var(--gray-500);
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.15s ease;
    padding: var(--space-3) 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nav-links a:hover {
    color: var(--primary);
}

/* ── Nav Dropdown (Documents menu) ─────────────────────── */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    color: var(--gray-500);
    font-weight: 600;
    font-size: 0.9rem;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-3) 0;
    min-height: 44px;
    transition: color 0.15s ease;
}

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

.nav-dropdown-trigger svg {
    transition: transform 0.2s ease;
}

.nav-dropdown[data-open="true"] .nav-dropdown-trigger svg {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    display: none;
    flex-direction: column;
    padding: 0;
}

.nav-dropdown[data-open="true"] .nav-dropdown-menu {
    display: flex;
}

.nav-dropdown-grid {
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 2px;
}

.nav-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--charcoal);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.nav-dropdown-item:hover {
    background: var(--gray-50);
    box-shadow: 0 0 0 1px var(--gray-200);
}

.nav-dropdown-item:hover .nav-dropdown-icon {
    background: var(--primary);
    color: var(--white);
}

.nav-dropdown-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    background: #e8f4f8;
    color: var(--primary);
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-dropdown-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.nav-dropdown-text strong {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--charcoal);
    line-height: 1.3;
}

.nav-dropdown-text span {
    font-size: 0.72rem;
    color: var(--gray-500);
    line-height: 1.35;
}

.nav-dropdown-footer {
    border-top: 1px solid var(--gray-200);
    padding: 10px 16px;
    text-align: center;
}

.nav-dropdown-footer a {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.nav-dropdown-footer a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* ── Hero (Mobile-first) ──────────────────────────────── */
.hero {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(0, 180, 216, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(31, 172, 92, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, #0E7FA0 100%);
    color: var(--white);
    padding: 2.5rem 1.25rem 3.5rem;
    text-align: center;
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    overflow: visible;
    contain: layout style paint;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 32px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 32V16C200 4 400 0 600 0s400 4 600 16v16z' fill='%23F5F7FA'/%3E%3C/svg%3E") no-repeat center bottom;
    background-size: 100% 100%;
    z-index: 1;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.hero h1 {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -1px;
    color: var(--white);
    line-height: 1.2;
    position: relative;
}

.hero p {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.85);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.2;
    position: relative;
}

/* Dark background text — hero */
.hero a,
.hero span {
    color: rgba(255,255,255,0.85);
}

/* ── Hero Trade Selector ──────────────────────────────── */
.hero-select {
    margin-top: 1.5rem;
    position: relative;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.hero-select-dual {
    max-width: 680px;
}

.hero-select-row {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.hero-select select {
    padding: 0.85rem 1rem;
    border-radius: 100px;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.95);
    color: var(--charcoal);
    font-size: 16px; /* Prevents iOS zoom */
    font-weight: 600;
    cursor: pointer;
    appearance: auto;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    min-height: 48px;
}

.hero-select select:hover {
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.hero-select select:focus {
    border-color: var(--white);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.25), 0 6px 20px rgba(0,0,0,0.2);
}

.hero-select-field {
    flex: 1 1 0%;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.hero-select-field select {
    width: 100%;
}

.hero-select-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.6);
    padding-left: 0.5rem;
}

.btn.hero-go-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto 0;
    width: auto;
    min-width: 140px;
    border-radius: 100px;
    padding: 0.85rem 2rem;
    font-size: 16px;
    font-weight: 700;
    min-height: 48px;
    background: #22c06a;
    color: var(--white);
    border: none;
    box-shadow: 0 4px 14px rgba(34, 192, 106, 0.3);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.btn.hero-go-btn:hover {
    background: #1daa5c;
    box-shadow: 0 6px 20px rgba(34, 192, 106, 0.4);
    transform: translateY(-1px);
}

.hero-select-hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    font-weight: 400;
}

.hero-badges {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    position: relative;
}

.hero-badge {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
    padding: 0.35rem 0.75rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
}

@media (max-width: 768px) {
    .hero-badge { backdrop-filter: none; background: rgba(13,110,140,0.85); }

    .hero-select-row {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-select-dual {
        max-width: 100%;
    }

    .btn.hero-go-btn {
        width: 80%;
        max-width: 280px;
    }

    .product-filter-bar,
    .product-filter-bar + .trade-filter-bar {
        position: static;
    }
}

/* ── State Coverage Bar ───────────────────────────────── */
.state-coverage-bar {
    background: var(--green-bg);
    border-bottom: 1px solid var(--green-border);
    color: var(--green-text);
    font-size: 0.8rem;
    text-align: center;
    padding: 0.45rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    line-height: 1.4;
}

.state-coverage-bar svg {
    flex-shrink: 0;
    color: var(--green);
}

/* ── Compliance Strip (compact single-line) ───────────── */
.compliance-strip {
    background: var(--charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.1px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.compliance-strip svg {
    color: var(--green);
    flex-shrink: 0;
}

.compliance-strip-label {
    color: var(--white);
    font-weight: 800;
}

.compliance-strip-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    display: inline-block;
    flex-shrink: 0;
}

.compliance-strip span {
    color: rgba(255,255,255,0.9);
}

/* ── Section Titles ────────────────────────────────────── */
.section-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--charcoal);
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.section-subtitle {
    color: var(--gray-500);
    font-size: 0.92rem;
    margin-bottom: 1rem;
}

/* ── Trade Grid (Mobile: 1 col) ───────────────────────── */
.trade-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 3rem;
}

a.trade-card {
    text-decoration: none;
    color: inherit;
}

.trade-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    margin: 0;
    border-top: 3px solid transparent;
}

.trade-card:hover {
    border-top-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.trade-card header {
    padding: 0;
    margin: 0 0 0.5rem 0;
    border: none;
    background: none;
}

.trade-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--charcoal);
    margin: 0;
}

.trade-card .trade-desc {
    color: var(--gray-500);
    font-size: 0.85rem;
    flex-grow: 1;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.trade-card .trade-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.trade-card .doc-count {
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    transition: background 0.2s ease, color 0.2s ease;
}

.trade-card:hover .doc-count {
    background: var(--primary);
    color: var(--white);
}

.trade-card:hover .btn-primary {
    background: var(--primary-hover);
    box-shadow: 0 4px 12px rgba(13, 110, 140, 0.3);
}

.trade-card:active {
    transform: translateY(-2px) scale(0.99);
}

.trade-card .trade-pricing {
    border-top: 1px solid var(--gray-100);
    padding-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.trade-card .pack-price {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--charcoal);
}

.trade-card .pack-price span {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--gray-400);
}

.trade-card .per-doc {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-top: 0.2rem;
}

.trade-card footer {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    width: 100%;
    min-height: 44px;
    touch-action: manipulation;
}

.btn-primary {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(13, 110, 140, 0.3);
}

.btn-primary:hover {
    background: var(--primary-hover);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(13, 110, 140, 0.3), 0 0 0 0 rgba(13, 110, 140, 0);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: none;
    transition-duration: 0.05s;
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

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

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.05rem;
    border-radius: var(--radius);
}

.btn-inline {
    width: auto;
    display: inline-block;
}

.btn-sm {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    min-height: 36px;
}

/* Button loading state */
.btn[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}

.btn[aria-busy="true"]::after {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-left: var(--space-2);
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

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

/* ── Dark background overrides — Pack Offer ───────────── */
.pack-offer a,
.pack-offer .btn {
    color: #ffffff;
}

.pack-offer .btn-primary {
    background: var(--white);
    color: var(--primary);
}

.pack-offer .btn-primary:hover {
    background: var(--gray-100);
    color: var(--primary-dark);
}

/* ── Dark background overrides — Hero ─────────────────── */
.hero a,
.hero .btn-outline {
    color: #ffffff;
}

/* ── Dark background overrides — Cookie Notice ────────── */
.cookie-notice,
.cookie-notice p {
    color: #ffffff;
}

.cookie-notice a {
    color: var(--accent);
}

/* ── Dark background overrides — Bottom Strip ─────────── */
.bottom-strip a {
    color: #ffffff;
}

/* ── Dark background overrides — Floating CTA ─────────── */
.floating-cta a,
.floating-cta .btn {
    color: #ffffff;
}

/* ── How It Works (compact) ───────────────────────────── */
.how-it-works {
    margin-bottom: 2rem;
}

.steps-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.step-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 1.25rem 1rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.step-num {
    width: 52px;
    height: 52px;
    min-width: 52px;
    background: var(--primary);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 800;
}

.step-compact strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--charcoal);
    margin-bottom: 0.2rem;
}

.step-compact span:not(.step-num) {
    font-size: 0.8rem;
    color: var(--gray-500);
    line-height: 1.4;
}

/* ── What's Inside (collapsible) ──────────────────────── */
.whats-inside-details {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    margin-bottom: 2rem;
    box-shadow: var(--shadow);
}

.whats-inside-details[open] {
    box-shadow: var(--shadow-md);
}

.whats-inside-summary {
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.whats-inside-summary::after {
    display: none;
}

.whats-inside-summary .section-title {
    margin-bottom: 0.3rem;
    font-size: 1.1rem;
}

.inside-summary-content {
    flex: 1;
}

.inside-toggle-hint {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}


.inside-qualities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.inside-qualities span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 100px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.inside-qualities svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.inside-checklist {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--gray-100);
}

.inside-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.82rem;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
}

.inside-check:last-child {
    border-bottom: none;
}

.inside-check svg {
    width: 15px;
    height: 15px;
    color: var(--green);
    flex-shrink: 0;
}

/* ── Social Proof ────────────────────────────────────── */
.social-proof {
    text-align: center;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.social-proof-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0;
}

.social-proof-stat svg {
    color: var(--green);
}

.social-proof-stat strong {
    color: var(--charcoal);
}

/* ── Product Categories Section ────────────────────────── */
.product-categories {
    margin-bottom: 2rem;
}

.compliance-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.compliance-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.35rem 0.85rem;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--charcoal);
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

.compliance-pill svg {
    color: var(--green, #1FAC5C);
    flex-shrink: 0;
}

.product-category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    max-width: 900px;
    margin: 0 auto;
}

.product-category-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: var(--space-5) var(--space-4);
    text-align: center;
    text-decoration: none;
    color: var(--charcoal);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-category-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.product-category-card h3 {
    margin: 0 0 var(--space-1);
    font-size: 1rem;
}

.product-category-card p {
    font-size: 0.8rem;
    color: var(--gray-600);
    margin: 0 0 var(--space-3);
}

.product-category-price {
    display: inline-block;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--primary);
    background: var(--primary-light);
    padding: var(--space-1) var(--space-3);
    border-radius: 100px;
}

/* ── Why SWMS Section ────────────────────────────────── */
.why-swms {
    margin-bottom: 2.5rem;
}

.why-swms-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.why-point {
    background: var(--amber-light);
    border: 1px solid rgba(255, 152, 0, 0.2);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.why-point strong {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--charcoal);
}

.why-point span {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.4;
}

/* ── Guarantee Section ───────────────────────────────── */
.guarantee-section {
    margin-bottom: 2rem;
}

.guarantee-card {
    background: var(--green-light);
    border: 1px solid rgba(31, 172, 92, 0.2);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.guarantee-card .section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
}

.guarantee-card .section-title svg {
    color: var(--green);
}

.guarantee-card > p {
    color: var(--gray-700);
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto 1rem;
}

.guarantee-card > p a {
    color: var(--primary);
    text-decoration: underline;
}

.guarantee-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
}

.guarantee-points span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--green-dark);
    white-space: nowrap;
}

.guarantee-points svg {
    color: var(--green);
}

.state-coverage-note {
    margin-top: var(--space-4);
    font-size: 0.8rem;
    color: var(--gray-400);
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}

.state-coverage-note a {
    color: var(--gray-500);
}

.state-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin: 1rem 0;
}

.state-table th {
    background: var(--bg-subtle, #f1f5f9);
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border);
}

.state-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

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

@media (max-width: 640px) {
    .state-table thead { display: none; }
    .state-table tr { display: block; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; }
    .state-table td { display: block; padding: 0.25rem 0.5rem; border-bottom: none; }
}

/* ── Bottom Strip ────────────────────────────────────── */
.bottom-strip {
    margin-bottom: 2rem;
}

.bottom-strip-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.bottom-strip-items span {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--gray-400);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.bottom-strip-items svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ── Pack Offer Banner ─────────────────────────────────── */
.pack-offer {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(0, 180, 216, 0.12) 0%, transparent 50%),
        linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    color: var(--white);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 2rem;
    border: none;
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1rem;
}

.pack-offer h3 {
    color: var(--white);
    font-size: 1.2rem;
    margin: 0 0 0.5rem;
}

.pack-offer p {
    color: rgba(255,255,255,0.8);
    margin: 0;
}

.pack-offer .pack-price-tag {
    text-align: center;
}

.pack-offer .pack-price-tag .amount {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--white);
    display: block;
    line-height: 1;
}

.pack-offer .pack-price-tag .was {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.6);
    text-decoration: line-through;
}

.pack-offer .pack-price-tag .save {
    font-size: 0.82rem;
    color: var(--green-dark);
    background: var(--green-light);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-weight: 600;
    display: inline-block;
    margin-top: 0.5rem;
}

.pack-offer .btn {
    margin-top: 0.75rem;
}

/* ── Sale Urgency ─────────────────────────────────────── */
.sale-urgency {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin-top: 0.5rem;
}

/* ── Related Trades ──────────────────────────────────── */
.related-trades {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
}

.related-trades-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.related-trade-link {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 100px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--charcoal);
    text-decoration: none;
    transition: all 0.15s ease;
}

.related-trade-link:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

/* ── Individual selection footer ───────────────────────── */
.individual-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    padding: 1.25rem;
    background: var(--white);
    border-radius: var(--radius);
    margin-top: 1rem;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow);
}

.individual-footer p {
    margin: 0;
}

.individual-footer .btn {
    width: 100%;
}

/* ── Progress Steps ──────────────────────────────────── */
.progress-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.progress-step {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-400);
    padding: 0.35rem 0.75rem;
    border-radius: 100px;
    background: var(--gray-100);
    white-space: nowrap;
}

.progress-step.active {
    background: var(--primary);
    color: var(--white);
}

.progress-step.completed {
    background: var(--green-light);
    color: var(--green-dark);
}

/* ── Payment Reassurance ─────────────────────────────── */
.payment-reassurance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--gray-400);
}

.payment-reassurance svg {
    flex-shrink: 0;
}

/* ── Checkout Trust Block ────────────────────────────── */
.checkout-trust {
    text-align: center;
    margin-top: 1rem;
}

.checkout-guarantees {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--gray-500);
}

.checkout-guarantees span::before {
    content: '\2713 ';
    color: var(--green);
    font-weight: 700;
}

/* ── Form Error Banner ───────────────────────────────── */
.form-error-banner {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #991b1b;
    margin-bottom: 1rem;
}

/* ── Optional Fields Toggle ──────────────────────────── */
.optional-fields-toggle {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 0;
    margin-bottom: 0.5rem;
}

.optional-fields-toggle summary {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    list-style: none;
}

.optional-fields-toggle summary::before {
    content: '+ ';
}

.optional-fields-toggle[open] summary::before {
    content: '- ';
}

.optional-fields-toggle .form-grid {
    padding: 0 1rem 1rem;
}

/* ── State Coverage Badge ────────────────────────────── */
.state-coverage-badge {
    background: var(--green-bg);
    border: 1px solid var(--green-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--green-text);
    margin-top: 0.5rem;
    line-height: 1.5;
}

/* ── Customize Form ────────────────────────────────────── */
.order-summary {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}

.order-summary h3 {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.order-total {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--charcoal);
}

/* ── Form layout ──────────────────────────────────────── */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.form-hint {
    color: var(--gray-500);
}

/* Monospace for codes/references */
.mono, .swms-code {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* ── Admin Dashboard ───────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
    box-shadow: var(--shadow);
}

.stat-card .stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-400);
    margin-bottom: 0.35rem;
}

.stat-card .stat-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--charcoal);
}

/* ── Success / Download Page ───────────────────────────── */
.success-card {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    margin: 1.5rem 0;
    box-shadow: var(--shadow-md);
}

.success-card h2 {
    color: var(--green);
    font-size: 1.3rem;
}

.success-card.processing h2 {
    color: var(--primary);
}

.success-detail {
    font-size: 1.05rem;
    color: var(--gray-600);
}

.success-order-info {
    color: var(--gray-500);
}

.success-email-note {
    color: var(--gray-400);
    font-size: 0.88rem;
    margin-top: 1.25rem;
}

.progress-centered {
    max-width: 300px;
    margin: 1.25rem auto;
    display: block;
}

/* Download page */
.download-actions {
    text-align: center;
    margin-bottom: 2rem;
}

.download-heading {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 1rem;
}

.info-box {
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
    border: 1px solid var(--gray-100);
}

.info-box small {
    color: var(--gray-500);
}

/* ── Status badges ─────────────────────────────────────── */
.status-badge {
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
}

.status-badge.delivered { background: var(--green-light); color: var(--green); }
.status-badge.paid { background: var(--primary-light); color: var(--primary); }
.status-badge.failed { background: var(--red-light); color: var(--red); }
.status-badge.pending { background: var(--amber-light); color: var(--amber); }

/* ── Breadcrumbs ──────────────────────────────────────── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0 var(--space-3);
    font-size: 0.8rem;
    flex-wrap: wrap;
}

.breadcrumb li + li::before {
    content: '/';
    color: var(--gray-300);
    margin-right: var(--space-2);
}

.breadcrumb a {
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumb a:hover {
    color: var(--primary);
}

.breadcrumb [aria-current] {
    color: var(--charcoal);
    font-weight: 600;
}

/* ── Product type pills ───────────────────────────────── */
.product-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1.5rem;
}
.product-pill {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    color: var(--charcoal, #2C3E50);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    transition: all 0.15s;
    border: 2px solid var(--gray-200, #DEE3EA);
    background: var(--white, #fff);
    white-space: nowrap;
}
.product-pill:hover {
    border-color: var(--teal);
    color: var(--teal);
}
.product-pill-active {
    background: var(--charcoal, #2C3E50);
    border-color: var(--charcoal, #2C3E50);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(44, 62, 80, 0.3);
}
.product-pill-active:hover {
    background: var(--charcoal, #2C3E50);
    border-color: var(--charcoal, #2C3E50);
    color: #fff;
}

/* ── Cross-sell strip ────────────────────────────────── */
.cross-sell-strip {
    background: var(--gray-50, #F5F7FA);
    border: 1px solid var(--gray-200, #DEE3EA);
    border-radius: var(--radius-sm, 6px);
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.cross-sell-strip strong {
    margin-right: 0.25rem;
}
.cross-sell-strip a {
    color: var(--teal);
    text-decoration: none;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(13, 110, 140, 0.08);
    font-size: 0.8rem;
}
.cross-sell-strip a:hover {
    background: rgba(13, 110, 140, 0.15);
}

/* ── Utility classes ──────────────────────────────────── */
.text-center { text-align: center; }
.text-muted { color: var(--gray-500); }
.doc-description { color: var(--gray-500); }
.section-title-sm { font-size: 1.2rem; }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }

/* ── SVG Icon base ────────────────────────────────────── */
.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── Footer ────────────────────────────────────────────── */
footer.container {
    padding-bottom: 2rem;
}

footer.container small {
    color: var(--gray-400);
    font-size: 0.78rem;
    line-height: 1.6;
}

/* ── Price display ─────────────────────────────────────── */
.price-highlight {
    color: var(--charcoal);
    font-size: 1.1rem;
}

.price-highlight small {
    color: var(--gray-400);
    font-size: 0.85rem;
}

.price-highlight s {
    color: var(--gray-400);
}

/* ── Focus states ──────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(13, 110, 140, 0.3);
}

a.trade-card:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 140, 0.2);
}

/* ══════════════════════════════════════════════════════════
   TABLET: min-width 768px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    header.container nav {
        padding: 0.75rem 2rem;
        flex-wrap: nowrap;
    }

    .header-badges {
        flex-direction: row;
        gap: 0.4rem;
    }

    .header-badge {
        padding: 0.2rem 0.6rem;
        font-size: 0.68rem;
    }

    /* Hero */
    .hero {
        padding: 4rem 2rem 4.5rem;
        margin-bottom: 0;
    }

    .hero h1 {
        font-size: 2.4rem;
        letter-spacing: -1.5px;
        margin-bottom: 1.25rem;
    }

    .hero p {
        font-size: 1rem;
        line-height: 1.2;
    }

    .hero-select {
        max-width: 420px;
        margin-top: 2rem;
    }

    .hero-select.hero-select-dual {
        max-width: 680px;
    }

    .hero-select-dual .hero-select-row {
        flex-direction: row;
    }

    .hero-badges {
        gap: 0.75rem;
        margin-top: 2rem;
    }

    .hero-badge {
        padding: 0.4rem 1rem;
        font-size: 0.8rem;
    }

    .product-category-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    /* Section title sm — responsive scaling */
    .section-title-sm {
        font-size: 1.35rem;
    }

    /* Why SWMS: 3 cols */
    .why-swms-points {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    /* Guarantee card */
    .guarantee-card {
        padding: 2rem;
    }

    /* Section titles */
    .section-title {
        font-size: 1.8rem;
        letter-spacing: -0.75px;
    }

    .section-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    /* Trade grid: 2 cols */
    .trade-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        margin-bottom: 4rem;
    }

    .trade-card {
        padding: 1.5rem;
    }

    /* Steps row: 3 cols */
    .steps-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    /* What's inside: 2-col checklist when open */
    .inside-checklist {
        grid-template-columns: 1fr 1fr;
    }

    .whats-inside-summary .section-title {
        font-size: 1.3rem;
    }

    /* Individual footer: horizontal */
    .individual-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 1.5rem;
    }

    .individual-footer .btn {
        width: auto;
    }

    /* Form grid: 2 cols */
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Pack offer */
    .pack-offer {
        padding: 2.5rem;
    }

    /* Success card */
    .success-card {
        padding: 3rem 2rem;
        margin: 2rem 0;
    }

    .success-card h2 {
        font-size: 1.5rem;
    }

    /* Stats */
    .stat-card {
        padding: 1.5rem;
    }

    .stat-card .stat-value {
        font-size: 2rem;
    }

    /* Breadcrumbs */
    .breadcrumb {
        font-size: 0.85rem;
        margin: var(--space-4) 0 var(--space-6);
    }

    /* Table cells */
    table tbody td {
        padding: 1rem;
    }

    table thead th {
        padding: 0.75rem 1rem;
    }
}

/* ══════════════════════════════════════════════════════════
   DESKTOP: min-width 1024px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    /* Desktop Navigation — show inline, hide hamburger */
    .nav-toggle {
        display: none;
    }

    .nav-links {
        display: flex;
        flex-direction: row;
        width: auto;
        padding: 0;
        gap: var(--space-2);
    }

    /* Desktop nav dropdown — absolute positioned panel */
    .nav-dropdown-menu {
        position: absolute;
        top: calc(100% + 4px);
        right: -60px;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: 12px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
        min-width: 340px;
        padding: 0;
        z-index: 200;
        animation: dropdown-appear 0.15s ease-out;
    }

    /* Hero */
    .hero {
        padding: 5rem 2rem 5.5rem;
    }

    .hero h1 {
        font-size: 2.6rem;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero p {
        font-size: 1.05rem;
        max-width: 560px;
    }

    /* Trade grid: 3 cols */
    .trade-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Stats: 4 cols */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    /* Pack offer: side by side, compact */
    .pack-offer {
        grid-template-columns: 1fr auto;
        text-align: left;
        gap: 1.5rem;
        padding: 1.25rem 1.75rem;
        align-items: center;
        max-width: 800px;
    }

    .pack-offer h3 {
        font-size: 1.05rem;
        margin-bottom: 0.25rem;
    }

    .pack-offer p {
        font-size: 0.88rem;
    }

    .pack-offer .pack-price-tag {
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
    }

    .pack-offer .pack-price-tag .amount {
        font-size: 1.8rem;
    }

    .pack-offer .pack-price-tag .save {
        align-self: flex-start;
        font-size: 0.75rem;
    }

    /* Checkout form: centered card */
    form[action="/checkout/create-session"] {
        max-width: 650px;
        margin: 0 auto;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius);
        padding: 2rem;
        box-shadow: var(--shadow);
    }

    /* Footer: horizontal links */
    .footer-links {
        flex-wrap: wrap;
        gap: var(--space-6);
    }

    /* Content max-widths for readability */
    .faq-section {
        max-width: 780px;
    }

    .contact-section {
        max-width: 900px;
    }

    .legal-content {
        max-width: 48rem;
    }
}

/* ── Page Header (FAQ / Contact) ─────────────────────── */
.page-header {
    text-align: center;
    padding: var(--space-12) 0 var(--space-8);
}

.page-header h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--charcoal);
    margin-bottom: var(--space-3);
}

.page-subtitle {
    color: var(--gray-500);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ── FAQ ─────────────────────────────────────────────── */
.faq-section {
    max-width: 780px;
    margin: 0 auto;
    padding-bottom: var(--space-12);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.faq-item {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s;
}

.faq-item[open] {
    border-color: var(--primary);
}

.faq-question {
    padding: var(--space-5) var(--space-6);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--charcoal);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.faq-question::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--gray-400);
    border-bottom: 2px solid var(--gray-400);
    border-left: none;
    border-top: none;
    transform: rotate(45deg);
    flex-shrink: 0;
    transition: transform 0.25s ease;
    margin-top: -4px;
    background: none;
}

.faq-item[open] .faq-question::after {
    transform: rotate(-135deg);
    margin-top: 4px;
    border-color: var(--primary);
}

.faq-answer {
    padding: 0 var(--space-6) var(--space-5);
}

.faq-answer p {
    color: var(--gray-600);
    line-height: 1.7;
    margin: 0;
}

.faq-answer a {
    color: var(--primary);
    text-decoration: underline;
}

.faq-cta {
    text-align: center;
    padding: var(--space-8) 0 var(--space-12);
}

.faq-cta p {
    color: var(--gray-500);
    font-size: 1.05rem;
}

.faq-cta a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
}

/* ── Contact ─────────────────────────────────────────── */
.contact-section {
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: var(--space-12);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
}

@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr 1.2fr;
        gap: var(--space-12);
    }
}

.contact-info h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--charcoal);
    margin-bottom: var(--space-4);
}

.contact-info > p {
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: var(--space-8);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.contact-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.contact-detail strong {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-400);
}

.contact-detail a,
.contact-detail span {
    color: var(--charcoal);
    font-weight: 600;
}

.contact-detail a {
    color: var(--primary);
    text-decoration: underline;
}

.contact-form {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-group label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--charcoal);
}

.form-group input,
.form-group select,
.form-group textarea {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-size: 1rem;
    font-family: var(--pico-font-family);
    color: var(--charcoal);
    background: var(--gray-50);
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--white);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.btn-full {
    width: 100%;
}

.contact-success {
    text-align: center;
    padding: var(--space-12) 0;
    max-width: 500px;
    margin: 0 auto;
}

.contact-success h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--green-dark);
    margin-bottom: var(--space-4);
}

.contact-success p {
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: var(--space-8);
}

/* ── Footer Links ────────────────────────────────────── */
.footer-links {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-4);
}

.footer-links a {
    color: var(--gray-500);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

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

/* ── Sale Banner & Pricing ───────────────────────────── */

.sale-banner {
    background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
    color: var(--white);
    text-align: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    margin-bottom: var(--space-6);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.sale-original {
    text-decoration: line-through;
    opacity: 0.6;
    font-weight: 400;
    margin-right: 4px;
}

.pack-price-tag .sale-original,
.order-total .sale-original {
    font-size: 0.85em;
}

/* ── Product Filter Pills ─────────────────────────── */

.product-filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: var(--space-3);
    position: sticky;
    top: 56px;
    z-index: 11;
    background: var(--white);
    padding: var(--space-3) 0 var(--space-1);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.product-filter-bar::-webkit-scrollbar {
    display: none;
}

.product-filter-bar + .trade-filter-bar {
    top: 104px;
    margin-top: 0;
    padding-top: var(--space-2);
}

/* ── Trade Filter Pills ────────────────────────────── */

.trade-filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: var(--space-6);
    position: sticky;
    top: 56px;
    z-index: 10;
    background: var(--white);
    padding: var(--space-3) 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.trade-filter-bar::-webkit-scrollbar {
    display: none;
}

@media (max-width: 768px) {
    .product-filter-bar,
    .trade-filter-bar,
    .product-filter-bar + .trade-filter-bar {
        background: transparent;
        padding-left: 4%;
        padding-right: 4%;
    }
}

.filter-pill {
    flex-shrink: 0;
    border-radius: 100px;
    padding: 0.5rem 1.15rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
}

.filter-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-pill.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

/* ── Trade Grid: show 8 by default ────────────────────── */
.trade-grid:not(.show-all) .trade-card:nth-child(n+9) {
    display: none;
}

.trade-grid.filtered .trade-card:nth-child(n+9) {
    display: flex;
}

.show-all-trades {
    text-align: center;
    margin: -1.5rem 0 3rem;
}

.trade-grid.show-all ~ .show-all-trades {
    display: none;
}

.trade-card[data-hidden="true"] {
    display: none;
}

/* Truncate trade descriptions to 2 lines */
.trade-card .trade-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Scroll Reveal Animations ────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-stagger.revealed > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.revealed > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger.revealed > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger.revealed > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger.revealed > *:nth-child(5) { transition-delay: 400ms; }

.reveal-stagger.revealed > * {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Card Filter Animation ───────────────────────────── */
@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.trade-card-enter {
    animation: cardFadeIn 0.3s ease forwards;
}

/* ── Back to Top Button ──────────────────────────────── */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
    z-index: 90;
}

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

.back-to-top:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
}

.back-to-top:active {
    transform: translateY(0);
}

/* ── Floating Mobile CTA ─────────────────────────────── */
.floating-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    padding: 12px 16px;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: none;
}

.floating-cta.visible {
    transform: translateY(0);
}

.floating-cta .btn {
    margin: 0;
}

/* ── Trade Page Content Sections ──────────────────────── */
.trade-intro {
    margin-bottom: var(--space-8);
    line-height: 1.7;
    color: var(--gray-700);
    font-size: 0.92rem;
}

.trade-intro p {
    margin-bottom: var(--space-4);
}

.trade-hazards,
.trade-standards {
    margin-bottom: var(--space-8);
}

.trade-hazards ul,
.trade-standards ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.trade-hazards li,
.trade-standards li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.88rem;
    color: var(--gray-700);
    line-height: 1.5;
}

.trade-hazards li::before,
.trade-standards li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.trade-standards li::before {
    background: var(--green);
}

.trade-faq {
    margin-top: var(--space-10);
    margin-bottom: var(--space-8);
}

.trade-last-updated,
.trade-last-updated small {
    color: var(--gray-400);
    font-size: 0.8rem;
}

/* ── Ads landing banner ──────────────────────────────── */
.ads-landing-banner {
    background: var(--green-light);
    color: var(--green-dark);
    padding: 0.625rem 1rem;
    border-radius: var(--radius);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--space-4);
}

/* ── Social proof inline (trade page) ────────────────── */
.social-proof-inline {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
    margin-top: 0.5rem;
}

/* ── Collapsible trade details ───────────────────────── */
.trade-details-section {
    margin-bottom: var(--space-4);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}
.trade-details-section summary {
    cursor: pointer;
    margin: 0;
    font-size: 1rem;
    color: var(--gray-900);
    font-weight: 700;
}
.trade-details-section ul {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.trade-details-section li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.5;
}
.trade-details-section li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.trade-last-updated {
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--gray-100);
}

/* ── Error Page ──────────────────────────────────────── */
.error-page {
    text-align: center;
    padding: var(--space-16) 0;
}

.error-page h1 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: var(--space-2);
    color: var(--primary);
}

.error-page p {
    font-size: 1.1rem;
    color: var(--gray-500);
    margin-bottom: var(--space-8);
}

@media (max-width: 767px) {
    .floating-cta {
        display: block;
    }

    .back-to-top.visible.has-floating-cta {
        bottom: 80px;
    }
}

/* ── Legal pages ─────────────────────────────────────── */
.legal-content {
    max-width: 48rem;
    margin: 0 auto var(--space-8);
    line-height: 1.7;
}

.legal-content h2 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--gray-900);
}

.legal-content ul {
    padding-left: 1.5rem;
    margin-bottom: var(--space-4);
}

.legal-content li {
    margin-bottom: var(--space-2);
}

.legal-content code {
    background: var(--gray-100);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
}

/* ── Consent checkbox ────────────────────────────────── */
.consent-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: 0.92rem;
    color: var(--gray-600);
    cursor: pointer;
}

.consent-checkbox input[type="checkbox"] {
    margin-top: 0.25em;
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}

.consent-checkbox a {
    color: var(--primary);
    text-decoration: underline;
}

/* ── Cookie notice ───────────────────────────────────── */
.cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--gray-900);
    color: var(--white);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    z-index: 1000;
    font-size: 0.88rem;
}

.cookie-notice p {
    margin: 0;
    color: var(--white);
}

.cookie-notice a {
    color: var(--accent);
    text-decoration: underline;
}

.cookie-notice .btn-sm {
    padding: 4px 12px;
    font-size: 0.78rem;
    min-height: 28px;
    background: var(--white);
    color: var(--gray-900);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .cookie-notice {
        flex-direction: column;
        gap: var(--space-2);
        text-align: center;
        padding: var(--space-3);
        bottom: 56px;
    }
}

/* ── Contact form privacy note ───────────────────────── */
.form-privacy-note {
    margin-top: var(--space-2);
    font-size: 0.82rem;
    color: var(--gray-500);
    text-align: center;
}

.form-privacy-note a {
    color: var(--primary);
}

/* ── Sample strip (below hero) ────────────────────────── */
.sample-strip {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    padding: var(--space-3) var(--space-4);
    text-align: center;
}

.sample-strip-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--charcoal);
    text-decoration: none;
    font-size: 0.9rem;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.sample-strip-link:hover {
    background: var(--gray-100);
    color: var(--primary);
}

.sample-strip-link strong {
    color: var(--primary);
}

.sample-strip-link svg {
    flex-shrink: 0;
    color: var(--primary);
}

@media (max-width: 640px) {
    .sample-strip-link {
        font-size: 0.84rem;
        gap: var(--space-2);
        padding: var(--space-2);
    }
}

/* ── Legislation mapping section ─────────────────────── */
.legislation-map {
    margin: var(--space-12) 0;
}

.legislation-map-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.leg-map-item {
    background: var(--gray-50);
    border-left: 3px solid var(--primary);
    padding: var(--space-4);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.leg-map-item strong {
    display: block;
    font-size: 0.95rem;
    color: var(--charcoal);
    margin-bottom: var(--space-1);
}

.leg-map-item span {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.4;
}

@media (max-width: 768px) {
    .legislation-map-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .legislation-map-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Sample link on trade page ───────────────────────── */
.btn-sample-link {
    display: block;
    margin-top: var(--space-3);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 500;
}

.btn-sample-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ── Refund guarantee inline ─────────────────────────── */
.refund-guarantee-inline {
    text-align: center;
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
    background: var(--green-bg);
    border: 1px solid var(--green-border);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    color: var(--green-text);
}

.cross-sell-strip {
    background: var(--primary-light);
    border: 1px solid rgba(13, 110, 140, 0.15);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-size: 0.85rem;
    margin-top: var(--space-3);
    margin-bottom: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.cross-sell-strip a {
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.cross-sell-strip a:hover {
    text-decoration: underline;
}

/* ── Document Preview (trade page) ──────────────────── */
.doc-preview {
    margin-top: 0.5rem;
}

.doc-preview-toggle {
    font-size: 0.8rem;
    color: var(--primary);
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.doc-preview-toggle::before {
    content: "\25B6";
    font-size: 0.6rem;
    transition: transform 0.2s ease;
}

.doc-preview[open] > .doc-preview-toggle::before {
    transform: rotate(90deg);
}

.doc-preview-toggle::-webkit-details-marker {
    display: none;
}

.doc-preview-content {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-top: 0.5rem;
    font-size: 0.82rem;
}

.preview-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: var(--space-3);
}

.preview-stat {
    background: var(--white);
    border: 1px solid var(--gray-200);
    padding: 0.25rem 0.6rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--charcoal);
}

.preview-section {
    margin-bottom: var(--space-3);
}

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

.preview-label {
    display: block;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    margin-bottom: 0.3rem;
}

.preview-tag {
    display: inline-block;
    background: var(--white);
    border: 1px solid var(--gray-200);
    padding: 0.15rem 0.5rem;
    border-radius: 100px;
    font-size: 0.75rem;
    margin: 0.15rem 0.15rem 0.15rem 0;
    color: var(--gray-700);
}

.preview-tag small {
    color: var(--gray-400);
}

.preview-tag-leg {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
    font-size: 0.72rem;
}

.preview-tag-std {
    background: var(--primary-light);
    border-color: rgba(13, 110, 140, 0.2);
    color: var(--primary-dark);
    font-size: 0.72rem;
}

.preview-more {
    font-size: 0.75rem;
    color: var(--gray-400);
    font-style: italic;
}

.preview-ppe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
}

.preview-standards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
}

.doc-title-link {
    text-decoration: none;
    color: var(--charcoal);
}

.doc-title-link:hover {
    color: var(--primary);
}

/* ---- Individual document page ---- */
.doc-detail-description {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.6;
    max-width: 720px;
    margin-bottom: 1.5rem;
}

.doc-detail-section {
    margin: 1.5rem 0;
}

.doc-detail-cta {
    margin: 2rem 0;
    background: var(--white);
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    overflow: hidden;
}

.doc-detail-cta-inner {
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.doc-detail-price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    justify-content: center;
}

.doc-detail-price .price-current {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--charcoal);
}

.doc-detail-price .price-was {
    font-size: 1rem;
    color: var(--gray-400);
    text-decoration: line-through;
}

.doc-detail-price .price-badge {
    background: var(--green-bg);
    color: var(--green-dark);
    border: 1px solid var(--green-border);
    padding: 0.1rem 0.5rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
}

.doc-detail-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-top: 0.25rem;
}

.doc-detail-trust span::before {
    content: "\2713 ";
    color: var(--green-dark);
    font-weight: 700;
}

.related-docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.related-doc-card {
    display: block;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--charcoal);
    transition: border-color 0.15s;
}

.related-doc-card:hover {
    border-color: var(--primary);
}

.related-doc-card strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.related-doc-card small {
    color: var(--gray-600);
    font-size: 0.78rem;
    line-height: 1.4;
}

/* Mobile sticky CTA */
.doc-sticky-cta {
    display: none;
}

@media (max-width: 768px) {
    .doc-sticky-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--white);
        border-top: 2px solid var(--primary);
        padding: 0.75rem 1rem;
        z-index: 99;
        box-shadow: 0 -2px 8px rgba(0,0,0,.1);
    }

    .doc-sticky-price {
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--charcoal);
    }
}

/* ====================================================================
   COMPLIANCE CHECKER
   ==================================================================== */

/* ── Hero & Step Indicator ──────────────────────────────────────────── */
.checker-hero {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    background: linear-gradient(135deg, #0a5c75 0%, #0D6E8C 40%, #1a8aad 80%, #22a0c8 100%);
    color: #fff;
    border-radius: 16px;
    margin-bottom: var(--space-6);
    box-shadow: 0 8px 32px rgba(13,110,140,0.25);
}
.checker-hero-content { margin-bottom: var(--space-6); }
.checker-hero h1 { font-size: 2.2rem; margin-bottom: var(--space-2); color: #fff; letter-spacing: -0.5px; }
.checker-subtitle { font-size: 1.05rem; opacity: 0.9; max-width: 600px; margin: 0 auto; line-height: 1.5; }

.checker-step-indicator { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: var(--space-4); }
.checker-step {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
    background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.6);
}
.checker-step.active { background: #fff; color: var(--primary); }
.checker-step.done { background: var(--green); color: #fff; }
.checker-step-line { width: 40px; height: 2px; background: rgba(255,255,255,0.25); }
.checker-step-line.done { background: var(--green); }

/* ── Checker Form (Step 1) ──────────────────────────────────────────── */
.checker-form {
    max-width: 500px; margin: 0 auto;
    background: rgba(255,255,255,0.12); border-radius: 12px;
    padding: var(--space-5);
    backdrop-filter: blur(4px);
}
.checker-select-group { display: flex; flex-direction: column; gap: var(--space-3); }
.checker-form .form-group { text-align: left; }
.checker-form label { color: rgba(255,255,255,0.9); font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; display: block; }
.checker-form select {
    width: 100%; padding: 10px 12px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.3); background: #fff; color: var(--charcoal);
    font-size: 0.95rem;
}
.checker-submit { margin-top: var(--space-3); }

/* ── Trust Strip ────────────────────────────────────────────────────── */
.checker-trust { margin-bottom: var(--space-6); }
.checker-trust-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
    text-align: center;
}
.checker-trust-item {
    padding: var(--space-3); background: #fff; border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.checker-trust-item strong { display: block; font-size: 0.95rem; color: var(--primary); margin-bottom: 2px; }
.checker-trust-item span { font-size: 0.8rem; color: var(--gray-600); }

/* ── How It Works ───────────────────────────────────────────────────── */
.checker-how { margin-bottom: var(--space-8); text-align: center; }
.checker-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.checker-how-step {
    padding: var(--space-4); background: #fff; border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05); transition: transform 0.2s;
}
.checker-how-step:hover { transform: translateY(-2px); }
.checker-how-num {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--primary); color: #fff; font-weight: 800; font-size: 1.1rem;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-2);
}
.checker-how-step h3 { font-size: 1rem; margin-bottom: var(--space-1); }
.checker-how-step p { font-size: 0.9rem; color: var(--gray-600); }

/* ── Questions Page ─────────────────────────────────────────────────── */
.checker-questions-header { text-align: center; margin-bottom: var(--space-6); }
.checker-questions-header h1 { font-size: 1.6rem; }

.checker-questions-form { max-width: 720px; margin: 0 auto; }

.checker-question-group { margin-bottom: var(--space-5); }
.checker-category-heading {
    font-size: 1rem; font-weight: 700; color: var(--primary);
    padding-bottom: var(--space-1); border-bottom: 2px solid var(--primary);
    margin-bottom: var(--space-3);
}

.checker-question {
    padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2);
    background: #fff; border-radius: 10px;
    border: 2px solid var(--gray-100); transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.checker-question:hover { border-color: var(--gray-200); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.checker-question.unanswered { border-color: var(--amber); }
.checker-question-text { font-size: 0.95rem; margin-bottom: var(--space-2); line-height: 1.5; }

.checker-radio-group { display: flex; gap: var(--space-2); }
.checker-radio { cursor: pointer; }
.checker-radio input { display: none; }
.checker-radio-label {
    display: inline-block; padding: 8px 20px; border-radius: 24px;
    font-size: 0.85rem; font-weight: 600; border: 2px solid var(--gray-200);
    transition: all 0.15s; color: var(--gray-500); user-select: none;
}
.checker-radio input:checked + .checker-radio-yes { background: var(--green); color: #fff; border-color: var(--green); }
.checker-radio input:checked + .checker-radio-no { background: #dc3545; color: #fff; border-color: #dc3545; }
.checker-radio input:checked + .checker-radio-unsure { background: var(--amber); color: #fff; border-color: var(--amber); }
.checker-radio-label:hover { border-color: var(--gray-400); }

.checker-questions-footer {
    position: sticky; bottom: 0;
    background: #fff; padding: var(--space-3) 0; border-top: 1px solid var(--gray-200);
    text-align: center; z-index: 10;
}
.checker-progress-count { font-size: 0.85rem; color: var(--gray-600); margin-bottom: var(--space-2); }

/* ── Results Page ───────────────────────────────────────────────────── */
.checker-results-header { text-align: center; margin-bottom: var(--space-4); }
.checker-results-header h1 { font-size: 1.6rem; }

.checker-score-section { text-align: center; margin-bottom: var(--space-6); }
.checker-score-card {
    display: inline-block; padding: var(--space-8) var(--space-10, 80px);
    background: #fff; border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08); border: 1px solid var(--gray-100);
}
.checker-score-gauge {
    width: 160px; height: 160px; border-radius: 50%;
    background: conic-gradient(var(--primary) calc(var(--score) * 3.6deg), var(--gray-100) 0);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--space-4);
    position: relative;
    transition: background 0.8s ease;
}
.checker-score-gauge::before {
    content: ''; width: 124px; height: 124px; border-radius: 50%;
    background: #fff; position: absolute;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.06);
}
.checker-score-number {
    position: relative; z-index: 1; font-size: 2rem; font-weight: 800; color: var(--charcoal);
}
.checker-grade {
    font-size: 2.5rem; font-weight: 800; margin-bottom: var(--space-1);
}
.checker-grade-a { color: var(--green); }
.checker-grade-b { color: #4caf50; }
.checker-grade-c { color: var(--amber); }
.checker-grade-d { color: #f44336; }
.checker-grade-f { color: #b71c1c; }
.checker-grade-label { font-size: 1.1rem; font-weight: 700; color: var(--charcoal); }
.checker-grade-desc { font-size: 0.9rem; color: var(--gray-600); max-width: 400px; margin: var(--space-1) auto 0; }

/* ── Category Bars ──────────────────────────────────────────────────── */
.checker-categories-section { margin-bottom: var(--space-6); max-width: 600px; margin-left: auto; margin-right: auto; }
.checker-categories { display: flex; flex-direction: column; gap: var(--space-3); }
.checker-category-row {}
.checker-category-info { display: flex; justify-content: space-between; margin-bottom: 4px; }
.checker-category-name { font-size: 0.9rem; font-weight: 600; }
.checker-category-stat { font-size: 0.85rem; color: var(--gray-500); }
.checker-bar-track { height: 10px; background: var(--gray-100); border-radius: 5px; overflow: hidden; }
.checker-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.bar-good { background: var(--green); }
.bar-fair { background: var(--amber); }
.bar-poor { background: #dc3545; }

/* ── Gap Items ──────────────────────────────────────────────────────── */
.checker-gaps-section { margin-bottom: var(--space-6); max-width: 700px; margin-left: auto; margin-right: auto; }
.checker-gaps { display: flex; flex-direction: column; gap: var(--space-2); }
.checker-gap-item {
    display: flex; gap: var(--space-2); align-items: flex-start;
    padding: var(--space-3); background: #fff8f0; border-radius: 8px;
    border-left: 3px solid var(--amber);
}
.checker-gap-item svg { flex-shrink: 0; color: var(--amber); margin-top: 2px; }
.checker-gap-item p { font-size: 0.9rem; color: var(--gray-700); line-height: 1.5; margin: 0; }

/* ── Unsure Card ────────────────────────────────────────────────────── */
.checker-unsure-section { margin-bottom: var(--space-6); max-width: 600px; margin-left: auto; margin-right: auto; }
.checker-unsure-card {
    background: linear-gradient(135deg, #e3f2fd 0%, #e8eaf6 100%); padding: var(--space-4) var(--space-5);
    border-radius: 12px; text-align: center; border: 1px solid #bbdefb;
}
.checker-unsure-card strong { display: block; margin-bottom: var(--space-1); color: var(--primary); }
.checker-unsure-card p { font-size: 0.9rem; color: var(--gray-700); margin: 0; }

/* ── CTA Card ───────────────────────────────────────────────────────── */
.checker-cta-section { margin-bottom: var(--space-6); max-width: 500px; margin-left: auto; margin-right: auto; }
.checker-cta-card {
    text-align: center; padding: var(--space-6) var(--space-5);
    background: linear-gradient(135deg, #f0faf5 0%, #e8f5e9 100%);
    border-radius: 16px; border: 2px solid var(--green);
    box-shadow: 0 4px 20px rgba(31,172,92,0.12);
}
.checker-cta-card h2 { font-size: 1.2rem; margin-bottom: var(--space-2); }
.checker-cta-card > p { font-size: 0.9rem; color: var(--gray-600); margin-bottom: var(--space-3); }
.checker-cta-price { margin-bottom: var(--space-3); }
.checker-price-original { text-decoration: line-through; color: var(--gray-400); font-size: 1.1rem; margin-right: 4px; }
.checker-price-sale { font-size: 1.6rem; font-weight: 800; color: var(--green); }
.checker-price-current { font-size: 1.6rem; font-weight: 800; color: var(--charcoal); }
.checker-price-badge {
    display: inline-block; background: var(--green); color: #fff;
    padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 700;
    margin-left: 4px; vertical-align: middle;
}
.checker-price-unit { display: block; font-size: 0.8rem; color: var(--gray-500); margin-top: 2px; }
.checker-cta-btn { margin-bottom: var(--space-2); }
.checker-cta-note { font-size: 0.8rem; color: var(--gray-500); margin: 0; }

/* ── Email Capture ──────────────────────────────────────────────────── */
.checker-email-section { margin-bottom: var(--space-6); max-width: 500px; margin-left: auto; margin-right: auto; }
.checker-email-card {
    padding: var(--space-4); background: var(--gray-50); border-radius: 8px; text-align: center;
}
.checker-email-card h3 { font-size: 1rem; margin-bottom: var(--space-2); }
.checker-email-row { display: flex; gap: var(--space-2); }
.checker-email-input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--gray-300); font-size: 0.95rem; }
.checker-email-row .btn-secondary { padding: 10px 16px; font-size: 0.85rem; flex-shrink: 0; white-space: nowrap; width: auto; }
.checker-email-form .form-hint { margin-top: var(--space-1); }
.checker-email-success {
    padding: var(--space-4); background: #e8f5e9; border-radius: 8px; text-align: center;
    color: var(--green);
}

/* ── Restart Link ───────────────────────────────────────────────────── */
.checker-restart { text-align: center; margin-bottom: var(--space-8); }

/* ── Button Variants ────────────────────────────────────────────────── */
.btn-outline {
    display: inline-block; padding: 10px 24px; border-radius: 6px;
    border: 2px solid var(--primary); color: var(--primary);
    font-weight: 600; font-size: 0.95rem; text-decoration: none;
    transition: background 0.15s, color 0.15s; cursor: pointer; background: transparent;
}
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-secondary {
    display: inline-block; padding: 10px 20px; border-radius: 6px;
    background: var(--primary); color: #fff; border: none;
    font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: opacity 0.15s;
}
.btn-secondary:hover { opacity: 0.9; }

/* ── Landing Page Promo ──────────────────────────────────────────────── */
.checker-promo { margin-bottom: var(--space-6); }
.checker-promo-inner {
    text-align: center; padding: var(--space-6) var(--space-4);
    background: linear-gradient(135deg, #e3f2fd 0%, #f0faf5 100%);
    border-radius: 12px; border: 1px solid var(--gray-200);
}
.checker-promo-inner h2 { font-size: 1.3rem; margin-bottom: var(--space-2); }
.checker-promo-inner p { font-size: 0.95rem; color: var(--gray-600); max-width: 500px; margin: 0 auto var(--space-3); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .checker-trust-grid { grid-template-columns: repeat(2, 1fr); }
    .checker-how-grid { grid-template-columns: 1fr; }
    .checker-hero { padding: var(--space-6) var(--space-3); }
    .checker-hero h1 { font-size: 1.5rem; }
    .checker-email-row { flex-direction: column; }
    .checker-score-card { padding: var(--space-4); }
    .checker-grade { font-size: 2rem; }
}