/* ===== RESET ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--ff-font-body);
}

/* ===== BODY ===== */
body {
  background: var(--ff-page-bg);
  color: var(--ff-text);
  display: flex;
  flex-direction: column;
  /* Both are min-heights on purpose. `height: 100dvh` pinned the page to exactly the
     viewport, so anything taller overflowed instead of growing and ran through the footer.
     The second line is the dvh refinement of the first, not a fixed height. */
  min-height: 100vh; min-height: 100dvh;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Keep in-page anchor targets clear of the sticky header. */
[id] {
  scroll-margin-top: 124px;
}

/* ===== HEADER =====
   Slim white bar. A cyan "speed flag" is anchored to the left edge, echoing the
   motion streaks in the logo, and deliberately backs the logo so it always reads
   against a clean white field. */
header {
  position: sticky;
  top: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100px;
  padding: 0 clamp(18px, 5vw, 56px) 0 0;
  background-color: #ffffff;
  border-bottom: 1px solid var(--ff-line-soft);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.04);
  color: var(--ff-ink);
  isolation: isolate;
}

/* The cyan flag: full-bleed on the left, slanted trailing edge. */
header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: clamp(70px, 9vw, 118px);
  background: linear-gradient(125deg, var(--ff-brand) 0%, #00d9ff 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
  z-index: -1;
}

header > a:first-of-type {
  display: flex;
  align-items: center;
  margin-left: clamp(88px, 11vw, 146px);
}

header img.logo {
  height: 84px;
  display: block;
  cursor: pointer;
}

/* The tagline that finishes the header lockup. Montserrat, all caps, split off
   from the mark by a cyan rule so the two read as one unit rather than as a
   stray line of nav copy. Dropped below 1024px — see the hide rule below. */
.header-tagline {
  /* NOT flex. The emphasised words are child elements, and a flex container
     discards the whitespace between its items — the spaces in
     "One Platform. All Fitness" vanish. Block + line-height centres the text
     against the rule without turning the words into flex items. */
  display: block;
  /* Explicit height so the cyan rule reads against the 84px mark rather than
     collapsing to the height of a single 14px line. */
  height: 54px;
  font-family: var(--ff-font-tagline);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 54px;
  letter-spacing: 0.16em;
  word-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ff-ink);
  white-space: nowrap;
  padding-left: 14px;
  margin-left: 2px;
  border-left: 2px solid var(--ff-brand);
}

/* "Platform" and "Fitness" stay in the tagline's ink; only the rule under them
   is brand cyan. */
.header-tagline .ht-em {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ff-brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (max-width: 1100px) {
  .header-tagline {
    height: 44px;
    line-height: 44px;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    word-spacing: 0.1em;
    padding-left: 11px;
  }
}

/* Below this the sign-in/sign-up pills and the basket need the whole bar —
   the tagline is the first thing to go, well before the 768px header rules.
   The bigger mark is ~197px wide, so it runs out of room sooner than it did. */
@media (max-width: 1024px) {
  .header-tagline {
    display: none;
  }
}

header nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Pill CTAs. Uppercase with open tracking so they read as deliberate controls
   rather than links, matching the condensed display type in the headings. */
.header-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--ff-r-pill);
  font-family: var(--ff-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: background var(--ff-t-fast), color var(--ff-t-fast), box-shadow var(--ff-t-fast),
              border-color var(--ff-t-fast), transform var(--ff-t-fast);
}

.header-login-btn {
  background: var(--ff-surface);
  color: var(--ff-ink);
  border: 1.5px solid #e3e6ea;
}
.header-login-btn:hover {
  color: var(--ff-ink);
  border-color: var(--ff-ink);
}

.header-signup-btn {
  background: var(--ff-brand);
  color: var(--ff-on-brand);
  box-shadow: 0 2px 10px var(--ff-brand-a28);
}
.header-signup-btn:hover {
  background: #00aed4;
  box-shadow: 0 6px 18px rgba(0,194,238,0.42);
  transform: translateY(-1px);
}
.header-auth-btn:active { transform: translateY(0); }

