/* ==================================================================
   Top urgency strip + bottom sticky buy bar. index.html only.

   Purely additive: nothing here redefines a rule styles.css or
   landing.css already owns, except body{padding-bottom}, which is
   deliberate and explained where it sits.

   Every color is a token. There are no hex values in this build.
   ================================================================== */

/* ------------------------------------------------------------------
   1. Top urgency strip

   OVERLAY, NOT A BAND IN THE FLOW. It was sticky, which meant it sat in
   normal flow, took its own 45px of the document and pushed the masthead
   down - a separate band stacked above the brand rather than a bar over
   the top of the page. It is now fixed, so it occupies no layout space
   at all and nothing below it moves. The masthead reserves room for it
   with padding-top:var(--urg-h) (see landing.css) so the wordmark still
   centers in what is left of the band, and the band's own 170px height
   is unchanged.

   GEOMETRY IS THE LIVE SITE'S, measured off theseniorflyer.com's
   .sale-bar rather than estimated:

     .sale-bar          59.6px tall on desktop, 65px at 390
     .sale-bar__inner   padding 10.5px 24px, max-width 1300px, centered
     .sale-bar__left    13.1px / 600 / .14em tracking, uppercase

   Our own content and palette A styling are unchanged; only the box and
   the type scale come across. The 59.6px is set as a min-height rather
   than left to the content, because the live bar gets its height from a
   CTA button in the bar and ours has no button - without the min-height
   the same padding and type land at ~43px.
------------------------------------------------------------------ */
:root{--urg-h:59.6px}
@media (max-width:768px){:root{--urg-h:65px}}

/* COLOR ONLY - geometry above is unchanged and verified.
   The strip used to be teal on teal: --accent-lift for the dot, the warning
   glyph, the promo words and the timer border, all sitting on a dark teal
   ground, one step from the masthead below it. Now the ground is the darkest
   ink token, the copy is cream at reduced opacity, and the only color in the
   strip is the alert red - which is the one thing in it that is actually
   urgent. */
.urg{
  position:fixed;top:0;left:0;right:0;z-index:950;
  background:var(--ink-deep);
  color:var(--paper);
  border-bottom:1px solid rgba(245,242,234,.10);
  font-family:var(--ui);
}
.urg-in{
  width:min(1300px,100%);margin-inline:auto;
  /* --urg-h is the strip's TOTAL height, which is what the masthead has to
     reserve. The 1px border-bottom is part of it, exactly as it is on the
     live site (its bar measures 59.6 with a 58.6 inner). */
  min-height:calc(var(--urg-h) - 1px);padding:10.5px 24px;
  display:flex;align-items:center;justify-content:center;
  gap:.85rem;
  font-size:13.1px;letter-spacing:.14em;line-height:1.2;
  text-transform:uppercase;color:rgba(245,242,234,.72);
}
/* max-width:none IS LOAD-BEARING, NOT TIDYING.
   .urg-item is a <p>, and styles.css:86 sets p{margin:0 0 1rem;max-width:48ch}
   globally. The margin was already overridden here; the max-width was not.
   At 390 the strip's .74rem type makes 48ch = 322.45px, and the promo line
   needs 347px, so it overflowed its own capped box by 24.55px to the right
   while the box itself stayed centred by .urg-in's align-items:center. The
   live line is only 180px wide, well under the cap, so it centred exactly -
   which is why one line looked off and the other did not. Measured ink
   centres before this rule, at 390: live 195.24, promo 207.23, viewport
   centre 195. Uncapping the item lets both lines centre on their content. */
.urg-item{display:flex;align-items:center;gap:.45rem;margin:0;max-width:none;white-space:nowrap}
.urg-item b{font-weight:700;color:rgba(245,242,234,.92)}


/* The counter is rewritten by script every few seconds. Tabular figures
   plus a fixed three-digit box keep its width constant, so a drift from
   147 to 152 to 98 never nudges the line it sits on. Without this the
   strip contributes a small but real layout shift on every tick. */


/* The live dot, in the brighter alert red. It was --accent-lift, which put
   a teal dot on a teal-family ground and read as decoration rather than as
   something live. */


@media (prefers-reduced-motion:reduce){
  .urg-dot{animation:none}
}

