/* Palette sampled from the Fetchly-Website Figma frame 13174-5240 */
.Pod6PB7YL9PwPWjSMTVn {
  --dsh-accent: #3565fc;
  --dsh-accent-soft: #dae5ff;
  --dsh-ink: #334155;
  --dsh-muted: #656e7c;
  --dsh-faint: #969ca5;
  --dsh-chrome: #f7f6f1;
  --dsh-panel: #f9f8f6;
  --dsh-white: #ffffff;
  --dsh-line: #eceae3;
  --dsh-green-bg: #d9f99d;
  --dsh-green-ink: #4d7c0f;
  --dsh-red-bg: #fce3e3;
  --dsh-red-ink: #9a2929;
  --dsh-dark: #242d3c;

  display: flex;
  justify-content: center;
}

/* The scaler IS the layout box: aspect-ratio keeps the height hugging the
   scaled stage at every width with zero JS and zero layout shift. It is also
   the size container the stage measures against (100cqw). */
.omrHJ6cVquqr3472fJ6f {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 964;
  container-type: inline-size;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--dsh-line);
  background: var(--dsh-white);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.Gu98zUeu92rh7b1U1nNw .omrHJ6cVquqr3472fJ6f {
  box-shadow: 0 24px 60px rgba(5, 11, 13, 0.14), 0 4px 16px rgba(5, 11, 13, 0.06);
}

/* Fixed 1280x964 design canvas scaled to the container width purely in CSS:
   tan(atan2(y, x)) divides two lengths into a unitless ratio. */
.PwojB1BgG7QlJTUcCGKU {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 964px;
  transform-origin: top left;
  transform: scale(min(1, tan(atan2(100cqw, 1280px))));
  background: var(--dsh-white);
  font-family: var(--fts-font-body);
  color: var(--dsh-ink);
  font-size: 13px;
  line-height: 1.4;
  user-select: none;
}

/* ----- reveal choreography (pure CSS, runs at first paint) ----------- */
.aiHPLpwBU32W9eqQd7sz,
.We_gETDE77CqJbRA313T,
._CcnXLvGLn3V6XQCdeem,
.oF9dCiHaBjOT6lIni8gR {
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.oF9dCiHaBjOT6lIni8gR {
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@starting-style {
  .aiHPLpwBU32W9eqQd7sz,
  .We_gETDE77CqJbRA313T,
  ._CcnXLvGLn3V6XQCdeem,
  .oF9dCiHaBjOT6lIni8gR {
    opacity: 0;
  }

  .We_gETDE77CqJbRA313T {
    transform: translateY(14px);
  }

  ._CcnXLvGLn3V6XQCdeem {
    transform: translateX(-16px);
  }

  .oF9dCiHaBjOT6lIni8gR {
    transform: scale(0.5);
  }

  .omrHJ6cVquqr3472fJ6f {
    transform: translateY(30px);
  }
}

.rSz9iQUWJlL3K3F_jiqC {
  color: var(--dsh-red-ink);
  font-weight: 600;
  border-radius: 4px;
  animation: igB0oFUPel5lsE40BOsW 1.4s ease-in-out 2.2s 2;
}

@keyframes igB0oFUPel5lsE40BOsW {
  0%, 100% { background: transparent; }
  50% { background: var(--dsh-red-bg); }
}

/* ----- browser chrome -------------------------------------------- */
.W6uCKD1YbJdIZGTosjIh {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 28px;
  background: var(--dsh-chrome);
  border-bottom: 1px solid var(--dsh-line);
}

.tAsmMmjcSCXgw7EutrzH {
  display: inline-flex;
  gap: 8px;
}

.tAsmMmjcSCXgw7EutrzH i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.tAsmMmjcSCXgw7EutrzH i[data-c="r"] { background: #f4644d; }
.tAsmMmjcSCXgw7EutrzH i[data-c="y"] { background: #f5a623; }
.tAsmMmjcSCXgw7EutrzH i[data-c="g"] { background: #51c244; }

.D2ifCPGvhwgJZqWi_XMU {
  display: inline-flex;
  gap: 8px;
  color: var(--dsh-faint);
}

.Nc3rIVm5Q5bvj2cetq3R {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

.Nc3rIVm5Q5bvj2cetq3R svg { width: 100%; height: 100%; }

.RnzF8y3WgRBInE33gHoo {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex: none;
}

.RnzF8y3WgRBInE33gHoo svg { width: 100%; height: 100%; }

.WIf29vsPCE7eflxNG7uT {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 36px;
  background: var(--dsh-white);
  border-radius: 999px;
  font-size: 13px;
  color: var(--dsh-ink);
  position: relative;
}

.WIf29vsPCE7eflxNG7uT .RnzF8y3WgRBInE33gHoo {
  position: absolute;
  right: 14px;
  color: var(--dsh-muted);
}

.CS89dWhsv3nEwuWBCrxv {
  display: inline-flex;
  gap: 14px;
  color: var(--dsh-muted);
}

/* ----- layout ----------------------------------------------------- */
.WK9Z1vTVOa2D3QrrY4V4 {
  display: flex;
  height: calc(100% - 64px);
}

/* ----- sidebar ----------------------------------------------------- */
.VmV49G9bManPbRnvmuut {
  width: 263px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--dsh-panel);
  border-right: 1px solid var(--dsh-line);
  padding: 18px 16px 14px;
  gap: 14px;
}

.KmQPgetAfrR9vIL_GC85 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 8px;
}

.pXABg9dgpQ_zpzHMmiEb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--dsh-dark);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

.mq9B2axmhK3qcT9TfzZy {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  color: var(--dsh-ink);
}

.PaUM0zeCu88rOC8zV78S {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--dsh-line);
  border-radius: 10px;
  background: var(--dsh-white);
  color: var(--dsh-muted);
  font-size: 13px;
}

.XqH7d_mUGDiYnzj3RZlJ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dsh-muted);
  padding: 4px 4px 0;
}

