/* ===========================================================================
   COMMON — chrome shared by every page (src/layout.js).
   Loaded sitewide alongside style.css. Page-specific sections live elsewhere:
   the home page in home.css, sign-in/sign-up in login_signup.css.
   =========================================================================== */

/* ===========================================================================
   HEADER — src/components/navbar.js

   Self-contained by design: the header owns every token it uses, so it never
   depends on a utility class (.container, .btn) that the design system may or
   may not still define. One markup tree drives both layouts — the #primary-nav
   panel is a flex row on desktop and the drop-down sheet on mobile.
   =========================================================================== */

.site-header {
  --nav-h: 76px;
  --nav-pad: var(--content-pad);
  --nav-max: var(--content-max);

  /* Every colour below resolves to a design token in style.css. */
  --nav-fg: var(--text-on-dark-muted);
  --nav-fg-strong: var(--text-on-dark);
  --nav-accent: var(--accent);
  --nav-accent-2: var(--tertiary-300);

  position: sticky;
  top: 0;
  z-index: 60;
  color: var(--nav-fg-strong);

  /* Opaque, not glass. A translucent bar picked up whatever sat behind it and
     read as washed-out slate over the hero; the palette's darkest navy holds
     its own value on every page instead. */
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--primary-950) 100%);
  transition: box-shadow 0.3s ease;
}

/* Hairline that lights up towards the middle rather than a flat 1px border. */
.site-header::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--color-tertiary-rgb) / 0.32) 30%,
    rgb(var(--color-tertiary-rgb) / 0.22) 60%,
    transparent
  );
  pointer-events: none;
}

/* main.js sets .is-stuck past the first few pixels of scroll: the bar tightens
   up and casts a shadow, so it reads as a layer above the page. */
.site-header.is-stuck {
  box-shadow: 0 10px 30px rgb(var(--color-primary-rgb) / 0.55);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  width: 100%;
  max-width: var(--nav-max);
  min-height: var(--nav-h);
  margin: 0 auto;
  padding-inline: var(--nav-pad);
  transition: min-height 0.3s ease;
}

.site-header.is-stuck .header-inner {
  min-height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text-on-dark);
  font-weight: 700;
  line-height: 1;
}
.brand:hover {
  color: var(--text-on-dark);
}
.brand-mark {
  flex: none;
}
.brand-name {
  font-size: 1.24rem;
  letter-spacing: -0.02em;
}
.brand-accent {
  color: var(--tertiary-300);
}

/* --- Brand ---------------------------------------------------------------- */

.brand--header {
  gap: 0.7rem;
  flex: none;
}

/* The mark sits in a lit tile rather than floating on the bar — it gives the
   logo a defined edge against the translucent background. */
.brand-mark-wrap {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(
    145deg,
    rgb(var(--color-tertiary-rgb) / 0.22),
    rgb(var(--color-tertiary-rgb) / 0.06)
  );
  border: 1px solid var(--border-on-dark-strong);
  box-shadow:
    0 6px 18px rgb(var(--color-primary-rgb) / 0.6),
    inset 0 1px 0 rgb(var(--color-secondary-rgb) / 0.18);
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease;
}

.brand--header:hover .brand-mark-wrap,
.brand--header:focus-visible .brand-mark-wrap {
  transform: translateY(-2px) rotate(-4deg);
  box-shadow:
    0 10px 24px rgb(var(--color-tertiary-rgb) / 0.28),
    inset 0 1px 0 rgb(var(--color-secondary-rgb) / 0.28);
}

.brand-mark--header {
  width: 28px;
  height: 28px;
  filter: brightness(1.15);
}

.brand-name--header {
  font-family: var(--font-headline);
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-on-dark);
}

/* --- Panel: nav + actions -------------------------------------------------- */

.nav-panel {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: clamp(0.75rem, 2vw, 1.75rem);
}

