/* [project]/app/(marketing)/concepts/frame-b/frame-b.module.css [app-client] (css) */
.frame-b-module__eyZB_a__page {
  --header-h: 64px;
  --disc: clamp(9rem, 13.6vw, 13.25rem);
  --gap: 8px;
  min-height: calc(100svh - var(--header-h));
  background: var(--p-bg);
  display: flex;
}

.frame-b-module__eyZB_a__page ~ footer {
  display: none;
}

.frame-b-module__eyZB_a__inner {
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding: clamp(2rem, 4.4vh, 3.25rem) 1.5rem clamp(1.75rem, 3.6vh, 2.75rem);
  display: flex;
}

.frame-b-module__eyZB_a__head {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
  display: grid;
}

.frame-b-module__eyZB_a__eyebrow {
  font-family: var(--font-geist-mono), monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: .85rem;
  font-size: .66rem;
}

.frame-b-module__eyZB_a__title {
  letter-spacing: -.036em;
  color: var(--t-superdark);
  text-wrap: balance;
  font-size: clamp(1.75rem, 3.35vw, 2.9rem);
  font-weight: 600;
  line-height: 1.06;
}

.frame-b-module__eyZB_a__turn {
  display: block;
}

.frame-b-module__eyZB_a__stand {
  max-width: 27rem;
  color: var(--t-normal);
  text-wrap: pretty;
  padding-bottom: .2rem;
  font-size: .875rem;
  line-height: 1.62;
}

.frame-b-module__eyZB_a__hr {
  background: var(--p-border);
  height: 1px;
  margin-block: clamp(1.1rem, 3vh, 2rem);
}

.frame-b-module__eyZB_a__figure {
  flex-direction: column;
  flex: none;
  display: flex;
}

.frame-b-module__eyZB_a__figure .frame-b-module__eyZB_a__hr {
  margin-block: clamp(.9rem, 2.4vh, 1.6rem) clamp(.75rem, 1.8vh, 1.15rem);
}

.frame-b-module__eyZB_a__band {
  height: clamp(14rem, 30vh, 18rem);
  position: relative;
}

