/*
 * Fonts local to the AttentionHome component.
 * Family names are prefixed with "Attention" to avoid collisions with
 * styles in the consuming Webflow/DevLink project.
 *
 * @font-face src must be absolute hosted URLs — never relative files.
 * Webflow CLI packs SSR assets as UTF-8, so relative font urls become
 * corrupted data URIs and staging falls back to system sans.
 */

@property --nav-offset {
  syntax: "<length>";
  inherits: true;
  initial-value: 80px;
}

:host {
  --nav-h: 80px;
  --nav-offset: 80px;
}

html {
  overflow-x: clip;
}

@media (max-width: 1023px) {
  :host {
    --nav-h: 72px;
    --nav-offset: 72px;
  }
}

@font-face {
  font-family: "AttentionRoobert";
  src:
    url("https://attention-home-preview.vercel.app/fonts/Roobert-Medium.woff2")
      format("woff2"),
    url("https://attention-home-preview.vercel.app/fonts/Roobert-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AttentionOverusedGrotesk";
  src: url("https://attention-home-preview.vercel.app/fonts/OverusedGrotesk-Roman.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AttentionOverusedGrotesk";
  src: url("https://attention-home-preview.vercel.app/fonts/OverusedGrotesk-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AttentionDepartureMono";
  src: url("https://attention-home-preview.vercel.app/fonts/DepartureMono-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.ViLGPYor1UWnxXK0ECqH {
  background: #fafafa;
  margin-top: -1px;
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-fast: 160ms;
  --duration-hover: 220ms;
}

.cc3dwlAlMWjoo7ScykKw {
  background: transparent;
  margin-top: -1px;
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-fast: 160ms;
  --duration-hover: 220ms;
}

.ViLGPYor1UWnxXK0ECqH,
.cc3dwlAlMWjoo7ScykKw,
.ViLGPYor1UWnxXK0ECqH *,
.cc3dwlAlMWjoo7ScykKw * {
  box-sizing: border-box;
}

.mHzkmJrM7lWlmHhYNzlm {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (max-width: 1023px) {
  .mHzkmJrM7lWlmHhYNzlm {
    padding: 0;
  }
}

.fh_c6CQ40FeJKyjxasuB {
  background: #fafafa;
}

.ZivjZLXSPt2sgTK8x6f0 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 16px 24px;
  background: rgba(69, 69, 229, 0.04);
  border: 1px solid #ededed;
  border-radius: 8px;
}

.tcud5hWuSygc6BZWMghF {
  display: block;
  flex-shrink: 0;
  width: 8px;
  height: 12px;
}

.mZmY4AOk7SoaGJSJGGr2 {
  margin: 0;
  font-family: "AttentionOverusedGrotesk", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: #4545e5;
  text-align: center;
}

.sY7VtZo0JYDo4iJYhP77 {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-skip-ink: none;
}

.sY7VtZo0JYDo4iJYhP77:hover {
  text-decoration-thickness: 2px;
}

.sY7VtZo0JYDo4iJYhP77:focus-visible {
  outline: 2px solid #4545e5;
  outline-offset: 2px;
  border-radius: 2px;
}

.SNyUO3Pmsgqpqj3R0aoo {
  min-height: var(--announce-h, 54px);
}

.RlTkjKlzwC2P3_9W40rh {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 51;
  background: #fafafa;
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.MO2s81jkaRt6QZ0mAjE7 .RlTkjKlzwC2P3_9W40rh {
  transform: translateY(calc(-100% - var(--nav-h, 80px) - 2px));
  pointer-events: none;
}

.aon_RXaj8s2_eSRD4dtY .RlTkjKlzwC2P3_9W40rh {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .RlTkjKlzwC2P3_9W40rh {
    transition: none;
  }
}

@media (max-width: 1023px) {
  /* Figma 950:1502 is 54px with py 17 inside-stroke = 16px CSS padding + 1px border. */
  .ZivjZLXSPt2sgTK8x6f0 {
    min-height: 54px;
    padding: 16px 24px;
    flex-wrap: wrap;
  }

  .mZmY4AOk7SoaGJSJGGr2 {
    text-wrap: wrap;
  }
}