/* auto margins centre the links between brand and actions, whatever their width. */
.site-nav {
  margin-inline: auto;
  min-width: 0;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.95rem;
  border-radius: 12px;
  color: var(--nav-fg);
  text-decoration: none;
  font-size: 0.97rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Hover pill as a pseudo-element so it can fade without animating a gradient. */
.nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgb(var(--color-secondary-rgb) / 0.1),
    rgb(var(--color-secondary-rgb) / 0.03)
  );
  border: 1px solid var(--border-on-dark);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current='page'] {
  color: var(--nav-fg-strong);
}

.nav-link:hover::before,
.nav-link:focus-visible::before {
  opacity: 1;
}

.nav-link-label {
  position: relative;
  z-index: 1;
}

/* Underline grows from the centre on hover and stays lit on the current page. */
.nav-link-label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.4em;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--nav-accent), var(--nav-accent-2));
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

.nav-link:hover .nav-link-label::after,
.nav-link:focus-visible .nav-link-label::after,
.nav-link[aria-current='page'] .nav-link-label::after {
  width: 100%;
}

.nav-link[aria-current='page'] .nav-link-label::after {
  box-shadow: 0 0 12px rgb(var(--color-tertiary-rgb) / 0.75);
}

/* --- Actions --------------------------------------------------------------- */

.nav-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1rem);
  flex: none;
}

.nav-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--nav-fg);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.nav-signin:hover,
.nav-signin:focus-visible {
  color: var(--nav-fg-strong);
  background: rgb(var(--color-secondary-rgb) / 0.07);
  border-color: var(--border-on-dark-strong);
}

.nav-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.3rem;
  border-radius: 14px;
  /* Tertiary is the loudest thing in the palette, so it carries the one CTA —
     on navy text, which clears AA comfortably where white would not. */
  background: linear-gradient(
    135deg,
    var(--tertiary-400) 0%,
    var(--accent) 45%,
    var(--accent-strong) 100%
  );
  color: var(--on-accent);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow:
    0 8px 22px rgb(var(--color-tertiary-rgb) / 0.28),
    inset 0 1px 0 rgb(var(--color-secondary-rgb) / 0.45);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Sheen wipe on hover. */
.nav-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 32%,
    rgb(var(--color-secondary-rgb) / 0.5) 50%,
    transparent 68%
  );
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgb(var(--color-tertiary-rgb) / 0.42),
    inset 0 1px 0 rgb(var(--color-secondary-rgb) / 0.55);
}

.nav-cta:hover::after,
.nav-cta:focus-visible::after {
  transform: translateX(120%);
}

.nav-cta-label,
.nav-cta-arrow {
  position: relative;
  z-index: 1;
}

.nav-cta-arrow {
  flex: none;
  transition: transform 0.25s ease;
}

.nav-cta:hover .nav-cta-arrow,
.nav-cta:focus-visible .nav-cta-arrow {
  transform: translateX(3px);
}

/* --- Keyboard focus -------------------------------------------------------- */

.site-header a:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--nav-accent);
  outline-offset: 3px;
}

/* --- Toggle ---------------------------------------------------------------- */

.nav-toggle {
  display: none;
  position: relative;
  flex: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgb(var(--color-secondary-rgb) / 0.06);
  border: 1px solid var(--border-on-dark-strong);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.nav-toggle:hover {
  background: rgb(var(--color-tertiary-rgb) / 0.12);
  border-color: rgb(var(--color-tertiary-rgb) / 0.35);
}

.nav-toggle-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  margin: -1px 0 0 -10px;
  background-color: var(--text-on-dark);
  border-radius: 2px;
  transition: background-color 0.2s ease 0.1s;
}

.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--text-on-dark);
  border-radius: inherit;
  transition: transform 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.nav-toggle-bar::before {
  top: -7px;
}
.nav-toggle-bar::after {
  top: 7px;
}

