/* offer-line.css — the November offer line (offer-line.js) under the top bar of the four pages
   that carry it. One look on every page: the site's orange accent (the STAX lettering and button orange)
   with white Barlow Condensed lettering, centred, never wider than the screen. */
.offer-line {
  display: block;
  width: fit-content;
  max-width: calc(100% - 32px);
  /* offer-line.js measures the page and sets these so the line sits midway between the top bar
     and the first thing below it; until it has, the line keeps 8px above and below. */
  margin: var(--offer-above, 8px) auto var(--offer-below, 8px);
  padding: 9px 24px;
  background: linear-gradient(135deg, #c4622a, #d4844a, #d4a04a);
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(196, 98, 42, 0.35);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;   /* the one Barlow Condensed weight every pre-login page loads */
  letter-spacing: 1.5px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  /* Above the page's content wrap (z-index 5 on Choose by Function and All Tools), whose empty top
     padding overlaps the line and would otherwise take its clicks; below the top bar (100). */
  z-index: 6;
}
.offer-line[hidden] { display: none; }
/* The line is a link to the sign-up page (owner, 1 November 2026). On hover it lightens the way the
   site's orange buttons do (#c4622a to #d4844a), fading in over the same 0.2s; keyboard focus keeps
   the browser's own focus ring, as every other button on these pages does. */
.offer-line::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, #d4844a, #d4a04a);
  opacity: 0;
  transition: opacity 0.2s;
}
.offer-line:hover::before { opacity: 1; }
/* Phone widths: sized so the line stays on one line down to a 320px screen. */
@media (max-width: 600px) {
  .offer-line { padding: 8px 12px; font-size: 14px; letter-spacing: 0.5px; }
}
@media (max-width: 360px) {
  .offer-line { font-size: 12.5px; letter-spacing: 0.3px; }
}