/* ===== HEADER ICON BUTTONS (basket / account) =====
   Soft-cornered outlined tiles with thin cyan stroke icons. */
.header-icon-btn,
.header-basket-btn,
.header-account-btn,
.header-account-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  min-width: 42px;
  padding: 0 11px;
  flex-shrink: 0;
  background: var(--ff-surface);
  border: 1.5px solid var(--ff-line-field);
  border-radius: var(--ff-r-tile);
  color: var(--ff-ink);
  font-family: var(--ff-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--ff-t-fast), box-shadow var(--ff-t-fast), background var(--ff-t-fast);
}

.header-icon-btn:hover,
.header-basket-btn:hover,
.header-account-btn:hover,
.header-account-icon:hover {
  border-color: var(--ff-brand);
  box-shadow: 0 2px 12px var(--ff-brand-a18);
}

.header-icon-btn svg,
.header-basket-btn svg,
.header-account-btn svg,
.header-account-icon svg {
  width: 21px;
  height: 21px;
  color: var(--ff-brand);
  flex-shrink: 0;
  display: block;
}

/* Account carries a label, so it gets a touch more breathing room. */
.header-account-btn,
.header-account-icon {
  padding: 0 15px 0 12px;
}

.header-logout-btn {
  background: transparent;
  color: var(--ff-muted);
  border: 1.5px solid #d8d8d8;
  font-family: var(--ff-font-body);
}
.header-logout-btn:hover {
  color: var(--ff-ink);
  border-color: var(--ff-ink);
}

/* ===== MAIN SEARCH SECTION ===== */
.main-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh; height: 80dvh;
  text-align: center;
  padding: 0 20px;
  background: url('WebsiteImages/TempBackdrop.jpg') no-repeat center/cover;
}

.main-search h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  font-family: var(--ff-font-display); font-weight: var(--ff-display-fw); text-transform: var(--ff-display-tt); letter-spacing: var(--ff-display-ls);
}

.main-search p {
  font-size: 20px;
  margin-bottom: 20px;
}

.main-search input[type="text"] {
  width: 300px;
  max-width: 80%;
  padding: 15px 20px;
  font-size: 1.2rem;
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.37);
  border: none;
  outline: none;
  margin-bottom: 10px;
}

.main-search button {
  padding: 15px 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.37);
  font-size: 1.1rem;
  border-radius: 50px;
  border: none;
  background-color: var(--ff-brand-light);
  color: white;
  cursor: pointer;
  transition: background 0.3s;
}

.main-search button:hover {
  background-color: var(--ff-brand);
  box-shadow: 0 0 10px var(--ff-brand);
}

/* ===== INFO BOXES SECTION ===== */
.info-section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 60px 6%;
  gap: 50px;
}

.info-box {
  background-color: var(--ff-surface);
  border-radius: var(--ff-r-card-lg);
  height: 400px;
  width: 300px;
  text-align: center;
  box-shadow: var(--ff-shadow-sm);
  border: 1px solid var(--ff-line-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--ff-t), box-shadow var(--ff-t), border-color var(--ff-t);
}

.info-box:hover {
  transform: translateY(-5px);
  box-shadow: var(--ff-shadow-md);
  border-color: var(--ff-brand-a18);
}

.info-box img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.info-box h2 {
  font-size: 1.35rem;
  margin: 18px 0 10px 0;
}

.info-box p {
  font-size: 0.94rem;
  margin: 0 18px 16px 18px;
  color: var(--ff-muted);
  line-height: 1.6;
  flex-grow: 1;
}

.info-box a.button {
  margin: 0 18px 18px 18px;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: var(--ff-r-pill);
  background-color: var(--ff-brand-light);
  color: var(--ff-on-brand);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--ff-t-fast), box-shadow var(--ff-t-fast), transform var(--ff-t-fast);
}

.info-box a.button:hover {
  background-color: var(--ff-brand);
  box-shadow: 0 6px 18px var(--ff-brand-a40);
  transform: translateY(-1px);
}

