/* ==========================================================================
   BLACKWORK SPECTRUM
   Design system for invoiceprogenerator.netlify.app
   Shared with getqrcodepro.com: same tokens, same rules, same reserved gold.
   Terminal-monospace type, heavy black linework, Marvel-led rainbow accents.

   Loaded AFTER each page's inline <style>, so equal-specificity rules here win.
   Gold is reserved: it is only ever used for a buy action. Nothing else is gold.
   ========================================================================== */

:root {
    /* ---- ink and paper ---- */
    --bw-ink: #0B0B0B;
    --bw-ink-soft: #3A3A3A;
    --bw-paper: #FBF7EF;
    --bw-paper-2: #F1EADC;
    --bw-white: #FFFFFF;

    /* ---- the spectrum (Marvel-led) ---- */
    --bw-red: #E23636;
    --bw-gold: #F0A020;
    --bw-green: #1E9E5A;
    --bw-teal: #12A5B8;
    --bw-blue: #2A5DD9;
    --bw-violet: #7B3FF2;
    --bw-pink: #E2559B;

    /* ---- text-safe spectrum ----
       The vivid hues above are for linework, fills and icons, where contrast
       does not matter. These darker variants are for anything that CARRIES
       TEXT: coloured type on paper, and white type on a coloured badge.
       Each clears 4.5:1 against white, --bw-paper and --bw-paper-2.
       Blue and violet already pass, so they have no separate variant. */
    --bw-red-text: #C81E1E;
    --bw-green-text: #116B3B;
    --bw-teal-text: #0E6E7A;
    --bw-pink-text: #B32570;

    /* ---- reserved action colour ---- */
    --bw-cta: var(--bw-gold);
    --bw-cta-dark: #D2860B;

    /* ---- linework ---- */
    --bw-line: 3px;
    --bw-line-thick: 5px;
    --bw-shadow: 7px 7px 0 var(--bw-ink);
    --bw-shadow-sm: 4px 4px 0 var(--bw-ink);
    --bw-shadow-lg: 11px 11px 0 var(--bw-ink);

    /* ---- type ---- */
    --bw-mono: Monaco, Menlo, "SF Mono", ui-monospace, SFMono-Regular,
               "DejaVu Sans Mono", Consolas, "Liberation Mono", "Courier New", monospace;

    /* remap the legacy tokens so untouched inline styles land in the new system */
    --primary: #F0A020;
    --primary-dark: #D2860B;
    --secondary: #E23636;
    --dark: #0B0B0B;
    --gray: #3A3A3A;
    --light: #F1EADC;
    --white: #FFFFFF;
    --grad: linear-gradient(135deg, #F0A020 0%, #D2860B 100%);
}

/* ==========================================================================
   1. BASE
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--bw-mono);
    font-size: 18px;
    line-height: 1.62;
    color: var(--bw-ink);
    background: var(--bw-paper);
    background-image:
        repeating-linear-gradient(0deg, rgba(11,11,11,.035) 0 1px, transparent 1px 4px);
    letter-spacing: -0.01em;
}

/* every element inherits the terminal face, including the ones that hardcoded Inter */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6, p, a, li, td, th, span, div, strong, em, small, label {
    font-family: var(--bw-mono);
}

::selection { background: var(--bw-gold); color: var(--bw-ink); }

/* visible keyboard focus, on every interactive thing */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: var(--bw-line) solid var(--bw-violet);
    outline-offset: 3px;
}

/* ==========================================================================
   2. TYPE SCALE
   Monospace runs wide, so headings get negative tracking and tight leading.
   ========================================================================== */

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    color: var(--bw-ink);
}

h1 { font-size: clamp(2.6rem, 7.2vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); letter-spacing: -0.03em; line-height: 1.22; }
h4 { font-size: 1.1rem; letter-spacing: -0.02em; }

p  { font-size: 1.02rem; }

strong { font-weight: 700; }

/* section headers get a terminal prompt marker */
.section-header h2::before,
.problem h2::before,
.final-cta h2::before {
    content: "> ";
    color: var(--bw-section, var(--bw-red));
    font-weight: 700;
}

.section-header p { font-size: 1.05rem; color: var(--bw-ink-soft); }

/* ==========================================================================
   3. THE SPECTRUM
   Each section owns a hue via --bw-section. Text stays black on paper;
   the colour lives in the linework, labels and blocks. That keeps every
   combination readable and stops the rainbow turning into mud.
   ========================================================================== */