/* Bars fold into an X — the middle one drops out first. */
.nav-toggle[aria-expanded='true'] .nav-toggle-bar {
  background-color: transparent;
  transition-delay: 0s;
}
.nav-toggle[aria-expanded='true'] .nav-toggle-bar::before {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle-bar::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------------------------
   NARROW DESKTOP — 981px to 1180px.

   Five links, the brand, "Sign in" and the CTA all have to share one row, and
   the row is at its tightest just above the mobile breakpoint. Rather than let
   the links overflow or collide with the CTA, the pills give up horizontal
   padding first and a little type size second — the cheapest space to reclaim,
   since none of it is content.
   --------------------------------------------------------------------------- */

@media (min-width: 981px) and (max-width: 1180px) {
  .nav-panel {
    gap: 0.85rem;
  }
  .nav-link {
    padding: 0.55rem 0.6rem;
    font-size: 0.92rem;
  }
  .nav-signin {
    padding: 0.6rem 0.75rem;
    font-size: 0.92rem;
  }
  .nav-cta {
    padding: 0.7rem 1rem;
    font-size: 0.92rem;
  }
  /* The brand is the one thing that can lose a few pixels without being
     misread, so it takes the last of the squeeze. */
  .brand--header {
    gap: 0.55rem;
  }
  .brand-mark-wrap {
    width: 40px;
    height: 40px;
  }
}

/* ---------------------------------------------------------------------------
   MOBILE / TABLET — the panel becomes a drop-down sheet.
   --------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .site-header {
    --nav-h: 68px;
  }

  /* The bar keeps one height here. The desktop shrink-on-scroll would put the
     header at 66px while the panel is pinned at --nav-h, leaving a seam. */
  .site-header.is-stuck .header-inner {
    min-height: var(--nav-h);
  }

  .nav-toggle {
    display: block;
  }

  /* Anchored to the viewport rather than to the header.

     It was position: absolute with top: 100%, which is right up until the
     scroll lock lands: `overflow: hidden` on <body> makes body the nearest
     scrollport, so position: sticky stops resolving on the header and it
     falls back to its static position at the top of the *document* — taking
     an absolutely positioned panel with it. Scrolled down, the sheet opened
     somewhere above the viewport and looked like nothing had happened.
     Fixed removes the dependency on the header's position entirely. */
  .nav-panel {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1rem var(--nav-pad) calc(1.5rem + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - var(--nav-h));
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, var(--surface-dark) 0%, var(--surface-dark-overlay) 100%);
    border-top: 1px solid var(--border-on-dark);
    box-shadow: 0 26px 50px rgb(var(--color-primary-rgb) / 0.65);

    /* Hidden but animatable — visibility keeps it out of the tab order. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0s linear 0.25s;
  }

  .nav-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }

  /* Dims the page under the open sheet, so it reads as a layer you can tap
     out of rather than a panel stuck to the page.

     pointer-events stays none on purpose: main.js closes the sheet from a
     document click whose target is outside the panel, and a scrim that
     swallowed the click would report the panel itself as the target and stop
     it closing. Clicks pass through to whatever is underneath. */
  .nav-panel::before {
    content: '';
    position: fixed;
    inset: 0 0 -100vh 0;
    z-index: -1;
    background: rgb(var(--color-primary-rgb) / 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .nav-panel.is-open::before {
    opacity: 1;
  }

  .site-nav {
    margin-inline: 0;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
  }

  .nav-link {
    padding: 0.9rem 0.9rem;
    font-size: 1.05rem;
  }

  /* The centred underline does not belong on a full-width row; the current page
     is marked with a lit left edge instead. */
  .nav-link-label::after {
    display: none;
  }

  .nav-link[aria-current='page']::before {
    opacity: 1;
    background: linear-gradient(
      90deg,
      rgb(var(--color-tertiary-rgb) / 0.18),
      rgb(var(--color-tertiary-rgb) / 0.03)
    );
    border-color: rgb(var(--color-tertiary-rgb) / 0.28);
    box-shadow: inset 3px 0 0 var(--nav-accent);
  }

  .nav-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-on-dark);
  }

  .nav-signin {
    padding: 0.85rem 1rem;
    border-color: var(--border-on-dark-strong);
    color: var(--nav-fg-strong);
    font-size: 1rem;
  }

  .nav-cta {
    justify-content: center;
    padding: 0.9rem 1.3rem;
    font-size: 1rem;
  }

  /* Rows fly in one after another as the sheet opens. */
  .nav-panel.is-open .nav-item,
  .nav-panel.is-open .nav-actions {
    animation: nav-row-in 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .nav-panel.is-open .nav-item:nth-child(2) {
    animation-delay: 0.05s;
  }
  .nav-panel.is-open .nav-item:nth-child(3) {
    animation-delay: 0.1s;
  }
  .nav-panel.is-open .nav-item:nth-child(4) {
    animation-delay: 0.15s;
  }
  .nav-panel.is-open .nav-item:nth-child(5) {
    animation-delay: 0.2s;
  }
  .nav-panel.is-open .nav-actions {
    animation-delay: 0.22s;
  }
}

@keyframes nav-row-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Small phones — buy back horizontal room. */
@media (max-width: 400px) {
  .brand-mark-wrap {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .brand-mark--header {
    width: 24px;
    height: 24px;
  }
  .brand-name--header {
    font-size: 1.1rem;
  }
}

/* Short landscape viewports: the sheet scrolls rather than pinning the CTA off
   the bottom of the screen. */
@media (max-width: 980px) and (max-height: 480px) {
  .nav-panel {
    gap: 0.75rem;
    padding-bottom: 1rem;
  }
  .nav-link {
    padding: 0.62rem 0.9rem;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-panel.is-open .nav-item,
  .nav-panel.is-open .nav-actions {
    animation: none;
  }
}

/* Set on <html> while the sheet is open, so the page behind cannot scroll.

   The root element only. Adding <body> here as well makes body the nearest
   scrollport, which stops position: sticky resolving on the header above it —
   the header then jumps to the top of the document and the open menu goes
   out of view. */
.has-nav-open {
  overflow: hidden;
}

/* ===========================================================================
   FOOTER — src/layout.js
   Sits flush under the home page CTA, so the top edge carries a lit seam
   rather than a hard border.
   =========================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  padding: 10px 40px;
  font-size: 0.93rem;
  color: #93a3bf;
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(28, 107, 255, 0.16), transparent 55%),
    radial-gradient(60% 100% at 92% 10%, rgba(26, 224, 255, 0.08), transparent 60%),
    linear-gradient(180deg, #081231 0%, #050b1e 100%);
}

/* Lit seam along the top edge. */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(90, 160, 255, 0.55),
    rgba(26, 224, 255, 0.35),
    transparent
  );
}

/* Faint dot field, fading out before it reaches the text. */
.site-footer::after {
  content: '';
  position: absolute;
  inset: 0 0 40% 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 100% at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(80% 100% at 50% 0%, #000, transparent 70%);
  pointer-events: none;
}

.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding: 10px 40px;
}

/* --- Brand ---------------------------------------------------------------- */

.footer-brand .brand {
  margin-bottom: 1.1rem;
}
.footer-tagline {
  max-width: 22ch;
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
  color: #8494b2;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #aebdd8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    color 0.2s,
    border-color 0.2s,
    background-color 0.2s,
    transform 0.2s;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--text-on-dark);
  background: rgba(28, 107, 255, 0.22);
  border-color: rgba(90, 160, 255, 0.6);
  transform: translateY(-2px);
}
.footer-social svg {
  width: 18px;
  height: 18px;
}

