/* ==========================================================================
   BLACKWORK SPECTRUM  ::  Uplift Coach
   Terminal-monospace type, heavy black linework, rainbow accents.
   Same system as getqrcodepro.com and elevenelevenpaperco.com, retuned for
   this site's own class names.

   Loaded LAST in <head> so it wins at equal specificity, over both style.css
   and each page's inline <style>.

   Gold is reserved: it only ever marks the start-trial action. Nothing else.

   One deliberate departure: the crisis note and the not-therapy disclaimer are
   made MORE prominent, not less. They were 0.8rem grey in the footer. Safety
   copy on a coaching product should be the last thing a redesign quietens.
   ========================================================================== */

:root {
    --bw-ink: #0F0F0F;
    --bw-ink-soft: #454545;
    --bw-paper: #FBF7EF;
    --bw-paper-2: #F1EADC;
    --bw-white: #FFFFFF;

    /* spectrum for linework and fills */
    --bw-red: #E23636;
    --bw-gold: #F0A020;
    --bw-green: #1E9E5A;
    --bw-teal: #12A5B8;
    --bw-blue: #2A5DD9;
    --bw-violet: #7B3FF2;
    --bw-pink: #E2559B;

    /* text-safe variants: these clear 4.5:1 on paper and white.
       the vivid ones above never carry type. */
    --bw-red-text: #C81E1E;
    --bw-green-text: #116B3B;
    --bw-teal-text: #0E6E7A;
    --bw-pink-text: #B32570;

    --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);

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

    /* retarget this site's own tokens */
    --orange: #F0A020;
    --orange-hover: #D2860B;
    --dark: #0F0F0F;
    --gray: #454545;            /* was #666, darkened for mono weights */
    --light-gray: #F1EADC;
    --border: #0F0F0F;          /* hairlines become real linework */

    --bw-section: var(--bw-blue);
}

/* ==========================================================================
   BASE
   ========================================================================== */

body {
    font-family: var(--bw-mono);
    font-size: 17px;
    line-height: 1.62;
    color: var(--bw-ink);
    background: var(--bw-paper);
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}

body, a, p, h1, h2, h3, h4, li, td, th, div, span, strong, em, small,
button, input, blockquote {
    font-family: var(--bw-mono);
}

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

a:focus-visible, button:focus-visible {
    outline: var(--bw-line) solid var(--bw-violet);
    outline-offset: 3px;
}

/* the rainbow rule, pinned to the top of every page */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 6px;
    z-index: 3000;
    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%);
}

/* ==========================================================================
   TYPE
   ========================================================================== */

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

.hero h1 { font-size: clamp(2.2rem, 5.6vw, 4rem); }
h2, .section-title { font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.22; }
h4 { font-size: 1.05rem; }

p { color: var(--bw-ink); }

/* terminal prompt marker on section headings */
.section-title::before, .final-cta h2::before {
    content: "> ";
    color: var(--bw-section, var(--bw-blue));
    font-weight: 700;
}

.section-subtitle, .hero .subheadline, .lead {
    color: var(--bw-ink);
    font-style: normal;   /* italic monospace reads as a rendering fault */
}

.hero .subheadline { font-size: 1.1rem; max-width: 60ch; }

/* keep prose to a readable measure: monospace runs wide */
.prose p, .faq-item p, .product-summary p, .step p, .feature p { max-width: 74ch; }

/* ==========================================================================
   SECTION HUES
   ========================================================================== */

.hero            { --bw-section: var(--bw-blue); }
.product-summary { --bw-section: var(--bw-teal); }
.how-it-works    { --bw-section: var(--bw-violet); }
.features-grid   { --bw-section: var(--bw-blue); }
.screenshots     { --bw-section: var(--bw-pink); }
.testimonial     { --bw-section: var(--bw-teal); }
.faq-list        { --bw-section: var(--bw-violet); }
.pricing         { --bw-section: var(--bw-green); }
.comparison-section { --bw-section: var(--bw-blue); }
.cost-math       { --bw-section: var(--bw-green); }
.vs-sections     { --bw-section: var(--bw-violet); }
.when-section    { --bw-section: var(--bw-teal); }