/* ===== RESPONSIVE INFO BOXES ===== */
@media (max-width: 900px) {
  .info-section {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .info-box {
    width: min(340px, 100%);
    height: auto;
  }
  .info-box img {
    height: 180px;
  }
}

@media (max-width: 480px) {
  .info-section {
    padding: 40px 4%;
  }
  .info-box {
    width: 100%;
    max-width: 100%;
  }
}

/* ===== FOOTER =====
   Column headings drop to the mono micro-label treatment so the footer reads as
   a quiet index rather than four competing headings. */
.footer {
  margin-top: auto;
  background: var(--ff-ink);
  color: var(--ff-surface);
  padding: 0;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 44px 6% 36px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-col h4 {
  font-family: var(--ff-font-mono);
  font-weight: 600;
  font-size: var(--ff-label-fs);
  color: var(--ff-brand);
  letter-spacing: var(--ff-label-ls);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-col ul li a {
  color: var(--ff-muted-4);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color var(--ff-t-fast);
}

.footer-col ul li a:hover { color: var(--ff-surface); }

.footer-col ul li a.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ff-brand);
  color: var(--ff-on-brand);
  padding: 9px 18px;
  border-radius: var(--ff-r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
  transition: background var(--ff-t-fast), box-shadow var(--ff-t-fast), transform var(--ff-t-fast);
}

.footer-col ul li a.btn-link:hover {
  background: var(--ff-brand-hover);
  color: var(--ff-on-brand);
  box-shadow: 0 4px 14px var(--ff-brand-a40);
  transform: translateY(-1px);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 6%;
  gap: 12px;
}

.footer-bottom .icons {
  display: flex;
  gap: 22px;
}

.footer-bottom .icons a {
  color: var(--ff-muted-4);
  font-size: 1.4rem;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-bottom .icons a:hover { color: var(--ff-brand); }

.footer-bottom .credit {
  font-size: 0.72rem;
  color: var(--ff-muted);
  letter-spacing: 0.03em;
}

.footer-bottom .credit a {
  color: var(--ff-brand);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s, text-shadow 0.2s;
}

.footer-bottom .credit a:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 194, 238, 0.5);
}

@media (max-width: 768px) {
  .footer-columns { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}

@media (max-width: 480px) {
  .footer-columns { grid-template-columns: 1fr; gap: 24px; padding: 24px 6%; }
}

/* -- BASKET HEADER BUTTON -- (tile chrome comes from .header-icon-btn above) */
.header-basket-btn {
  margin-left: 10px;
}
.basket-badge {
  position: absolute;
  top: -7px; right: -7px;
  background: var(--ff-brand);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-font-body);
  line-height: 1;
}

/* -- ABOUT / WHO WE ARE SECTION -- */
.about-section {
  padding: 80px 40px;
}
.about-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.about-eyebrow {
  display: inline-block;
  font-family: var(--ff-font-mono);
  font-size: var(--ff-label-fs);
  font-weight: 600;
  letter-spacing: var(--ff-label-ls);
  text-transform: uppercase;
  color: var(--ff-brand-deep);
  background: var(--ff-brand-tint);
  border: 1px solid var(--ff-brand-a18);
  padding: 6px 14px;
  border-radius: var(--ff-r-pill);
  margin-bottom: 18px;
}
.about-text {
  text-align: center;
  max-width: 680px;
}
.about-text h2 {
  font-family: var(--ff-font-display);
  font-weight: var(--ff-display-fw);
  text-transform: var(--ff-display-tt);
  letter-spacing: var(--ff-display-ls);
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  color: var(--ff-ink-deep);
  line-height: 1.06;
  margin-bottom: 20px;
}
.about-text p {
  font-size: 1rem;
  color: var(--ff-muted-2);
  line-height: 1.8;
  margin-bottom: 14px;
}
.about-text p:last-child { margin-bottom: 0; }
.about-video { width: 100%; }
.video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ff-ink);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  position: relative;
}
.video-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,194,238,0.08), transparent);
}
.video-placeholder-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}
.video-play-icon {
  width: 80px; height: 80px;
  background: rgba(0,194,238,0.15);
  border: 2px solid rgba(0,194,238,0.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; color: var(--ff-brand);
  margin-bottom: 20px;
}
.video-placeholder-label {
  font-family: var(--ff-font-display); font-weight: var(--ff-display-fw); text-transform: var(--ff-display-tt); letter-spacing: var(--ff-display-ls);
  font-size: 1rem;
  color: #fff;
  margin-bottom: 10px;
}
.video-placeholder-sub {
  font-size: 0.82rem;
  color: var(--ff-muted-3);
  line-height: 1.6;
  max-width: 340px;
}

/* ===== RESPONSIVE HEADER ===== */
@media (max-width: 768px) {
  header {
    height: 76px;
    padding: 0 16px 0 0;
    gap: 8px;
  }
  header::before {
    width: 58px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  }
  header > a:first-of-type {
    margin-left: 70px;
  }
  header img.logo {
    height: 58px;
  }
  header nav {
    gap: 6px;
  }
  .header-auth-btn {
    padding: 8px 14px;
    font-size: 0.8rem;
    gap: 5px;
  }
  .header-basket-btn,
  .header-account-btn,
  .header-account-icon {
    height: 38px;
    min-width: 38px;
    padding: 0 9px;
    border-radius: 10px;
  }
  .header-basket-btn { margin-left: 8px; }
  .header-account-btn,
  .header-account-icon { padding: 0 13px 0 10px; font-size: 0.8rem; }
  .header-basket-btn svg,
  .header-account-btn svg,
  .header-account-icon svg { width: 19px; height: 19px; }
  .about-section { padding: 52px 24px; }
  .about-text h2 { font-size: 1.4rem; }
}

@media (max-width: 480px) {
  header {
    height: 68px;
    padding: 0 12px 0 0;
  }
  header::before {
    width: 44px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  }
  header > a:first-of-type {
    margin-left: 52px;
  }
  header img.logo {
    height: 44px;
  }
  .header-auth-btn {
    padding: 7px 12px;
    font-size: 0.75rem;
  }
  .header-login-btn span.btn-text { display: none; }
  /* Tight on phones: drop the "Account" label, keep the icon tiles square. */
  .header-account-btn .account-label,
  .header-account-icon .account-label { display: none; }
  .header-basket-btn,
  .header-account-btn,
  .header-account-icon {
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 10px;
  }
  .header-basket-btn { margin-left: 6px; }
  .header-basket-btn svg,
  .header-account-btn svg,
  .header-account-icon svg { width: 18px; height: 18px; }
}

@media (max-width: 320px) {
  header::before { width: 36px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
  header > a:first-of-type { margin-left: 44px; }
  header img.logo { height: 34px; }
  .header-auth-btn { padding: 6px 10px; font-size: 0.72rem; }
}

/* =============================================================================
   HEADER CONTROLS
   Appended last so it supersedes the rules above without unpicking them.

   The icon rules above target `svg`, but every page builds these with Font
   Awesome `<i>` elements — so they had never applied, and the basket/account
   glyphs were rendering in the inherited ink rather than brand cyan.
   ========================================================================== */
.header-icon-btn i,
.header-basket-btn i,
.header-account-btn i,
.header-account-icon i,
.header-icon-btn svg,
.header-basket-btn svg,
.header-account-btn svg,
.header-account-icon svg {
  color: var(--ff-brand);
  font-size: 1.35rem;
  flex-shrink: 0;
  transition: color var(--ff-t-fast);
}

/* One height for everything in the header, so the pills and the icon tiles sit
   on a shared baseline instead of being a few pixels out. */
header nav { gap: 12px; }

.header-auth-btn {
  height: 52px;
  padding: 0 26px;
  gap: 9px;
}

.header-icon-btn,
.header-basket-btn,
.header-account-btn,
.header-account-icon {
  height: 52px;
  min-width: 52px;
  padding: 0 13px;
  border-radius: 15px;
  margin-left: 0;
}

/* These render icon-only, so the extra right padding meant for a text label
   pushed the glyph off-centre. */
.header-account-btn,
.header-account-icon { padding: 0 13px; }

.header-icon-btn:hover,
.header-basket-btn:hover,
.header-account-btn:hover,
.header-account-icon:hover {
  background: var(--ff-brand-tint);
  border-color: var(--ff-brand);
  box-shadow: 0 4px 14px var(--ff-brand-a18);
}

/* Leading icons on the auth pills. Done with ::before rather than markup so it
   reaches all 28 pages, each of which builds this nav in its own inline script. */
.header-login-btn::before,
.header-signup-btn::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.82rem;
  line-height: 1;
}
.header-login-btn::before  { content: '\f2f6'; }   /* right-to-bracket */
.header-signup-btn::before { content: '\f234'; }   /* user-plus */

.header-login-btn {
  border-color: var(--ff-line-strong);
  color: var(--ff-muted);
}
.header-login-btn:hover {
  border-color: var(--ff-brand);
  color: var(--ff-brand-deep);
  background: var(--ff-brand-tint);
}

.header-signup-btn:hover { box-shadow: 0 6px 20px var(--ff-brand-a40); }

/* Badge: a touch larger and nudged so it clears the new tile radius. */
.basket-badge {
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  font-size: 0.64rem;
  box-shadow: 0 2px 6px var(--ff-brand-a40);
}

@media (max-width: 768px) {
  header nav { gap: 8px; }
  .header-auth-btn { height: 46px; padding: 0 18px; }
  .header-icon-btn,
  .header-basket-btn,
  .header-account-btn,
  .header-account-icon { height: 46px; min-width: 46px; padding: 0 11px; margin-left: 0; border-radius: 13px; }
  .header-icon-btn i,
  .header-basket-btn i,
  .header-account-btn i,
  .header-account-icon i { font-size: 1.25rem; }
}

@media (max-width: 480px) {
  .header-auth-btn { height: 42px; padding: 0 14px; gap: 7px; }
  .header-icon-btn,
  .header-basket-btn,
  .header-account-btn,
  .header-account-icon { height: 42px; min-width: 42px; padding: 0 10px; margin-left: 0; }
  .header-icon-btn i,
  .header-basket-btn i,
  .header-account-btn i,
  .header-account-icon i { font-size: 1.15rem; }
}

/* The pre-existing 320px rule sits earlier in this file, so the blocks above
   would otherwise win and re-inflate these on the narrowest phones. */
@media (max-width: 320px) {
  .header-auth-btn { height: 34px; padding: 0 11px; font-size: 0.7rem; gap: 5px; }
  .header-icon-btn,
  .header-basket-btn,
  .header-account-btn,
  .header-account-icon { height: 34px; min-width: 34px; padding: 0 8px; margin-left: 0; }
  .header-icon-btn i,
  .header-basket-btn i,
  .header-account-btn i,
  .header-account-icon i { font-size: 1rem; }
  .header-login-btn::before, .header-signup-btn::before { font-size: 0.74rem; }
}

/* These render icon-only on every page (no .account-label is emitted anywhere),
   so fix the width rather than letting each glyph's own advance decide it —
   otherwise the basket tile comes out a few pixels wider than the account one
   and the pair looks misaligned. */
.header-basket-btn,
.header-account-btn,
.header-account-icon {
  width: 52px;
  padding: 0;
}
@media (max-width: 768px) {
  .header-basket-btn,
  .header-account-btn,
  .header-account-icon { width: 46px; padding: 0; }
}
@media (max-width: 480px) {
  .header-basket-btn,
  .header-account-btn,
  .header-account-icon { width: 42px; padding: 0; }
}
@media (max-width: 320px) {
  .header-basket-btn,
  .header-account-btn,
  .header-account-icon { width: 34px; padding: 0; }
}

/* Signed out, the bar carries two text pills plus the basket. Below ~420px that
   no longer fits and the basket was pushed off the right edge, so the leading
   icons come off first and the pills tighten. (The older rule that tried to
   solve this targeted `.header-login-btn span.btn-text`, a span no page emits.) */
@media (max-width: 420px) {
  .header-login-btn::before,
  .header-signup-btn::before { display: none; }
  .header-auth-btn { padding: 0 12px; font-size: 0.68rem; letter-spacing: 0.04em; gap: 0; }
}
@media (max-width: 340px) {
  .header-auth-btn { padding: 0 9px; font-size: 0.63rem; }
}