/* --- Link columns ---------------------------------------------------------
   Zero column gap plus per-column padding, so the rules under the three
   headings meet and read as one continuous line. */

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Column spacing lives on the link list, not the column, so each heading rule
   spans its full column and the three meet as one unbroken line. */
.footer-col ul {
  padding-right: clamp(1rem, 2.5vw, 2rem);
}

.footer-col h2 {
  margin: 0 0 1.3rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-on-dark);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.footer-col li + li {
  margin-top: 0.7rem;
}
.footer-col a {
  color: #93a3bf;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--text-on-dark);
}

/* --- Stay updated ---------------------------------------------------------- */

.footer-subscribe h2 {
  margin: 0 0 0.7rem;
  color: var(--text-on-dark);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.footer-note {
  max-width: 26ch;
  margin: 0 0 1.15rem;
  font-size: 0.9rem;
  color: #8494b2;
}

.subscribe-form {
  display: flex;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-on-dark-strong);
  background: rgb(var(--color-secondary-rgb) / 0.05);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.subscribe-form:focus-within {
  border-color: rgb(var(--color-tertiary-rgb) / 0.7);
  box-shadow: 0 0 0 3px rgb(var(--color-tertiary-rgb) / 0.18);
}
.subscribe-form input {
  flex: 1 1 auto;
  min-width: 0;
  /* Matches the button's 46px so the two sides of the field are the same
     height whichever one sets it. */
  height: 46px;
  padding: 0 0.95rem;
  border: 0;
  background: transparent;
  color: var(--text-on-dark);
  font: inherit;
  font-size: 0.93rem;
  /* A long placeholder used to wrap and double the field's height rather than
     simply running out of room. */
  text-overflow: ellipsis;
}
.subscribe-form input:focus {
  outline: none;
}
.subscribe-form input::placeholder {
  color: var(--text-on-dark-subtle);
}

/* Chrome paints autofilled inputs a solid pale yellow, which on a dark field
   looks like a rendering fault. An inset shadow the size of the box is the
   only way to repaint it. */
.subscribe-form input:-webkit-autofill,
.subscribe-form input:-webkit-autofill:hover,
.subscribe-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-on-dark);
  -webkit-box-shadow: 0 0 0 40px var(--neutral-800) inset;
  caret-color: var(--text-on-dark);
}

