/* ================================================
   colour-light.css
   Light theme: cool beige + blue accent + yellow highlight
   Load order: reset.css → global.css → colour-light.css → structure.css
   ================================================ */

/* ── TOKENS ──────────────────────────────────── */
:root {
    /* Palette */
    --bg-1:                #f4f3f1;          /* page background — cool grey-white beige */
    --bg-2:                #eae9e6;          /* alt background — slightly darker beige */
    --bg-3:                #dddbd7;          /* deeper boxes, borders */
    --ink:                 #1a1a1a;          /* soft black body text */
    --ink-dim:             rgba(26,26,26,0.55);
    --ink-dimmer:          rgba(26,26,26,0.35);
    --white:               #ffffff;
    --bs-red:              #BE0F17;
    --accent:              #BE0F17;          /* red — primary interactive */
    --accent-hover:        #2A4C69;          /* petrol — hover state */
    --accent-dim:          rgba(190,15,23,0.15);
    --accent-dimmer:       rgba(190,15,23,0.07);
    --highlight:           #f5c800;          /* bright yellow — highlight */
    --highlight-dim:       rgba(245,200,0,0.20);

    /* Header */
    --h-bg:                #ffffff;
    --h-border:            #dddbd7;
    --h-brand:             var(--bs-red);
    --h-brand-hover:       var(--ink);
    --h-accent:            var(--accent);
    --h-nav-link:          rgba(26,26,26,0.60);
    --h-nav-hover:         var(--ink);
    --h-nav-hover-bg:      var(--accent-dim);
    --h-dropdown-bg:       #ffffff;
    --h-dropdown-divider:  #eae9e6;
    --h-dropdown-link:     rgba(26,26,26,0.70);
    --h-dropdown-hover:    var(--ink);
    --h-dropdown-hover-bg: var(--accent-dim);
    --h-cta-bg:            var(--bs-red);
    --h-cta-text:          #ffffff;
    --h-cta-hover-bg:      #000000;
    --h-cta-hover-text:    #ffffff;
    --h-burger-border:     #dddbd7;
    --h-burger-bar:        var(--ink);

    /* Body */
    --b-bg:                var(--bg-1);
    --b-bg-alt:            var(--bg-2);
    --b-bg-alt2:           var(--bg-3);
    --b-text:              var(--ink);
    --b-text-dim:          var(--ink-dim);
    --b-accent:            #BE0F17;          /* red — interactive colour */
    --b-accent-hover:      #2A4C69;          /* petrol — hover */
    --b-accent-dim:        rgba(190,15,23,0.15);
    --b-accent-dimmer:     rgba(190,15,23,0.07);
    --b-ink:               #ffffff;

    /* Footer */
    --ft-top-bg:           #1a1a1a;
    --ft-bottom-bg:        #111111;
    --ft-accent:           #BE0F17;                  /* BETTERSQUASH name — red */
    --ft-border:           rgba(255,255,255,0.12);   /* top border — grey, matches dividers */
    --ft-divider:          rgba(255,255,255,0.08);
    --ft-bottom-divider:   rgba(255,255,255,0.08);
    --ft-heading:          #ffffff;
    --ft-text:             rgba(255,255,255,0.60);
    --ft-text-strong:      #ffffff;
    --ft-link:             rgba(255,255,255,0.60);
    --ft-link-hover:       #A8D8FF;                  /* light blue — footer hover */
    --ft-copy:             rgba(255,255,255,0.40);
    --ft-copy-link:        rgba(255,255,255,0.55);
    --ft-copy-hover:       #A8D8FF;                  /* light blue — footer hover */
    --ft-nav-link:         rgba(255,255,255,0.40);
    --ft-nav-hover:        #A8D8FF;                  /* light blue — footer hover */
    --ft-separator:        rgba(255,255,255,0.25);
    --ft-soon-bg:          #252525;                  /* dark grey — distinct from footer bg */
    --ft-soon-text:        #C9A84C;                  /* muted yellow */

    /* Hero */
    --hero-border:         #ff6600;
}