.urg-warn{color:var(--signal-lift)}
.urg-promo b{color:rgba(245,242,234,.92)}
.urg-ends{opacity:.62}


/* ------------------------------------------------------------------
   THE READING COUNTER - REMOVED 2026-09-11 (correction pass)

   .urg-live b, .urg-dot, @keyframes urg-pulse, .urg-sep stood here and styled `147 reading right now`: the
   live dot with its 1.6s pulse, the counter's own weight, and the
   `&middot;` that separated it from the countdown. The counter was the one
   fabricated social-proof number on the page and the owner has taken it
   off. Its markup is tombstoned in index.html and its whole IIFE is
   tombstoned in urgency.js.

   The strip is one item now and `.urg-in` already centres it, so no
   layout rule had to change with them.
------------------------------------------------------------------ */

/* Boxed digits. Tabular figures and a fixed tracking stop the width
   changing as the numbers tick, which is what makes a countdown jitter. */
.urg-timer{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-weight:600;font-size:.95rem;letter-spacing:.12em;
  padding:.24rem .5rem .22rem .55rem;
  /* A plate, not an outline, so no border: a solid deep desaturated red
     ground with the brighter alert red on it, 4.52 : 1. Every value here is
     a token - an rgba() of --signal-lift would have hardcoded it. */
  color:var(--signal-lift);
  background:var(--signal-deep);
  border-radius:3px;
}

/* Two centered lines on a phone, no separator, larger digits.
   Box is the live site's: 65px tall, 10px vertical padding, 14px side
   gutter. The type scale is NOT the live site's here and that is
   deliberate - its mobile bar drops .sale-bar__left to 9.5px, which this
   audience cannot read. Ours holds at .74rem (~12.6px). Flagged in
   HANDOFF rather than matched. */
@media (max-width:768px){
  .urg-in{
    flex-direction:column;justify-content:center;
    gap:.12rem;padding:10px 14px;min-height:calc(var(--urg-h) - 1px);
    font-size:.74rem;
  }
  
  /* .9rem, not 1rem: two stacked lines plus a 1rem timer overshoot the
     live bar's 65px box by ~2.6px and the min-height stops governing. At
     .9rem the content sits inside the box and the height is exact. */
  .urg-timer{font-size:.9rem;letter-spacing:.1em}
}
@media (max-width:360px){
  .urg-in{font-size:.66rem}
  .urg-timer{font-size:.95rem}
}

/* ------------------------------------------------------------------
   2. Bottom sticky buy bar

   z-index sits above the page but below .xi, the exit-intent overlay,
   which landing.css puts at 9998. The modal has to cover this bar.
------------------------------------------------------------------ */

/* Measured height of the bar at each width, reserved at the foot of the
   page so the footer is never sitting underneath it. styles.css and
   landing.css both end on body{padding-bottom:0} - the comment there says
   the room was for a sticky bar "no longer on the page" - so this puts the
   reservation back rather than inventing it.

   RESERVED ONLY WHILE THE BAR IS UP, from this revision. It used to be
   unconditional below 820px, which was right when the bar appeared after
   320px of scroll and stayed for the rest of the session. The bar is now
   bound to the bottom of the arithmetic and is absent for most of the
   page, so the reservation follows it: urgency.js adds and removes
   `bar-on` on <body> in the same call that toggles the bar. The footer is
   never underneath it, and the page does not carry 69px of empty ground
   at its foot for the whole of the time the bar is not there.

   AND THE FIGURES HERE ARE ONLY THE FALLBACK. urgency.js measures the
   bar's rendered height and writes it back to --buybar-h, because the
   2px top border and the button's own line box are not in these two
   numbers. See the note there. */
:root{--buybar-h:85px}
@media (max-width:768px){:root{--buybar-h:69px}}
body{padding-bottom:0}
body.bar-on{padding-bottom:var(--buybar-h)}

/* MOBILE ONLY, FROM 820px UP IT IS NOT THERE AT ALL.
   display:none rather than visibility or a transform: the bar must take no
   layout space on desktop, and the reserved --buybar-h at the foot of the
   page goes with it - otherwise the footer would sit above 85px of nothing.
   urgency.js reads the same 820px in a matchMedia and never attaches its
   scroll listener above it, so no handler runs on desktop either. The two
   thresholds are the same number and must stay the same number.

   820 is not a new breakpoint. It is the page's own single-column line - where
   .hero-in collapses, .offer-grid collapses and the hero swaps to hero-560 -
   so "the bar is on where the page is one column" needs no extra rule to
   remember. */