.hero            { --bw-section: var(--bw-red); }
.product-summary { --bw-section: var(--bw-pink); }
.problem         { --bw-section: var(--bw-red); }
.features        { --bw-section: var(--bw-blue); }
.qr-types        { --bw-section: var(--bw-violet); }
.pricing         { --bw-section: var(--bw-green); }
.reviews         { --bw-section: var(--bw-teal); }
.faq             { --bw-section: var(--bw-violet); }
.compare-tools   { --bw-section: var(--bw-blue); }
.worldwide       { --bw-section: var(--bw-green); }
.final-cta       { --bw-section: var(--bw-gold); }

/* Generic fallback so pages with other section names still rotate.
   Wrapped in :where() so its specificity is zero and the named
   sections above always win. */
:where(section:nth-of-type(7n+1)) { --bw-section: var(--bw-red); }
:where(section:nth-of-type(7n+2)) { --bw-section: var(--bw-gold); }
:where(section:nth-of-type(7n+3)) { --bw-section: var(--bw-green); }
:where(section:nth-of-type(7n+4)) { --bw-section: var(--bw-teal); }
:where(section:nth-of-type(7n+5)) { --bw-section: var(--bw-blue); }
:where(section:nth-of-type(7n+6)) { --bw-section: var(--bw-violet); }
:where(section:nth-of-type(7n+7)) { --bw-section: var(--bw-pink); }

/* the rainbow rule: structural divider between sections */
section {
    position: relative;
    border-top: var(--bw-line) solid var(--bw-ink);
    background: var(--bw-paper);
    padding: 76px 0;
}

section::before {
    content: "";
    position: absolute;
    top: calc(var(--bw-line) * -1 - 6px);
    left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg,
        var(--bw-red)    0 14.28%,
        var(--bw-gold)   14.28% 28.56%,
        var(--bw-green)  28.56% 42.84%,
        var(--bw-teal)   42.84% 57.12%,
        var(--bw-blue)   57.12% 71.4%,
        var(--bw-violet) 71.4% 85.68%,
        var(--bw-pink)   85.68% 100%);
}

/* alternating paper tone gives rhythm without another colour */
/* :where() zeroes specificity here, or this outranks .final-cta (0,1,0)
   and repaints the black closing band as paper */
:where(section:nth-of-type(even)) { background: var(--bw-paper-2); }

/* ==========================================================================
   4. NAV
   ========================================================================== */

nav {
    background: var(--bw-ink);
    border-bottom: var(--bw-line) solid var(--bw-ink);
    backdrop-filter: none;
}

nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    padding-bottom: 14px;
}

.logo {
    color: var(--bw-paper);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* terminal caret in front of the wordmark */
.logo::before {
    content: "$";
    color: var(--bw-green);
    font-weight: 700;
}

.logo-icon {
    background: var(--bw-gold);
    border: 2px solid var(--bw-paper);
    border-radius: 0;
}

/* ==========================================================================
   5. BUTTONS
   Gold is the buy action and nothing else. Secondary actions are outlined
   black so there is never a second thing competing for the click.
   ========================================================================== */

.btn-primary, .pricing-cta, .nav-cta, .sticky-cta-btn,
.final-cta .btn-white, .cta-btn, .buy-btn {
    display: inline-block;
    background: var(--bw-cta);
    color: var(--bw-ink);
    font-family: var(--bw-mono);
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    text-decoration: none;
    padding: 17px 30px;
    border: var(--bw-line) solid var(--bw-ink);
    border-radius: 0;
    box-shadow: var(--bw-shadow);
    transition: transform .08s steps(2), box-shadow .08s steps(2);
}

.btn-primary:hover, .pricing-cta:hover, .nav-cta:hover, .sticky-cta-btn:hover,
.final-cta .btn-white:hover, .cta-btn:hover, .buy-btn:hover {
    background: var(--bw-cta);
    color: var(--bw-ink);
    transform: translate(3px, 3px);
    box-shadow: var(--bw-shadow-sm);
}

.btn-primary:active, .pricing-cta:active, .nav-cta:active, .sticky-cta-btn:active {
    transform: translate(7px, 7px);
    box-shadow: 0 0 0 var(--bw-ink);
}

.nav-cta { padding: 11px 20px; font-size: .92rem; box-shadow: var(--bw-shadow-sm); }
.nav-cta:hover { box-shadow: 2px 2px 0 var(--bw-ink); }

.btn-secondary {
    display: inline-block;
    background: var(--bw-paper);
    color: var(--bw-ink);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    text-decoration: none;
    padding: 17px 30px;
    border: var(--bw-line) solid var(--bw-ink);
    border-radius: 0;
    box-shadow: var(--bw-shadow-sm);
    transition: transform .08s steps(2), box-shadow .08s steps(2);
}

.btn-secondary:hover {
    background: var(--bw-white);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--bw-ink);
}