/* ── BODY BASELINE ───────────────────────────── */
body { background: var(--b-bg); color: var(--b-text); }
a       { color: var(--b-accent); text-decoration: underline; }
a:hover { color: var(--b-accent-hover); text-decoration: none; }


/* ── HEADER ──────────────────────────────────── */
.nav-container     { background: var(--h-bg); border-bottom-color: var(--h-border); }
.nav-logo          { filter: none; }
.nav-brand         { color: var(--h-brand); }
.nav-brand:hover   { color: var(--h-brand-hover); }
.nav-links a       { color: var(--h-nav-link); }
.nav-links a:hover { color: var(--h-nav-hover); background: var(--h-nav-hover-bg); }
.nav-cta           { background: var(--h-cta-bg); color: var(--h-cta-text); }
.nav-cta:hover     { background: var(--h-cta-hover-bg); color: var(--h-cta-hover-text); }
.menu-icon         { border-color: var(--h-burger-border); }
.menu-icon span,
.menu-icon span::before,
.menu-icon span::after       { background: var(--h-burger-bar); }
.menu-icon:hover             { border-color: var(--h-accent); }
.menu-icon:hover span,
.menu-icon:hover span::before,
.menu-icon:hover span::after { background: var(--h-accent); }

@media (max-width: 900px) {
    .nav-links             { background: var(--h-dropdown-bg); border-top-color: var(--h-accent); border-bottom-color: var(--h-border); }
    .nav-links li          { border-bottom-color: var(--h-dropdown-divider); }
    .nav-links a           { color: var(--h-dropdown-link); }
    .nav-links a:hover     { color: var(--h-dropdown-hover); background: var(--h-dropdown-hover-bg); }
}