.BRg5rudFIol2Pf6njYJA {
  display: inline-flex;
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 6px;
  background: var(--dsh-accent-soft);
  color: var(--dsh-accent);
}

.BRg5rudFIol2Pf6njYJA svg { width: 100%; height: 100%; }

.VAEMVbPVYKJyPhMtM_tg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
}

.VLjrQHPXJI_LhgUJfdEI {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--dsh-ink);
  font-size: 13.5px;
}

.VLjrQHPXJI_LhgUJfdEI[data-active="true"] {
  background: var(--dsh-white);
  color: var(--dsh-accent);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(5, 11, 13, 0.06);
}

.X1pxBSBGXlfYI0czpjVi {
  display: inline-flex;
  width: 17px;
  height: 17px;
  flex: none;
}

.X1pxBSBGXlfYI0czpjVi svg { width: 100%; height: 100%; }

.ap4nTRfAi_bIRA4E9zwP { flex: 1; }

.nBOCBnwYUGrp4RFoi6Cm {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--dsh-faint);
}

.nBOCBnwYUGrp4RFoi6Cm svg { width: 100%; height: 100%; }

.xhNKiCZW_R3jwhnkZ_v9 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--dsh-line);
  color: var(--dsh-muted);
}

.puVBYZtqyjOyYFwkIhVA {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--dsh-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.MKmNxNlKM7tBe95yGvCn {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dsh-ink);
}

/* ----- main -------------------------------------------------------- */
.NlxKDC_CbVIhYnXsYmWY {
  flex: 1;
  min-width: 0;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--dsh-white);
  overflow: hidden;
}

.rXW9J0AbH2FHDJfQZtwL {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.xFVWH2YrrKBCTnk7rV_r {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dsh-ink);
}

.kTjD0LtCo7VgGg09Ml_3 {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.fiwiZ82LCqkGK9H2Tyz7 {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dsh-ink);
}

.fiwiZ82LCqkGK9H2Tyz7[data-active="true"] {
  background: var(--dsh-accent-soft);
  color: var(--dsh-accent);
}

.KkBMUc5HWq25pNIViWCZ {
  display: flex;
  justify-content: flex-end;
}

.HTyGfYbh427zO7gdqOoC {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--dsh-line);
  border-radius: 999px;
  background: var(--dsh-white);
  font-size: 13px;
  font-weight: 500;
  color: var(--dsh-ink);
  white-space: nowrap;
}

.afcTKWspCbGoiZjoc7DY {
  display: inline-flex;
  width: 13px;
  height: 13px;
  color: var(--dsh-faint);
}

.afcTKWspCbGoiZjoc7DY svg { width: 100%; height: 100%; }

/* ----- KPI cards ---------------------------------------------------- */
.JAu_KR18tTkB1dEtGU4X {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.fn7saUSiwBNm4vWGZ0KE {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 12px;
  background: var(--dsh-panel);
  border: 1px solid var(--dsh-line);
}

.AMWNzeeoln7WNr3q8w_p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--dsh-ink);
}

.D7XMDSQYPRusfEXmjChA {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--dsh-muted);
}

.D7XMDSQYPRusfEXmjChA svg { width: 100%; height: 100%; }

.RQLVpHh8MCbnDj2kh5fC {
  display: flex;
  align-items: center;
  gap: 12px;
}

.v5wA5VEwN7xzYli1aXgf {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: var(--dsh-accent);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
}

.Ol69ZMKDoj2JBPds61wH {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}

.Ol69ZMKDoj2JBPds61wH[data-trend="up"] {
  background: var(--dsh-green-bg);
  color: var(--dsh-green-ink);
}

.Ol69ZMKDoj2JBPds61wH[data-trend="down"] {
  background: var(--dsh-red-bg);
  color: var(--dsh-red-ink);
}

.U7C8jUB3zUBjk0kXpHhW {
  display: inline-flex;
  width: 11px;
  height: 11px;
}

.U7C8jUB3zUBjk0kXpHhW svg { width: 100%; height: 100%; }

