/* ============================================================
   Cookie consent banner — deliberately self-contained.

   The banner is rendered by assets/cookie-consent.js on every page, and the
   App Router pages (/help, /company/*, /how-it-works/*) do not load the
   marketing stylesheet. So this file repeats the handful of design tokens and
   button rules the banner needs, each as `var(--token, fallback)`: on the
   marketing pages the site's own tokens win, everywhere else the fallback
   keeps the banner looking identical. Loaded by <link> from both the static
   pages and src/app/layout.tsx — keep that link when merging a designer drop.
   ============================================================ */
/* ---------- cookie consent banner ---------- */
.cookie-banner{
  position:fixed;
  left:50%;
  bottom:24px;
  transform: translateX(-50%);
  z-index:90; /* below the sticky header and modals (100) */
  width: calc(100% - 48px);
  max-width: 820px;
  display:flex;
  align-items:center;
  gap:28px;
  padding: 24px 28px;
  background: var(--navy-card, #0F2E44);
  border:1px solid var(--border, #1C3A52);
  border-radius: var(--radius, 14px);
  box-shadow: 0 22px 56px rgba(4,20,31,.6), 0 0 0 1px rgba(0,200,255,.06);
  animation: cookie-banner-in .3s ease-out;
}
@keyframes cookie-banner-in{
  from{ opacity:0; transform: translate(-50%, 14px); }
  to{ opacity:1; transform: translate(-50%, 0); }
}
.cookie-banner-body{ flex:1 1 auto; display:flex; flex-direction:column; gap:6px; min-width:0; }
.cookie-banner-body .eyebrow{ margin-bottom: 2px; }
.cookie-banner h3{ font-size:1.02rem; }
.cookie-banner p{ font-size:.86rem; color: var(--text-secondary, #8FA3B8); }
.cookie-banner p a{ color: var(--cyan, #00C8FF); font-weight:600; }
.cookie-banner p a:hover{ color: var(--orange, #FF8C00); }
.cookie-banner-status{ color: var(--text-tertiary, #6E8299); font-size:.78rem !important; }
.cookie-banner-actions{ display:flex; gap:10px; flex:0 0 auto; }
.footer-legal .legal-links button{
  background:none;
  border:0;
  padding:0;
  font: inherit;
  color: inherit;
  cursor:pointer;
}
.footer-legal .legal-links button:hover{ color: var(--cyan, #00C8FF); }
@media (max-width: 760px){
  .cookie-banner{
    flex-direction:column;
    align-items:stretch;
    gap:18px;
    width: calc(100% - 24px);
    bottom:12px;
    padding: 20px;
  }
  .cookie-banner-actions .btn{ flex:1 1 0; }
}
@media (max-width: 420px){
  .cookie-banner-actions{ flex-direction:column; }
}
@media (prefers-reduced-motion: reduce){
  .cookie-banner{ animation:none; }
}

/* The banner's own typography and buttons, so it does not depend on the
   marketing stylesheet's .eyebrow / .btn rules. Two classes deep, so these win
   on the marketing pages too and both contexts render the same. */
.cookie-banner h3{ margin:0; font-weight:700; line-height:1.15; letter-spacing:-0.01em; color: var(--text-primary, #FFFFFF); }
.cookie-banner p{ margin:0; line-height:1.6; }
.cookie-banner .eyebrow{
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--cyan, #00C8FF);
}
.cookie-banner .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: all .18s ease;
  white-space: nowrap;
  cursor: pointer;
}
.cookie-banner .btn-primary{ background: var(--cyan, #00C8FF); color: #04141F; }
.cookie-banner .btn-primary:hover{ background: var(--orange, #FF8C00); color: #1a0f00; box-shadow: 0 0 24px rgba(255,140,0,.35); }
.cookie-banner .btn-ghost{ background: transparent; color: var(--text-primary, #FFFFFF); border-color: var(--border, #1C3A52); }
.cookie-banner .btn-ghost:hover{ border-color: var(--cyan, #00C8FF); color: var(--cyan, #00C8FF); }
.cookie-banner :focus-visible{ outline: 2px solid var(--cyan, #00C8FF); outline-offset: 3px; }