/* ==========================================================================
   6. HERO
   ========================================================================== */

.hero {
    background: var(--bw-paper);
    border-top: 0;
    padding: 92px 0 84px;
}

.hero::before { display: none; }

.hero h1 { margin-bottom: 24px; }

/* the price line keeps its own colour, and a block cursor after it.
   the original used gradient-clipped text, which has to be unset or
   -webkit-text-fill-color keeps the glyphs transparent */
.hero h1 span {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--bw-red);
    color: var(--bw-red);
}

.hero h1::after {
    content: "\2588";
    color: var(--bw-red);
    margin-left: .12em;
    animation: bw-blink 1.1s steps(1) infinite;
}

@keyframes bw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.hero p {
    font-size: 1.12rem;
    max-width: 62ch;
    color: var(--bw-ink);
}

.hero-badge {
    display: inline-block;
    background: var(--bw-red);
    color: var(--bw-white);
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 8px 14px;
    border: var(--bw-line) solid var(--bw-ink);
    border-radius: 0;
    box-shadow: var(--bw-shadow-sm);
    margin-bottom: 26px;
}

.hero-image img {
    border: var(--bw-line-thick) solid var(--bw-ink);
    border-radius: 0;
    box-shadow: var(--bw-shadow-lg);
}

/* ==========================================================================
   7. CARDS AND BLOCKS
   Every card is the same object: black border, hard shadow, zero radius.
   The hue comes from the section, applied to a top rule.
   ========================================================================== */

.feature-card, .type-card, .review-card, .faq-item, .compare-link,
.locale-link, .resource-link, .pricing-card, .stat, .comparison-table {
    background: var(--bw-white);
    border: var(--bw-line) solid var(--bw-ink);
    border-radius: 0;
    box-shadow: var(--bw-shadow-sm);
    transition: transform .08s steps(2), box-shadow .08s steps(2);
}

.feature-card, .type-card, .review-card, .faq-item, .compare-link {
    border-top: var(--bw-line-thick) solid var(--bw-section, var(--bw-red));
}

.feature-card:hover, .type-card:hover, .compare-link:hover,
.locale-link:hover, .resource-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--bw-shadow);
    border-color: var(--bw-ink);
}

.feature-icon, .type-icon {
    background: var(--bw-section, var(--bw-red));
    border: 2px solid var(--bw-ink);
    border-radius: 0;
    color: var(--bw-white);
}

.feature-icon svg, .type-icon svg { stroke: var(--bw-white); }

/* the stat boxes need real breathing room now that they are bordered objects */
.stat { padding: 18px 20px 16px; }

.stat-number {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    color: var(--bw-ink);
}

.stat-label {
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: 0;
    color: var(--bw-ink-soft);
}

/* ==========================================================================
   8. PRICING
   ========================================================================== */

.pricing-card {
    box-shadow: var(--bw-shadow-lg);
    border: var(--bw-line-thick) solid var(--bw-ink);
}

/* rotated corner ribbon: borders on the long edges only, no shadow,
   because a hard offset shadow on a 45deg element reads as a mistake */
.pricing-badge {
    background: var(--bw-green);
    color: var(--bw-white);
    font-weight: 700;
    text-transform: uppercase;
    border: 0;
    border-top: 2px solid var(--bw-ink);
    border-bottom: 2px solid var(--bw-ink);
    border-radius: 0;
    box-shadow: none;
    letter-spacing: 0;
}

.pricing-header .price {
    font-size: clamp(3.4rem, 9vw, 5.4rem);
    font-weight: 700;
    letter-spacing: -0.06em;
    color: var(--bw-ink);
}

.pricing-header .original-price {
    color: var(--bw-ink-soft);
    text-decoration: line-through;
}

.pricing-header .savings {
    background: var(--bw-green);
    color: var(--bw-white);
    border: 2px solid var(--bw-ink);
    border-radius: 0;
    font-weight: 700;
    padding: 3px 9px;
}

.pricing-features li { border-bottom: 1px dashed rgba(11,11,11,.28); }

/* ==========================================================================
   9. TABLES
   Red/green keep their semantics: they mean bad and good, not decoration.
   ========================================================================== */

.comparison-row { border-bottom: var(--bw-line) solid var(--bw-ink); }
.comparison-row:last-child { border-bottom: 0; }