:where(section:nth-of-type(6n+1)) { --bw-section: var(--bw-blue); }
:where(section:nth-of-type(6n+2)) { --bw-section: var(--bw-teal); }
:where(section:nth-of-type(6n+3)) { --bw-section: var(--bw-violet); }
:where(section:nth-of-type(6n+4)) { --bw-section: var(--bw-green); }
:where(section:nth-of-type(6n+5)) { --bw-section: var(--bw-pink); }
:where(section:nth-of-type(6n+6)) { --bw-section: var(--bw-red); }

section {
    position: relative;
    border-top: var(--bw-line) solid var(--bw-ink);
    background: var(--bw-paper);
}

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%);
}

/* :where() zeroes this rule's specificity, or it outranks .final-cta
   and repaints the black closing band as paper */
:where(section:nth-of-type(even)) { background: var(--bw-paper-2); }

.hero { border-top: 0; }
.hero::before { display: none; }

/* ==========================================================================
   NAV
   ========================================================================== */

.page-nav {
    background: var(--bw-ink);
    border-bottom: var(--bw-line) solid var(--bw-ink);
    padding-top: 6px;
}

.page-nav .brand {
    color: var(--bw-paper);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}

.page-nav .brand::before { content: "$ "; color: var(--bw-green); }
.page-nav .brand:hover { color: var(--bw-gold); }

/* ==========================================================================
   THE ACTION
   Gold, black border, hard shadow. The only gold on the page.
   ========================================================================== */

.cta, .btn-white {
    display: inline-block;
    background: var(--bw-gold);
    color: var(--bw-ink);
    font-weight: 700;
    font-size: 1.02rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    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);
}

.cta:hover, .btn-white:hover {
    background: var(--bw-gold);
    color: var(--bw-ink);
    box-shadow: var(--bw-shadow-sm);
    transform: translate(3px, 3px);
}

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

.cta-note { color: var(--bw-ink-soft); }

.hero-badge {
    display: inline-block;
    background: var(--bw-blue);
    color: var(--bw-white);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .8rem;
    padding: 8px 14px;
    border: var(--bw-line) solid var(--bw-ink);
    border-radius: 0;
    box-shadow: var(--bw-shadow-sm);
}

/* ==========================================================================
   CARDS AND BLOCKS
   ========================================================================== */

.feature, .step, .faq-item, .testimonial-card, .price-card, .math-card,
.vs-card, .when-card, .screenshot-slot, .product-summary {
    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, .step, .faq-item, .testimonial-card, .math-card, .vs-card, .when-card {
    border-top: var(--bw-line-thick) solid var(--bw-section, var(--bw-blue));
}

.feature:hover, .step:hover { transform: translate(-2px, -2px); box-shadow: var(--bw-shadow); }

.faq-item, .faq-item:first-child { padding: 20px 22px; margin-bottom: 16px; }

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

.step-number {
    background: var(--bw-section, var(--bw-violet));
    color: var(--bw-white);
    font-weight: 700;
    border: var(--bw-line) solid var(--bw-ink);
    border-radius: 0;
    box-shadow: var(--bw-shadow-sm);
}

.hero-screenshot img, .screenshot-slot img {
    border: var(--bw-line) solid var(--bw-ink);
    border-radius: 0;
    box-shadow: var(--bw-shadow);
}

.testimonial-card blockquote { border-left: var(--bw-line-thick) solid var(--bw-section); padding-left: 18px; }
.testimonial-author { color: var(--bw-ink-soft); font-weight: 700; }

/* ==========================================================================
   PRICING
   ========================================================================== */

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

.price-amount {
    font-size: clamp(3rem, 8vw, 4.6rem);
    font-weight: 700;
    letter-spacing: -0.06em;
    color: var(--bw-ink);
}

.price-trial {
    display: inline-block;
    background: var(--bw-green-text);
    color: var(--bw-white);
    font-weight: 700;
    padding: 5px 12px;
    border: 2px solid var(--bw-ink);
}

.price-cancel, .pricing-context { color: var(--bw-ink-soft); }
.price-features li { border-bottom: 1px dashed rgba(15,15,15,.25); }
.price-features li::before { color: var(--bw-green-text); font-weight: 700; }

/* ==========================================================================
   TABLES
   red and green keep their meaning: worse and better, not decoration
   ========================================================================== */

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

.big-table th, .cmp-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, .cmp-table td { border: 2px solid var(--bw-ink); }

.big-table th.us, .cmp-table thead 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, .cmp-table td.us, .check, .cmp-table .yes {
    color: var(--bw-green-text); font-weight: 700;
}

.big-table td.them-col, .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 and vs cards ---- */
.math-price { font-weight: 700; letter-spacing: -0.04em; color: var(--bw-ink); }
.math-price.red { color: var(--bw-red-text); }
.math-card.ours { border-top-color: var(--bw-green); }
.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;
}