/* ── HERO ────────────────────────────────────── */
.bs-hero                { background-color: var(--ink); }
.bs-hero::before        { background: rgba(26,26,26,0.70); }
.bs-hero__ghost         { -webkit-text-stroke: 1px rgba(255,255,255,0.07); }
.bs-hero__stripe        { display: none; }
.bs-hero__kicker        { background: var(--accent); color: #ffffff; }
.bs-hero__title         { color: #ffffff; }
.bs-hero__title em      { color: var(--highlight); }
.bs-hero__title mark    { background: var(--highlight); color: var(--ink); -webkit-text-stroke: 0; }
.bs-hero__tagline       { color: rgba(255,255,255,0.75); }
.bs-hero__fn-line       { background: var(--highlight); }
.bs-hero__footnote span { color: var(--highlight); }

/* Hero-specific button overrides — dark background only */
.bs-hero .btn-outline            { border-color: rgba(255,255,255,0.40); color: rgba(255,255,255,0.75); }
.bs-hero .btn-outline:hover      { border-color: #ffffff; color: #ffffff; background: transparent; }
.bs-hero .btn-ghost-text         { color: rgba(255,255,255,0.75); border-bottom-color: rgba(255,255,255,0.30); }
.bs-hero .btn-ghost-text:hover   { color: var(--highlight); border-bottom-color: var(--highlight); }

/* ── SECTION LABELS & TITLES ─────────────────── */
.section-label          { color: #1F3546; }
.section-title          { color: var(--ink); }
.section-title em       { color: #2A4C69; }

/* ── BUTTONS (all page contexts) ─────────────── */
.btn-primary            { background: var(--bs-red); color: #ffffff; font-weight: 700; transform: none; }
.btn-primary:hover      { background: var(--ink); color: #ffffff; transform: none; }

.btn-outline            { border-color: var(--bs-red); color: var(--bs-red); background: transparent; }
.btn-outline:hover      { border-color: var(--ink); color: #ffffff; background: var(--ink); }

.btn-ghost-text         { color: var(--b-accent); border-bottom-color: var(--b-accent); }
.btn-ghost-text:hover   { color: var(--ink); border-bottom-color: var(--ink); }

.body-cta               { background: var(--bs-red); color: #ffffff !important; transform: none; }
.body-cta:hover         { background: var(--ink); color: #ffffff !important; transform: none; }

/* ── SECTIONS ────────────────────────────────── */
.section--alt           { background: var(--b-bg-alt); }
.section--darker        { background: var(--b-bg-alt2); }
.section--purchase      { background: var(--b-bg-alt); }
.section--dark          { background: var(--ink); }

/* ── CONTENT TEXT ────────────────────────────── */
.content a              { color: var(--b-accent); text-decoration: underline; }
.content a:hover        { color: var(--b-accent-hover); text-decoration: none; }

/* Suppress underline on non-prose interactive elements */
.btn-primary, .btn-outline, .btn-ghost-text, .body-cta,
.nav-brand, .nav-brand-group, .nav-links a, .nav-cta,
.bs-ft__link, .bs-ft__copy a, .bs-ft__nav-link, .bs-ft__bio a, .bs-ft__logo-group,
.service-card, .service-card__cta,
.disc-join,
.article-wrap a,
.artlist a, .artlist--rec a,
.how-step__text a,
.testimonials-intro a { text-decoration: none; }

.text-dim               { color: var(--ink-dim); }
.text-dim2              { color: rgba(26,26,26,0.50); }
.text-dim3              { color: rgba(26,26,26,0.35); }
.text-accent            { color: var(--b-accent); font-weight: 500; }
.text-accent-sm         { color: var(--b-accent); }

/* ── HR ACCENT ───────────────────────────────── */
hr.accent               { background: var(--b-accent-dim); }

/* ── DIVIDER BAND ────────────────────────────── */
.divider                { background: var(--bg-2); border-color: var(--b-accent-dim); }
.divider-text           { color: var(--ink-dim); }

/* ── CALLOUT ─────────────────────────────────── */
.callout                { background: var(--bg-2); }

/* ── STAT STRIP ──────────────────────────────── */
.stat-strip             { background: var(--accent); }
.stat-num               { color: #ffffff; }
.stat-label             { color: rgba(255,255,255,0.65); }

/* ── PROOF STRIP ─────────────────────────────── */
.proof-strip            { background: var(--bg-2); border-bottom-color: var(--b-accent-dim); }
.proof-item             { color: var(--ink-dim); border-right-color: var(--bg-3); }
.proof-item strong      { color: var(--ink); }

/* ── QUOTE BAND ──────────────────────────────── */
.quote-band             { background: var(--accent); }
.quote-band blockquote  { color: #ffffff; }

/* ── SERVICES GRID (index) ───────────────────── */
.services-grid          { background: var(--bg-3); border-color: var(--bg-3); }
.service-card           { background: var(--bg-1); }
.service-card:hover     { background: var(--white); }
.service-card__tag      { color: var(--ink-dim); }
.service-card__title    { color: var(--ink); }
.service-card__desc     { color: var(--ink-dim); }
.service-card__price    { color: var(--ink-dim); }
.service-card__cta      { color: var(--ink-dim); }

/* ── WHY LIST ────────────────────────────────── */
.why-list li            { border-bottom-color: var(--bg-3); color: var(--ink-dim); }
.why-list li strong     { color: var(--ink); }
.why-image p            { color: var(--ink-dimmer); }

/* ── TESTIMONIAL STRIP (index) ───────────────── */
.testimonial-strip      { background: var(--bg-3); }
.t-mini                 { background: var(--bg-1); border-left-color: var(--accent); }
.t-mini p               { color: var(--ink-dim); }
.t-mini cite            { color: var(--ink-dim); }

/* ── APP BANNER ──────────────────────────────── */
.app-banner             { border-color: var(--bg-3); }
.app-banner h3          { color: var(--ink); }
.app-banner p           { color: var(--ink-dim); }
.app-banner-stat .big   { color: var(--ink-dim); }
.app-banner-stat span   { color: var(--ink-dim); }
.app-pill               { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--ink-dim); }

/* ── FAQ ─────────────────────────────────────── */
.faq-list details       { border-bottom-color: var(--bg-3); }
.faq-list summary       { color: var(--ink); }
.faq-list summary:hover { color: var(--ink-dim); }
.faq-icon               { color: var(--ink-dim); }
.faq-list details p     { color: var(--ink-dim); }

/* ── CTA BAND ────────────────────────────────── */
.cta-band               { background: var(--accent); }
.cta-band h2            { color: #ffffff; }
.cta-band p             { color: rgba(255,255,255,0.80); }
.btn-dark               { background: var(--ink); color: #ffffff; }
.btn-dark:hover         { background: #000000; color: #ffffff; }
.btn-ghost-dark         { color: rgba(255,255,255,0.75); }
.btn-ghost-dark:hover   { color: #ffffff; }

/* ── ROUTINES GRID ───────────────────────────── */
.routines-grid          { border-color: var(--bg-3); }
.routine-item           { border-color: var(--bg-3); }
.routine-num            { color: var(--ink-dim); }
.routine-text strong    { color: var(--ink); }
.routine-text span      { color: var(--ink-dim); }

/* ── INCLUDED GRID ───────────────────────────── */
.included-item          { border-left-color: var(--accent); background: var(--bg-2); }
.included-item h4       { color: var(--ink); }
.included-item p        { color: var(--ink-dim); }

/* ── SAMPLE LAYOUT ───────────────────────────── */
.sample-layout img      { border-color: var(--bg-3); }
.sample-steps li        { border-bottom-color: var(--bg-3); color: var(--ink); }

/* ── GUIDE LIST ──────────────────────────────── */
.guide-list li          { border-bottom-color: var(--bg-3); color: var(--ink); }
.guide-list li::before  { color: var(--ink-dim); }

/* ── ACCORDION ───────────────────────────────── */
.accordion              { color: var(--ink); border-bottom-color: var(--bg-3); }
.accordion:hover        { color: var(--ink-dim); }
.accordion::after       { color: var(--ink-dim); }
.panel                  { color: var(--ink-dim); }

/* ── TESTIMONIAL BLOCKS ──────────────────────── */
.testimonial-block          { border-color: var(--bg-3); }
.testimonial-block::before  { color: var(--ink-dim); }
.testimonial-block p        { color: var(--ink-dim); }
.testimonial-block cite     { color: var(--ink-dim); }

/* ── TABLE ───────────────────────────────────── */
table               { border-color: var(--bg-3); }
thead tr            { background: var(--bg-2); }
th                  { color: #1F3546; border-bottom-color: var(--bg-3); }
td                  { color: var(--ink-dim); border-bottom-color: var(--bg-3); }
tbody tr:hover td   { background: var(--accent-dimmer); color: var(--ink); }
.cell--yes          { color: #1F6F43; font-weight: 700; }
.cell--no           { color: var(--bs-red); font-weight: 700; }

/* ── PURCHASE CARDS ──────────────────────────── */
.purchase-card,
.consult-card               { border-color: var(--bg-3); background: var(--white); }
.purchase-card:hover,
.consult-card:hover         { border-color: var(--accent); }
.purchase-card.featured,
.consult-card.featured      { border-color: var(--accent); background: var(--bg-2); }
.purchase-card__label,
.consult-card__label        { color: var(--ink-dim); }
.purchase-card__title,
.consult-card__title        { color: var(--ink); }
.purchase-card__duration,
.consult-card__duration     { color: var(--ink-dim); }
.purchase-card__desc,
.consult-card__desc         { color: var(--ink-dimmer); }
.purchase-card__price,
.consult-card__price        { color: var(--ink-dim); }
.purchase-card__features    { border-top-color: var(--bg-3); }
.purchase-card__features li { color: var(--ink-dim); border-bottom-color: var(--bg-3); }
.purchase-card__features li::before { color: var(--ink-dim); }
.turnaround-note,
.booking-note,
.purchase-note              { color: var(--ink-dim); }
.purchase-section           { background: var(--bg-2); }

/* ── HOW IT WORKS ────────────────────────────── */
.how-step               { border-bottom-color: var(--bg-3); }
.how-step__num          { color: #2A4C69; }
.how-step__text         { color: var(--ink-dim); }
.how-step__text strong  { color: var(--ink); }
.how-step__text a       { color: var(--b-accent); }
.how-step__text a:hover { color: var(--b-accent-hover); }

/* ── INCLUDED LIST ───────────────────────────── */
.included-list li           { color: var(--ink-dim); border-bottom-color: var(--bg-3); }
.included-list li::before   { color: var(--ink-dim); }

/* ── PLAN TYPES ──────────────────────────────── */
.plan-type              { border-color: var(--bg-3); background: var(--white); }
.plan-type__label       { color: var(--ink-dim); }
.plan-type__title       { color: var(--ink); }
.plan-type__desc        { color: var(--ink-dim); }

/* ── COMING SOON BANNER ──────────────────────── */
.coming-soon-banner         { border-color: var(--bg-3); background: var(--bg-2); }
.coming-soon-banner p       { color: var(--ink-dim); }
.coming-soon-banner__label  { color: var(--ink-dim); }

/* ── PLATFORM PILLS ──────────────────────────── */
.platform-pill  { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--ink-dim); }

/* ── TESTIMONIAL ITEMS ───────────────────────── */
.testimonial-item           { border-left-color: var(--accent); background: var(--bg-2); }
.testimonial-item p         { color: var(--ink-dim); }
.testimonial-item cite      { color: var(--ink-dim); }

/* ── TESTIMONIALS PAGE ───────────────────────── */
.testimonials-intro p       { color: var(--ink-dim); }
.testimonials-intro a       { color: var(--ink-dim); }
.service-heading            { border-bottom-color: var(--bg-3); }
.service-heading h2         { color: var(--ink); }
.service-heading p          { color: var(--ink-dimmer); }
.t-card                     { border-left-color: var(--accent-dim); border-bottom-color: var(--bg-3); }
.t-card p                   { color: var(--ink-dim); }
.t-card cite                { color: var(--ink-dim); }
.t-card img                 { border-color: var(--bg-3); }
.t-card .phillip-note       { color: var(--ink-dimmer); }
.t-card .phillip-note strong { color: var(--ink-dim); }
.t-empty                    { color: var(--ink-dimmer); }

/* ── DISCORD PAGE ────────────────────────────── */
.disc-section__label        { color: var(--ink-dim); }
.disc-section__title        { color: var(--ink); }
.disc-section__body         { color: var(--ink-dim); }
.disc-join                  { background: var(--accent); color: #ffffff; }
.disc-join:hover            { background: var(--accent-hover); color: #ffffff; }
.disc-cards                 { background: var(--bg-3); }
.disc-card                  { background: var(--bg-1); }
.disc-card__title           { color: var(--ink); }
.disc-card__desc            { color: var(--ink-dim); }
.disc-faq__item             { border-bottom-color: var(--bg-3); }
.disc-faq__question         { color: var(--ink); }
.disc-faq__question:hover   { color: var(--ink-dim); }
.disc-faq__icon             { color: var(--ink-dim); }
.disc-faq__answer           { color: var(--ink-dim); }

/* ── BETTERPRACTICE PAGE ─────────────────────── */
.feature-pill               { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--ink-dim); }
.video-wrap iframe          { border-color: var(--bg-3); }
.screenshots-grid img       { border-color: var(--bg-3); }
.download-card              { border-color: var(--bg-3); background: var(--white); }
.download-card h3           { color: var(--ink); }
.download-note              { color: var(--ink-dim); }

/* ── CHALLENGES PAGE ─────────────────────────── */
.chall-explainer-grid       { background: var(--bg-3); border-color: var(--bg-3); }
.commercial-section         { background: var(--bg-2); }
.commercial-inner           { border-color: var(--bg-3); }
.commercial-inner h3        { color: var(--ink); }
.commercial-inner p         { color: var(--ink-dim); }
.commercial-quote           { border-left-color: var(--accent); }
.commercial-quote blockquote { color: var(--ink); }
.commercial-quote blockquote strong { color: var(--ink-dim); }
.commercial-quote cite      { color: var(--ink-dim); }

/* ── PROJECTS PAGE ───────────────────────────── */
.project-sep                { border-top-color: var(--bg-3); }
.screenshot-wrap            { outline-color: var(--accent); }
.screenshot-wrap img        { border-color: var(--bg-3); }
.screenshot-placeholder     { background: var(--bg-2); }
.screenshot-placeholder__label { color: var(--ink-dimmer); }
.project-block__tag         { color: #2A4C69; border-color: rgba(42,76,105,0.25); }
.project-block__title       { color: var(--ink); }
.project-block__desc        { color: var(--ink-dim); }

/* ── ANALYSIS PAGE ───────────────────────────── */
.service-sep                { border-top-color: var(--bg-3); }
.service-screenshot-wrap    { border-color: var(--bg-3); }
.service-block__tag         { color: #2A4C69; border-color: rgba(42,76,105,0.25); }
.service-block__title       { color: var(--ink); }
.service-block__desc        { color: var(--ink-dim); }
.service-block__pricing     { border-color: var(--bg-3); }
.service-block__price-label { color: var(--ink-dim); }
.service-block__price-val   { color: var(--ink-dim); }
.service-block__price-sep   { background: var(--bg-3); }

/* ── PRACTICE PLANS PAGE ─────────────────────── */
.app-section                { background: var(--bg-2); }
.app-text p                 { color: var(--ink-dim); }
.app-text p strong          { color: var(--ink-dim); }
.app-pill                   { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--ink-dim); }
.app-visual                 { border-color: var(--bg-3); }
.app-visual::before         { border-color: var(--bg-3); }
.app-visual p               { color: var(--ink-dimmer); }
.commercial-section         { background: var(--bg-2); }
.pricing-table-section      { background: var(--bg-2); }
.pricing-matrix             { border-color: var(--bg-3); }
.pricing-matrix th          { color: #1F3546; border-bottom-color: var(--bg-3); background: var(--bg-2); }
.pricing-matrix td          { color: var(--ink-dim); border-bottom-color: var(--bg-3); }
.pricing-matrix td:first-child { color: var(--ink); }
.pricing-matrix td.price-val { color: var(--ink-dim); }
.pricing-matrix td.muted    { color: var(--ink-dimmer); }
.pricing-note               { color: var(--ink-dimmer); }
.testimonial-section        { background: var(--bg-2); }
.testimonial-card           { border-color: var(--bg-3); background: var(--white); }
.testimonial-card::before   { color: var(--ink-dim); }
.testimonial-card p         { color: var(--ink-dim); }
.testimonial-card cite      { color: var(--ink-dim); }

/* ── FOOTER ──────────────────────────────────── */
.bs-ft                              { background: var(--ft-top-bg); border-top-color: var(--ft-border); }
.bs-ft__col                         { border-right-color: var(--ft-divider); border-bottom-color: var(--ft-divider); }
.bs-ft__name                        { color: var(--ft-accent); }
.bs-ft__logo-group:hover .bs-ft__name { color: #ffffff; }
.bs-ft__bio                         { color: var(--ft-text); }
.bs-ft__bio strong                  { color: var(--ft-text-strong); }
.bs-ft__bio a                       { color: var(--ft-accent); }
.bs-ft__bio a:hover                 { color: var(--ft-link-hover); }
.bs-ft__heading                     { color: var(--ft-heading); }
.bs-ft__link                        { color: var(--ft-link); }
.bs-ft__link:hover                  { color: var(--ft-link-hover); }
.bs-ft__soon                        { background: var(--ft-soon-bg); color: var(--ft-soon-text); border: 1px solid rgba(201,168,76,0.50); }
.bs-ft__bottom                      { background: var(--ft-bottom-bg); border-top-color: var(--ft-bottom-divider); }
.bs-ft__copy                        { color: var(--ft-copy); }
.bs-ft__copy a                      { color: var(--ft-copy-link); }
.bs-ft__copy a:hover                { color: var(--ft-copy-hover); }
.bs-ft__nav-link                    { color: var(--ft-nav-link); }
.bs-ft__nav-link:hover              { color: var(--ft-nav-hover); }
.bs-ft__nav-item + .bs-ft__nav-item::before { background: var(--ft-separator); }

/* ── Callout variant colours ── */
.callout--red  { border-color: var(--bs-red); }
.callout--gold { border-color: var(--highlight); }
.callout--blue { border-color: var(--accent); }

/* ── Sample steps counter colour ── */
.sample-steps li::before { color: #2A4C69; }

/* ── Screenshot placeholder stripe ── */
.screenshot-placeholder { --placeholder-stripe: rgba(26,26,26,0.03); }

/* ── List accent colour ── */
.list-accent li { color: var(--b-accent); }

/* ── Section backgrounds ── */
.section--dark    { background: var(--ink); }
.section--darker  { background: var(--b-bg-alt2); }
.section--purchase { background: var(--b-bg-alt); }

/* ── FASTFOCUS PAGE COLOURS ── */
hr.accent               { background: var(--b-accent-dim); }
.stat-strip             { background: var(--b-accent); }
.stat-num               { color: var(--b-ink); }
.stat-label             { color: rgba(255,255,255,0.65); }
.divider                { background: var(--bg-2); border-color: var(--b-accent-dim); }
.divider-text           { color: var(--ink-dim); }
.callout                { background: var(--bg-2); }
.routines-grid          { border-color: var(--bg-3); }
.routine-item           { border-color: var(--bg-3); }
.routine-num            { color: var(--b-accent); }
.routine-text strong    { color: var(--ink); }
.routine-text span      { color: var(--ink-dim); }
.included-item          { border-left-color: var(--b-accent); background: var(--bg-2); }
.included-item h4       { color: var(--ink); }
.included-item p        { color: var(--ink-dim); }
.sample-layout img      { border-color: var(--bg-3); }
.sample-steps li        { border-bottom-color: var(--bg-3); color: var(--ink); }
.guide-list li          { border-bottom-color: var(--bg-3); color: var(--ink); }
.guide-list li::before  { color: var(--b-accent); }
.accordion              { color: var(--ink); border-bottom-color: var(--bg-3); }
.accordion:hover        { color: var(--b-accent); }
.accordion::after       { color: var(--b-accent); }
.panel                  { color: var(--ink-dim); }
.testimonial-block      { border-color: var(--bg-3); }
.testimonial-block::before { color: var(--b-accent); }
.testimonial-block p    { color: var(--ink-dim); }
.testimonial-block cite { color: var(--ink-dim); }
table                   { border-color: var(--bg-3); }
thead tr                { background: var(--bg-2); }
th                      { color: #1F3546; border-bottom-color: var(--bg-3); }
td                      { color: var(--ink-dim); border-bottom-color: var(--bg-3); }
tbody tr:hover td       { background: var(--accent-dimmer); color: var(--ink); }
.purchase-card          { border-color: var(--bg-3); }
.purchase-card.featured { background: var(--bg-2); border-color: var(--b-accent); }
.purchase-card h3       { color: var(--ink); }
.price-display          { color: var(--b-accent); }
.price-note             { color: var(--ink); }
.card-desc              { color: var(--ink); }
.purchase-card ul       { border-top-color: var(--bg-3); }
.purchase-card ul li    { color: var(--ink-dim); border-bottom-color: var(--bg-3); }
.purchase-card ul li::before { color: var(--b-accent); }
.featured-badge         { background: var(--b-accent); color: var(--b-ink); }
.content + .content     { border-top-color: var(--b-accent-dim); }


/* ════════════════════════════════════════════════
   ARTICLES PAGE COLOURS
   ════════════════════════════════════════════════ */

.article-wrap               { color: var(--ink); }
.article-wrap a             { color: var(--b-accent); }
.article-wrap a:hover       { color: var(--accent-hover); }

.article-wrap h2            { color: var(--ink); border-bottom-color: var(--b-accent); }

/* In-depth articles */
.article-wrap > ul:not(.artlist) li             { color: var(--ink); border-left-color: var(--b-accent); background: var(--bg-2); }
.article-wrap > ul:not(.artlist) li:hover       { background: var(--bg-3); border-left-color: var(--accent-hover); }
.article-wrap > ul:not(.artlist) li a           { color: var(--b-accent); }
.article-wrap > ul:not(.artlist) li a:hover     { color: var(--accent-hover); }

/* Recommended articles — colour cycles */
.article-wrap ul.artlist--rec li:nth-child(6n+1) a              { background: #e8f0f8; border-top-color: #2A4C69; }
.article-wrap ul.artlist--rec li:nth-child(6n+1) a span         { color: #2A4C69; }
.article-wrap ul.artlist--rec li:nth-child(6n+1) a::before      { color: #6a8fad; }

.article-wrap ul.artlist--rec li:nth-child(6n+2) a              { background: #e4f4f0; border-top-color: #1a6b5a; }
.article-wrap ul.artlist--rec li:nth-child(6n+2) a span         { color: #1a6b5a; }
.article-wrap ul.artlist--rec li:nth-child(6n+2) a::before      { color: #5aa898; }

.article-wrap ul.artlist--rec li:nth-child(6n+3) a              { background: #fdf3e3; border-top-color: #8a5a00; }
.article-wrap ul.artlist--rec li:nth-child(6n+3) a span         { color: #8a5a00; }
.article-wrap ul.artlist--rec li:nth-child(6n+3) a::before      { color: #c49040; }

.article-wrap ul.artlist--rec li:nth-child(6n+4) a              { background: #fce8ec; border-top-color: #8b2035; }
.article-wrap ul.artlist--rec li:nth-child(6n+4) a span         { color: #8b2035; }
.article-wrap ul.artlist--rec li:nth-child(6n+4) a::before      { color: #c47080; }

.article-wrap ul.artlist--rec li:nth-child(6n+5) a              { background: #ede8f8; border-top-color: #4a3080; }
.article-wrap ul.artlist--rec li:nth-child(6n+5) a span         { color: #4a3080; }
.article-wrap ul.artlist--rec li:nth-child(6n+5) a::before      { color: #8a70b8; }

.article-wrap ul.artlist--rec li:nth-child(6n+6) a              { background: #e8f4e8; border-top-color: #2a6030; }
.article-wrap ul.artlist--rec li:nth-child(6n+6) a span         { color: #2a6030; }
.article-wrap ul.artlist--rec li:nth-child(6n+6) a::before      { color: #6a9e6a; }

/* Searchable list */
#myUL.artlist li            { border-bottom-color: var(--bg-3); }
#myUL.artlist li a          { color: var(--b-accent); }
#myUL.artlist li a::after   { color: var(--bg-3); }
#myUL.artlist li a:hover    { background: var(--bg-2); color: var(--accent-hover); }
#myUL.artlist li a:hover::after { color: var(--b-accent); }

/* Search input */
#myInput                    { border-color: var(--bg-3); color: var(--ink); background: var(--bg-2); }
#myInput:focus              { border-color: var(--b-accent); box-shadow: 0 0 0 3px var(--accent-dimmer); background: var(--white); }