/* ============================================================
   Price phases, autumn 2026 (matches FxFactory's schedule).
   An inline <head> script on each money page (index, buy, download,
   cuts) adds one class to <html> BEFORE first paint:
     html.ph-launch   until Nov 16 00:00 ET   Doza Cuts $79 launch price
     (no class)       Nov 16 → Nov 19         regular prices
     html.ph-bf       Nov 19 00:00 ET → Dec 1 23:59:59 PT
                      Black Friday, code BLACKFRIDAY, 30% off
   Mark anything phase-specific with data-ph="<phases it shows in>",
   space-separated tokens from: launch reg bf. It is hidden in every
   other phase. With no JS the page shows the "reg" state.
   Remove after Dec 2: the gates, this file and every [data-ph] that
   isn't "reg" (then drop the attribute from the reg ones).
   ============================================================ */

html.ph-launch [data-ph]:not([data-ph~="launch"]),
html.ph-bf [data-ph]:not([data-ph~="bf"]),
html:not(.ph-launch):not(.ph-bf) [data-ph]:not([data-ph~="reg"]){ display:none !important; }

/* The strip above the site header. In flow, so it scrolls away and the
   sticky header takes the top; nothing else on the page moves. */
.promo-strip{
  position: relative; z-index: 41;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 40px; padding: 8px 16px;
  background: var(--accent, #3E6FA8);
  color: #fff;
  font-family: var(--font-body, "IBM Plex Sans", system-ui, sans-serif);
  font-size: 14px; line-height: 1.35; letter-spacing: 0;
  text-align: center;
}
.promo-strip b{ font-weight: 600; }
.promo-strip code{
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32);
}
.promo-strip a{ color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; border: 0; }
.promo-strip a:hover{ text-decoration-thickness: 2px; }
.promo-strip .promo-mini{ display: none; }
@media (max-width: 720px){
  .promo-strip{ font-size: 13px; }
  .promo-strip .promo-full{ display: none; }
  .promo-strip .promo-mini{ display: inline; }
}

/* Sale prices on the plan cards: the regular price struck, the sale price beside it. */
.plan-price .was, .t-price .was{
  font-size: .6em; color: var(--ink-soft); text-decoration: line-through;
  text-decoration-thickness: 2px; margin-right: 12px; vertical-align: .2em; font-weight: inherit;
}
html.ph-bf .t-price small, html.ph-bf .plan-price small{ white-space: nowrap; }
@media (max-width: 520px){
  html.ph-bf .t-price small, html.ph-bf .plan-price small{ display: block; margin-left: 0; margin-top: 4px; }
}
.promo-badge{
  color: #A9CBFF !important;
  background: var(--accent-tint, rgba(62,111,168,.18)) !important;
  border: 1px solid var(--accent-edge, rgba(83,136,196,.55)) !important;
}
.promo-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
