/* Black Friday 2026 ticker, on the home pages and the SEO guide pages. A slow
   strip right under the fixed nav that scrolls away with the page; promo.js
   shows it only while the in-app sale runs and decides where a tap goes.
   Temporary: after the sale, delete this file, promo.js, the `.bf` strip and
   the two tags that load them on every page, and both entries in
   scripts/stamp_assets.py. */

.bf[hidden] { display: none !important; }

.bf {
    --bf-serif: 'Literata', 'Times New Roman', serif;
    --bf-sans: 'Inter', sans-serif;
    display: block;
    overflow: hidden;
    border-block: 1px solid var(--outline);
    background: var(--accent-soft);
    color: var(--text-main);
    text-decoration: none;
}

/* Two identical runs; the track slides by one run (−50 %) and starts over without a seam. */
.bf-track { display: flex; width: max-content; animation: bf-tape 70s linear infinite; }
.bf:hover .bf-track, .bf:focus-visible .bf-track { animation-play-state: paused; }
/* One shared baseline, so the small caps sit level with the serif instead of floating above it;
   the diamonds rest on it too, lifted to the middle of the serif's lowercase. */
.bf-run { display: flex; align-items: baseline; gap: 18px; padding: 12px 9px; white-space: nowrap; }
.bf-run i { flex: none; width: 5px; height: 5px; background: var(--accent); transform: translateY(-1.5px) rotate(45deg); }
.bf-k { font: 600 12px/1 var(--bf-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.bf-t { font: 500 16px/1 var(--bf-serif); color: var(--text-main); }
.bf-s { font: 400 16px/1 var(--bf-serif); color: var(--text-muted); }
@keyframes bf-tape { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bf-track { animation: none; } }

/* Right under the 80 px nav: each page type pulls the strip up by its own top padding − 80 px. */
.intro > .bf { margin: -32px 0 28px; }        /* home hero: 112 px */
.tool-page > .bf { margin: -56px 0 32px; }    /* guides and tools: 136 px */
.switch-page > .bf { margin: -80px 0 40px; }  /* Paprika pages: 160 px */
@media (max-width: 640px) {
    .tool-page > .bf { margin: -24px 0 24px; }    /* 104 px */
    .switch-page > .bf { margin: -40px 0 28px; }  /* 120 px */
}
@media (min-width: 641px) and (max-width: 1099px) { .intro > .bf { margin: -56px 0 36px; } }  /* 136 px */
@media (min-width: 1100px) { .intro > .bf { margin: -72px 0 48px; } }                         /* 152 px */