.frame-b-module__eyZB_a__ruleLeft {
  top: 50%;
  left: 0;
  right: calc(48% + var(--disc) / 2 + var(--gap));
  background: repeating-linear-gradient(90deg, var(--p-stroke) 0 6px, transparent 6px 13px, var(--p-stroke) 13px 27px, transparent 27px 34px, var(--p-stroke) 34px 39px, transparent 39px 53px, var(--p-stroke) 53px 72px, transparent 72px 80px);
  height: 1px;
  position: absolute;
  -webkit-mask-image: linear-gradient(90deg, #0000 0, #000 26%);
  mask-image: linear-gradient(90deg, #0000 0, #000 26%);
}

.frame-b-module__eyZB_a__ruleRight {
  top: 50%;
  left: calc(52% + var(--disc) / 2 + var(--gap));
  background: var(--p-stroke);
  height: 1px;
  position: absolute;
  right: 0;
}

.frame-b-module__eyZB_a__ticks {
  top: calc(50% + 1px);
  left: calc(52% + var(--disc) / 2 + var(--gap));
  opacity: .6;
  background: repeating-linear-gradient(90deg, var(--p-stroke) 0 1px, transparent 1px 15px);
  height: 5px;
  position: absolute;
  right: 0;
}

.frame-b-module__eyZB_a__scatter {
  width: 43%;
  position: absolute;
  inset: 5% auto 5% 0;
}

.frame-b-module__eyZB_a__scrapDisc, .frame-b-module__eyZB_a__scrapMark {
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  opacity: var(--o);
  transform: translate(-50%, -50%) rotate(var(--r));
  position: absolute;
}

.frame-b-module__eyZB_a__scrapDisc {
  filter: grayscale() contrast(.9);
  border-radius: 50%;
}

.frame-b-module__eyZB_a__scrapMark {
  object-fit: contain;
  filter: grayscale() brightness(.5) contrast(1.15);
}

.frame-b-module__eyZB_a__graph {
  width: var(--disc);
  height: var(--disc);
  filter: brightness(1.25) contrast(1.06) saturate(1.15);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
}

.frame-b-module__eyZB_a__note {
  left: calc(52% + var(--disc) / 2 + var(--gap)  + 2px);
  font-family: var(--font-geist-mono), monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t-light);
  white-space: nowrap;
  font-size: .6rem;
  position: absolute;
  bottom: calc(50% + 2.1rem);
}

.frame-b-module__eyZB_a__note:after {
  content: "";
  background: var(--p-stroke);
  width: 1px;
  height: 1.75rem;
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
}

.frame-b-module__eyZB_a__agents {
  justify-content: space-between;
  align-items: center;
  width: 29%;
  min-width: 15rem;
  display: flex;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.frame-b-module__eyZB_a__agent {
  background: var(--p-bg);
  justify-content: center;
  align-items: center;
  width: 3.25rem;
  height: 2.5rem;
  display: flex;
  position: relative;
}

.frame-b-module__eyZB_a__agentMark {
  object-fit: contain;
  width: 1.55rem;
  height: 1.55rem;
}

.frame-b-module__eyZB_a__agentName {
  font-family: var(--font-geist-mono), monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-light);
  white-space: nowrap;
  margin-top: .4rem;
  font-size: .6rem;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.frame-b-module__eyZB_a__key {
  grid-template-columns: 43.7% 27.3% 29%;
  display: grid;
}

.frame-b-module__eyZB_a__keyItem {
  max-width: 22rem;
  padding-right: 2rem;
}

.frame-b-module__eyZB_a__keyHead {
  font-family: var(--font-geist-mono), monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t-superdark);
  margin-bottom: .4rem;
  font-size: .66rem;
}

.frame-b-module__eyZB_a__keyNum {
  color: var(--t-light);
  margin-right: .7em;
}

.frame-b-module__eyZB_a__keyBody {
  color: var(--t-normal);
  text-wrap: pretty;
  font-size: .8125rem;
  line-height: 1.55;
}

@media (max-width: 860px) {
  .frame-b-module__eyZB_a__page {
    --disc: 6.25rem;
  }

  .frame-b-module__eyZB_a__inner {
    padding-block: 1.6rem 1.4rem;
  }

  .frame-b-module__eyZB_a__head {
    grid-template-columns: 1fr;
    gap: .85rem;
  }

  .frame-b-module__eyZB_a__title {
    font-size: 1.55rem;
    line-height: 1.09;
  }

  .frame-b-module__eyZB_a__stand {
    max-width: none;
    font-size: .8125rem;
    line-height: 1.55;
  }

  .frame-b-module__eyZB_a__hr {
    margin-block: 1rem;
  }

  .frame-b-module__eyZB_a__figure .frame-b-module__eyZB_a__hr {
    margin-block: 1rem .85rem;
  }

  .frame-b-module__eyZB_a__band {
    height: 19rem;
  }

  .frame-b-module__eyZB_a__scatter {
    width: auto;
    height: 32%;
    inset: 4% 0 auto;
  }

  .frame-b-module__eyZB_a__scrapDisc, .frame-b-module__eyZB_a__scrapMark {
    left: var(--y);
    top: var(--x);
    width: calc(var(--s) * .62);
    height: calc(var(--s) * .62);
  }

  .frame-b-module__eyZB_a__graph {
    top: 55%;
    left: 50%;
  }

  .frame-b-module__eyZB_a__ruleLeft {
    top: 0;
    bottom: calc(45% + var(--disc) / 2 + var(--gap));
    background: repeating-linear-gradient(180deg, var(--p-stroke) 0 6px, transparent 6px 13px, var(--p-stroke) 13px 27px, transparent 27px 34px, var(--p-stroke) 34px 39px, transparent 39px 53px);
    width: 1px;
    height: auto;
    left: 50%;
    right: auto;
    -webkit-mask-image: linear-gradient(#0000 0, #000 30%);
    mask-image: linear-gradient(#0000 0, #000 30%);
  }

  .frame-b-module__eyZB_a__ruleRight {
    top: calc(55% + var(--disc) / 2 + var(--gap));
    width: 1px;
    height: auto;
    bottom: 3.5rem;
    left: 50%;
    right: auto;
  }

  .frame-b-module__eyZB_a__ticks, .frame-b-module__eyZB_a__note {
    display: none;
  }

  .frame-b-module__eyZB_a__agents {
    justify-content: center;
    gap: 1.75rem;
    width: auto;
    min-width: 0;
    inset: auto 0 0;
    transform: none;
  }

  .frame-b-module__eyZB_a__agent {
    flex-direction: column;
    gap: .4rem;
    width: auto;
    height: auto;
    padding-inline: .5rem;
  }

  .frame-b-module__eyZB_a__agentName {
    margin-top: 0;
    position: static;
    transform: none;
  }

  .frame-b-module__eyZB_a__key {
    grid-template-columns: 1fr;
    gap: .55rem;
  }

  .frame-b-module__eyZB_a__keyItem {
    gap: .7rem;
    max-width: none;
    padding-right: 0;
    display: flex;
  }

  .frame-b-module__eyZB_a__keyHead {
    white-space: nowrap;
    flex: none;
    width: 6.4rem;
    margin-bottom: 0;
    padding-top: .1rem;
  }

  .frame-b-module__eyZB_a__keyBody {
    font-size: .78rem;
    line-height: 1.45;
  }
}

/*# sourceMappingURL=app_%28marketing%29_concepts_frame-b_frame-b_module_73458321.css.map*/