/* Site canvas 8776:5649, desktop 8966:12229. Keep these rules landing-only. */
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/site/source-serif-4-variable.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/site/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/site/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Grandiflora One';
  src: url('/assets/site/grandiflora-one-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
body.site-figma {
  --sans: 'Instrument Sans', sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  margin: 0;
  background: #f6f6f6;
  color: #201e1b;
  font-family: var(--sans);
  overflow-x: clip;
}
.site-figma main {
  padding: 0;
  margin: 0;
}
.site-figma p,
.site-figma figure {
  margin: 0;
}
.site-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.site-hero {
  height: 816px;
  position: relative;
  background: #f6f6f6 url('/assets/site/paper-light.webp') left top/3276.8px 1843.2px;
}
.site-hero__image {
  display: block;
  width: 100%;
  height: 810px;
  object-fit: cover;
  object-position: center top;
}
.site-about {
  height: 772px;
  padding: 120px 0;
  background: #f6f6f6 url('/assets/site/paper-light.webp') left top/3276.8px 1843.2px;
}
.site-about__inner,
.site-app__inner {
  width: 1080px;
  max-width: calc(100% - 80px);
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-about__copy {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.site-eyebrow {
  font-family: 'TAY Makawao', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}
.site-about h2,
.site-app h2 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  margin: 0;
  letter-spacing: 0;
}
.site-about__body {
  font-size: 16px;
  line-height: 24px;
}
.site-about__body p + p {
  margin-top: 16px;
}
.site-chart {
  position: relative;
  width: 446.761px;
  height: 532.5px;
  flex-shrink: 0;
}
.site-chart__paper {
  position: absolute;
  inset: 0;
  width: 446.761px;
  height: 532.5px;
  pointer-events: none;
}
.site-chart__content {
  position: absolute;
  left: 22.38px;
  top: 27.25px;
  width: 402px;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 42px;
}
.site-chart__date {
  font:
    500 16px/1.3 'IBM Plex Mono',
    monospace;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-chart__pillars {
  width: 360px;
  display: flex;
}
.site-chart__pillar {
  width: 90px;
  padding: 4px 0;
  border-right: 1px solid #d4d4d4;
  text-align: center;
}
.site-chart__pillar:last-child {
  border: 0;
}
.site-chart__label {
  height: 40px;
  display: grid;
  place-items: center;
  font:
    500 12px/1.3 'IBM Plex Mono',
    monospace;
  text-transform: uppercase;
}
.site-chart__cell {
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.site-chart__cell > span {
  font:
    20px/1.2 'Grandiflora One',
    serif;
  -webkit-text-stroke: 1px currentColor;
}
.site-chart__cell small {
  font: 12px/1.2 var(--sans);
}
.site-chart__elements {
  width: 360px;
  height: 57px;
}
.site-chart__bar {
  position: relative;
  height: 10px;
  display: flex;
}
.site-chart__bar img {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 366px;
  height: 16px;
  max-width: none;
}
.site-chart__bar i:nth-child(1) {
  width: 118.5px;
  background: #636d82;
}
.site-chart__bar i:nth-child(2) {
  width: 88px;
  background: #c16155;
}
.site-chart__bar i:nth-child(3) {
  width: 63px;
  background: #1a54ac;
}
.site-chart__bar i:nth-child(4) {
  width: 57px;
  background: #7e6913;
}
.site-chart__bar i:nth-child(5) {
  width: 33.5px;
  background: #187627;
}
.site-chart__metrics {
  display: flex;
  margin-top: 9px;
}
.site-chart__metrics > div {
  width: calc(var(--share) * 1px);
  display: flex;
  flex-direction: column;
}
.site-chart__metrics strong {
  font:
    400 20px/24px 'Instrument Serif',
    serif;
}
.site-chart__metrics small {
  font: 12px/14px var(--sans);
}
.site-chart figcaption {
  font:
    20px/26px 'Instrument Serif',
    serif;
}
.site-app {
  height: 799px;
  background: #f6f6f6 url('/assets/site/paper-app.webp') left top/1440px 800px;
  overflow: hidden;
}
.site-app__inner {
  position: relative;
  align-items: center;
}
.site-app__copy {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.site-app h2 {
  margin-top: 8px;
}
.site-app__tabs {
  display: flex;
  width: 320px;
  height: 56px;
}
.site-app__tabs button {
  position: relative;
  flex: 1;
  border: 0;
  border-radius: 0;
  background: none;
  color: #201e1b;
  padding: 16px 0;
  font: 500 20px/24px var(--serif);
  cursor: pointer;
}
.site-app__tabs button[aria-selected='true']::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 3px;
  background: #201e1b;
  left: 8px;
  right: 8px;
}
.site-app__tabs button:focus-visible {
  outline: 2px solid #201e1b;
  outline-offset: 3px;
}
.site-app__descriptions {
  margin-top: 0;
  width: 400px;
}
.site-app__descriptions h3 {
  font: 400 28px/1.2 var(--serif);
  margin: 0 0 16px;
  width: 400px;
}
.site-app__descriptions p {
  font: 20px/1.2 var(--sans);
  margin-top: 0;
  width: 400px;
}
.site-app__previews {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 402px;
  height: 720px;
  border-radius: 44px 44px 0 0;
  overflow: hidden;
}
.site-app__previews > [role='tabpanel'] > img {
  display: block;
  width: 402px;
  height: 720px;
  max-width: none;
}
.site-figma [hidden] {
  display: none !important;
}
.site-figma .sec-gift,
.site-figma .sec-faq,
.site-figma .sec-foot {
  --reveal: 1;
  --type-progress: 1;
  opacity: 1;
  transform: none;
}
.site-figma .sec-find *,
.site-figma .sec-gift *,
.site-figma .sec-faq *,
.site-figma .sec-foot * {
  --reveal: 1;
  --type-progress: 1;
}
@media (min-width: 1441px) {
  .site-hero {
    height: 56.6667vw;
  }
  .site-hero__image {
    height: 56.25vw;
  }
}
@media (max-width: 1000px) {
  .site-about__inner,
  .site-app__inner {
    max-width: calc(100% - 48px);
  }
  .site-chart {
    transform: scale(0.8);
    transform-origin: left center;
    width: 360px;
  }
  .site-about__copy,
  .site-app__copy {
    width: 42%;
  }
  .site-app__descriptions,
  .site-app__descriptions p {
    width: 100%;
  }
  .site-app__previews {
    right: 0;
  }
}
@media (max-width: 720px) {
  .site-figma .nav {
    top: 24px;
    left: 24px;
  }
  .site-hero {
    height: auto;
    min-height: 252px;
  }
  .site-hero__image {
    height: auto;
    width: 100%;
    aspect-ratio: 1440/810;
    object-fit: contain;
  }
  .site-about {
    height: auto;
    padding: 64px 0;
  }
  .site-about__inner {
    flex-direction: column;
    gap: 48px;
    max-width: calc(100% - 40px);
  }
  .site-figma .site-chart {
    transform: scale(0.76);
    transform-origin: top center;
    width: 446.761px;
    margin-bottom: -128px;
  }
  .site-about__copy {
    width: 100%;
    gap: 20px;
  }
  .site-about__body {
    line-height: 24px;
  }
  .site-about h2,
  .site-app h2 {
    font-size: 36px;
  }
  .site-app {
    height: auto;
    padding-top: 64px;
  }
  .site-app__inner {
    flex-direction: column;
    max-width: calc(100% - 40px);
    gap: 48px;
  }
  .site-app__copy {
    width: 100%;
    gap: 28px;
  }
  .site-app__descriptions {
    min-height: 120px;
  }
  .site-app__descriptions p {
    line-height: 24px;
    margin-top: 12px;
  }
  .site-app__previews {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(402px, 100%);
    height: auto;
    aspect-ratio: 402/720;
  }
  .site-app__previews > [role='tabpanel'] > img {
    width: 100%;
    height: auto;
    aspect-ratio: 402/720;
  }
  .site-app__tabs {
    max-width: 100%;
  }
}

.site-app__tabs button[aria-selected='false'] {
  opacity: 0.5;
}
@media (max-width: 1000px) {
  .site-app__descriptions h3 {
    width: 100%;
  }
}
@media (max-width: 360px) {
  .site-figma .site-chart {
    transform: scale(0.62);
    margin-bottom: -202px;
  }
}
.site-preview {
  transform-origin: top left;
}
/* Original Grandiflora One, subset to the 22 heavenly-stem/earthly-branch glyphs. */
@font-face {
  font-family: 'Grandiflora One';
  src: url('/assets/site/grandiflora-one-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.site-chart__metrics strong {
  font:
    400 16px/24px 'Instrument Sans',
    sans-serif;
  color: #656565;
}
.site-chart__metrics small {
  font:
    400 11px/1.3 'IBM Plex Mono',
    monospace;
  text-transform: uppercase;
}
.site-chart__metrics > div:last-child {
  flex: 1;
  align-items: flex-end;
  text-align: right;
}
.site-chart__pillar {
  border-color: #656565;
}

/* Desktop variants retain their individual positions from the Site frames. */
@media (min-width: 1200px) {
  .site-app[data-preview='today'] .site-app__previews {
    right: -38px;
  }
  .site-app[data-preview='us'] .site-app__previews,
  .site-app[data-preview='ask'] .site-app__previews {
    right: 48px;
  }
  .site-app[data-preview='today'] .site-app__copy,
  .site-app[data-preview='us'] .site-app__copy,
  .site-app[data-preview='ask'] .site-app__copy {
    position: absolute;
    top: 260.5px;
    width: 360px;
    margin-left: 12px;
  }
  .site-app[data-preview='today'] .site-app__descriptions,
  .site-app[data-preview='us'] .site-app__descriptions,
  .site-app[data-preview='ask'] .site-app__descriptions,
  .site-app[data-preview='today'] .site-app__descriptions h3,
  .site-app[data-preview='us'] .site-app__descriptions h3,
  .site-app[data-preview='ask'] .site-app__descriptions h3,
  .site-app[data-preview='today'] .site-app__descriptions p,
  .site-app[data-preview='us'] .site-app__descriptions p,
  .site-app[data-preview='ask'] .site-app__descriptions p {
    width: 360px;
  }
}

/* Figma's grain-textured separators extend two pixels beyond the columns. */
.site-chart__pillar {
  position: relative;
  border-right-color: transparent;
}
.site-chart__pillar:not(:last-child)::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 87.5px;
  width: 5px;
  height: 172px;
  background: url('/assets/site/chart-divider-1.webp') center / 5px 172px no-repeat;
  pointer-events: none;
}

.site-app[data-preview='us'] [data-site-tab='me'],
.site-app[data-preview='us'] [data-site-tab='us'],
.site-app[data-preview='ask'] [data-site-tab='me'] {
  text-transform: uppercase;
}