@media (min-width:820px){
  .buybar{display:none}
  /* Both, so a stale `bar-on` left on <body> by a resize across the
     breakpoint cannot reserve space for a bar that is not rendered. */
  body,body.bar-on{padding-bottom:0}
}

.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  background:var(--tile);
  border-top:2px solid var(--ink);
  box-shadow:0 -14px 34px -20px rgba(0,0,0,.4);
  /* IT FADES, IT NO LONGER SLIDES IN FROM OFF-SCREEN. translateY(110%)
     threw the whole bar below the fold and back, which at the moment the
     arithmetic leaves the top of the screen read as a snap. The move is
     now 14px - enough to give the fade a direction - and opacity carries
     it.

     visibility is in the transition on a delay so the bar is not
     hit-testable while it is transparent, without cutting the fade short:
     0s linear .28s going out, 0s coming in. */
  transform:translateY(14px);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .28s ease,opacity .28s ease,visibility 0s linear .28s;
}
.buybar.show{
  transform:none;opacity:1;visibility:visible;pointer-events:auto;
  transition:transform .28s ease,opacity .28s ease,visibility 0s;
}
@media (prefers-reduced-motion:reduce){
  .buybar,.buybar.show{transition:none}
}

/* FULL BLEED, NOT A CENTERED CONTAINER.
   The rest of the page sits in a 1080px column, but a fixed bar that
   inherits that column leaves the price and the button floating in the
   middle of a 1920px screen with dead space either side. The inner is
   therefore edge to edge with a fixed gutter, so the label sits flush
   left and the CTA flush right at every width. */
.buybar-in{
  width:100%;max-width:none;margin:0;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem 2rem;
}
.buybar-offer{min-width:0}
.buybar-label{
  display:block;
  font-family:var(--ui);font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  font-size:.6rem;color:var(--ink-mute);
  margin-bottom:.18rem;
}
.buybar-price{display:flex;align-items:baseline;gap:.55rem}
.buybar-was{font-size:1rem;color:var(--ink-mute);text-decoration:line-through}
.buybar-now{font-family:var(--ui);font-size:1.9rem;line-height:1;color:var(--accent)}

/* The page button at bar scale. Scoped to .buybar so .btn itself is
   untouched everywhere else on the page. */
.buybar .btn{
  min-height:52px;padding:.7rem 1.7rem;
  font-size:1.05rem;white-space:nowrap;flex:none;
  /* 10px, not the .5rem this inherited: the arrow below is the one the offer
     CTA and the hero pair carry, and 10px is the gap they set it at. */
  gap:10px;
}
/* THE TRAILING ARROW, THE SAME ONE THE OTHER CTAs USE.
   Identical declaration to .ep-btn::after and .hero .btn-row.top-cta .btn::after
   - the serif face, 1.1rem, no tracking, and the 4px slide on hover. Drawn with
   ::after rather than typed into the label so it can move on its own, which is
   why the markup says only GET IT NOW. */
.buybar .btn::after{
  content:"\2192";
  /* 17.6px, matching the offer/last-call/modal arrow and the hero pair -
     one arrow size on the page. The buybar is our own component and not a
     port of his, so this is a consistency decision, not a match to him. */
  font-family:var(--serif);font-size:17.6px;letter-spacing:0;
  transition:transform .25s ease;
}
.buybar .btn:hover::after{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  .buybar .btn::after{transition:none}
  .buybar .btn:hover::after{transform:none}
}

@media (max-width:768px){
  .buybar-in{gap:.7rem;padding:.45rem 1rem}
  .buybar-label{font-size:.55rem;letter-spacing:.14em}
  .buybar-now{font-size:1.5rem}
  .buybar-was{font-size:.85rem}
  .buybar .btn{min-height:46px;padding:.6rem 1.05rem;font-size:.92rem}
}
/* styles.css sends .btn to width:100% here, which would break the row. */
@media (max-width:560px){
  .buybar .btn{width:auto}
}
@media (max-width:360px){
  .buybar-in{padding:.45rem .8rem}
  .buybar .btn{padding:.6rem .8rem;font-size:.85rem}
  .buybar-label{font-size:.5rem}
}