.subscribe-form button {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  border: 0;
  cursor: pointer;
  color: var(--text-on-dark);
  background: var(--action-blue);
  transition: background-color 0.2s;
}
.subscribe-form button:hover {
  background: var(--action-blue-hover);
}
.subscribe-form button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.subscribe-form button svg {
  width: 20px;
  height: 12px;
}

.subscribe-status {
  position: relative;
  z-index: 1;
}

/* --- Bottom bar ------------------------------------------------------------ */

.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 1.35rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.86rem;
}
.footer-bottom p {
  margin: 0;
  color: #7a8aa8;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-legal-links li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-legal-links a {
  display: inline-block;
  padding: 0 1.25rem;
  color: #93a3bf;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal-links li:last-child a {
  padding-right: 0;
}
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: var(--text-on-dark);
}

/* Trademark disclaimer — required, but subordinate to everything else. */
.footer-legal {
  position: relative;
  z-index: 1;
  max-width: 86ch;
  margin: 0;
  padding-bottom: 1.75rem;
  color: #5a6a88;
  font-size: 0.78rem;
  line-height: 1.6;
}

@media (max-width: 1040px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .footer-nav {
    grid-column: 1 / -1;
    order: 3;
  }
  .footer-subscribe {
    order: 2;
  }
}

@media (max-width: 620px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-nav {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
  .footer-col {
    padding-right: 0;
  }
  .footer-tagline,
  .footer-note {
    max-width: none;
  }
  .footer-bottom {
    justify-content: flex-start;
  }
  .footer-legal-links a {
    padding: 0 0.9rem;
  }
  .footer-legal-links li:first-child a {
    padding-left: 0;
  }
}