.vs-side h4.red, .when-card.other h3 { color: var(--bw-red-text); }
.vs-side h4.green, .when-card.good h3 { 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); padding-left: 16px; }
.when-card.good { border-top-color: var(--bw-green); }
.when-card.other { border-top-color: var(--bw-red); }

/* ==========================================================================
   FINAL CTA + FOOTER
   ========================================================================== */

.final-cta {
    background: var(--bw-ink);
    color: var(--bw-paper);
    border-top: 6px solid var(--bw-gold);
}

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

footer {
    background: var(--bw-ink);
    color: var(--bw-paper);
    border-top: 6px solid var(--bw-gold);
}

footer a, footer .footer-links a {
    color: var(--bw-paper);
    text-decoration: underline;
    text-underline-offset: 3px;
}

footer a:hover { color: var(--bw-white); }

/* ==========================================================================
   SAFETY COPY
   The crisis note was 0.8rem grey in the footer. It is now a bordered block
   at full size and full contrast. The disclaimer gets the same treatment.
   ========================================================================== */

footer .crisis-note {
    display: block;
    max-width: 62ch;
    margin: 26px auto 0;
    padding: 16px 18px;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--bw-ink);
    background: var(--bw-paper);
    border: var(--bw-line) solid var(--bw-paper);
    border-left: var(--bw-line-thick) solid var(--bw-red);
    text-align: left;
}

footer .crisis-note strong { font-weight: 700; color: var(--bw-red-text); }

.disclaimer {
    max-width: 74ch;
    padding: 14px 16px;
    font-size: .95rem;
    color: var(--bw-ink);
    background: var(--bw-paper-2);
    border-left: var(--bw-line-thick) solid var(--bw-ink);
}

/* ==========================================================================
   RESPONSIVE  ::  393px reference
   ========================================================================== */

@media (max-width: 768px) {
    body { font-size: 16px; }
    :root { --bw-shadow: 5px 5px 0 var(--bw-ink); --bw-shadow-lg: 7px 7px 0 var(--bw-ink); }
    .cta, .btn-white { display: block; width: 100%; text-align: center; }
    .big-table, .cmp-table { display: block; overflow-x: auto; }
    footer .footer-links { flex-wrap: wrap; row-gap: 10px; justify-content: center; }
}

@media (max-width: 420px) {
    .hero h1 { font-size: clamp(1.8rem, 9vw, 2.4rem); }
    .price-amount { font-size: 2.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ==========================================================================
   FIXES FOUND BY RENDERING
   ========================================================================== */

/* The global `p { color: ink }` above beat inheritance inside the black
   footer, which rendered the not-therapy disclaimer as ink on ink: an
   invisible liability notice. Footer prose is paper. */
footer p, footer div, footer span, footer li { color: var(--bw-paper); }
footer .crisis-note, footer .crisis-note strong { color: var(--bw-ink); }
footer .crisis-note strong { color: var(--bw-red-text); }

/* the first table header cell used --light-gray, which now resolves to paper,
   leaving paper type on a paper ground */
.big-table th:first-child, .cmp-table th:first-child {
    background: var(--bw-ink);
    color: var(--bw-paper);
}

/* compare.html sets these with its own reach, so match it */
.big-table td.us-col, table td.us-col { color: var(--bw-green-text); background: var(--bw-paper-2); }
.big-table td.them-col, table td.them-col { color: var(--bw-red-text); }
.verdict strong { color: var(--bw-ink); }

/* .cta-note sits under a CTA on a light band on some pages and inside the
   black final band on others, so it is set per context rather than globally */
.cta-note { color: var(--bw-ink-soft); opacity: 1; }
.final-cta .cta-note { color: var(--bw-paper); opacity: .92; }