/* ------------------------------------------------------------------
   THE STICKY BAR ON OTIS GRANGER'S - THE LOOK, NOT ONLY THE CONTENT
   2026-09-11 (correction pass)

   The previous set took his two children and his words and left the bar
   looking like ours. Every figure below was read off his live page at 390
   and 360 with getComputedStyle, not estimated:

     bar        flex, align-items:center, gap 12px, padding 10px 14px,
                height 78, border-top 1px solid rgba(198,208,222,.25),
                box-shadow rgba(0,0,0,.35) 0 -6px 20px, z-index 60
     name       Georgia 16px/20px, weight 700, #F5F2EA,
                nowrap + overflow:hidden + text-overflow:ellipsis
     price      Georgia 13px/16.25px, weight 400, #C6D0DE
     button     Georgia 17px/27.2px, weight 700, white,
                linear-gradient(#D99A45,#B5772C), 1px solid #E9B84E,
                radius 9px, no shadow, padding 14px 20px, ~38-41% of the bar

   THE TWO MAPPINGS, AND ONLY THESE TWO:

   1. THE GROUND IS OURS. His is rgba(36,28,21,.97), a warm brown. Ours is
      --ink-deep, the same ground the top bar and the footer already use,
      at his .97 alpha. Everything else about the bar is his.

   2. THE GOLD IS DARKENED, MINIMALLY, BECAUSE HIS FAILS AA.
      White on his #D99A45 measures 2.43 : 1 and on his #B5772C 3.72 : 1.
      The button is 17px/700, and WCAG large text starts at 18.66px for
      bold, so this is NORMAL text and the bar is 4.5, not 3.0. Both stops
      fail.
      Darkening each stop to 4.5 on its own collapses the ramp - they land
      six units apart - so the WHOLE gradient moves down by the one delta
      the lighter stop needs (0.1780 of HSL lightness), hue and saturation
      held exactly. His 0.1196 of lightness spread survives intact:
        #D99A45 -> #775618   white 4.50 : 1
        #B5772C -> #5D4313   white 8.22 : 1
      The border keeps his #E9B84E - it is a hairline, not text.

   BEHAVIOUR IS UNTOUCHED: same #buybar element, same reveal off the bottom
   of section 03 in urgency.js, same checkout link, and landing.js still hides
   it while the exit modal is open and restores it on all four close paths.
------------------------------------------------------------------ */
.buybar{
  background:rgba(11,19,38,.97);
  border-top:1px solid rgba(198,208,222,.25);
  box-shadow:0 -6px 20px rgba(0,0,0,.35);
}
.buybar-in{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;width:100%;margin:0;
}
.buybar-sl{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;text-align:left}
.buybar-sl b{
  font-family:Georgia,"Times New Roman",serif;
  font-size:16px;font-weight:700;line-height:20px;color:#F5F2EA;
  /* His own overflow behaviour: one line, clipped with an ellipsis. His
     product name is longer than the space too, and his does exactly this. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.buybar-sl span{
  font-family:Georgia,"Times New Roman",serif;
  font-size:13px;font-weight:400;line-height:16.25px;color:#C6D0DE;
}
/* `.buybar .buybar-cta`, NOT a bare `.buybar-cta`. The bar's own
   `.buybar .btn` is (0,2,0) and sets the size at three widths; a single
   class lost to it and the button rendered at 18.9px instead of his 17.
   Measured before this selector was widened. */
.buybar .buybar-cta{
  flex:none;
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;font-weight:700;line-height:27.2px;
  text-transform:none;letter-spacing:normal;
  color:#fff;
  background:linear-gradient(#775618,#5D4313);
  border:1px solid #E9B84E;border-radius:9px;box-shadow:none;
  padding:14px 20px;min-height:0;
}
.buybar .buybar-cta:hover{
  background:linear-gradient(#5D4313,#4A360F);
  border-color:#E9B84E;color:#fff;
}
/* No arrow. `.btn` draws none, and nothing here adds one. */
.buybar .buybar-cta::after{content:none}