/* ===========================================================================
   FPFX — offer surfaces
   ---------------------------------------------------------------------------
   TWO strips live here, and they deliberately read DIFFERENT tables so the
   same offer can never be shown twice on one page:

     .fpfx-announce   operator announcements from `banners`, mounted in
                      public-header.php ABOVE the proof rail, on every
                      'full' and 'document' surface.
     .fpfx-offerband  running discount rules from `discount_rules`, mounted in
                      index-body.php directly BELOW the hero, home page only.

   EMPTY IS NOTHING, NOT EMPTY.
   Both are removed at the PHP level when their source has no rows, so neither
   wrapper reaches the document. The `:empty` rules below are a net for the
   case where JS removes the last child, and there is deliberately no
   min-height anywhere in this file: a reserved band with nothing in it is the
   "empty gold stripe" public-header.php already refuses to draw for the rail.

   AURORA. Dark-translucent glass, never white — white glass over the drifting
   aurora brightens as light passes beneath it and small text disappears.
   Gold #EEB762, hairline rgba(255,255,255,.06), text #F8F8F8, meta #948C82
   (the 6:1 contrast floor) at 11px and no smaller. One easing curve.
   =========================================================================== */

:root{
  --fo-ease:cubic-bezier(.2,.8,.3,1);
  --fo-glass:rgba(13,11,10,.58);
  --fo-gold:#EEB762;
  --fo-gold-hi:#F3DBB2;
  --fo-line:rgba(255,255,255,.06);
  --fo-ink:#F8F8F8;
  --fo-meta:#948C82;
}

/* ===========================================================================
   1 · THE ANNOUNCEMENT STRIP
   =========================================================================== */

.fpfx-announce{
  position:relative;
  /* One z-index, declared once. Below the sticky header (100) and far below
     the boot screen (10000), because an offer must never cover either. */
  z-index:5;
  background:var(--fo-glass);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--fo-line);
  color:var(--fo-ink);
  font-family:'DM Sans',system-ui,sans-serif;
}
.fpfx-announce:empty{display:none!important}
.fpfx-announce[hidden]{display:none!important}

.fpfx-announce-in{
  position:relative;
  max-width:1280px;
  margin-inline:auto;
  padding:0 26px;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:0;              /* never reserve height for an absent offer */
}

/* The slides stack. Only the live one is in flow; the rest are absolute so a
   rotation does not reflow the page beneath. */
.fpfx-announce-i{
  display:none;
  align-items:center;
  gap:12px;
  flex:1 1 auto;
  min-width:0;
  padding:9px 0;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .42s var(--fo-ease),transform .42s var(--fo-ease);
}
.fpfx-announce-i.is-on{display:flex;opacity:1;transform:none}

.fpfx-announce-badge{
  flex:0 0 auto;
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#120E06;
  background:linear-gradient(110deg,var(--fo-gold) 0%,var(--fo-gold-hi) 100%);
  border-radius:999px;
  padding:4px 10px;
  line-height:1.2;
}

.fpfx-announce-say{
  min-width:0;
  flex:1 1 auto;
  font-size:13px;
  line-height:1.4;
  color:var(--fo-ink);
  /* The offer TERMS are the point of the strip. They wrap; they are never
     clipped to an ellipsis the way the old top bar clipped them. */
  overflow-wrap:anywhere;
}
.fpfx-announce-say b{font-weight:600;color:var(--fo-gold-hi)}

.fpfx-announce-code{
  flex:0 0 auto;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--fo-gold);
  border:1px dashed rgba(238,183,98,.45);
  border-radius:6px;
  padding:3px 8px;
}

.fpfx-announce-clock{
  flex:0 0 auto;
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  font-size:11px;
  color:var(--fo-meta);
}
.fpfx-announce-clock time{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--fo-gold);
}

.fpfx-announce-cta{
  flex:0 0 auto;
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:.02em;
  color:#120E06;
  background:var(--fo-gold);
  border-radius:999px;
  padding:6px 14px;
  text-decoration:none;
  transition:background .28s var(--fo-ease),transform .28s var(--fo-ease);
}
.fpfx-announce-cta:hover,.fpfx-announce-cta:focus-visible{
  background:var(--fo-gold-hi);
  transform:translateY(-1px);
}

.fpfx-announce-x{
  flex:0 0 auto;
  align-self:center;
  appearance:none;
  background:transparent;
  border:1px solid var(--fo-line);
  border-radius:8px;
  width:26px;height:26px;
  display:grid;place-items:center;
  color:var(--fo-meta);
  cursor:pointer;
  font-size:14px;line-height:1;
  transition:color .28s var(--fo-ease),border-color .28s var(--fo-ease);
}
.fpfx-announce-x:hover,.fpfx-announce-x:focus-visible{color:var(--fo-ink);border-color:rgba(238,183,98,.4)}

/* Dots only exist for more than one offer; the JS never draws them for one. */
.fpfx-announce-dots{flex:0 0 auto;display:flex;gap:5px;align-items:center}
.fpfx-announce-dots button{
  appearance:none;border:0;padding:0;cursor:pointer;
  width:5px;height:5px;border-radius:999px;
  background:rgba(255,255,255,.22);
  transition:background .28s var(--fo-ease),width .28s var(--fo-ease);
}
.fpfx-announce-dots button[aria-current="true"]{background:var(--fo-gold);width:14px}

