/* ============================================================================
   Cookie consent — banner + preferences modal. Site-wide.

   Bottom LEFT rather than a full-width bar, for one practical reason: the
   Intercom launcher owns the bottom-right corner on every page and a bar would
   sit on top of it. The back-to-pricing pill shares this corner, so it is
   lifted clear while the banner is up (see atlas-consent.js).

   The four categories are the ones /cookies already defines — strictly
   necessary, preferences, analytics, marketing and attribution. If the policy
   changes, change them here too or the banner starts lying.

   SCOPE, stated plainly so nobody later assumes otherwise: this records the
   visitor's choice and remembers it. It does NOT currently gate any tag —
   Intellimize, GTM, Meta, X, TikTok, Triple, LeadDyno and af_attr all still
   load on every page exactly as before. Lucas's call, 9 Aug 2026. The hook to
   change that is one function in atlas-consent.js.
   ========================================================================= */

.afxck { position: fixed; z-index: 9000; left: 24px; bottom: 24px; width: 420px; max-width: calc(100vw - 32px); }
.afxck[hidden] { display: none; }
/* stepped out of the way while the discount popup is open, then back.
   Not `hidden`, because that is reserved for "answered and done with". */
.afxck--muted { opacity: 0; pointer-events: none; transform: translateY(10px); }
.afxck { transition: opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out); }

.afxck__card {
  position: relative; box-sizing: border-box;
  padding: 22px 22px 18px; border-radius: 20px;
  background: rgba(14, 18, 18, .86);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
          backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35);
}
/* the lit hairline every glass surface on this site carries */
.afxck__card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.04) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

.afxck__title {
  margin: 0 0 6px; font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 22px; letter-spacing: -.32px; color: var(--af-white);
}
.afxck__copy {
  margin: 0 0 16px; font-family: var(--font-sans); font-weight: var(--w-regular);
  font-size: 13px; line-height: 19px; letter-spacing: -.13px; color: var(--w-60);
}
.afxck__copy a { color: var(--af-teal); text-decoration: none; border-bottom: 1px solid rgba(124,177,172,.35); }
.afxck__copy a:hover { border-bottom-color: var(--af-teal); }

.afxck__row { display: flex; align-items: center; gap: 8px; }
.afxck__spacer { flex: 1 1 auto; }

/* ---- buttons ------------------------------------------------------------ */
.afxck__btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 16px; border: 0; border-radius: 100px; cursor: pointer;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 13.5px; line-height: 1; letter-spacing: -.2px; white-space: nowrap;
  -webkit-appearance: none; appearance: none;
  transition: background-color var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out), color var(--t-fast) var(--e-out);
}
/* lime always takes ink #001D21, never a link colour */
.afxck__btn--primary { background: var(--af-lime); color: var(--af-ink-teal); }
.afxck__btn--ghost   { background: rgba(255,255,255,.08); color: var(--af-white); }
.afxck__btn--text    { background: transparent; color: var(--w-60); padding: 0 10px; }

@media (hover: hover) and (pointer: fine) {
  .afxck__btn--primary:hover { background: #EAFFB8; }
  .afxck__btn--ghost:hover   { background: rgba(255,255,255,.14); }
  .afxck__btn--text:hover    { color: var(--af-white); }
}
.afxck__btn:active { transform: scale(.97); }
.afxck__btn:focus-visible { outline: 2px solid var(--af-lime); outline-offset: 3px; }

/* ---- the preferences modal ---------------------------------------------- */
.afxck-modal { position: fixed; inset: 0; z-index: 9100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.afxck-modal[hidden] { display: none; }
.afxck-modal__scrim {
  position: absolute; inset: 0; background: rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.afxck-modal__card {
  position: relative; box-sizing: border-box;
  width: 560px; max-width: 100%; max-height: min(86vh, 720px); overflow: auto;
  padding: 26px; border-radius: 24px; background: #0E1212;
  box-shadow: 0 40px 90px rgba(0,0,0,.6);
}
.afxck-modal__card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.03) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.afxck-modal__h {
  margin: 0 0 6px; font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 20px; line-height: 26px; letter-spacing: -.6px; color: var(--af-white);
}
.afxck-modal__sub {
  margin: 0 0 18px; font-family: var(--font-sans); font-size: 13px; line-height: 19px;
  letter-spacing: -.13px; color: var(--w-56);
}
.afxck-modal__list { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }

/* one category */
.afxck-cat { display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.07); }
.afxck-cat:first-child { border-top: 0; }
.afxck-cat__body { flex: 1 1 auto; min-width: 0; }
.afxck-cat__name {
  margin: 0 0 3px; font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 14px; line-height: 20px; letter-spacing: -.28px; color: var(--af-white);
}
.afxck-cat__desc {
  margin: 0; font-family: var(--font-sans); font-size: 12.5px; line-height: 18px;
  letter-spacing: -.12px; color: var(--w-56);
}
.afxck-cat__locked {
  flex: none; align-self: center;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 11px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--af-teal);
}

/* the switch. The knob is the only thing in the band allowed an overshoot. */
.afxck-sw { flex: none; align-self: center; position: relative; width: 44px; height: 26px; }
.afxck-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.afxck-sw__track {
  display: block; width: 44px; height: 26px; border-radius: 100px;
  background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: background-color var(--t-base) var(--e-out);
  pointer-events: none;
}
.afxck-sw__knob {
  position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--af-white); pointer-events: none;
  transition: transform var(--t-base) var(--e-spring);
}
.afxck-sw input:checked ~ .afxck-sw__track { background: var(--af-lime); }
.afxck-sw input:checked ~ .afxck-sw__knob { transform: translateX(18px); background: var(--af-ink-teal); }
.afxck-sw input:focus-visible ~ .afxck-sw__track { outline: 2px solid var(--af-lime); outline-offset: 3px; }

.afxck-modal__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- entrance ----------------------------------------------------------- */
/* Set by JS after the markup is in the DOM, so nothing is ever stuck at
   opacity 0 if scripting fails — with JS off the banner simply never appears,
   which is better than an un-dismissable one. */
.afxck--in .afxck__card { animation: afxck-rise var(--t-slow) var(--e-out) both; }
@keyframes afxck-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.afxck-modal--in .afxck-modal__card { animation: afxck-pop var(--t-base) var(--e-out) both; }
.afxck-modal--in .afxck-modal__scrim { animation: afxck-fade var(--t-fast) var(--e-out) both; }
@keyframes afxck-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes afxck-fade { from { opacity: 0; } to { opacity: 1; } }

/* while the banner is up, lift our own bottom-left pill clear of it */
html.afxck-open .afxbtp { transform: translateY(-176px); }
html.afxck-open .afxbtp.is-on { transform: translateY(-176px); }

@media (max-width: 560px) {
  .afxck { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .afxck__card { padding: 18px 18px 16px; border-radius: 18px; }
  .afxck__row { flex-wrap: wrap; }
  .afxck__btn { flex: 1 1 auto; }
  .afxck__btn--text { flex-basis: 100%; order: 3; height: 34px; }
  .afxck__spacer { display: none; }
  html.afxck-open .afxbtp, html.afxck-open .afxbtp.is-on { transform: translateY(-210px); }
}

@media (prefers-reduced-motion: reduce) {
  .afxck--in .afxck__card, .afxck-modal--in .afxck-modal__card,
  .afxck-modal--in .afxck-modal__scrim { animation: none; }
  .afxck-sw__knob, .afxck-sw__track { transition: none; }
}