.omwBVofsw96K2veku7fl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--dsh-white);
  border: 1px solid var(--dsh-line);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--dsh-ink);
  white-space: nowrap;
  overflow: hidden;
}

/* ----- tasks ---------------------------------------------------------- */
.PhO1ryfDuV2X7MRb1pzd {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
}

.gHZIZJaxsXDfbH5ZSdAo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dsh-ink);
  white-space: nowrap;
}

.tGOyB5Qazchp868a03Re {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--dsh-line);
  border-radius: 999px;
  color: var(--dsh-faint);
  font-size: 13px;
}

.t49aBs0K7f8oHnrIEqCw {
  border: 1px solid var(--dsh-line);
  border-radius: 12px;
  overflow: hidden;
}

.TwjIbxFjguJqxnjsQqjH {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1.3fr 1fr 1.5fr 1.1fr 0.7fr;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  height: 38px;
  font-size: 12.5px;
  color: var(--dsh-ink);
}

.TwjIbxFjguJqxnjsQqjH:nth-child(even) {
  background: var(--dsh-panel);
}

.uR2eUPPVUnCkqjyI4P9w {
  font-weight: 600;
  background: var(--dsh-white) !important;
  border-bottom: 1px solid var(--dsh-line);
}

.uR2eUPPVUnCkqjyI4P9w span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ebo5VCLPcVO5Fg2tbkl8 {
  display: inline-flex;
  width: 11px;
  height: 11px;
  color: var(--dsh-faint);
}

.ebo5VCLPcVO5Fg2tbkl8 svg { width: 100%; height: 100%; }

.Cti6ByK6p7nxBJsXPeEN {
  justify-self: end;
}

.oGGsBtYi1vqaJoThCIwh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 18px;
  border-radius: 7px;
  background: var(--dsh-dark);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}

/* ----- reduced motion -------------------------------------------------- */
/* Kill transitions/animations only; the stage transform stays (it is the
   responsive scale, not motion). */
@media (prefers-reduced-motion: reduce) {
  .omrHJ6cVquqr3472fJ6f,
  .aiHPLpwBU32W9eqQd7sz,
  .We_gETDE77CqJbRA313T,
  ._CcnXLvGLn3V6XQCdeem,
  .oF9dCiHaBjOT6lIni8gR {
    transition: none !important;
  }

  .rSz9iQUWJlL3K3F_jiqC {
    animation: none !important;
  }
}

/*
 * Fetchly brand tokens for the Tech Stack library.
 * Each token first reads the real Webflow site variable (verified against
 * the Fetchly site's Primitives / Color Schemes / Typography collections on
 * 2026-06-10; site variables resolve inside the component Shadow DOM) and
 * falls back to the canonical value from the Fetchly-GUIDES brand book.
 * Component props can override any of these via inline custom properties.
 */
.fts-root {
  --fts-bg: transparent;
  --fts-ink: var(--_primitives---colors--neutral-darkest, #050b0d);
  --fts-ink-soft: var(--_primitives---colors--neutral, #505455);
  --fts-surface: var(--color-scheme-1--surface-1, #fffefa);
  --fts-surface-alt: var(--color-scheme-1--surface-2, #f6f5f1);
  --fts-line: var(--color-scheme-1--border, #e5e4df);
  --fts-accent: var(--_primitives---colors--malibu, #69e5fb);
  --fts-accent-ink: var(--_primitives---colors--malibu-darkest, #1f444b);
  --fts-accent-soft: var(--_primitives---colors--malibu-lightest, #f0fcfe);
  --fts-font-display: var(--_typography---font-styles--neo-heading, "Marjorie", Georgia, serif);
  --fts-font-body: var(--_typography---font-styles--neo-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --fts-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: var(--fts-bg);
  color: var(--fts-ink);
  font-family: var(--fts-font-body);
}

.fts-root *,
.fts-root *::before,
.fts-root *::after {
  box-sizing: border-box;
}

.fts-root[data-theme="dark"] {
  --fts-ink: var(--_primitives---colors--neutral-lightest, #fffefa);
  --fts-ink-soft: #9ea6ab;
  --fts-surface: var(--_primitives---colors--neutral-darker, #1e2325);
  --fts-surface-alt: var(--_primitives---colors--neutral-dark, #2b2f31);
  --fts-line: var(--_primitives---opacity--white-15, rgba(255, 255, 255, 0.15));
  --fts-accent-ink: var(--_primitives---colors--malibu, #69e5fb);
  --fts-accent-soft: rgba(105, 229, 251, 0.08);
}

/* Section header — eyebrow in Geist Mono caps, heading in Marjorie */
.fts-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 40px;
}

.fts-header[data-align="center"] {
  align-items: center;
  text-align: center;
}

.fts-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--fts-font-mono);
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fts-ink-soft);
}

.fts-eyebrow-mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--fts-accent);
}

.fts-heading {
  margin: 0;
  font-family: var(--fts-font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--fts-ink);
}

@media (max-width: 767px) {
  .fts-header {
    margin-bottom: 28px;
  }
}