.comparison-row.header {
    background: var(--bw-ink);
    color: var(--bw-paper);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* the table is a white card on the black section, so the feature column
   has to come back to ink; it was light grey for a dark background */
.comparison-row .feature { color: var(--bw-ink); font-weight: 700; }
.comparison-row.header .feature { color: var(--bw-paper); }
.comparison-row .them { color: var(--bw-red); font-weight: 700; }
.comparison-row .us   { color: var(--bw-green); font-weight: 700; }

/* ---- dark sections ----
   .problem is deliberately black. Headings inherit ink by default, which
   would put black type on a black field, so they are reset here. */
.problem, .problem p, .problem h2, .problem h3 { color: var(--bw-paper); }
.problem h2::before { color: var(--bw-gold); }
.problem a { color: var(--bw-gold); }

/* keep long centred paragraphs to a readable measure */
.product-summary p { max-width: 78ch; margin-left: auto; margin-right: auto; }

table { border-collapse: collapse; }
table th {
    background: var(--bw-ink);
    color: var(--bw-paper);
    text-transform: uppercase;
    border: 2px solid var(--bw-ink);
}
table td { border: 2px solid var(--bw-ink); }

/* ==========================================================================
   10. FINAL CTA + FOOTER
   The one full-black block on the page, so the last thing you see is loud.
   ========================================================================== */

.final-cta {
    background: var(--bw-ink);
    color: var(--bw-paper);
}

.final-cta h2 { color: var(--bw-paper); }
.final-cta h2::before { color: var(--bw-gold); }
.final-cta p { color: var(--bw-paper); opacity: .92; }

footer {
    background: var(--bw-ink);
    color: var(--bw-paper);
    border-top: 6px solid var(--bw-gold);
    padding: 52px 0 40px;
    font-size: .86rem;
}

footer a { color: var(--bw-paper); text-decoration: underline; text-underline-offset: 3px; }
footer a:hover { color: var(--bw-white); }

/* ==========================================================================
   11. STICKY CTA
   ========================================================================== */

.sticky-cta {
    background: var(--bw-ink);
    border-top: var(--bw-line) solid var(--bw-gold);
    box-shadow: none;
}

.sticky-cta-text strong { color: var(--bw-paper); font-weight: 700; }
.sticky-cta-text small  { color: var(--bw-paper); opacity: .8; }

/* ==========================================================================
   12. RESPONSIVE
   393px is the reference phone width.
   ========================================================================== */

@media (max-width: 768px) {
    body { font-size: 17px; }
    section { padding: 54px 0; }
    h1 { letter-spacing: -0.05em; }

    :root {
        --bw-shadow: 5px 5px 0 var(--bw-ink);
        --bw-shadow-lg: 7px 7px 0 var(--bw-ink);
    }

    .btn-primary, .btn-secondary, .pricing-cta, .cta-btn {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* wide content must scroll inside itself, never the page */
    .comparison-table, table { display: block; overflow-x: auto; }
}

@media (max-width: 420px) {
    body { font-size: 16px; }
    h1 { font-size: clamp(2rem, 11vw, 2.7rem); }
    .pricing-header .price { font-size: 3.1rem; }
}

/* ==========================================================================
   13. MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .hero h1::after { animation: none; opacity: 1; }
}

/* ==========================================================================
   14. CONTRAST CORRECTIONS
   Found by auditing computed colour against effective background on every
   page, not by eye. Everything below was failing WCAG AA before this block.
   Rule: vivid hues for linework, --bw-*-text variants wherever type is involved.
   ========================================================================== */

/* ---- coloured type on light ground ---- */
.comparison-row .them, .them, .cross, .no, h4.red, .tag.red, .price-red {
    color: var(--bw-red-text);
}

.comparison-row .us, .us, .us-col, .check-yes, .yes, h4.green, .tag.green {
    color: var(--bw-green-text);
}

/* ---- white type on a coloured badge ----
   the badge fill has to be dark enough for white to clear 4.5:1 ---- */
.hero-badge, .pill, .badge-red { background: var(--bw-red-text); }

.pricing-badge, .savings, .savings-badge, .badge-green, .check {
    background: var(--bw-green-text);
    color: var(--bw-white);
}

/* ---- review stars ----
   amber on white was 2.15:1, and gold is reserved for buy actions,
   so the stars become ink. They read as marks, not as a call to action. */
.review-stars, .stars { color: var(--bw-ink); }

/* ---- links on the dark sections ----
   blue on near-black was 3.44:1. Paper with an underline is unambiguous,
   and keeps gold reserved for the buy button. */
.problem a, .final-cta a, footer a {
    color: var(--bw-paper);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.problem a:hover, .final-cta a:hover { color: var(--bw-white); }

/* ---- muted small print ---- */
.small, .muted, .note, .fine-print { color: var(--bw-ink-soft); }

/* the header row of the comparison table sits on ink, so the them/us
   semantic colours have to lighten instead of darken there */
.comparison-row.header .them, .comparison-row.header .us { color: var(--bw-paper); }

/* compare.html uses .check as an inline tick, not as a badge like thank-you */
span.check { background: none; color: var(--bw-green-text); }

/* page rule is .pricing-header .savings, so this needs the same reach */
.pricing-header .savings { background: var(--bw-green-text); color: var(--bw-white); }

/* ==========================================================================
   15. COMPARISON AND ALTERNATIVE PAGES
   Classes that exist here but not on getqrcodepro: the big vs-tables, the
   cost-math cards and the breakeven block.
   Red and green keep their meaning throughout: worse and better, never decor.
   ========================================================================== */

.big-table { border-collapse: collapse; }

.big-table th {
    background: var(--bw-ink);
    color: var(--bw-paper);
    text-transform: uppercase;
    font-weight: 700;
    border: 2px solid var(--bw-ink);
}

.big-table td { border: 2px solid var(--bw-ink); }

/* th:first-child used --light, which now resolves to paper, so paper type
   would sit on a paper ground */
.big-table th:first-child { background: var(--bw-ink); color: var(--bw-paper); }
.big-table th.us   { background: var(--bw-green-text); color: var(--bw-white); }
.big-table th.them { background: var(--bw-red-text); color: var(--bw-white); }

.big-table td.us-col   { color: var(--bw-green-text); font-weight: 700; background: var(--bw-paper-2); }
.big-table td.them-col { color: var(--bw-red-text); font-weight: 700; }

.check, .cmp-table .yes { color: var(--bw-green-text); font-weight: 700; }
.cross, .cmp-table .no  { color: var(--bw-red-text); font-weight: 700; }
.neutral { color: var(--bw-ink-soft); font-weight: 700; }
.highlight-row td { background: var(--bw-paper-2); font-weight: 700; }

/* ---- cost math ---- */
.math-card, .vs-card, .breakeven {
    background: var(--bw-white);
    border: var(--bw-line) solid var(--bw-ink);
    border-radius: 0;
    box-shadow: var(--bw-shadow-sm);
    border-top: var(--bw-line-thick) solid var(--bw-section, var(--bw-red));
}

.math-card.ours { border-top-color: var(--bw-green); }
.math-price { font-weight: 700; letter-spacing: -0.04em; color: var(--bw-red-text); }
.math-card.ours .math-price { color: var(--bw-green-text); }
.math-label, .math-yearly { color: var(--bw-ink-soft); }
.math-card.ours .math-label, .math-card.ours .math-yearly { color: var(--bw-ink); }

.savings-badge {
    background: var(--bw-green-text);
    color: var(--bw-white);
    font-weight: 700;
    border: 2px solid var(--bw-ink);
    border-radius: 0;
    box-shadow: var(--bw-shadow-sm);
}

.breakeven { box-shadow: var(--bw-shadow); border-top-color: var(--bw-gold); }
.breakeven .big {
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    color: var(--bw-ink);
}

/* ---- vs cards ---- */
.vs-side h4.red   { color: var(--bw-red-text); }
.vs-side h4.green { color: var(--bw-green-text); }
.vs-side.theirs ul li::before { color: var(--bw-red-text); }
.vs-side.ours ul li::before   { color: var(--bw-green-text); }
.vs-card .vs-subtitle { color: var(--bw-ink-soft); }
.verdict { border-left: var(--bw-line-thick) solid var(--bw-section, var(--bw-red)); padding-left: 16px; }
.verdict strong { color: var(--bw-ink); }

/* ---- price-compare table on the homepage ---- */
.price-compare table { border-collapse: collapse; }
.price-compare th {
    background: var(--bw-ink);
    color: var(--bw-paper);
    text-transform: uppercase;
    border: 2px solid var(--bw-ink);
}
.price-compare td { border: 2px solid var(--bw-ink); }
.price-compare tr.highlight td { background: var(--bw-paper-2); font-weight: 700; }
.price-compare .compare-note { color: var(--bw-ink-soft); }
.price-compare .compare-note a { color: var(--bw-blue); }

/* section hues for the pages that only exist here */
.cost-math       { --bw-section: var(--bw-green); }
.vs-sections     { --bw-section: var(--bw-violet); }
.feature-section { --bw-section: var(--bw-blue); }
.comparison-section { --bw-section: var(--bw-blue); }
.price-compare   { --bw-section: var(--bw-teal); }

@media (max-width: 768px) {
    .big-table, .price-compare table { display: block; overflow-x: auto; }
}