/* On a phone the strip becomes two rows, not four: the badge and the sentence
   share the first, everything actionable shares the second. Letting each part
   claim its own full-width row pushed the bar past 150px, which is a fifth of
   a phone screen spent on a bar that is not the page. */
@media (max-width:760px){
  .fpfx-announce-in{padding:0 20px;gap:8px}
  .fpfx-announce-i{gap:8px 9px;flex-wrap:wrap;padding:8px 0}
  .fpfx-announce-badge{order:0;font-size:10px;padding:3px 8px}
  .fpfx-announce-say{flex:1 1 60%;order:1;font-size:12px;line-height:1.35}
  .fpfx-announce-code{order:2;font-size:10px;padding:2px 7px}
  .fpfx-announce-clock{order:3;font-size:10px}
  .fpfx-announce-cta{order:4;margin-left:auto;font-size:11px;padding:5px 12px}
  .fpfx-announce-dots{display:none}
  .fpfx-announce-x{width:24px;height:24px}
}

/* ===========================================================================
   2 · THE OFFER BAND, BELOW THE HERO
   ---------------------------------------------------------------------------
   This used to be a full-bleed bar pinned above the header, where its position
   supplied the context. Mid-page it has none, so it carries its own heading —
   and it is inset to the section rhythm with a radius and a hairline all round,
   because a full-bleed gold band between two sections reads as a broken
   section boundary rather than as an offer.
   =========================================================================== */

.fpfx-offerband{
  position:relative;
  z-index:1;
  padding:44px 0 8px;
  font-family:'DM Sans',system-ui,sans-serif;
}
.fpfx-offerband:empty{display:none!important}

.fpfx-offerband-in{
  max-width:1240px;
  margin-inline:auto;
  padding:0 26px;
}

.fpfx-offerband-head{margin:0 0 16px}
.fpfx-offerband-eyebrow{
  display:block;
  font-family:'Outfit',system-ui,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fo-gold);
  margin:0 0 6px;
}
.fpfx-offerband-h{
  font-family:'Outfit',system-ui,sans-serif;
  font-size:clamp(20px,2.4vw,26px);
  font-weight:700;
  line-height:1.2;
  color:var(--fo-ink);
  margin:0;
}
.fpfx-offerband-sub{
  margin:6px 0 0;
  font-size:13px;
  line-height:1.55;
  color:var(--fo-meta);
  max-width:62ch;
}

.fpfx-offerband-rows{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;
  list-style:none;
  margin:0;padding:0;
}

.fpfx-offer{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 18px;
  border-radius:16px;
  background:var(--fo-glass);
  border:1px solid var(--fo-line);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:border-color .32s var(--fo-ease),transform .32s var(--fo-ease);
}
.fpfx-offer:hover{border-color:rgba(238,183,98,.34);transform:translateY(-2px)}

.fpfx-offer-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fpfx-offer-badge{
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:#120E06;
  background:linear-gradient(110deg,var(--fo-gold) 0%,var(--fo-gold-hi) 100%);
  border-radius:999px;padding:4px 10px;line-height:1.2;
}
.fpfx-offer-title{
  font-family:'Outfit',system-ui,sans-serif;
  font-size:15px;font-weight:600;color:var(--fo-ink);line-height:1.3;
}

/* The terms wrap in full. The old bar set white-space:nowrap with an ellipsis,
   which hid the condition the offer depended on. */
.fpfx-offer-say{
  margin:0;
  font-size:13px;line-height:1.55;
  color:#C9C4BC;
  max-width:none;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

.fpfx-offer-foot{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:auto;padding-top:4px;
}
.fpfx-offer-code{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.08em;color:var(--fo-gold);
  border:1px dashed rgba(238,183,98,.45);border-radius:6px;padding:3px 8px;
}
.fpfx-offer-clock{
  display:inline-flex;align-items:baseline;gap:6px;
  font-size:11px;color:var(--fo-meta);
}
.fpfx-offer-clock time{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;font-size:12px;color:var(--fo-gold);
}
.fpfx-offer-cta{
  margin-left:auto;
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:600;font-size:12px;
  color:#120E06;background:var(--fo-gold);
  border-radius:999px;padding:7px 15px;text-decoration:none;
  transition:background .28s var(--fo-ease),transform .28s var(--fo-ease);
}
.fpfx-offer-cta:hover,.fpfx-offer-cta:focus-visible{background:var(--fo-gold-hi);transform:translateY(-1px)}

/* The countdown is the reason to act now. It stays on a phone; the old bar
   hid it under 760px, which removed the urgency and kept the noise. */
@media (max-width:760px){
  .fpfx-offerband{padding:32px 0 4px}
  .fpfx-offerband-in{padding:0 20px}
  .fpfx-offer-cta{margin-left:0;width:100%;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .fpfx-announce-i,.fpfx-announce-cta,.fpfx-offer,.fpfx-offer-cta{transition:none}
  .fpfx-offer:hover,.fpfx-announce-cta:hover,.fpfx-offer-cta:hover{transform:none}
}