/* ============================================================================
   Gor Walowski — portfolio
   Implemented 1:1 from Figma "Landing page V2" (node 2:1998, canvas 1440×3045).
   Column widths are expressed as percentages of the 1352px content box, so the
   1440px viewport reproduces the source geometry exactly and narrower
   viewports compress proportionally.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts -- */

@font-face {
  font-family: "Neue Montreal";
  src: url("assets/fonts/NeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chivo Mono";
  src: url("assets/fonts/ChivoMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel";
  src: url("assets/fonts/FixelText-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fixel";
  src: url("assets/fonts/FixelText-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens -- */

:root {
  --bg: #000000;
  --ink: #ffffff;         /* primary type            */
  --ink-2: #c1c1c1;       /* secondary type          */
  --ink-3: #606060;       /* inactive language items */
  --hairline: #212121;    /* section + row rules     */
  --hairline-2: #383838;  /* nav separators          */
  --bullet: #434343;      /* 4px inline dots         */
  --dots: #272727;        /* dotted section divider  */
  --rail-track: #1c1c1c;  /* footer rail, unmarked    */
  --wordmark-tick: #363636;
  --btn-light: #bdb8b8;
  --btn-dark: #212121;

  --font-sans: "Neue Montreal", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Figma canvas: 1440 frame − 2 × 44 padding */
  --gutter: 44px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 48px;
  --space-8: 56px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 112px;
  --section-gap: var(--space-8);

  /* One role-based type scale shared by the landing and every case page. */
  --fs-display: 32px;
  --fs-feature: 28px;
  --fs-lead: 24px;
  --fs-body: 18px;
  --fs-mono: 14px;
  --fs-label: 12px;

  --lh-display: 35px;
  --lh-feature: 30px;
  --lh-lead: 28px;
  --lh-lead-tight: 26px;
  --lh-body: 23px;
  --lh-body-tight: 23px;
  --lh-prose: 23px;
  --lh-mono: 16px;
  --lh-label: 14px;
  --lh-ui: 18px;

  --chapter-inset: 4.1420%;  /* 56 / 1352 */
}

/* ----------------------------------------------------------------- base -- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; font-weight: inherit; font-size: inherit; }

a { color: inherit; text-decoration: none; }

img, svg { display: block; }

img { max-width: 100%; }

hr { border: 0; margin: 0; }

::selection { background: var(--ink); color: var(--bg); }

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ----------------------------------------------------------------- page -- */

.page {
  max-width: 1440px;
  margin-inline: auto;
  padding: 40px var(--gutter) 0;
}

.page > * + * { margin-top: var(--section-gap); }

/* Dotted divider — 3px bars on a 6px pitch, bleeding 39.5px past the gutter
   on both sides, exactly as the 1431px-wide divider frame in Figma. */
.rule-dots {
  height: 11px;
  margin-inline: -39.5px;
  background-image: repeating-linear-gradient(
    to right,
    var(--dots) 0 3px,
    transparent 3px 6px
  );
}

/* Hairline rule between rows. Figma draws these as zero-height lines, so the
   1px stroke is pulled back out of the flow to keep the rhythm exact. */
.rule {
  height: 0;
  border-top: 1px solid var(--hairline);
  margin-bottom: -1px;
}

/* 4px inline bullet separating a company from a role. */
.bullet {
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bullet);
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: clamp(560px, calc(100svh - 107px), 690px);
}

.hero__col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 49.4083%;   /* 668 / 1352 */
  height: 100%;
}

.hero__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 95.8084%;   /* 640 / 668 */
}

.hero__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
}

.lang {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 23px;
}

.lang__item {
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
  color: var(--ink-3);
  transition: color 0.2s ease;
}

.lang__item.is-active,
.lang__item:hover { color: var(--ink); }

.lang__sep {
  width: 2px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink-3);
}

.hero__id {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.hero__name {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  color: var(--ink);
}

.hero__tagline {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: -0.24px;
  color: var(--ink-2);
}

.actions {
  display: flex;
  gap: var(--space-1);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn:hover { opacity: 0.85; }
.btn:active { transform: translateY(1px); }

.btn__icon { flex: none; }

.btn__label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
}

.btn--light { background: var(--btn-light); color: #212121; }
.btn--dark  { background: var(--btn-dark);  color: var(--ink-2); }

.sectionnav {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: var(--lh-body);
}

.sectionnav a {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: -0.18px;
  color: var(--ink-2);
  transition: color 0.2s ease;
}

.sectionnav a:hover { color: var(--ink); }

.sectionnav__sep {
  width: 1px;
  height: 15px;
  background: var(--hairline-2);
}

.hero__media {
  width: 41.1982%;   /* 557 / 1352 */
  height: 100%;
  overflow: hidden;
}

.hero__media picture { height: 100%; }

.hero__media img,
.hero__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ------------------------------------------------------- bio + jobs ------ */

.about {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 690px;
}

.about__col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  align-self: stretch;
  width: 41.1982%;   /* 557 / 1352 */
}

.bio {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: -0.48px;
  color: var(--ink-2);
}

.alumni {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.alumni__label {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: -0.18px;
  color: var(--ink-2);
}

.alumni__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.alumni__logo { height: 24px; width: auto; }

.about__col--jobs {
  justify-content: flex-start;
  gap: var(--space-4);
  width: 41.1243%;   /* 556 / 1352 */
}

.job {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.job__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.job__head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

.job__co { white-space: nowrap; }

.job__role { flex: 1 1 0; min-width: 0; }

.job__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body-tight);
  letter-spacing: -0.18px;
  color: var(--ink-2);
}

/* elvtr.com row is set on two lines with the looser leading of the comp */
.job__desc--tall {
  line-height: var(--lh-body);
  letter-spacing: 0;
}

.job__date {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  color: var(--ink-2);
}

/* ------------------------------------------------------------- method -- */

.method {
  display: flex;
  flex-direction: column;
  scroll-margin-top: var(--space-5);
}

.method__header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 168px;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.method__heading,
.method__intro {
  padding: var(--space-4);
  border-right: 1px solid var(--hairline);
}

.method__heading {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.method__eyebrow,
.method-card__meta,
.method__axis {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.method__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  color: var(--ink);
}

.method__intro {
  grid-column: 2 / 4;
  display: flex;
  align-items: flex-end;
  max-width: none;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: -0.24px;
  color: var(--ink-2);
}

.method__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.method-card {
  position: relative;
  container-type: inline-size;
  min-width: 0;
  padding: var(--space-4) var(--space-4) var(--space-5);
  border-right: 1px solid var(--hairline);
  background-image:
    linear-gradient(180deg, transparent 58%, var(--bg) 96%),
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px, 24px 24px;
  background-repeat: no-repeat, repeat, repeat;
  background-position: center, -1px -1px, -1px -1px;
}

.method-card::before,
.method-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: var(--ink-3);
}

.method-card::before {
  top: -4px;
  left: 50%;
  width: 1px;
  height: 9px;
}

.method-card::after {
  top: 0;
  left: calc(50% - 4px);
  width: 9px;
  height: 1px;
}

.method-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--space-4);
  margin-bottom: var(--space-4);
  color: var(--ink-2);
}

.method-card__media {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border: 1px solid #484848;
  background: #121212;
}

.method-card__media::before,
.method-card__media::after {
  content: none;
}

.method-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  filter: none;
  transform: none;
}

.method-card:hover .method-card__media img {
  filter: none;
  transform: none;
}

.method-card__reticle,
.method-card__reticle::before,
.method-card__reticle::after {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.method-card__reticle {
  right: 12px;
  bottom: 12px;
  width: 20px;
  height: 20px;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
}

.method-card__reticle::before,
.method-card__reticle::after {
  content: "";
  top: 50%;
  left: 50%;
  background: rgb(255 255 255 / 55%);
  transform: translate(-50%, -50%);
}

.method-card__reticle::before { width: 28px; height: 1px; }
.method-card__reticle::after { width: 1px; height: 28px; }

.method-card__body {
  position: relative;
  margin-top: var(--space-7);
  padding: 0 0 var(--space-1);
}

.method-card__title {
  max-width: 340px;
  font-size: var(--fs-feature);
  line-height: var(--lh-feature);
  letter-spacing: -0.42px;
  color: var(--ink);
}

.method-card__copy {
  margin-top: var(--space-2);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--ink-2);
}

.method__axis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--hairline);
}

.method__axis span {
  position: relative;
  padding: 14px 20px;
  border-right: 1px solid var(--hairline);
}

.method__axis span::after {
  content: "+";
  position: absolute;
  right: -4px;
  top: 50%;
  z-index: 2;
  padding: 1px 0;
  color: var(--ink-3);
  background: var(--bg);
  transform: translateY(-50%);
}

.method__axis span:last-child::after { display: none; }

/* -------------------------------------------------------- selected works -- */

.works {
  display: flex;
  align-items: flex-start;
  gap: 3.2544%;      /* 44 / 1352 */
}

.works__aside { width: 30.4734%; }   /* 412 / 1352 */

.works__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  color: var(--ink);
}

.works__list {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.work {
  position: relative;
  min-width: 0;
}

/* A real anchor owns the complete card, including the art and its logo. */
.work__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.work__link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

.work__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.work__name {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead-tight);
  color: var(--ink);
}

.work__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

/* Two rows carry the tighter leading of the comp. */
.work__desc--tight { line-height: var(--lh-body-tight); }

.work__media {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.work__media > img:not(.project-art__logo) {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.work__link:hover .work__media > img:not(.project-art__logo),
.work__link:focus-visible .work__media > img:not(.project-art__logo) { transform: scale(1.03); }

/* ============================================================== tablet === */

@media (max-width: 1023px) {
  :root {
    --gutter: 32px;
    --section-gap: var(--space-7);
  }

  .page { padding: 32px var(--gutter) 0; }

  .rule-dots { margin-inline: -27.5px; }

  .about {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 48px;
  }

  .about__col,
  .about__col--jobs { width: 100%; }

  .method__header { grid-template-columns: 1fr 1fr; }
  .method__intro { grid-column: 2; }

  .method-card {
    padding-inline: var(--space-3);
  }

  .method-card__meta { margin-bottom: var(--space-3); }
  .method-card__body { margin-top: var(--space-5); }

  .works {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .works__aside { width: 100%; }

  /* the column axis would otherwise resolve flex-basis:0 as a zero height */
  .works__list {
    flex: none;
    width: 100%;
  }
}

/* ============================================================== mobile === */

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --section-gap: var(--space-6);
    --fs-display: 28px;
    --fs-feature: 24px;
    --fs-lead: 20px;
    --fs-body: 16px;
    --fs-mono: 13px;
    --fs-label: 11px;
    --lh-lead: 24px;
    --lh-lead-tight: 22px;
    --lh-body: 21px;
    --lh-body-tight: 21px;
    --lh-display: 31px;
    --lh-feature: 26px;
    --lh-prose: 21px;
    --lh-mono: 15px;
    --lh-label: 13px;
    --lh-ui: 16px;
    --chapter-inset: 0px;
  }

  .page { padding: 24px var(--gutter) 0; }

  .rule-dots {
    height: 9px;
    margin-inline: -12px;
  }

  .hero {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    height: auto;
  }

  .hero__col {
    width: 100%;
    height: auto;
    gap: 32px;
  }

  .hero__intro { width: 100%; }

  .hero__media { width: 100%; height: auto; }

  .hero__tagline br { display: none; }

  .hero__media picture { height: auto; }

  .hero__media img,
  .hero__media video { height: auto; aspect-ratio: 4 / 5; }

  .about { gap: 40px; }

  .about__col { gap: 40px; }

  .alumni__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .alumni__row .bullet { display: none; }

  .alumni__logo--skydeck { height: 21px; }
  .alumni__logo--google  { height: 22px; }

  .about__col--jobs { gap: 20px; }

  .method__header {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .method__heading,
  .method__intro {
    min-height: 132px;
    padding: var(--space-4);
  }

  .method__intro {
    align-items: flex-end;
    border-top: 1px solid var(--hairline);
  }

  .method__grid,
  .method__axis {
    grid-template-columns: 1fr;
  }

  .method-card {
    padding: var(--space-4) var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--hairline);
  }

  .method-card:last-child { border-bottom: 0; }

  .method-card__meta { margin-bottom: var(--space-3); }
  .method-card__body { margin-top: var(--space-5); }

  .method__axis span { border-bottom: 1px solid var(--hairline); }
  .method__axis span:last-child { border-bottom: 0; }

  .method__axis span::after {
    top: auto;
    right: 20px;
    bottom: -7px;
    transform: none;
  }

  /* the date reads as a label above the role on a narrow column */
  .job {
    flex-direction: column;
    gap: 8px;
  }

  .job__body {
    flex: none;
    width: 100%;
  }

  .job__date { order: -1; }

  .job__head {
    flex-wrap: wrap;
    gap: 8px;
  }

  .job__role { flex: none; }

  .job__desc br { display: none; }

  .works__list { gap: 28px; }

  .work__link {
    flex-direction: column;
    gap: 14px;
  }

  .work__text,
  .work__media {
    flex: none;
    width: 100%;
  }

  .work__desc br { display: none; }
}

/* ========================================================== preferences === */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================ loader === */

.loader-lab-page {
  min-height: 100svh;
  overflow: hidden;
  background: #040405;
}

.loader-lab-page--controls {
  color: #f4f4f2;
}

.site-loader {
  position: fixed;
  z-index: 9999;
  inset: 0;
  overflow: hidden;
  background: #040405;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.62s cubic-bezier(0.75, 0, 0.25, 1), visibility 0.62s;
}

.site-loader.is-leaving {
  visibility: hidden;
  clip-path: inset(50% 0 50% 0);
}

.site-loader__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.field-loader__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: clamp(82px, 12vmin, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #040405;
  transform: translate(-50%, -50%);
}

.field-loader__letter {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: clamp(34px, 4.8vmin, 54px);
  aspect-ratio: 4 / 3;
  place-items: center;
  color: #f4f4f2;
  transform: translate(-50%, -50%);
}

.field-loader__glyph {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
}

.field-loader__glyph [data-glyph] { display: none; }
.field-loader__letter[data-face="cut"] [data-glyph="cut"],
.field-loader__letter[data-face="needle"] [data-glyph="needle"],
.field-loader__letter[data-face="mono"] [data-glyph="mono"],
.field-loader__letter[data-face="cascade"] [data-glyph="cascade"],
.field-loader__letter[data-face="duplex"] [data-glyph="duplex"],
.field-loader__letter[data-face="gothic"] [data-glyph="gothic"],
.field-loader__letter[data-face="matrix"] [data-glyph="matrix"],
.field-loader__letter[data-face="liquid"] [data-glyph="liquid"] { display: block; }

.field-loader__letter[data-face="needle"] { width: clamp(38px, 5.4vmin, 62px); }
.field-loader__letter[data-face="mono"] { width: clamp(35px, 4.9vmin, 56px); transform: translate(-50%, -50%) scaleY(0.95); }
.field-loader__letter[data-face="cascade"] { width: clamp(39px, 5.5vmin, 64px); }
.field-loader__letter[data-face="duplex"] { width: clamp(40px, 5.7vmin, 66px); }
.field-loader__letter[data-face="gothic"] { width: clamp(31px, 4.4vmin, 50px); transform: translate(-50%, -50%) scaleY(1.05); }
.field-loader__letter[data-face="matrix"] { width: clamp(32px, 4.5vmin, 52px); }
.field-loader__letter[data-face="liquid"] { width: clamp(39px, 5.5vmin, 64px); }

.glyph-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.glyph-stroke--thin { stroke-width: 2; }
.glyph-stroke--heavy { stroke-width: 9; }
.glyph-stroke--round {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-loader.is-leaving .field-loader__mark { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }

/* Contour study: the mask and glyph share a fixed CSS-pixel coordinate system. */
.site-loader--contour { background: #000; }
.site-loader--contour .field-loader__mark { width: 120px; background: #000; }
.site-loader--contour .field-loader__letter { width: 44px; aspect-ratio: 100 / 72; color: #e9eae4; }
.site-loader--contour .field-loader__glyph [data-glyph] { display: none; }
.site-loader--contour .field-loader__glyph .is-current { display: block; }
@media (max-width: 600px) {
  .site-loader--contour .field-loader__mark { width: 96px; }
  .site-loader--contour .field-loader__letter { width: 40px; }
}

.motion-panel {
  position: fixed;
  z-index: 10001;
  top: 18px;
  right: 18px;
  width: min(262px, calc(100vw - 36px));
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.17);
  border-radius: 4px;
  background: rgb(7 7 8 / 0.84);
  box-shadow: 0 18px 46px rgb(0 0 0 / 0.28);
  backdrop-filter: blur(16px);
  font-family: var(--font-mono);
  pointer-events: auto;
  transition: width 0.24s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.motion-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 12px 0 14px;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

.motion-panel__heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}

.motion-panel__index {
  color: rgb(255 255 255 / 0.36);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.motion-panel__heading strong {
  color: rgb(255 255 255 / 0.9);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.motion-panel__collapse {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.09);
  color: #fff;
  font: 400 15px/24px var(--font-mono);
  cursor: pointer;
}

.motion-panel__body {
  display: grid;
  gap: 18px;
  padding: 16px 14px 14px;
}

.motion-panel__modes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  padding: 1px;
  background: rgb(255 255 255 / 0.12);
}

.motion-panel__modes button {
  min-height: 32px;
  border: 0;
  background: #0a0a0b;
  color: rgb(255 255 255 / 0.42);
  font: 400 10px/1 var(--font-mono);
  letter-spacing: 0.06em;
  cursor: pointer;
}

.motion-panel__modes button.is-active {
  background: #f0f0ee;
  color: #080809;
}

.motion-control {
  display: grid;
  gap: 9px;
}

.motion-control > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgb(255 255 255 / 0.58);
  font-size: 10px;
  letter-spacing: 0.02em;
}

.motion-control output {
  color: rgb(255 255 255 / 0.88);
  font-variant-numeric: tabular-nums;
}

.motion-control input[type="range"] {
  width: 100%;
  height: 2px;
  margin: 5px 0;
  appearance: none;
  border-radius: 0;
  background: rgb(255 255 255 / 0.19);
  accent-color: #fff;
  cursor: ew-resize;
}

.motion-control input[type="range"]::-webkit-slider-thumb {
  width: 9px;
  height: 9px;
  appearance: none;
  border: 1px solid #050506;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.45);
}

.motion-panel__reset {
  min-height: 34px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 2px;
  background: rgb(255 255 255 / 0.055);
  color: rgb(255 255 255 / 0.72);
  font: 400 10px/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.motion-panel__reset:hover,
.motion-panel__collapse:hover {
  background: rgb(255 255 255 / 0.14);
  color: #fff;
}

.motion-panel.is-collapsed {
  width: 49px;
}

.motion-panel.is-collapsed .motion-panel__header {
  justify-content: center;
  padding: 0;
  border-bottom: 0;
}

.motion-panel.is-collapsed .motion-panel__heading,
.motion-panel.is-collapsed .motion-panel__body {
  display: none;
}

@media (max-width: 640px) {
  .motion-panel {
    top: 10px;
    right: 10px;
    width: min(238px, calc(100vw - 20px));
  }
}

/* ============================================================== footer === */
/* Not in the comp — designed to close the page in its own language: the
   dotted divider becomes a career rail, and the sign-off wordmark is filled
   with the same 3px tick texture the dividers are drawn from. */

/* The footer opens on the page's third divider, which does double duty as the
   career rail — so it keeps the exact y-position the comp gives that divider. */
.footer {
  padding: 0 0 40px;
}

/* ---- career rail: the page's tick motif, carrying the Work column's dates */

.rail {
  position: relative;
  height: 42px;
  margin-inline: -39.5px;
}

.rail__track {
  height: 11px;
  background-image: repeating-linear-gradient(
    to right,
    var(--dots) 0 3px,
    transparent 3px 6px
  );
}

.rail__mark {
  position: absolute;
  top: 0;
  width: 3px;
  height: 11px;
  background: var(--ink-2);
}

.rail__label {
  position: absolute;
  top: 21px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: var(--lh-mono);
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ends sit flush; every other mark is centred on its year */
.rail__mark { transform: translateX(-50%); }
.rail__label { transform: translateX(-50%); }
.rail__mark[data-edge="start"],
.rail__label[data-edge="start"] { transform: none; }
.rail__mark[data-edge="end"] { transform: translateX(-100%); }
.rail__label[data-edge="end"] { transform: translateX(-100%); }

/* ---- sign-off ---- */

.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: var(--space-10);
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.footer__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.footer__statement {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  color: var(--ink);
  text-wrap: balance;
}

.footer__index {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 168px;
}

.footer__index a {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: -0.18px;
  color: var(--ink-2);
  transition: color 0.2s ease;
}

.footer__index a:hover { color: var(--ink); }

.footer__index .rule {
  width: 100%;
  margin: 4px 0;
}

.footer__langs {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- wordmark: sized so the name always spans the content box exactly.
       5.95172 is the advance width of "Gor Walowski" per 1px of font size
       in Neue Montreal Medium, measured from the face itself. ---- */

.wordmark {
  position: relative;
  isolation: isolate;
  margin-top: var(--space-11);
  font-size: calc(min(100vw - 2 * var(--gutter), 1352px) / 5.95172);
  line-height: 0.8;
  white-space: nowrap;
  background-image: repeating-linear-gradient(
    to right,
    var(--wordmark-tick) 0 3px,
    transparent 3px 6px
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}

.wordmark.is-webgl {
  cursor: crosshair;
  background-image: none;
  color: transparent;
}

.wordmark__canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wordmark.is-webgl::after {
  content: "move / distort";
  position: absolute;
  z-index: 2;
  top: -26px;
  right: 0;
  font: 400 9px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.wordmark.is-webgl:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.footer__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  color: var(--ink-3);
}

.footer__bar a {
  color: var(--ink-2);
  transition: color 0.2s ease;
}

.footer__bar a:hover { color: var(--ink); }

@media (max-width: 1023px) {
  .rail { margin-inline: -27.5px; }
  .footer__top { margin-top: 64px; gap: 40px; }
  .wordmark { margin-top: 80px; }
}

@media (max-width: 767px) {
  .rail { margin-inline: -12px; height: 38px; }
  .rail__track { height: 9px; }
  .rail__mark { height: 9px; }

  /* only the endpoints survive a narrow rail without colliding */
  .rail__label[data-minor] { display: none; }

  .footer__top {
    flex-direction: column;
    margin-top: 48px;
    gap: 44px;
  }

  .footer__index { min-width: 0; }

  /* the tick pattern has to tighten with the type or the letters break up */
  .wordmark {
    margin-top: 64px;
    background-image: repeating-linear-gradient(
      to right,
      var(--wordmark-tick) 0 2px,
      transparent 2px 4px
    );
  }

  .footer__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ========================================================== case study === */
/* Figma "Landing page V2" node 2:10150 (1440×4227). Same 1352px content box
   and gutters as the index page; the mockup bands run full-bleed. */

.crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 16px;
}

.crumbs a,
.crumbs span {
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  color: var(--ink-3);
  transition: color 0.2s ease;
}

.crumbs a:hover { color: var(--ink-2); }

.crumbs [aria-current] { color: var(--ink); }

.crumbs__sep {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ink-3);
}

.case {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.case__band img {
  width: 100%;
  aspect-ratio: 1352 / 220;
  height: auto;
  object-fit: cover;
}

/* two-column text block, shared by the intro and every chapter */
.chapter {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-5) var(--chapter-inset) var(--space-5) 0;
}

.chapter__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 42.5154%;   /* 551 / 1296 — the chapter's inset content box */
}

/* the comp leaves this column in place but invisible on the last chapter */
.chapter__head--hidden { opacity: 0; }

.chapter__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  color: var(--ink);
}

.chapter__sub {
  font-size: var(--fs-body);
  line-height: var(--lh-body-tight);
  color: var(--ink-2);
}

.chapter__prose {
  width: 47.1451%;   /* 611 / 1296 */
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--ink);
}

.chapter__prose p + p { margin-top: var(--lh-prose); }

/* the intro drops to secondary ink after the opening two paragraphs */
.chapter__prose--dim p:nth-child(n + 3) { color: var(--ink-2); }

/* ---- full-bleed mockup bands ---- */

.band {
  position: relative;
  margin-inline: calc(-1 * var(--gutter));
  overflow: hidden;
}

.band--one   { aspect-ratio: 1440 / 795.5414; }
.band--two   { aspect-ratio: 1440 / 820.6158; }
.band--three { aspect-ratio: 1440 / 900; }

/* Reproduction of the raster gradient the comp uses behind the mockups. */
.band--one,
.band--two {
  background:
    radial-gradient(90% 70% at 46% 4%, rgba(150, 122, 232, 0.85) 0%, rgba(150, 122, 232, 0) 62%),
    linear-gradient(180deg, #6d56cd 0%, #7360da 20%, #5548d6 50%, #2f39d6 80%, #1b2ab9 100%);
}

.band__window {
  position: absolute;
  container-type: inline-size;
  border-radius: 1.1cqw;
  box-shadow: 0 2.4cqw 5cqw rgba(10, 8, 40, 0.45);
  overflow: hidden;
}

.band--one .band__window {
  left: 17.9693%; top: 12.5619%;
  width: 64.0455%; height: 75.0287%;
}

.band--two .band__window {
  left: 15.8845%; top: 11.8555%;
  width: 68.2141%; height: 76.4361%;
}

/* ---- Safari chrome, rebuilt from the mockup's own vector geometry ---- */

.win__bar {
  position: relative;
  height: 4.5548cqw;              /* 42.006 / 922.255 */
  background: #2d2d2f;
  border-bottom: 1px solid #1f1f21;
}

.win__lights {
  position: absolute;
  left: 1.6963cqw;
  top: 1.7518cqw;
  display: flex;
  gap: 0.6289cqw;
}

.win__lights i {
  width: 1.0511cqw;
  height: 1.0511cqw;
  border-radius: 50%;
}

.win__lights i:nth-child(1) { background: #ff5f57; }
.win__lights i:nth-child(2) { background: #febc2e; }
.win__lights i:nth-child(3) { background: #28c840; }

.win__icons {
  position: absolute;
  top: 1.1386cqw;
  display: flex;
  align-items: center;
  color: #8b8b90;
}

.win__icons--left  { left: 8.1437cqw;  gap: 1.3569cqw; }
.win__icons--right { left: 90.4740cqw; gap: 0.9331cqw; }

.win__icons svg {
  width: 2.0359cqw;
  height: 2.1021cqw;
}

.win__url {
  position: absolute;
  left: 30.5674cqw;
  top: 1.0511cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5cqw;
  width: 38.8443cqw;
  height: 2.4526cqw;
  border-radius: 1.2263cqw;
  background: #3a3a3d;
  color: #d8d8dd;
  font-family: var(--font-mono);
  font-size: 1.19cqw;
  line-height: 1;
}

.win__url svg { width: 1.19cqw; height: 1.19cqw; }

.win__body {
  height: calc(100% - 4.5548cqw);
  background: #f1f1f4;
}

/* ---- placeholder standing in for the product screenshot ---- */

.shot {
  display: flex;
  height: 100%;
  gap: 1.2cqw;
  padding: 1.2cqw;
}

.shot__aside {
  flex: none;
  width: 15.5cqw;
  display: flex;
  flex-direction: column;
  gap: 0.85cqw;
  padding: 0.9cqw;
  border-radius: 0.9cqw;
  background: #fbfbfd;
}

.shot__main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1cqw;
}

.shot__row {
  display: flex;
  gap: 0.9cqw;
}

.shot__cards { display: flex; gap: 0.9cqw; }

.shot__card {
  flex: 1 1 0;
  height: 6.4cqw;
  border-radius: 0.8cqw;
  background: #fbfbfd;
  border: 1px solid #e6e6ea;
}

.shot__table {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.55cqw;
  padding: 0.9cqw;
  border-radius: 0.9cqw;
  background: #fbfbfd;
  border: 1px solid #e9e9ee;
}

.shot__line {
  height: 1.5cqw;
  border-radius: 0.35cqw;
  background: #ececf1;
}

.shot__line--head { background: #e0e0e7; }

.shot__pill {
  height: 2.1cqw;
  border-radius: 1.05cqw;
  background: #e8e8ee;
}

.shot__pill--wide { width: 26%; }
.shot__pill--slim { width: 14%; }
.shot__pill--full { width: 100%; }

/* the final board runs full-bleed and light, like a canvas export */
.band--three {
  background:
    url("assets/case-board.svg") center / cover no-repeat,
    radial-gradient(circle at 1px 1px, #dcdce3 1px, transparent 0) 0 0 / 24px 24px,
    #f5f5f8;
}

@media (max-width: 1023px) {
  .chapter {
    flex-direction: column;
    gap: 32px;
    padding-right: 0;
  }

  .chapter__head,
  .chapter__prose { width: 100%; }

  /* an invisible spacer column is only meaningful beside its pair */
  .chapter__head--hidden { display: none; }
}

@media (max-width: 767px) {
  .case { gap: 20px; }

  .case__band img { aspect-ratio: 16 / 9; }

  .chapter { padding: 24px 0; }

  /* the comp's line break lands badly once the column narrows */
  .chapter__title br { display: none; }

  /* give the mockup more of the band so the chrome stays legible */
  .band--one,
  .band--two { aspect-ratio: 1440 / 1000; }

  .band--one .band__window,
  .band--two .band__window {
    left: 6%; width: 88%;
    top: 14%; height: 72%;
  }

  .band--three { aspect-ratio: 1440 / 1100; }
}

/* ========================================================================
   CASE STUDY SYSTEM
   A reusable editorial shell for every project page: hero, facts, chapters,
   proof surfaces and next-case navigation. Fintellect is the first instance.
   ====================================================================== */

.case-page {
  --case-pink: #ff2fa8;
  --case-pink-dark: #2a071c;
  --case-paper: #e7e1d8;
  --case-grid: #292929;
  padding-top: 0;
}

.case-page > * + * { margin-top: var(--space-11); }

.casebar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-7);
  align-items: center;
  min-height: 64px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.casebar__back { color: var(--ink-2); transition: color 0.2s ease; }
.casebar__back:hover { color: var(--ink); }

.case-page > .casebar + .case-hero { margin-top: 0; }

.case-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: min(620px, calc(100svh - 124px));
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
}

.case-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-5);
  border-right: 1px solid var(--hairline);
  background-image:
    linear-gradient(180deg, transparent 58%, var(--bg) 96%),
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
  background-repeat: no-repeat, repeat, repeat;
  background-position: center, -1px -1px, -1px -1px;
}

.case-kicker,
.case-number,
.case-axis,
.case-caption,
.case-fact dt,
.case-toc,
.case-next > p {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.case-kicker { color: var(--ink-3); }

.case-hero h1 {
  max-width: 6ch;
  margin-top: auto;
  font-size: clamp(64px, 8vw, 118px);
  line-height: 0.84;
  letter-spacing: -0.06em;
}

.case-hero__lead {
  max-width: 17ch;
  margin-top: var(--space-5);
  font-size: clamp(25px, 2.8vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.case-hero__note {
  max-width: 35ch;
  margin-top: var(--space-4);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.case-hero__media {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #14000d;
}

.case-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 120px rgb(0 0 0 / 55%);
  pointer-events: none;
}

.case-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
}

.case-hero__media figcaption {
  position: absolute;
  z-index: 2;
  left: var(--space-4);
  bottom: var(--space-4);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
  color: rgb(255 255 255 / 65%);
}

.case-page > .case-hero + .case-facts { margin-top: 0; }

.case-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0;
  border: 1px solid var(--hairline);
}

.case-fact {
  min-height: 152px;
  padding: var(--space-4);
  border-right: 1px solid var(--hairline);
}

.case-fact:last-child { border-right: 0; }
.case-fact dt { color: var(--ink-3); }

.case-fact dd {
  margin: var(--space-7) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.case-page > .case-facts + .case-toc { margin-top: 0; }

.case-toc {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr repeat(5, auto);
  gap: var(--space-4);
  align-items: center;
  min-height: 56px;
  padding-inline: var(--space-4);
  border: 1px solid var(--hairline);
  border-top: 0;
  color: var(--ink-3);
  background: rgb(0 0 0 / 88%);
  backdrop-filter: blur(16px);
}

.case-toc a { color: var(--ink-2); transition: color 0.2s ease; }
.case-toc a:hover { color: var(--ink); }
.case-toc i { margin-right: var(--space-1); font-style: normal; color: var(--ink-3); }

.case-page > .case-toc + .rule-dots { margin-top: var(--space-8); }

.case-story {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
  scroll-margin-top: 76px;
  border-top: 1px solid var(--hairline);
}

.case-story__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 520px;
  padding: var(--space-4) var(--space-4) var(--space-5) 0;
  border-right: 1px solid var(--hairline);
}

.case-number { color: var(--ink-2); }
.case-axis { color: var(--ink-3); }

.case-story__body {
  padding: var(--space-4) 0 0 var(--space-8);
}

.case-story__body h2,
.case-outcome h2 {
  max-width: 18ch;
  margin-top: var(--space-4);
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.case-story__prose {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.case-story__prose p,
.case-outcome > p:last-child {
  max-width: 38ch;
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--ink-2);
}

.case-story blockquote {
  margin: var(--space-9) 0 0;
  padding: 0 0 var(--space-2) var(--space-4);
  border-left: 2px solid var(--case-pink);
  font-size: var(--fs-feature);
  line-height: var(--lh-feature);
  color: var(--ink);
}

.case-story--compact .case-story__aside { min-height: 390px; }

.case-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-9);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.case-principles article {
  min-height: 220px;
  padding: var(--space-4);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.case-principles span {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label);
  color: var(--ink-3);
}

.case-principles h3 {
  margin-top: var(--space-7);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead-tight);
}

.case-principles p {
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.case-showcase {
  position: relative;
  padding: clamp(24px, 5vw, 72px);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.case-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px);
  background-size: 32px 32px;
}

.case-caption {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  color: var(--ink-2);
}

.case-caption span { color: var(--ink-3); }

/* Product mock --------------------------------------------------------- */

.case-showcase--product {
  background: radial-gradient(circle at 50% 25%, #391124 0, #160810 42%, #070707 78%);
}

.product-window {
  position: relative;
  width: min(100%, 1160px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 16px;
  box-shadow: 0 44px 100px rgb(0 0 0 / 60%);
  background: #f6f5f4;
  color: #171717;
}

.product-window__chrome {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 40%) 1fr;
  align-items: center;
  height: 42px;
  padding: 0 14px;
  border-bottom: 1px solid #d8d7d5;
  font: 400 10px/1 var(--font-mono);
  color: #777;
  background: #e7e5e2;
}

.product-window__chrome > :last-child { justify-self: end; }

.product-window__lights { display: flex; gap: 6px; }
.product-window__lights i { width: 8px; height: 8px; border-radius: 50%; background: #aaa; }
.product-window__url { padding: 7px 14px; border-radius: 7px; text-align: center; background: #f5f4f2; }

.finance-ui {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 610px;
  font-family: Arial, sans-serif;
  background: #f7f6f4;
}

.finance-ui__side {
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  border-right: 1px solid #ddd9d5;
  background: #eeeae6;
}

.finance-ui__logo {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font: 700 14px/1 Arial, sans-serif;
  color: #fff;
  background: #151515;
}

.finance-ui__nav { display: flex; flex-direction: column; gap: 4px; margin-top: 30px; font-size: 11px; color: #777; }
.finance-ui__nav span { padding: 9px 10px; border-radius: 6px; }
.finance-ui__nav .is-active { color: #111; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 6%); }
.finance-ui__profile { margin-top: auto; font-size: 10px; line-height: 1.25; }
.finance-ui__profile small { color: #999; }

.finance-ui__main { padding: 28px; min-width: 0; }
.finance-ui__head { display: flex; align-items: center; justify-content: space-between; }
.finance-ui__head small { font-size: 10px; color: #999; }
.finance-ui__head h3 { margin-top: 6px; font-size: 20px; line-height: 1.1; }
.finance-ui__head button { padding: 9px 13px; border: 1px solid #ddd; border-radius: 7px; font: 11px Arial, sans-serif; color: #444; background: #fff; }

.finance-ui__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
.finance-ui__kpis article { min-width: 0; padding: 15px; border: 1px solid #e2dfdb; border-radius: 10px; background: #fff; }
.finance-ui__kpis small { display: block; font-size: 10px; color: #888; }
.finance-ui__kpis strong { display: block; margin-top: 12px; font-size: 19px; }
.finance-ui__kpis em { display: block; margin-top: 7px; font-size: 9px; font-style: normal; color: #be1374; }

.finance-ui__chart,
.finance-ui__table { margin-top: 10px; padding: 16px; border: 1px solid #e2dfdb; border-radius: 10px; background: #fff; }
.finance-ui__chart header,
.finance-ui__table header { display: flex; justify-content: space-between; font-size: 11px; }
.finance-ui__chart header small,
.finance-ui__table header small { color: #999; }

.finance-ui__bars {
  display: flex;
  align-items: flex-end;
  gap: 7%;
  height: 160px;
  margin-top: 20px;
  padding: 0 5%;
  border-bottom: 1px solid #ddd;
  background: repeating-linear-gradient(to bottom, #efedeb 0 1px, transparent 1px 40px);
}

.finance-ui__bars i { position: relative; flex: 1; height: var(--revenue); background: #212121; }
.finance-ui__bars i::after { content: ""; position: absolute; left: 100%; bottom: 0; width: 44%; height: var(--cost); background: var(--case-pink); }

.finance-ui__table p { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 10px; }
.finance-ui__table p:last-child { border-bottom: 0; }
.finance-ui__table i { font-style: normal; color: #999; }

/* Currency mock -------------------------------------------------------- */

.case-showcase--currency { background: #0a0a0a; }

.currency-board {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-5);
  border: 1px solid #383838;
  background: #111;
}

.currency-board > header { display: flex; justify-content: space-between; padding-bottom: var(--space-4); border-bottom: 1px solid #333; font: 400 var(--fs-label)/var(--lh-label) var(--font-mono); text-transform: uppercase; color: var(--ink-2); }
.currency-board > header small { color: var(--ink-3); }

.currency-flow { display: grid; grid-template-columns: 1fr 110px 1fr 110px 1fr; align-items: center; padding: var(--space-10) 0; }
.currency-flow article { min-width: 0; padding: var(--space-4); border: 1px solid #393939; background: #171717; }
.currency-flow article.is-core { border-color: var(--case-pink); box-shadow: 0 0 40px rgb(255 47 168 / 12%); }
.currency-flow article span { display: block; font-size: var(--fs-body); color: var(--ink-2); }
.currency-flow article strong { display: block; margin-top: var(--space-5); font-size: clamp(24px, 2.6vw, 38px); line-height: 1; letter-spacing: -0.03em; }
.currency-flow article small { display: block; margin-top: var(--space-3); font: 400 var(--fs-label)/var(--lh-label) var(--font-mono); color: var(--ink-3); }
.currency-flow__path { position: relative; height: 1px; background: #555; }
.currency-flow__path::after { content: ">"; position: absolute; right: -1px; top: -8px; color: #777; }
.currency-flow__path span { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); font: 400 10px/1 var(--font-mono); color: var(--ink-3); }
.currency-flow__path i { position: absolute; top: -2px; left: 22%; width: 5px; height: 5px; border-radius: 50%; background: var(--case-pink); box-shadow: 0 0 10px var(--case-pink); }

.currency-ledger { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #333; border-left: 1px solid #333; }
.currency-ledger p { padding: var(--space-3); border-right: 1px solid #333; border-bottom: 1px solid #333; }
.currency-ledger span { display: block; font-size: var(--fs-label); color: var(--ink-3); }
.currency-ledger strong { display: block; margin-top: var(--space-2); font-size: var(--fs-body); }

/* Campaign archive ----------------------------------------------------- */

.campaign-archive {
  scroll-margin-top: 60px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #080808;
}

.campaign-archive__meta {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr auto;
  gap: var(--space-5);
  align-items: center;
  min-height: 62px;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

.campaign-archive__meta h2,
.campaign-archive__meta p,
.campaign-archive__meta span {
  font: 400 var(--fs-label)/var(--lh-label) var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.campaign-archive__meta h2 { color: var(--ink); }
.campaign-archive__meta p { color: var(--ink-2); }
.campaign-archive__meta span { white-space: nowrap; color: var(--ink-3); }

.campaign-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 23vw, 320px);
  gap: clamp(10px, 1.2vw, 18px);
  padding: clamp(16px, 2.2vw, 32px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  scrollbar-color: #3d3d3d transparent;
}

.campaign-rail::-webkit-scrollbar { height: 6px; }
.campaign-rail::-webkit-scrollbar-thumb { background: #3d3d3d; }

.campaign-card {
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  transition: transform 0.32s ease;
}

.campaign-card:hover { transform: translateY(-5px); }

.campaign-card__visual {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 10px;
  background: #111;
  box-shadow: 0 24px 70px rgb(0 0 0 / 55%);
}

.campaign-card img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.8s ease;
}

.campaign-card img:last-child {
  opacity: 0;
  animation: campaign-color-cycle 7s ease-in-out infinite;
}

.campaign-card:nth-child(2) img:last-child { animation-delay: -1.75s; }
.campaign-card:nth-child(3) img:last-child { animation-delay: -3.5s; }
.campaign-card:nth-child(4) img:last-child { animation-delay: -5.25s; }
.campaign-card:hover img { transform: scale(1.012); }

@keyframes campaign-color-cycle {
  0%, 32% { opacity: 0; }
  50%, 82% { opacity: 1; }
  100% { opacity: 0; }
}

.campaign-card figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 2px 0;
  font: 400 10px/1.2 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.campaign-card figcaption em { font-style: normal; color: var(--ink-2); }

/* Recognition ---------------------------------------------------------- */

.case-proof {
  scroll-margin-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.case-credentials {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.case-credential {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 158px;
  padding: var(--space-4);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: radial-gradient(circle at 50% 15%, rgb(255 255 255 / 4%), transparent 58%);
}

.case-credential__logo {
  display: flex;
  align-items: center;
  min-height: 32px;
}

.case-credential__logo img {
  width: auto;
  max-width: 100%;
  height: 24px;
}

.case-credential__mark {
  max-width: 14ch;
  font: 500 clamp(18px, 1.8vw, 25px)/1.05 var(--font-sans);
  letter-spacing: -0.035em;
  color: var(--ink);
}

.case-credentials--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-credential__logo--drawn { gap: 12px; }
.case-credential__markicon { flex: 0 0 auto; }
.case-credential .case-credential__wordmark { display: block; font: 700 24px/0.92 var(--font-sans); letter-spacing: -0.03em; text-transform: none; color: var(--ink); }
.case-credential .case-credential__wordmark--caps { font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; font-size: 18px; line-height: 0.95; }
.case-credential__markicon { width: 34px; height: 34px; }
.case-credentials--two .case-credential { min-height: 132px; }
.case-credential p { margin-top: var(--space-5); }
.case-credential span { display: block; font: 400 var(--fs-label)/var(--lh-label) var(--font-mono); text-transform: uppercase; color: var(--ink-3); }

.case-press { margin-top: var(--space-6); border-top: 1px solid var(--hairline); }
.case-press__label { padding: 14px var(--space-4); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); font: 400 var(--fs-label)/var(--lh-label) var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.case-press a { display: grid; grid-template-columns: minmax(140px, 0.8fr) 3fr auto; gap: var(--space-4); align-items: center; min-height: 62px; padding: 0 var(--space-4); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); cursor: pointer; transition: background 0.2s ease; }
.case-press a:hover { background: #101010; }
.case-press a > span,
.case-press a > small { font: 400 var(--fs-label)/var(--lh-label) var(--font-mono); text-transform: uppercase; color: var(--ink-3); }
.case-press a > strong { overflow: hidden; font-size: var(--fs-body); line-height: var(--lh-body); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgb(255 255 255 / 22%); text-underline-offset: 4px; text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.case-press a:hover > strong { color: var(--ink); text-decoration-color: var(--ink); }
.case-press a > small { display: flex; align-items: center; gap: 10px; text-align: right; }
.case-press a > small b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #343434; border-radius: 50%; font: 400 14px/1 var(--font-sans); color: var(--ink-2); transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.case-press a:hover > small b { border-color: var(--ink); color: #000; background: var(--ink); transform: translate(2px, -2px); }

/* Closing -------------------------------------------------------------- */

.case-outcome {
  display: grid;
  grid-template-columns: 1fr 3fr;
  column-gap: var(--space-8);
  padding: var(--space-10) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.case-outcome .case-kicker { grid-row: 1 / 3; }
.case-outcome h2 { margin-top: 0; }
.case-outcome > p:last-child { margin-top: var(--space-7); }

/* Outcome with a stories clip */
.case-stream .case-outcome--clip, .case-outcome--clip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-9); }
.case-outcome--clip .story-frame { margin-top: 6px; }
.case-outcome--clip h2 { margin-top: 0; }
.case-outcome__text > p { max-width: 38ch; margin-top: var(--space-7); font-size: var(--fs-body); line-height: var(--lh-prose); color: var(--ink-2); }
.story-frame { width: 272px; margin: 0; justify-self: end; }
.story-frame__screen { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 28px; border: 1px solid #2a2a2a; background: #000; box-shadow: 0 30px 60px rgb(0 0 0 / 45%), inset 0 0 0 1px rgb(255 255 255 / 4%); }
.story-frame__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-frame__screen::before { content: ""; position: absolute; inset: 0 0 auto; height: 34%; background: linear-gradient(180deg, rgb(0 0 0 / 55%), transparent); pointer-events: none; }
.story-frame__bars { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; }
.story-frame__bars i { position: relative; flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background: rgb(255 255 255 / 30%); }
.story-frame__bars i::before { content: ""; position: absolute; inset: 0; width: calc(var(--p, 0) * 100%); background: #fff; }
.story-frame__head { position: absolute; top: 24px; left: 14px; right: 14px; display: flex; align-items: center; gap: 8px; color: #fff; font: 500 12px/1 var(--font-sans); letter-spacing: -0.01em; }
.story-frame__avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; background: #5e4ac6; font: 600 13px/1 var(--font-sans); }
.story-frame__meta { margin-left: auto; color: rgb(255 255 255 / 65%); font-size: 11px; }
.story-frame__sound { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 50%; background: rgb(0 0 0 / 45%); color: #fff; cursor: pointer; backdrop-filter: blur(8px); transition: background 0.2s ease, transform 0.2s ease; }
.story-frame__sound:hover { background: rgb(0 0 0 / 65%); transform: scale(1.05); }
.story-frame__sound .story-frame__icon-on { display: none; }
.story-frame__sound[aria-pressed="true"] .story-frame__icon-on { display: block; }
.story-frame__sound[aria-pressed="true"] .story-frame__icon-off { display: none; }
.story-frame figcaption { margin-top: var(--space-3); font: 400 var(--fs-label)/var(--lh-label) var(--font-mono); text-transform: uppercase; color: var(--ink-3); text-align: center; }




/* How-it-works diagram (thin, Linear-like) */
.case-diagram { border-top: 1px solid var(--hairline); padding-top: var(--space-6); }
.case-diagram__figure { margin: 0; }
.dg { display: block; width: 100%; height: auto; font-family: var(--font-mono); }
.dg-frame rect { fill: rgb(255 255 255 / 1.5%); stroke: #2a2a2a; stroke-dasharray: 3 4; }
.dg-node rect { fill: #0e0e0f; stroke: #2c2c2c; }
.dg-node--accent rect { stroke: #3d3d3d; fill: #121213; }
.dg-node--host rect { fill: #0b0b0c; }
.dg-node { color: #8b8b8b; }
.dg-title { fill: #f2f2f2; font-size: 11px; letter-spacing: .08em; font-weight: 500; }
.dg-sub { fill: #6e6e6e; font-size: 10px; letter-spacing: .02em; }
.dg-label { fill: #6e6e6e; font-size: 10px; letter-spacing: .14em; }
.dg-note { fill: #7a7a7a; font-size: 10.5px; }
.dg-chip rect { fill: #151516; stroke: #2c2c2c; }
.dg-chip text { fill: #b8b8b8; font-size: 9.5px; letter-spacing: .1em; }
.dg-chip--soft rect { fill: transparent; }
.dg-chip--soft text { fill: #8b8b8b; }
.dg-chip { color: #b8b8b8; }
.dg-dots rect, .dg-dots-mark rect { fill: #9a9a9a; }
.dg-link path { fill: none; stroke: #3a3a3a; stroke-width: 1; }
.dg-link--dashed path { stroke-dasharray: 3 4; }
.dg-link .dg-flow { stroke: #cfd4ff; stroke-dasharray: 6 260; stroke-dashoffset: 266; animation: dg-flow 6s linear infinite; opacity: .55; }
.dg-link--dashed .dg-flow { animation-duration: 8s; animation-delay: 2s; }
.dg-link .dg-arrow { stroke: #4a4a4a; stroke-width: 1; fill: none; }
.dg-dot { fill: #4a4a4a; }
@keyframes dg-flow { to { stroke-dashoffset: -266; } }
@media (prefers-reduced-motion: reduce) { .dg-link .dg-flow { animation: none; opacity: 0; } }
.case-diagram figcaption { display: grid; grid-template-columns: minmax(140px, 1fr) 3fr; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-4); }
.case-diagram figcaption span { font: 400 var(--fs-label)/var(--lh-label) var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.case-diagram figcaption em { font-style: normal; max-width: 60ch; color: var(--ink-2); font-size: var(--fs-body); line-height: var(--lh-prose); }
@media (max-width: 720px) { .case-diagram figcaption { grid-template-columns: 1fr; } .dg { min-width: 760px; } .case-diagram__figure { overflow-x: auto; } }

/* Fintellect source-of-truth diagram */
.case-diagram--fintellect { border-top-color: #271c22; }
.dg--fintellect .dg-frame rect { fill: rgb(255 77 166 / 1.25%); stroke: #30242a; }
.dg--fintellect .dg-node rect { fill: #0e0b0d; stroke: #33252c; }
.dg--fintellect .dg-node--accent rect,
.dg--fintellect .dg-node--selected rect { fill: #171014; stroke: #85506b; }
.dg--fintellect .dg-node--selected .dg-sub { fill: #ba7899; }
.dg--fintellect .dg-node--bank { color: #7fb9a1; }
.dg--fintellect .dg-node--project { color: #9a8dcc; }
.dg--fintellect .dg-node--operator { color: #d38caf; }
.dg--fintellect .dg-node--currency { color: #c6a36e; }
.dg--fintellect .dg-node--forecast { color: #ad87cb; }
.dg--fintellect .dg-chip rect { fill: #130f11; stroke: #3a2932; }
.dg--fintellect .dg-chip--bank text { fill: #8fb4a4; }
.dg--fintellect .dg-chip--project text { fill: #a49ac8; }
.dg--fintellect .dg-chip--operator text { fill: #c58ba8; }
.dg--fintellect .dg-label { fill: #715a66; }
.dg--fintellect .dg-note { fill: #75616b; }
.dg--fintellect .dg-link path { stroke: #49353f; }
.dg--fintellect .dg-link .dg-flow { stroke: #f07caf; opacity: .56; }
.dg--fintellect .dg-arrow { stroke: #755164; }
.dg--fintellect .dg-dot { fill: #795568; }

.case-next { border-top: 1px solid var(--hairline); }
.case-next > p { display: flex; justify-content: space-between; padding: var(--space-3) 0; color: var(--ink-3); }
.case-next > a { display: flex; align-items: flex-end; justify-content: space-between; padding: var(--space-7) 0 var(--space-9); border-top: 1px solid var(--hairline); }
.case-next > a > span { display: flex; flex-direction: column; }
.case-next small { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ink-3); text-transform: uppercase; }
.case-next strong { margin-top: var(--space-4); font-size: clamp(42px, 7vw, 96px); line-height: 0.9; letter-spacing: -0.05em; }
.case-next em { margin-top: var(--space-4); font-size: var(--fs-body); line-height: var(--lh-body); font-style: normal; color: var(--ink-2); }
.case-next b { font-size: clamp(48px, 7vw, 96px); line-height: 0.8; font-weight: 500; transition: transform 0.25s ease; }
.case-next a:hover b { transform: translate(8px, -8px); }

.case-page > .case-next + .case-footer { margin-top: var(--space-11); }
.case-footer { padding-top: 0; }

@media (max-width: 1023px) {
  .case-page { --gutter: 28px; }
  .case-page > * + * { margin-top: var(--space-10); }
  .case-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 620px; }
  .case-hero__copy { padding: var(--space-4); }
  .case-story { grid-template-columns: 180px minmax(0, 1fr); }
  .case-story__body { padding-left: var(--space-5); }
  .case-story__prose { gap: var(--space-4); }
  .case-toc { grid-template-columns: 1fr repeat(5, auto); gap: var(--space-3); }
  .case-toc i { display: none; }
  .finance-ui { min-height: 520px; grid-template-columns: 120px 1fr; }
  .finance-ui__main { padding: 20px; }
  .finance-ui__bars { height: 120px; }
  .currency-flow { grid-template-columns: 1fr 50px 1fr 50px 1fr; }
}

@media (max-width: 767px) {
  .case-page { --gutter: 16px; }
  .case-page > * + * { margin-top: var(--space-9); }
  .casebar { min-height: 52px; grid-template-columns: 1fr auto; gap: var(--space-3); }
  .casebar p:first-of-type { display: none; }
  .case-hero { grid-template-columns: 1fr; min-height: 0; border-bottom: 1px solid var(--hairline); }
  .case-hero__copy { min-height: 570px; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .case-hero h1 { font-size: clamp(58px, 20vw, 84px); }
  .case-hero__lead { font-size: var(--fs-feature); line-height: var(--lh-feature); }
  .case-hero__media { aspect-ratio: 5 / 4; }
  .case-facts { grid-template-columns: repeat(2, 1fr); }
  .case-fact { min-height: 136px; padding: var(--space-3); border-bottom: 1px solid var(--hairline); }
  .case-fact:nth-child(2) { border-right: 0; }
  .case-fact:nth-child(n+3) { border-bottom: 0; }
  .case-fact dd { margin-top: var(--space-5); font-size: var(--fs-body); }
  .case-toc { position: static; display: flex; min-height: 48px; padding-inline: var(--space-3); gap: var(--space-4); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .case-toc::-webkit-scrollbar { display: none; }
  .case-toc > span { display: none; }
  .case-toc i { display: inline; }
  .case-page > .case-toc + .rule-dots { margin-top: var(--space-5); }
  .case-story { grid-template-columns: 1fr; scroll-margin-top: var(--space-4); }
  .case-story__aside { flex-direction: row; min-height: 0; padding: var(--space-3) 0; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .case-story--compact .case-story__aside { min-height: 0; }
  .case-story__body { padding: var(--space-5) 0 0; }
  .case-story__body h2,
  .case-outcome h2 { font-size: 38px; line-height: 1; }
  .case-story__prose { grid-template-columns: 1fr; margin-top: var(--space-6); }
  .case-story blockquote { margin-top: var(--space-7); font-size: var(--fs-lead); line-height: var(--lh-lead); }
  .case-principles { grid-template-columns: 1fr; margin-top: var(--space-7); }
  .case-principles article { min-height: 0; }
  .case-principles h3 { margin-top: var(--space-5); }
  .case-showcase { margin-inline: calc(var(--gutter) * -1); padding: var(--space-4) var(--space-3); border-inline: 0; }
  .case-caption { padding-inline: var(--space-1); }
  .case-caption span { flex: none; }
  .product-window { border-radius: 8px; }
  .product-window__chrome { grid-template-columns: 1fr 2fr 1fr; }
  .finance-ui { grid-template-columns: 56px minmax(430px, 1fr); min-height: 430px; }
  .finance-ui__side { padding: 12px 8px; }
  .finance-ui__nav span { overflow: hidden; text-indent: -999px; height: 28px; padding: 0; background: #ddd8d2; }
  .finance-ui__nav .is-active { background: #fff; }
  .finance-ui__profile { display: none; }
  .finance-ui__main { padding: 16px; }
  .finance-ui__chart { display: none; }
  .finance-ui__table { margin-top: 12px; }
  .currency-board { padding: var(--space-3); overflow: hidden; }
  .currency-flow { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-6) 0; }
  .currency-flow__path { width: 1px; height: 30px; margin: 0 auto; }
  .currency-flow__path::after { content: "⌄"; left: -6px; top: 20px; }
  .currency-flow__path span { left: 18px; top: 8px; transform: none; }
  .currency-ledger { grid-template-columns: 1fr; }
  .campaign-archive { margin-inline: calc(var(--gutter) * -1); border-inline: 0; }
  .campaign-archive__meta { grid-template-columns: 1fr auto; min-height: 0; padding: var(--space-3); }
  .campaign-archive__meta p { grid-column: 1 / -1; grid-row: 2; }
  .campaign-archive__meta span { grid-column: 2; grid-row: 1; }
  .campaign-rail { grid-auto-columns: minmax(220px, 76vw); padding: var(--space-3); }
  .case-credentials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-credential { min-height: 158px; padding: var(--space-3); }
  .case-credential p { margin-top: var(--space-5); }
  .case-press { margin-top: var(--space-6); }
  .case-press__label { padding-inline: var(--space-3); }
  .case-press a {
    grid-template-columns: 88px minmax(0, 1fr) 30px;
    gap: var(--space-3);
    min-height: 60px;
    padding: 0 var(--space-3);
  }
  .case-press a > strong { font-size: 15px; }
  .case-press a > small { gap: 0; font-size: 0; }
  .case-press a > small b { width: 28px; height: 28px; font-size: 13px; }
  .case-outcome { grid-template-columns: 1fr; padding: var(--space-8) 0; }
  .case-outcome--clip { row-gap: var(--space-7); }
  .story-frame { width: min(260px, 100%); justify-self: center; }
  .case-outcome .case-kicker { grid-row: auto; }
  .case-outcome h2 { margin-top: var(--space-4); }
  .case-next strong { font-size: 44px; }
  .case-next em { max-width: 28ch; }
  .case-page > .case-next + .case-footer { margin-top: var(--space-9); }
}

/* Case study v2: quieter metadata, side index and stronger visual rhythm. */

.casebar { grid-template-columns: 1fr auto; }

.case-layout {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.case-layout .case-toc {
  position: sticky;
  top: var(--space-4);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.case-layout .case-toc a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  justify-items: start;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  color: var(--ink-3);
}

.case-layout .case-toc a:first-child { border-top: 1px solid var(--hairline); }
.case-layout .case-toc a:hover { color: var(--ink); }
.case-layout .case-toc i { display: inline; margin: 0; color: #444; }

.case-stream { min-width: 0; }
.case-stream > * + * { margin-top: var(--space-11); }
.case-stream > .rule-dots { margin-top: 0; }
.case-stream > .rule-dots + .case-proof { margin-top: var(--space-5); }
.case-stream > .rule-dots + .case-story { margin-top: var(--space-8); }

.case-stream .case-story {
  display: block;
  scroll-margin-top: var(--space-4);
}

.case-stream .case-story__body { padding: var(--space-4) 0 0; }

.case-stream .case-story__body h2 {
  max-width: 15ch;
  margin-top: 0;
}

.case-stream .case-story__prose { margin-top: var(--space-7); }

.case-stream .case-outcome {
  display: block;
  padding: var(--space-10) 0;
}

.case-stream .case-outcome h2 { max-width: 15ch; }
.case-stream .case-outcome > p:last-child { max-width: 46ch; margin-top: var(--space-7); }
.case-stream .case-outcome--clip { display: grid; }
.case-stream .case-outcome--clip .case-outcome__text > p { max-width: 46ch; }

/* Real interface exports from the product files. */
.case-showcase--real {
  padding: clamp(24px, 4.5vw, 72px);
  background: radial-gradient(circle at 50% 16%, #1a1a1a 0, #0d0d0d 38%, #070707 76%);
}

.case-showcase--real::before,
.case-showcase--map::before { display: none; }

.product-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(24px, 3vw, 48px);
  border: 1px solid var(--hairline);
  background: #080808;
}

.product-shot {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.product-shot__viewport {
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: clamp(11px, 1.2vw, 17px);
  background: #e8e7e6;
  box-shadow: 0 24px 64px rgb(0 0 0 / 42%), 0 0 0 1px rgb(255 255 255 / 3%);
}
.product-shot__viewport img { display: block; width: 100%; height: auto; }
.product-shot__viewport--crop { aspect-ratio: 5 / 3; }
.product-shot__viewport--crop img { height: 100%; object-fit: cover; object-position: center top; }

.product-shot figcaption {
  display: block;
  min-height: 0;
  padding: 14px 2px 0;
}

.product-shot figcaption span {
  font: 400 var(--fs-label)/var(--lh-label) var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

.product-shot figcaption em {
  display: block;
  max-width: 48ch;
  margin-top: 6px;
  font-size: var(--fs-label);
  line-height: var(--lh-prose);
  font-style: normal;
  color: var(--ink-3);
  text-align: left;
}

/* Fintellect product scenes rebuilt from the original Figma frames. */
.product-gallery--ui {
  grid-template-columns: 1fr;
  gap: clamp(48px, 7vw, 96px);
}

.product-shot--ui { max-width: 100%; }

.fui-scene {
  --fui-ink: #2f2f31;
  --fui-muted: #858589;
  --fui-line: rgb(47 47 49 / 10%);
  --fui-panel: rgb(255 255 255 / 66%);
  --fui-white: #fff;
  --fui-red: #c62828;
  --fui-green: #2a9366;
  --fui-coral: #f0934f;
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: clamp(12px, 1.3vw, 18px);
  color: var(--fui-ink);
  background:
    radial-gradient(circle at 12% 8%, rgb(255 255 255 / 54%), transparent 31%),
    linear-gradient(132deg, #eeeeec 0%, #d8d8d7 52%, #c9c9ca 100%);
  box-shadow: 0 30px 80px rgb(0 0 0 / 45%), inset 0 1px rgb(255 255 255 / 80%);
  font: 400 12px/1.35 var(--font-sans);
  isolation: isolate;
}

.fui-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.22;
  background-image: radial-gradient(rgb(47 47 49 / 20%) 0.7px, transparent 0.7px);
  background-size: 7px 7px;
  mask-image: linear-gradient(115deg, #000, transparent 42%);
}

.fui-scene *,
.fui-scene *::before,
.fui-scene *::after { box-sizing: border-box; }
.fui-scene h3,
.fui-scene p,
.fui-scene dl,
.fui-scene dd,
.fui-scene ul { margin: 0; }
.fui-scene button {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}
.fui-scene img { display: block; width: 16px; height: 16px; object-fit: contain; }
.fui-scene .is-red { color: var(--fui-red); }
.fui-scene .is-green { color: var(--fui-green); }

.fui-topbar {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) auto;
  align-items: center;
  height: 54px;
  padding: 0 18px;
  border-bottom: 1px solid var(--fui-line);
  background: rgb(245 245 243 / 78%);
  backdrop-filter: blur(18px);
}

.fui-brand,
.fui-breadcrumb,
.fui-tabs,
.fui-period { display: flex; align-items: center; }
.fui-brand { gap: 9px; font-size: 13px; font-weight: 600; }
.fui-brand b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid var(--fui-ink);
  border-radius: 50%;
  font-size: 12px;
}
.fui-breadcrumb { gap: 9px; color: var(--fui-muted); }
.fui-breadcrumb i { color: #b5b5b6; font-style: normal; }
.fui-breadcrumb strong { color: var(--fui-ink); font-weight: 500; }
.fui-avatar {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: white;
  background: #41364b;
  font-size: 9px;
  font-weight: 600;
}

.fui-workspace { display: grid; grid-template-columns: 176px minmax(0, 1fr); min-height: 660px; }
.fui-sidebar {
  padding: 20px 12px;
  border-right: 1px solid var(--fui-line);
  background: rgb(255 255 255 / 16%);
}
.fui-sidebar p {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: #77777b;
  font-size: 11px;
}
.fui-sidebar p + p { margin-top: 3px; }
.fui-sidebar p span { font: 400 8px/1 var(--font-mono); color: #a4a4a6; }
.fui-sidebar p.is-active {
  color: var(--fui-ink);
  background: rgb(255 255 255 / 70%);
  box-shadow: 0 7px 18px rgb(55 55 55 / 6%);
  font-weight: 500;
}

.fui-main { min-width: 0; padding: 20px 22px 34px; }
.fui-screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
}
.fui-tabs { gap: 4px; padding: 3px; border-radius: 9px; background: rgb(255 255 255 / 40%); }
.fui-tabs > * { padding: 6px 10px; border-radius: 6px; font-size: 10px; }
.fui-tabs b { background: white; box-shadow: 0 3px 10px rgb(0 0 0 / 7%); font-weight: 500; }
.fui-tabs span { color: var(--fui-muted); }
.fui-period { gap: 9px; }
.fui-period button {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid var(--fui-line);
  border-radius: 8px;
  background: rgb(255 255 255 / 46%);
}
.fui-period strong { min-width: 88px; text-align: center; font-size: 10px; font-weight: 500; }

.fui-forecast { margin-top: 18px; }
.fui-forecast__meta,
.fui-plan-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fui-muted);
  font-size: 9px;
}
.fui-forecast__meta b { padding: 3px 6px; border-radius: 5px; color: var(--fui-coral); background: rgb(240 147 79 / 12%); font-weight: 500; }
.fui-forecast__meta button { margin-left: auto; color: var(--fui-ink); }
.fui-widget-row { display: grid; grid-template-columns: 1.34fr repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.fui-widget,
.fui-budget-card,
.fui-team-card,
.fui-wallet-table,
.fui-project-metrics article,
.fui-balance article {
  border: 1px solid rgb(255 255 255 / 70%);
  background: var(--fui-panel);
  box-shadow: 0 12px 34px rgb(61 61 63 / 8%), inset 0 1px rgb(255 255 255 / 70%);
  backdrop-filter: blur(16px);
}
.fui-widget { min-height: 102px; padding: 13px; border-radius: 12px; }
.fui-widget > header,
.fui-project-metrics header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--fui-line);
  color: #66666a;
  font-size: 9px;
}
.fui-widget > div { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 10px; }
.fui-widget p strong,
.fui-widget p small { display: block; }
.fui-widget p strong { font-size: 15px; line-height: 1; font-weight: 500; letter-spacing: -0.025em; }
.fui-widget p small { margin-top: 6px; color: var(--fui-muted); font-size: 8px; }
.fui-widget em { font-style: normal; color: var(--fui-muted); font-size: 9px; }
.fui-widget--forecast > div { align-items: stretch; }
.fui-widget--forecast ul { display: grid; gap: 5px; min-width: 110px; padding: 0; list-style: none; }
.fui-widget--forecast li { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; }
.fui-widget--forecast li span { color: var(--fui-muted); font-size: 7px; }
.fui-widget--danger { background: rgb(198 40 40 / 6%); border-color: rgb(198 40 40 / 15%); }

.fui-plan-tools { margin-top: 18px; }
.fui-plan-tools button { flex: 1; max-width: 190px; margin-left: auto; padding: 7px 9px; border: 1px solid var(--fui-line); border-radius: 7px; text-align: left; color: #a1a1a4; background: rgb(255 255 255 / 32%); }
.fui-plan-tools b { padding: 7px 9px; border: 1px solid var(--fui-line); border-radius: 7px; color: #68686c; font-weight: 400; background: rgb(255 255 255 / 32%); }

.fui-budget-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.fui-budget-card { min-width: 0; overflow: hidden; border-radius: 14px; }
.fui-budget-card > header,
.fui-team-card > header,
.fui-wallet-table > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--fui-line);
}
.fui-budget-card > header p,
.fui-team-card > header div,
.fui-wallet-table > header div {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
}
.fui-budget-card > header strong { display: block; margin-top: 7px; font-size: 17px; line-height: 1; font-weight: 500; }
.fui-budget-card > header button,
.fui-team-card > header button,
.fui-wallet-table > header button,
.fui-project-metrics header button {
  padding: 6px 8px;
  border-radius: 7px;
  color: var(--fui-ink);
  background: rgb(255 255 255 / 82%);
  box-shadow: 0 3px 10px rgb(0 0 0 / 6%);
  font-size: 8px;
}
.fui-progress { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 14px 12px; color: var(--fui-muted); font-size: 8px; }
.fui-progress span + span { text-align: right; }
.fui-progress i { grid-column: 1 / -1; height: 3px; margin-top: 7px; border-radius: 2px; overflow: hidden; background: #d0d0d1; }
.fui-progress b { display: block; width: 28%; height: 100%; border-radius: inherit; background: var(--fui-red); }
.fui-budget-card--income .fui-progress b { width: 52%; background: var(--fui-green); }

.fui-table-head,
.fui-table-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 0.8fr 0.72fr; align-items: center; gap: 8px; min-height: 33px; padding: 0 14px; border-top: 1px solid var(--fui-line); }
.fui-table-head { min-height: 26px; color: #9a9a9d; font-size: 7px; }
.fui-table-head span:last-child,
.fui-table-row > b { text-align: right; }
.fui-table-row { font-size: 8px; }
.fui-table-row--group { min-height: 37px; background: rgb(255 255 255 / 28%); }
.fui-table-row--group strong { font-weight: 500; }
.fui-table-row > b { font-weight: 500; }
.fui-chip { justify-self: start; padding: 3px 5px; border-radius: 5px; color: #77777a; background: rgb(47 47 49 / 6%); font-size: 7px; }
.fui-chip--paid { color: var(--fui-green); background: rgb(42 147 102 / 9%); }
.fui-chip--pending { color: #b2672d; background: rgb(240 147 79 / 14%); }
.fui-chip--neutral { color: #66666a; background: rgb(47 47 49 / 7%); }

.fui-relation {
  position: absolute;
  z-index: 5;
  right: 20px;
  bottom: 18px;
  width: min(390px, calc(100% - 236px));
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 14px;
  background: rgb(246 246 244 / 88%);
  box-shadow: 0 24px 56px rgb(43 43 45 / 24%);
  backdrop-filter: blur(22px);
}
.fui-relation > header { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-bottom: 1px solid var(--fui-line); font-size: 9px; font-weight: 500; }
.fui-relation > header button { margin-left: auto; color: #89898c; font-size: 14px; }
.fui-relation__body { display: grid; grid-template-columns: 0.78fr 1.22fr; }
.fui-relation dl { padding: 11px; border-right: 1px solid var(--fui-line); }
.fui-relation dl div { display: grid; grid-template-columns: 55px minmax(0, 1fr); gap: 5px; padding: 5px 0; font-size: 8px; }
.fui-relation dt { color: #97979a; }
.fui-relation dd { font-weight: 500; }
.fui-relation__match { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 10px; background: var(--fui-line); }
.fui-relation__match p { padding: 7px; background: rgb(255 255 255 / 62%); }
.fui-relation__match small,
.fui-relation__match strong { display: block; }
.fui-relation__match small { color: #97979a; font-size: 7px; }
.fui-relation__match strong { margin-top: 4px; font-size: 9px; font-weight: 500; }
.fui-relation__match footer { grid-column: 1 / -1; display: flex; gap: 5px; padding-top: 5px; background: transparent; }
.fui-relation__match footer > * { padding: 4px 6px; border-radius: 5px; color: var(--fui-green); background: rgb(42 147 102 / 10%); font-size: 7px; font-weight: 500; }

.fui-scene--project,
.fui-scene--wallets { padding: clamp(18px, 2.6vw, 38px); }
.fui-module-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: clamp(22px, 3vw, 38px); }
.fui-module-head > div:first-child > span { color: var(--fui-muted); font-size: 9px; }
.fui-module-head h3 { margin-top: 6px; font-size: clamp(25px, 3.2vw, 44px); line-height: 0.95; letter-spacing: -0.045em; font-weight: 500; }
.fui-project-layout,
.fui-wallet-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(230px, 0.56fr); gap: clamp(14px, 2.2vw, 28px); align-items: stretch; }
.fui-team-card,
.fui-wallet-table { min-width: 0; overflow: hidden; border-radius: 16px; }
.fui-team-card > header,
.fui-wallet-table > header { min-height: 70px; }
.fui-team-card > header > b { font-size: 16px; font-weight: 500; }
.fui-team-row { display: grid; grid-template-columns: 0.9fr 1.4fr repeat(3, 0.85fr); align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border-top: 1px solid var(--fui-line); font-size: 9px; }
.fui-team-row--head { min-height: 30px; color: #949498; font-size: 7px; }
.fui-team-row > b,
.fui-team-row > strong { font-weight: 500; }
.fui-team-row > :nth-child(n+3) { text-align: right; }
.fui-project-strip { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 16px; border-top: 1px solid var(--fui-line); color: #6f6f73; font-size: 9px; }
.fui-project-strip strong { color: var(--fui-ink); font-weight: 500; }

.fui-project-metrics { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fui-project-metrics article { position: relative; min-height: 116px; padding: 14px; border-radius: 14px; }
.fui-project-metrics article > strong { display: block; margin-top: 17px; font-size: clamp(20px, 2.5vw, 32px); line-height: 1; letter-spacing: -0.035em; font-weight: 500; }
.fui-project-metrics header button { margin-left: auto; }
.fui-project-metrics p { margin-top: 10px; color: #76767a; font-size: 8px; }
.fui-project-metrics p b { display: inline-grid; place-items: center; min-width: 36px; height: 18px; margin-right: 4px; border-radius: 5px; color: var(--fui-green); background: rgb(42 147 102 / 9%); }
.fui-project-metrics p.is-coral b { color: #b76126; background: rgb(240 147 79 / 16%); }
.fui-project-metrics article > span { position: absolute; right: 12px; bottom: 12px; padding: 3px 5px; border-radius: 4px; color: #9a9a9c; background: rgb(47 47 49 / 5%); font-size: 7px; }
.fui-project-metrics article.is-green { color: white; border-color: #23835b; background: linear-gradient(145deg, #2fa572, #247b58); }
.fui-project-metrics article.is-green header { color: rgb(255 255 255 / 70%); border-color: rgb(255 255 255 / 18%); }
.fui-project-metrics article.is-green img { filter: brightness(0) invert(1); }

.fui-wallet-table > header > span { color: var(--fui-muted); font-size: 8px; }
.fui-wallet-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(2, minmax(100px, 0.8fr)) 72px; align-items: center; gap: 12px; min-height: 58px; padding: 0 16px; border-top: 1px solid var(--fui-line); font-size: 9px; }
.fui-wallet-row--head { min-height: 31px; color: #96969a; font-size: 7px; }
.fui-wallet-row > strong { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.fui-wallet-row > b { font-weight: 500; }
.fui-wallet-row > span { color: #77777a; }
.fui-wallet-row > span i { display: inline-grid; place-items: center; width: 27px; height: 20px; margin-right: 5px; border-radius: 5px; font: 400 7px/1 var(--font-mono); font-style: normal; color: #626266; background: rgb(47 47 49 / 6%); }
.fui-wallet-row > button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; border: 1px solid var(--fui-line); border-radius: 7px; background: rgb(255 255 255 / 42%); font-size: 8px; }
.fui-wallet-row > button img { width: 12px; height: 12px; }
.fui-wallet-table > footer { display: flex; justify-content: space-between; min-height: 48px; padding: 16px; border-top: 1px solid var(--fui-line); color: #77777a; font-size: 9px; }
.fui-wallet-table > footer b { color: var(--fui-ink); font-weight: 500; }

.fui-balance { display: flex; flex-direction: column; gap: 10px; }
.fui-balance article { padding: 15px; border-radius: 14px; }
.fui-balance article span,
.fui-balance article small,
.fui-balance article strong { display: block; }
.fui-balance article span { color: #77777a; font-size: 8px; }
.fui-balance article strong { margin-top: 12px; font-size: clamp(20px, 2.5vw, 32px); line-height: 1; letter-spacing: -0.035em; font-weight: 500; }
.fui-balance article small { margin-top: 8px; color: #99999c; font-size: 7px; }
.fui-balance__total { color: white; border-color: #28282a !important; background: linear-gradient(145deg, #414145, #2f2f31) !important; }
.fui-balance__total span { color: rgb(255 255 255 / 60%) !important; }
.fui-balance > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fui-balance > div article { min-width: 0; }
.fui-balance > div article strong { font-size: 18px; }
.fui-balance > div article.is-red { color: var(--fui-red); }
.fui-balance__after { margin-top: auto; color: white; border-color: #24835c !important; background: linear-gradient(145deg, #31a775, #257e59) !important; }
.fui-balance__after span { color: rgb(255 255 255 / 65%) !important; }

/* Three partial views create a product walkthrough before real Figma
   exports replace them. */
.product-crops {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  grid-template-rows: repeat(2, minmax(260px, auto));
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--hairline);
  background:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px),
    #080808;
  background-size: 32px 32px;
}

.product-crop {
  min-width: 0;
  padding: clamp(18px, 2.4vw, 34px);
  border: 1px solid #dedad6;
  border-radius: 10px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  color: #171717;
  background: #f4f2ef;
  box-shadow: 0 24px 60px rgb(0 0 0 / 35%);
}

.product-crop--project { grid-row: 1 / 3; }
.product-crop > header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.product-crop > header small { color: #888; }
.product-crop > header button { padding: 8px 10px; border: 1px solid #d5d1cc; border-radius: 6px; font: 10px Arial, sans-serif; color: #555; background: #fff; }

.product-crop__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: var(--space-7); }
.product-crop__metrics p { padding: 14px; border: 1px solid #dedad6; border-radius: 8px; background: #fff; }
.product-crop__metrics small { display: block; font-size: 9px; color: #888; }
.product-crop__metrics strong { display: block; margin-top: var(--space-3); font-size: clamp(18px, 2vw, 28px); }

.product-crop__curve {
  display: flex;
  align-items: flex-end;
  gap: 6%;
  height: 310px;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid #dedad6;
  border-radius: 8px;
  background: repeating-linear-gradient(to bottom, #e8e5e1 0 1px, transparent 1px 52px), #fff;
}

.product-crop__curve i { flex: 1; height: 30%; border-radius: 4px 4px 0 0; background: #252525; }
.product-crop__curve i:nth-child(2) { height: 43%; }
.product-crop__curve i:nth-child(3) { height: 38%; }
.product-crop__curve i:nth-child(4) { height: 59%; }
.product-crop__curve i:nth-child(5) { height: 66%; }
.product-crop__curve i:nth-child(6) { height: 61%; }
.product-crop__curve i:nth-child(7) { height: 82%; background: var(--case-pink); }

.product-crop__people { margin-top: var(--space-6); }
.product-crop__people p { display: grid; grid-template-columns: 28px 1fr 1.3fr 30px; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid #dedad6; font-size: 10px; }
.product-crop__people b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 8px; color: #fff; background: #222; }
.product-crop__people i { height: 5px; border-radius: 5px; overflow: hidden; background: #dfdbd6; }
.product-crop__people em { display: block; height: 100%; border-radius: inherit; background: var(--case-pink); }

.product-crop__balance { display: block; margin-top: var(--space-5); font-size: clamp(26px, 3vw, 42px); letter-spacing: -0.04em; }
.product-crop__accounts { margin-top: var(--space-4); }
.product-crop__accounts p { display: flex; justify-content: space-between; gap: var(--space-3); padding: 9px 0; border-bottom: 1px solid #dedad6; font-size: 10px; }
.product-crop__accounts span { color: #777; }

/* System logic: quiet nodes and explicit relationships, inspired by Linear's diagrams. */
.case-showcase--map {
  padding: clamp(28px, 4vw, 64px);
  border-color: rgb(255 255 255 / 5%);
  background: radial-gradient(circle at 58% 44%, #111 0, #070707 48%, #050505 80%);
}
.logic-map { max-width: 1160px; margin: 0 auto; }
.logic-map__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); padding-bottom: var(--space-5); }
.logic-map__header span { font: 400 var(--fs-label)/var(--lh-label) var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.logic-map__header p { max-width: 34ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); text-align: right; }
.logic-map__canvas { position: relative; height: 620px; }
.logic-map__wires { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; }
.logic-map__wires path { fill: none; stroke: #34363b; stroke-width: 1.35; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; animation: logic-current 12s linear infinite; transition: stroke 0.25s ease, stroke-width 0.25s ease; }
.logic-map__wires .wire--bank { stroke: #405c50; }
.logic-map__wires .wire--projects { animation-delay: -3s; }
.logic-map__wires .wire--margin { animation-delay: -5s; }
.logic-map__wires .wire--people { animation-delay: -7s; }
.logic-map__wires .wire--forecast { animation-delay: -9s; }
.logic-map__ports circle { fill: #696d75; transition: fill 0.25s ease; }

@keyframes logic-current { to { stroke-dashoffset: -90; } }

.logic-stage { position: absolute; top: 0; z-index: 1; font: 400 9px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #555960; }
.logic-stage--connect { left: 0; }
.logic-stage--model { left: 39%; }
.logic-stage--decide { left: 78%; }

.logic-source,
.logic-engine,
.logic-result { position: absolute; z-index: 1; margin: 0; border: 1px solid #2a2c30; background: linear-gradient(145deg, rgb(255 255 255 / 2.6%), transparent 48%), #101113; box-shadow: 0 18px 52px rgb(0 0 0 / 26%); transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; }

.logic-source:hover,
.logic-result:hover { border-color: #4b4e55; background-color: #131417; transform: translateY(-3px); }

.logic-glyph { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 1px solid #303238; border-radius: 12px; color: #888d96; background: #151619; }
.logic-glyph svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.logic-source { left: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; width: 22%; min-height: 146px; padding: 16px; border-radius: 17px; }
.logic-source--bank { top: 116px; border-color: #314239; }
.logic-source--projects { top: 356px; }
.logic-source span,
.logic-result span { display: block; font: 400 8px/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #686c74; }
.logic-source h3,
.logic-result h3 { margin-top: 8px; font-size: 17px; line-height: 1.05; font-weight: 500; color: var(--ink); }
.logic-source ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0 0; padding: 0; list-style: none; }
.logic-source li { padding: 5px 7px; border: 1px solid #292b2f; border-radius: 999px; font: 400 8px/1 var(--font-mono); color: #7a7e86; background: #151619; }

.logic-engine { left: 39%; top: 70px; width: 29%; overflow: hidden; border-color: #573447; border-radius: 20px; background: radial-gradient(circle at 50% 0, rgb(245 43 157 / 10%), transparent 40%), #111113; box-shadow: 0 24px 80px rgb(0 0 0 / 34%), 0 0 0 1px rgb(245 43 157 / 4%); }
.logic-engine > header { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 86px; padding: 14px; border-bottom: 1px solid #2c2d31; }
.logic-engine .logic-glyph { width: 44px; height: 44px; border-color: #573447; color: #d7599f; background: rgb(245 43 157 / 6%); }
.logic-engine .logic-glyph svg { width: 30px; height: 30px; }
.logic-engine header span { display: block; font: 400 8px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #8d5675; }
.logic-engine header h3 { margin-top: 6px; font-size: 16px; line-height: 1; }
.logic-engine header em { display: flex; align-items: center; gap: 6px; font: 400 8px/1 var(--font-mono); font-style: normal; text-transform: uppercase; color: #7a7d84; }
.logic-engine header em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--case-pink); box-shadow: 0 0 12px rgb(245 43 157 / 70%); }
.logic-engine__streams p { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 66px; padding: 10px 14px; border-bottom: 1px solid #28292d; }
.logic-engine__streams p.is-active { box-shadow: inset 2px 0 var(--case-pink); background: linear-gradient(90deg, rgb(245 43 157 / 8%), transparent 72%); }
.logic-engine__streams i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #303238; border-radius: 7px; font: 400 8px/1 var(--font-mono); font-style: normal; color: #686c74; }
.logic-engine__streams strong,
.logic-engine__streams small { display: block; }
.logic-engine__streams strong { font-size: 11px; font-weight: 500; color: var(--ink-2); }
.logic-engine__streams small { margin-top: 3px; font-size: 9px; color: #62666d; }
.logic-engine__cost { padding: 13px 14px 15px; background: #0c0c0e; }
.logic-engine__cost > span { display: block; margin-bottom: 9px; font: 400 8px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #666970; }
.logic-engine__cost > div { display: grid; grid-template-columns: 1fr auto 1fr auto 1.25fr; gap: 5px; align-items: center; }
.logic-engine__cost p { display: grid; place-items: center; min-height: 34px; padding: 5px; border: 1px solid #2a2b2f; border-radius: 8px; text-align: center; font: 400 8px/1.1 var(--font-mono); color: #777b82; }
.logic-engine__cost p.is-result { border-color: #513346; color: #bf759f; background: rgb(245 43 157 / 5%); }
.logic-engine__cost b { font: 400 10px/1 var(--font-mono); color: #484b51; }

.logic-result { left: 78%; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; width: 22%; min-height: 122px; padding: 15px; border-radius: 17px; }
.logic-result--margin { top: 78px; }
.logic-result--people { top: 248px; }
.logic-result--forecast { top: 418px; }
.logic-result p { margin-top: 7px; font-size: 9px; line-height: 1.35; color: #72767e; }
.logic-result--margin .logic-glyph { color: #a98b56; }
.logic-result--people .logic-glyph { color: #8b78ad; }
.logic-result--forecast .logic-glyph { color: #628d85; }

.logic-map__canvas:has(.logic-source--bank:hover) .wire--bank,
.logic-map__canvas:has(.logic-source--projects:hover) .wire--projects,
.logic-map__canvas:has(.logic-result--margin:hover) .wire--margin,
.logic-map__canvas:has(.logic-result--people:hover) .wire--people,
.logic-map__canvas:has(.logic-result--forecast:hover) .wire--forecast { stroke: var(--case-pink); stroke-width: 2; }

/* Other work appears as a browsable set, not a single forced next step. */
.more-cases { border-top: 1px solid var(--hairline); }
.more-cases > h2 { padding: var(--space-5) 0; font-size: var(--fs-title); line-height: var(--lh-title); }
.more-cases__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.more-case { position: relative; min-width: 0; padding: clamp(18px, 2vw, 28px); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); overflow: hidden; }
.more-case img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; filter: saturate(0.72) brightness(0.82); transition: filter 0.3s ease, transform 0.5s ease; }
.more-case:hover img { filter: saturate(1) brightness(0.95); transform: scale(1.015); }
.more-case > span { display: block; padding: var(--space-3) 2px 2px; }
.more-case strong { display: block; font-size: var(--fs-body); line-height: var(--lh-body); }
.more-case em { display: block; margin-top: 4px; font-size: var(--fs-label); line-height: var(--lh-label); font-style: normal; color: var(--ink-3); text-align: left; }

@media (max-width: 1023px) {
  .case-layout { grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-4); }
  .case-layout .case-toc a { grid-template-columns: 22px minmax(0, 1fr); font-size: 10px; }
  .case-stream > * + * { margin-top: var(--space-10); }
  .fui-topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .fui-breadcrumb { display: none; }
  .fui-workspace { grid-template-columns: minmax(0, 1fr); min-height: 630px; }
  .fui-sidebar { display: none; }
  .fui-relation { width: min(390px, calc(100% - 40px)); }
  .fui-project-layout,
  .fui-wallet-layout { grid-template-columns: minmax(0, 1fr); }
  .fui-project-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
  .fui-balance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fui-balance > div { display: contents; }
  .fui-balance__after { margin-top: 0; }
  .product-crops { grid-template-columns: 1fr; grid-template-rows: auto; }
  .product-crop--project { grid-row: auto; }
}

@media (max-width: 767px) {
  .case-layout { display: block; }
  .case-layout .case-toc {
    position: sticky;
    top: 0;
    z-index: 10;
    flex-direction: row;
    gap: var(--space-4);
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    overflow-x: auto;
    white-space: nowrap;
    background: rgb(0 0 0 / 90%);
    backdrop-filter: blur(14px);
  }
  .case-layout .case-toc a,
  .case-layout .case-toc a:first-child { display: block; flex: none; border: 0; padding: var(--space-3) 0; }
  .case-layout .case-toc i { margin-right: var(--space-1); }
  .case-stream { margin-top: var(--space-7); }
  .case-stream > * + * { margin-top: var(--space-9); }
  .case-stream .case-story__prose { margin-top: var(--space-6); }
  .product-crops { margin-inline: calc(var(--gutter) * -1); padding: var(--space-2); border-inline: 0; }
  .case-showcase--real,
  .product-gallery { margin-inline: calc(var(--gutter) * -1); padding: var(--space-2); border-inline: 0; }
  .product-gallery { grid-template-columns: 1fr; }
  .product-shot figcaption { display: block; }
  .product-shot figcaption em { display: block; margin-top: var(--space-2); text-align: left; }
  .product-gallery--ui { gap: var(--space-9); }
  .fui-scene { border-radius: 10px; }
  .fui-topbar { height: 46px; padding: 0 12px; }
  .fui-main { padding: 14px 12px 18px; }
  .fui-workspace { min-height: 0; }
  .fui-screen-head { align-items: flex-start; gap: 10px; }
  .fui-period { gap: 4px; }
  .fui-period button { width: 24px; height: 24px; }
  .fui-period strong { min-width: 72px; font-size: 8px; }
  .fui-widget-row { grid-template-columns: 1fr 1fr; }
  .fui-widget--forecast { grid-column: 1 / -1; }
  .fui-plan-tools b { display: none; }
  .fui-plan-tools button { max-width: none; }
  .fui-budget-grid { grid-template-columns: 1fr; }
  .fui-relation { position: relative; right: auto; bottom: auto; width: auto; margin: 12px; }
  .fui-relation__body { grid-template-columns: 1fr; }
  .fui-relation dl { border-right: 0; border-bottom: 1px solid var(--fui-line); }
  .fui-scene--project,
  .fui-scene--wallets { padding: 16px 12px; }
  .fui-module-head { align-items: center; padding-bottom: 18px; }
  .fui-module-head h3 { font-size: 28px; }
  .fui-team-card,
  .fui-wallet-table { overflow-x: auto; }
  .fui-team-card > header,
  .fui-team-table,
  .fui-project-strip { min-width: 660px; }
  .fui-wallet-table > header,
  .fui-wallet-row,
  .fui-wallet-table > footer { min-width: 680px; }
  .fui-project-metrics,
  .fui-balance { grid-template-columns: 1fr; }
  .fui-project-metrics article { min-height: 112px; }
  .fui-balance > div { display: grid; grid-template-columns: 1fr 1fr; }
  .fui-balance__after { margin-top: 0; }
  .product-crop__metrics { grid-template-columns: 1fr; }
  .product-crop__curve { height: 220px; }
  .logic-map__header { display: block; }
  .logic-map__header p { margin-top: var(--space-3); text-align: left; }
  .logic-map__canvas { display: grid; grid-template-columns: 1fr; gap: var(--space-3); height: auto; padding-left: var(--space-4); }
  .logic-map__canvas::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 18px; width: 1px; background: #303238; }
  .logic-map__wires { display: none; }
  .logic-stage { display: none; }
  .logic-source,
  .logic-engine,
  .logic-result { position: relative; inset: auto; width: auto; }
  .logic-source::before,
  .logic-engine::before,
  .logic-result::before { content: ""; position: absolute; left: calc(var(--space-4) * -1 - 3px); top: 22px; width: 7px; height: 7px; border-radius: 50%; background: #60646b; }
  .logic-source { grid-template-columns: 44px minmax(0, 1fr); min-height: 0; }
  .logic-source .logic-glyph,
  .logic-result .logic-glyph { width: 44px; height: 44px; }
  .logic-source .logic-glyph svg,
  .logic-result .logic-glyph svg { width: 29px; height: 29px; }
  .logic-engine { margin-block: var(--space-3); }
  .logic-result { grid-template-columns: 44px minmax(0, 1fr); min-height: 108px; }
  .more-cases__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 78vw); overflow-x: auto; scroll-snap-type: x mandatory; }
  .more-case { scroll-snap-align: start; }
}

/* Branchline case ------------------------------------------------------ */

.case-page--branchline {
  --case-pink: #8aa99a;
  --case-pink-dark: #102018;
}

.case-page--branchline .case-hero__copy {
  background-image:
    linear-gradient(180deg, transparent 58%, var(--bg) 96%),
    radial-gradient(circle at 1px 1px, #2a2a2a 1px, transparent 0);
  background-size: 100% 100%, 18px 18px;
  background-repeat: no-repeat, repeat;
}

.case-page--branchline .case-hero__media { background: #edf0ed; }
.case-page--branchline .case-hero__media img {
  object-fit: cover;
  object-position: 42% center;
  filter: saturate(0.78) contrast(1.03);
  transform: scale(1.035);
}

.branch-screen { padding: var(--space-4); background: #e9ece9; }
.branch-screen::before { display: none; }
.branch-screen img { position: relative; width: 100%; border: 1px solid #cfd4d0; box-shadow: 0 28px 70px rgb(0 0 0 / 22%); }

.branch-receipts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.branch-receipts article { position: relative; min-height: 300px; padding: var(--space-4); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.branch-receipts span { font: 400 var(--fs-label)/var(--lh-label) var(--font-mono); color: var(--ink-3); }
.branch-receipts strong { display: block; margin-top: var(--space-8); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.branch-receipts p { margin-top: var(--space-3); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.branch-receipts i { position: absolute; left: var(--space-4); bottom: var(--space-4); font: 400 var(--fs-label)/var(--lh-label) var(--font-mono); font-style: normal; color: #789185; }

.branch-scene-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--hairline);
  background: #0b0b0b;
}

.branch-scene-wall img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; filter: saturate(0.8) contrast(1.06); }
.branch-scene-wall__wide { grid-column: 1 / 3; aspect-ratio: 2.13 / 1; }

.branch-frame-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.branch-frame-pair figure { margin: 0; border: 1px solid var(--hairline); background: #0a0a0a; }
.branch-frame-pair img { width: 100%; aspect-ratio: 2.12 / 1; object-fit: cover; }
.branch-frame-pair span { display: block; padding: var(--space-3); font: 400 var(--fs-label)/var(--lh-label) var(--font-mono); text-transform: uppercase; color: var(--ink-3); }

.case-showcase--branch-map { background: #090a09; }
.branch-map { position: relative; max-width: 980px; margin: 0 auto; padding: var(--space-5); border: 1px solid #39433e; background: #111512; }
.branch-map article { padding: var(--space-4); border: 1px solid #3a4640; background: #161b18; }
.branch-map strong { display: block; font-size: var(--fs-body); line-height: var(--lh-body); }
.branch-map span { display: block; margin-top: var(--space-2); font: 400 var(--fs-label)/var(--lh-label) var(--font-mono); color: #829087; }
.branch-map__root { position: relative; width: min(390px, 75%); margin-inline: auto; text-align: center; border-color: #89aa9a !important; }
.branch-map__root::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: var(--space-7); background: #607169; }
.branch-map__row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-7); }
.branch-map__row::before { content: ""; position: absolute; left: 16.67%; right: 16.67%; top: 0; height: 1px; background: #607169; }
.branch-map__row article { position: relative; text-align: center; }
.branch-map__row article::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: var(--space-7); background: #607169; }
.branch-map__row--infra { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-5); padding-top: var(--space-5); }
.branch-map__row--infra::before { left: 12.5%; right: 12.5%; }
.branch-map__row--infra article::before { height: var(--space-5); }
.branch-map__row--infra article { background: #0d100e; }

.branch-status { padding: var(--space-10) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.branch-status > h2 { max-width: 16ch; font-size: clamp(36px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.045em; }
.branch-status__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-9); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.branch-status__grid article { min-height: 170px; padding: var(--space-4); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.branch-status__grid strong { font: 400 var(--fs-label)/var(--lh-label) var(--font-mono); text-transform: uppercase; color: #8aa99a; }
.branch-status__grid p { margin-top: var(--space-5); max-width: 36ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.branch-disclaimer { margin-top: var(--space-5); max-width: 72ch; font: 400 var(--fs-label)/var(--lh-label) var(--font-mono); color: var(--ink-3); }

@media (max-width: 767px) {
  .branch-screen { padding: var(--space-2); }
  .branch-screen img { width: 760px; max-width: none; }
  .branch-screen { overflow-x: auto; }
  .branch-receipts { grid-template-columns: 1fr; }
  .branch-receipts article { min-height: 220px; }
  .branch-receipts strong { margin-top: var(--space-5); }
  .branch-scene-wall { grid-template-columns: 1fr; }
  .branch-scene-wall__wide { grid-column: auto; }
  .branch-scene-wall img { min-height: 180px; }
  .branch-frame-pair { grid-template-columns: 1fr; }
  .branch-map { padding: var(--space-3); }
  .branch-map__row,
  .branch-map__row--infra { grid-template-columns: 1fr; gap: var(--space-3); }
  .branch-map__row::before { display: none; }
  .branch-map__row article::before { left: 50%; height: var(--space-3); }
  .branch-status__grid { grid-template-columns: 1fr; }
}

/* Fintellect product UI v2 -------------------------------------------- */

.case-showcase--product,
.product-gallery--systems {
  position: relative;
  z-index: 4;
  width: calc(100% + 200px);
  margin-left: -200px;
}

.case-showcase--product {
  padding: 0;
  border: 1px solid #242426;
  background: #09090a;
}

.product-gallery--systems {
  display: grid;
  grid-template-columns: 1fr;
  gap: 112px;
  padding: 0;
  border: 0;
  background: transparent;
}

.product-gallery--systems .product-shot,
.case-showcase--product .product-shot {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #242426;
  background: #09090a;
}

.case-showcase--product .product-shot { border: 0; }

.fui-stagebar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid #242426;
  background: #0a0a0b;
  color: #86868c;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fui-stagebar > span { color: #c9c9cc; }
.fui-stagebar > p { margin: 0; color: #66666b; }
.fui-stagebar > div { display: flex; justify-self: end; gap: 6px; }
.fui-stagebar > div i { width: 5px; height: 5px; border-radius: 50%; background: #3a3a3e; }
.fui-stagebar > div i:first-child { background: #a6a6ab; }

.fui-scene,
.fui-scene * { box-sizing: border-box; }

.fui-scene {
  --fui-bg: #e9e9e7;
  --fui-panel: #f6f6f4;
  --fui-white: #fff;
  --fui-ink: #262628;
  --fui-subtle: #717176;
  --fui-muted: #a2a2a4;
  --fui-line: rgb(28 28 31 / 10%);
  --fui-line-strong: rgb(28 28 31 / 16%);
  --fui-orange: #ef934f;
  --fui-orange-soft: #fbebe0;
  --fui-green: #2a9366;
  --fui-green-soft: #e4f2ec;
  --fui-red: #c62828;
  --fui-red-soft: #f9e6e4;
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: var(--fui-bg);
  color: var(--fui-ink);
  font: 400 13px/1.35 var(--font-sans);
  letter-spacing: -.01em;
}

.fui-scene::before { display: none !important; }
.fui-scene p,
.fui-scene h3,
.fui-scene ul,
.fui-scene dl,
.fui-scene dd,
.fui-scene dt { margin: 0; }
.fui-scene ul { padding: 0; list-style: none; }
.fui-scene button,
.fui-scene kbd,
.fui-scene mark { font: inherit; }
.fui-scene button {
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.fui-scene button:focus-visible { outline: 2px solid #2f69d9; outline-offset: 2px; }
.fui-scene img { display: block; width: auto; max-width: none; object-fit: contain; }
.fui-scene small { font-size: 11px; font-weight: 450; color: var(--fui-subtle); }
.fui-scene mark { color: inherit; background: none; }

.fui-appbar {
  display: grid;
  grid-template-columns: 250px minmax(260px, 420px) minmax(170px, 1fr);
  align-items: center;
  height: 58px;
  padding: 0 20px;
  border-bottom: 1px solid var(--fui-line-strong);
  background: rgb(250 250 249 / 94%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 65%);
}

.fui-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fui-brand > b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #29292b;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.06em;
}
.fui-brand > span { font-size: 15px; font-weight: 650; letter-spacing: -.025em; }
.fui-brand > small { overflow: hidden; margin-left: 2px; text-overflow: ellipsis; white-space: nowrap; }

.fui-command {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  height: 34px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--fui-line);
  border-radius: 8px;
  background: #f2f2f0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
  color: var(--fui-subtle);
}
.fui-command > span { font-size: 11px; color: var(--fui-muted); }
.fui-command > p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fui-command kbd,
.fui-sidebar kbd {
  border: 1px solid var(--fui-line);
  border-radius: 5px;
  background: rgb(255 255 255 / 72%);
  color: var(--fui-muted);
  font: 500 9px/18px var(--font-mono);
  text-align: center;
}
.fui-command kbd { height: 20px; padding: 0 6px; }

.fui-appbar__actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.fui-appbar__actions > button {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--fui-subtle);
  transition: 150ms ease;
}
.fui-appbar__actions > button:hover { border-color: var(--fui-line); background: #fff; color: var(--fui-ink); }
.fui-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: 4px;
  border: 1px solid rgb(0 0 0 / 8%);
  border-radius: 50%;
  background: #e0e0de;
  font-size: 10px;
  font-weight: 700;
}

.fui-workspace {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 860px;
}

.fui-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 12px;
  border-right: 1px solid var(--fui-line-strong);
  background: #f4f4f2;
}
.fui-sidebar__workspace {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) 14px;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid var(--fui-line);
  border-radius: 9px;
  background: rgb(255 255 255 / 68%);
}
.fui-sidebar__workspace > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #2e2e30;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}
.fui-sidebar__workspace p {
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fui-ink);
  font-size: inherit;
}
.fui-sidebar__workspace strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.fui-sidebar__workspace small { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.fui-sidebar__workspace > b { color: var(--fui-muted); }
.fui-sidebar nav { display: grid; gap: 2px; margin-top: 18px; }
.fui-sidebar nav p {
  display: grid;
  grid-template-columns: 18px 1fr 18px;
  align-items: center;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 7px;
  color: #65656a;
  font-size: 12px;
  font-weight: 500;
}
.fui-sidebar nav p > span { color: #8c8c90; text-align: center; }
.fui-sidebar nav p > span img { width: 14px; height: 14px; margin: auto; opacity: .58; filter: grayscale(1); }
.fui-sidebar nav p.is-active > span img { opacity: .82; filter: none; }
.fui-sidebar nav p:hover { background: rgb(255 255 255 / 65%); color: var(--fui-ink); }
.fui-sidebar nav p.is-active {
  background: #fff;
  color: var(--fui-ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / 7%), inset 0 0 0 1px var(--fui-line);
}
.fui-sidebar nav p.is-active > span { color: var(--fui-orange); }
.fui-sidebar kbd { width: 18px; height: 18px; line-height: 16px; background: transparent; }
.fui-sidebar__sync {
  display: grid;
  grid-template-columns: 8px minmax(0,1fr) 24px;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding: 10px 8px;
  border-top: 1px solid var(--fui-line);
}
.fui-sidebar__sync > i { width: 7px; height: 7px; border-radius: 50%; background: var(--fui-green); box-shadow: 0 0 0 3px var(--fui-green-soft); }
.fui-sidebar__sync p {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fui-ink);
  font-size: inherit;
}
.fui-sidebar__sync strong { font-size: 10px; }
.fui-sidebar__sync small { font-size: 9px; }
.fui-sidebar__sync button { width: 24px; height: 24px; border-radius: 6px; color: var(--fui-subtle); }

.fui-main { min-width: 0; padding: 28px 28px 38px; }
.fui-screen-head,
.fui-module-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.fui-screen-head h3,
.fui-module-head h3 {
  margin-top: 4px;
  color: var(--fui-ink);
  font-size: 28px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: -.045em;
}
.fui-eyebrow {
  color: var(--fui-subtle);
  font: 550 9px/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fui-screen-actions,
.fui-module-head > div:last-child { display: flex; align-items: center; gap: 8px; }
.fui-tabs {
  display: flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--fui-line);
  border-radius: 8px;
  background: rgb(216 216 213 / 68%);
  color: var(--fui-subtle);
  font-size: 11px;
}
.fui-tabs > b,
.fui-tabs > span { min-width: 58px; padding: 6px 9px; border-radius: 6px; text-align: center; }
.fui-tabs > b { background: #fff; color: var(--fui-ink); box-shadow: 0 1px 2px rgb(0 0 0 / 9%); font-weight: 600; }
.fui-period { display: flex; align-items: center; height: 34px; border: 1px solid var(--fui-line); border-radius: 8px; background: rgb(255 255 255 / 62%); }
.fui-period button { display: grid; place-items: center; width: 32px; height: 32px; color: var(--fui-subtle); }
.fui-period strong { min-width: 100px; font-size: 11px; font-weight: 570; text-align: center; }
.fui-primary {
  height: 34px;
  padding: 0 13px !important;
  border-radius: 8px !important;
  background: #2d2d2f !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 12%);
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  transition: 150ms ease;
}
.fui-primary:hover { transform: translateY(-1px); background: #18181a !important; box-shadow: 0 4px 12px rgb(0 0 0 / 18%); }

.fui-forecast { margin-top: 26px; }
.fui-forecast__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 26px;
  color: var(--fui-subtle);
  font-size: 10px;
}
.fui-forecast__meta > span { display: flex; align-items: center; gap: 6px; color: var(--fui-ink); font-weight: 600; }
.fui-forecast__meta img { width: 14px; height: 14px; }
.fui-forecast__meta > b { color: var(--fui-orange); font-size: 9px; font-weight: 550; }
.fui-forecast__meta > button { margin-left: auto; color: var(--fui-subtle); font-size: 10px; }
.fui-widget-row { display: grid; grid-template-columns: 1.55fr .92fr .84fr; gap: 8px; }
.fui-widget {
  overflow: hidden;
  min-width: 0;
  min-height: 112px;
  border: 1px solid var(--fui-line);
  border-radius: 12px;
  background: rgb(255 255 255 / 62%);
  box-shadow: 0 7px 20px rgb(31 31 35 / 5%), inset 0 1px 0 rgb(255 255 255 / 85%);
}
.fui-widget > header,
.fui-project-metrics article > header,
.fui-balance article > header {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  border-bottom: 1px solid var(--fui-line);
  background: rgb(255 255 255 / 64%);
}
.fui-widget > header img,
.fui-project-metrics article > header img,
.fui-balance article > header img { width: 15px; height: 15px; opacity: .8; }
.fui-widget > header strong,
.fui-project-metrics article > header strong { font-size: 10px; font-weight: 600; }
.fui-widget > header button,
.fui-project-metrics article > header button { margin-left: auto; color: var(--fui-muted); font-size: 10px; }
.fui-widget > div { display: flex; align-items: center; min-height: 79px; padding: 11px 12px; }
.fui-widget > div p { display: grid; gap: 2px; }
.fui-widget > div p > strong { font-size: 19px; line-height: 1; letter-spacing: -.035em; }
.fui-widget > div p > em { color: var(--fui-green); font-size: 9px; font-style: normal; }
.fui-widget > div > em { display: grid; gap: 3px; margin-left: auto; color: var(--fui-subtle); font-size: 9px; font-style: normal; text-align: right; }
.fui-widget--forecast > div > i { width: 1px; height: 46px; margin-left: auto; background: var(--fui-line); }
.fui-widget--forecast ul { display: grid; gap: 5px; min-width: 102px; margin-left: 12px; }
.fui-widget--forecast li { display: flex; justify-content: space-between; gap: 7px; font-size: 10px; }
.fui-widget--forecast li small { font-size: 8px; }
.fui-widget .is-red { color: var(--fui-red); }
.fui-widget .is-green { color: var(--fui-green); }
.fui-widget--danger > header { background: var(--fui-red); color: #fff; }
.fui-widget--danger > header img { filter: brightness(0) invert(1); opacity: 1; }
.fui-widget--danger > header button { color: rgb(255 255 255 / 75%); }
.fui-widget--danger > div p > strong { color: var(--fui-red); }

.fui-plan-tools {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--fui-subtle);
  font-size: 10px;
}
.fui-plan-tools > span { color: var(--fui-ink); font-weight: 600; }
.fui-plan-tools > button {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--fui-line);
  border-radius: 8px;
  background: rgb(255 255 255 / 52%);
  text-align: left;
}
.fui-plan-tools kbd { color: var(--fui-muted); font: 500 9px/1 var(--font-mono); }
.fui-plan-tools > b { padding: 8px 9px; border: 1px solid transparent; border-radius: 7px; font-weight: 500; }
.fui-plan-tools > b:hover { border-color: var(--fui-line); background: rgb(255 255 255 / 46%); }

.fui-budget-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.fui-budget-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--fui-line-strong);
  border-radius: 12px;
  background: rgb(248 248 246 / 78%);
  box-shadow: 0 10px 28px rgb(32 32 34 / 5%);
}
.fui-budget-card > header { display: flex; justify-content: space-between; align-items: flex-end; min-height: 90px; padding: 13px 14px 12px; background: rgb(255 255 255 / 68%); }
.fui-budget-card > header > div { display: grid; grid-template-columns: auto auto; align-items: end; column-gap: 8px; }
.fui-budget-card > header p { display: flex; grid-column: 1 / -1; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11px; font-weight: 600; }
.fui-budget-card > header p img,
.fui-budget-card > header button img { width: 16px; height: 16px; }
.fui-budget-card > header strong { font-size: 28px; font-weight: 560; line-height: 1; letter-spacing: -.045em; }
.fui-budget-card > header small { padding-bottom: 2px; }
.fui-budget-card > header button,
.fui-team-card > header button,
.fui-cost-card > header button,
.fui-wallet-table > header button {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--fui-line);
  border-radius: 7px;
  background: rgb(255 255 255 / 72%);
  color: var(--fui-subtle);
  font-size: 9px;
  font-weight: 550;
  white-space: nowrap;
  transition: 150ms ease;
}
.fui-budget-card > header button:hover,
.fui-team-card > header button:hover,
.fui-cost-card > header button:hover,
.fui-wallet-table > header button:hover { border-color: var(--fui-line-strong); background: #fff; color: var(--fui-ink); transform: translateY(-1px); }
.fui-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 8px 14px 10px; border-top: 1px solid var(--fui-line); border-bottom: 1px solid var(--fui-line); font-size: 9px; color: var(--fui-subtle); }
.fui-progress span:nth-child(2) { text-align: right; }
.fui-progress span b { color: var(--fui-ink); font-weight: 600; }
.fui-progress > i { display: flex; grid-column: 1 / -1; overflow: hidden; height: 4px; border-radius: 99px; background: #ddd; }
.fui-progress > i b { width: 16%; background: #303034; }
.fui-progress > i em { flex: 1; background: #c8c8c6; }
.fui-budget-card--income .fui-progress > i b { width: 24%; background: var(--fui-green); }

.fui-table { min-width: 0; }
.fui-table-head,
.fui-table-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(122px, .94fr) 76px 24px; align-items: center; column-gap: 7px; padding: 0 9px 0 12px; }
.fui-table-head { min-height: 30px; background: #e3e3e0; color: #858589; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.fui-table-head span:nth-child(3) { text-align: right; }
.fui-table-row { min-height: 44px; border-top: 1px solid var(--fui-line); font-size: 10px; transition: background 120ms ease; }
.fui-table-head + .fui-table-row { border-top: 0; }
.fui-table-row:hover { background: rgb(255 255 255 / 68%); }
.fui-table-row > strong { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 10px; font-weight: 550; }
.fui-table-row > strong > em { color: #8f8f93; font-style: normal; }
.fui-table-row .fui-row-icon { flex: 0 0 auto; width: 13px; height: 13px; opacity: .72; }
.fui-table-row > strong > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fui-table-row > span { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--fui-subtle); }
.fui-table-row > b { font-size: 11px; font-weight: 600; text-align: right; white-space: nowrap; }
.fui-table-row > button { color: var(--fui-muted); font-size: 9px; }
.fui-table-row--group { min-height: 42px; background: rgb(255 255 255 / 36%); }
.fui-table-row--child { padding-left: 28px; }
.fui-check { flex: 0 0 auto; width: 12px; height: 12px; border: 1px solid #c5c5c7; border-radius: 3px; background: #fff; }
.fui-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 5px;
  border: 1px solid var(--fui-line);
  border-radius: 5px;
  background: rgb(255 255 255 / 75%);
  color: var(--fui-subtle);
  font-size: 8px !important;
  line-height: 1;
  white-space: nowrap;
}
.fui-chip--date { color: #626267; }
.fui-chip--date.is-overdue { border-color: rgb(198 40 40 / 20%); background: var(--fui-red-soft); color: var(--fui-red); }
.fui-chip--pending { border-color: rgb(239 147 79 / 24%); background: var(--fui-orange-soft); color: #a45b23; }
.fui-chip--paid { border-color: rgb(42 147 102 / 20%); background: var(--fui-green-soft); color: var(--fui-green); }
.fui-chip--neutral { background: #ececea; color: #555559; }
.fui-project-tag { padding: 3px 5px; border-radius: 4px; background: #e6e8f2 !important; color: #525b84 !important; font-size: 8px !important; white-space: nowrap; }
.fui-add-row { width: 100%; height: 30px; padding-left: 28px !important; border-top: 1px solid var(--fui-line) !important; color: #7b7b80 !important; font-size: 9px !important; text-align: left; }
.fui-add-row:hover { background: rgb(255 255 255 / 60%); color: var(--fui-ink) !important; }

.fui-relation {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 6;
  width: 600px;
  overflow: hidden;
  border: 1px solid rgb(35 35 38 / 17%);
  border-radius: 13px;
  background: rgb(251 251 249 / 96%);
  box-shadow: 0 28px 70px rgb(28 28 32 / 24%), 0 4px 14px rgb(28 28 32 / 10%);
  backdrop-filter: blur(18px);
}
.fui-relation > header { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--fui-line); background: #fff; }
.fui-relation > header > img { width: 19px; height: 19px; }
.fui-relation > header > div { display: grid; }
.fui-relation > header strong { font-size: 12px; }
.fui-relation > header small { font-size: 9px; }
.fui-relation > header button { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; border: 1px solid var(--fui-line); border-radius: 7px; color: var(--fui-subtle); }
.fui-relation__body { display: grid; grid-template-columns: 1fr 1fr; }
.fui-relation dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; border-right: 1px solid var(--fui-line); }
.fui-relation dl:last-child { border-right: 0; }
.fui-relation dl > p { display: grid; gap: 5px; }
.fui-relation dl small { font-size: 9px; }
.fui-relation dl strong { font-size: 12px; }
.fui-relation__match { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--fui-line); }
.fui-relation__match span,
.fui-relation__match b { padding: 4px 6px; border-radius: 5px; background: var(--fui-green-soft); color: var(--fui-green); font-size: 8px; font-weight: 600; }
.fui-relation > footer { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--fui-line); background: #f4f4f2; }
.fui-relation > footer button { height: 38px; border-right: 1px solid var(--fui-line); color: var(--fui-subtle); font-size: 10px; font-weight: 550; }
.fui-relation > footer button:last-child { border-right: 0; }
.fui-relation > footer button:hover { background: #fff; color: var(--fui-ink); }
.fui-relation > footer button.is-danger { color: var(--fui-red); }

.case-showcase--product .product-shot figcaption,
.product-gallery--systems .product-shot figcaption {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 16px;
  border-top: 1px solid #242426;
  background: #09090a;
}
.case-showcase--product .product-shot figcaption span,
.product-gallery--systems .product-shot figcaption span { color: #dadade; font: 500 10px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.case-showcase--product .product-shot figcaption em,
.product-gallery--systems .product-shot figcaption em { margin: 0; color: #77777d; font-size: 12px; font-style: normal; line-height: 1.45; text-align: left; }

.fui-scene--project,
.fui-scene--wallets {
  min-height: 780px;
  padding: 0;
}
.fui-project-shell,
.fui-wallet-shell { padding: 28px 30px 40px; }
.fui-module-head { align-items: flex-end; padding-bottom: 22px; border-bottom: 1px solid var(--fui-line-strong); }
.fui-module-head h3 { display: flex; align-items: center; gap: 9px; margin-top: 6px; font-size: 30px; }
.fui-module-head h3 > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--fui-orange-soft); color: var(--fui-orange); font-size: 15px; }
.fui-module-head ul { display: flex; gap: 5px; margin-top: 11px; }
.fui-module-head li { padding: 4px 7px; border: 1px solid var(--fui-line); border-radius: 5px; background: rgb(255 255 255 / 55%); color: var(--fui-subtle); font-size: 9px; }
.fui-module-copy { max-width: 42ch; margin-top: 10px !important; color: var(--fui-subtle); font-size: 11px; }
.fui-project-toolbar,
.fui-wallet-toolbar { display: flex; align-items: center; gap: 8px; min-height: 52px; border-bottom: 1px solid var(--fui-line); }
.fui-project-toolbar > p { margin-left: auto; color: var(--fui-subtle); font-size: 9px; }
.fui-project-toolbar > p strong { color: var(--fui-ink); font-weight: 550; }
.fui-project-toolbar > button,
.fui-wallet-toolbar > button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--fui-line);
  border-radius: 7px;
  background: rgb(255 255 255 / 60%);
  color: var(--fui-subtle);
  font-size: 9px;
}

.fui-project-layout { display: grid; grid-template-columns: minmax(0, 1fr) 284px; gap: 12px; margin-top: 14px; }
.fui-project-stack { display: grid; align-content: start; gap: 10px; }
.fui-team-card,
.fui-cost-card,
.fui-project-metrics article,
.fui-metric-summary,
.fui-wallet-table,
.fui-sync-panel,
.fui-balance article {
  overflow: hidden;
  border: 1px solid var(--fui-line-strong);
  border-radius: 11px;
  background: rgb(249 249 247 / 78%);
  box-shadow: 0 8px 24px rgb(33 33 36 / 4%);
}
.fui-team-card > header,
.fui-cost-card > header,
.fui-wallet-table > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 12px;
  border-bottom: 1px solid var(--fui-line);
  background: rgb(255 255 255 / 68%);
}
.fui-team-card > header > div,
.fui-cost-card > header > span,
.fui-wallet-table > header > div { display: flex; align-items: center; gap: 8px; }
.fui-team-card > header img,
.fui-cost-card > header img,
.fui-wallet-table > header img { width: 18px; height: 18px; }
.fui-team-card > header strong,
.fui-cost-card > header strong,
.fui-wallet-table > header strong { font-size: 11px; }
.fui-team-card > header p,
.fui-cost-card > header p { display: grid; justify-items: end; }
.fui-team-card > header p b,
.fui-cost-card > header p b { font-size: 15px; font-weight: 600; letter-spacing: -.025em; }
.fui-team-card > header button,
.fui-cost-card > header button { min-height: 26px; margin-left: 4px; padding: 0 7px; }
.fui-team-table { min-width: 0; }
.fui-team-row { display: grid; grid-template-columns: .85fr 1.25fr .88fr .7fr .9fr 22px; align-items: center; gap: 8px; min-height: 48px; padding: 0 10px; border-top: 1px solid var(--fui-line); font-size: 10px; }
.fui-team-row:hover { background: rgb(255 255 255 / 62%); }
.fui-team-row--head { min-height: 31px; border-top: 0; background: #e2e2df; color: #858589; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.fui-team-row > strong,
.fui-team-row > b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.fui-team-row > b { font-weight: 500; color: var(--fui-subtle); }
.fui-team-row > strong:nth-last-child(2) { text-align: right; }
.fui-team-row > button { color: var(--fui-muted); }
.fui-cost-card > header { min-height: 54px; }
.fui-cost-card > div { display: grid; grid-template-columns: 1fr auto; }
.fui-cost-card > div span,
.fui-cost-card > div strong { min-height: 38px; padding: 12px; border-top: 1px solid var(--fui-line); font-size: 10px; }
.fui-cost-card > div span:nth-child(1),
.fui-cost-card > div strong:nth-child(2) { border-top: 0; }
.fui-cost-card > div strong { font-weight: 600; text-align: right; }

.fui-project-metrics { display: grid; align-content: start; gap: 10px; }
.fui-metric-summary { padding: 12px; }
.fui-metric-summary > span { color: var(--fui-subtle); font-size: 9px; }
.fui-metric-summary > strong { display: block; margin-top: 4px; font-size: 16px; }
.fui-metric-summary > i { display: block; overflow: hidden; height: 4px; margin-top: 9px; border-radius: 99px; background: #d8d8d5; }
.fui-metric-summary > i b { display: block; width: 86%; height: 100%; background: var(--fui-green); }
.fui-metric-summary > small { display: block; margin-top: 6px; font-size: 9px; }
.fui-project-metrics article { min-height: 104px; }
.fui-project-metrics article {
  position: relative;
  padding: 0;
}
.fui-project-metrics article > div { padding: 12px; }
.fui-project-metrics article > div > strong { font-size: 22px; font-weight: 560; line-height: 1; letter-spacing: -.035em; }
.fui-project-metrics article > div p { margin-top: 7px; color: var(--fui-subtle); font-size: 9px; }
.fui-project-metrics article > div p b { color: var(--fui-ink); }
.fui-project-metrics article > div p.is-coral b { color: var(--fui-orange); }
.fui-project-metrics article > div span { display: inline-block; margin-top: 8px; padding: 4px 6px; border-radius: 5px; background: var(--fui-orange-soft); color: #a45b23; font-size: 8px; }
.fui-project-metrics article.is-green > header { background: var(--fui-green); color: #fff; }
.fui-project-metrics article.is-green > header img { filter: brightness(0) invert(1); opacity: 1; }
.fui-project-metrics article.is-green > header button { color: rgb(255 255 255 / 78%); }
.fui-project-metrics article.is-green {
  border-color: var(--fui-line-strong);
  background: rgb(249 249 247 / 78%);
  color: var(--fui-ink);
}

.fui-wallet-toolbar > p { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 550; }
.fui-wallet-toolbar > p i { width: 7px; height: 7px; border-radius: 50%; background: var(--fui-green); box-shadow: 0 0 0 3px var(--fui-green-soft); }
.fui-wallet-toolbar > span { margin-left: 6px; color: var(--fui-subtle); font-size: 9px; }
.fui-wallet-toolbar > button:first-of-type { margin-left: auto; }
.fui-wallet-layout { display: grid; grid-template-columns: minmax(0, 1fr) 318px; gap: 12px; margin-top: 14px; }
.fui-wallet-groups { display: grid; align-content: start; gap: 10px; }
.fui-wallet-table > header { min-height: 48px; }
.fui-wallet-table > header > button { min-height: 26px; }
.fui-wallet-row { display: grid; grid-template-columns: 1.45fr .85fr .92fr 88px 22px; align-items: center; gap: 9px; min-height: 54px; padding: 0 10px 0 12px; border-top: 1px solid var(--fui-line); font-size: 10px; transition: 120ms ease; }
.fui-wallet-row:hover { background: rgb(255 255 255 / 66%); }
.fui-wallet-row--head { min-height: 31px; border-top: 0; background: #e2e2df; color: #858589; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.fui-wallet-row > strong { display: grid; grid-template-columns: 20px 1fr; align-items: center; min-width: 0; font-size: 10px; }
.fui-wallet-row > strong > img { grid-row: 1 / 3; width: 15px; height: 15px; }
.fui-wallet-row > strong > small { grid-column: 2; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.fui-wallet-row > b { font-size: 13px; font-weight: 580; letter-spacing: -.02em; }
.fui-wallet-row > b small { font-size: 8px; font-weight: 450; }
.fui-wallet-row > span { display: flex; align-items: center; gap: 6px; color: var(--fui-subtle); }
.fui-wallet-row > span i { display: grid; place-items: center; width: 26px; height: 20px; border: 1px solid var(--fui-line); border-radius: 5px; background: #fff; color: var(--fui-ink); font: 600 7px/1 var(--font-mono); font-style: normal; }
.fui-wallet-row > button { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 27px; color: var(--fui-subtle); font-size: 9px; }
.fui-wallet-row > button img { width: 12px; height: 12px; }
.fui-wallet-row.is-new { background: var(--fui-orange-soft); }
.fui-wallet-row.is-new:hover { background: #f9dfcd; }

.fui-wallet-aside { display: grid; align-content: start; gap: 13px; }
.fui-sync-panel > header { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 10px; border-bottom: 1px solid var(--fui-line); background: #e2e2df; color: var(--fui-subtle); font-size: 9px; }
.fui-sync-panel > header button { width: 25px; height: 25px; color: var(--fui-subtle); }
.fui-sync-panel > p { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; min-height: 50px; padding: 0 10px; border-top: 1px solid var(--fui-line); }
.fui-sync-panel > header + p { border-top: 0; }
.fui-sync-panel > p > i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #fff; font-size: 10px; font-weight: 700; font-style: normal; }
.fui-sync-panel > p > i.is-revolut { background: #262628; }
.fui-sync-panel > p > i.is-wise { background: #315bee; }
.fui-sync-panel > p > span { display: grid; }
.fui-sync-panel > p strong { font-size: 10px; }
.fui-sync-panel > p small { font-size: 8px; }
.fui-sync-panel > p mark { padding: 4px 6px; border-radius: 5px; background: var(--fui-green-soft); color: var(--fui-green); font-size: 8px; }
.fui-balance-label { display: flex; justify-content: space-between; align-items: center; margin: 2px 1px -5px; }
.fui-balance-label span { font-size: 10px; font-weight: 600; }
.fui-balance-label small { font-size: 8px; }
.fui-balance { display: grid; gap: 8px; }
.fui-balance > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fui-balance article {
  min-height: 92px;
  padding: 0;
  background: rgb(249 249 247 / 82%) !important;
  color: var(--fui-ink) !important;
}
.fui-balance article > header { height: 31px; padding: 0 9px; font-size: 8px; font-weight: 600; }
.fui-balance article > header span { color: inherit !important; }
.fui-balance article > strong { display: block; margin: 0; padding: 11px 10px 0; font-size: 21px; font-weight: 560; line-height: 1; letter-spacing: -.035em; }
.fui-balance article > small { display: block; margin: 0; padding: 5px 10px 10px; font-size: 8px; }
.fui-balance__total > header { background: var(--fui-green) !important; color: #fff; }
.fui-balance__total > header img { filter: brightness(0) invert(1); opacity: 1; }
.fui-balance article.is-red > header { background: var(--fui-red-soft); color: var(--fui-red); }
.fui-balance article.is-red > strong { color: var(--fui-red); }
.fui-balance__after > header { background: #303034 !important; color: #fff; }
.fui-balance__after > header img { filter: brightness(0) invert(1); opacity: 1; }

@media (max-width: 1120px) {
  .fui-appbar { grid-template-columns: 205px minmax(240px, 360px) minmax(150px, 1fr); }
  .fui-main { padding-inline: 22px; }
  .fui-screen-actions { gap: 5px; }
  .fui-primary { padding-inline: 10px !important; }
  .fui-table-head,
  .fui-table-row { grid-template-columns: minmax(0, 1.25fr) minmax(112px, .9fr) 70px 20px; padding-left: 9px; }
  .fui-table-row--child { padding-left: 22px; }
}

@media (max-width: 1023px) {
  .case-showcase--product,
  .product-gallery--systems { width: calc(100% + 144px); margin-left: -144px; }
  .fui-command { display: none; }
  .fui-appbar { grid-template-columns: 1fr auto; }
  .fui-brand > small { display: none; }
  .fui-workspace { grid-template-columns: 1fr; }
  .fui-sidebar { display: none; }
  .fui-main { padding-inline: 28px; }
  .fui-project-layout { grid-template-columns: minmax(0, 1fr) 252px; }
  .fui-wallet-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .fui-project-shell,
  .fui-wallet-shell { padding-inline: 22px; }
}

@media (max-width: 840px) {
  .fui-screen-head,
  .fui-module-head { align-items: flex-start; }
  .fui-screen-head { display: grid; }
  .fui-screen-actions { flex-wrap: wrap; }
  .fui-widget-row { grid-template-columns: 1.4fr 1fr; }
  .fui-widget--danger { grid-column: 1 / -1; }
  .fui-project-layout,
  .fui-wallet-layout { grid-template-columns: 1fr; }
  .fui-project-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fui-project-metrics article.is-green { grid-column: 2; }
  .fui-wallet-aside { grid-template-columns: 1fr 1fr; }
  .fui-sync-panel { grid-row: span 2; }
  .fui-balance-label { grid-column: 2; }
  .fui-balance { grid-column: 2; }
}

@media (max-width: 767px) {
  .case-showcase--product,
  .product-gallery--systems {
    width: auto;
    margin-inline: calc(var(--gutter) * -1);
  }
  .product-gallery--systems { gap: 72px; }
  .case-showcase--product .product-shot,
  .product-gallery--systems .product-shot { overflow: visible; }
  .fui-stagebar { grid-template-columns: 1fr auto; min-width: 0; }
  .fui-stagebar > p { display: none; }
  .fui-scene { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #aaa transparent; }
  .fui-scene--budget { min-width: 0; }
  .fui-scene--budget > .fui-appbar,
  .fui-scene--budget > .fui-workspace { width: 940px; }
  .fui-scene--project > .fui-appbar,
  .fui-scene--project > .fui-project-shell,
  .fui-scene--wallets > .fui-appbar,
  .fui-scene--wallets > .fui-wallet-shell { width: 980px; }
  .fui-screen-head { display: flex; }
  .fui-widget-row { grid-template-columns: 1.55fr .92fr .84fr; }
  .fui-widget--danger { grid-column: auto; }
  .fui-project-layout { grid-template-columns: minmax(0, 1fr) 284px; }
  .fui-wallet-layout { grid-template-columns: minmax(0, 1fr) 318px; }
  .fui-project-metrics { grid-template-columns: 1fr; }
  .fui-project-metrics article.is-green { grid-column: auto; }
  .fui-wallet-aside { display: grid; grid-template-columns: 1fr; }
  .fui-sync-panel { grid-row: auto; }
  .fui-balance-label,
  .fui-balance { grid-column: auto; }
  .case-showcase--product .product-shot figcaption,
  .product-gallery--systems .product-shot figcaption { grid-template-columns: 1fr; gap: 6px; }
}

/* Fintellect product UI v3 — compact, dark and deliberately flat. */

.case-showcase--product,
.product-gallery--systems { background: transparent; }

.case-showcase--product,
.product-gallery--systems .product-shot,
.case-showcase--product .product-shot {
  border-color: #1b1c20;
  box-shadow: none;
}

.fui-stagebar {
  min-height: 34px;
  padding: 0 12px;
  border-color: #202126;
  background: #08090b;
  color: #5e6068;
  font-size: 8px;
  letter-spacing: .09em;
}
.fui-stagebar > span { color: #8a8c94; }
.fui-stagebar > p { color: #474951; }
.fui-stagebar > div { gap: 5px; }
.fui-stagebar > div i { width: 4px; height: 4px; background: #303138; }
.fui-stagebar > div i:first-child { background: #706f8f; }

.fui-scene {
  --fui-bg: #0f1013;
  --fui-panel: #131419;
  --fui-white: #1a1b20;
  --fui-ink: #eeeef0;
  --fui-subtle: #888a92;
  --fui-muted: #5d5f68;
  --fui-line: rgb(255 255 255 / 6.5%);
  --fui-line-strong: rgb(255 255 255 / 10%);
  --fui-orange: #d68a54;
  --fui-orange-soft: rgb(214 138 84 / 12%);
  --fui-green: #54a47d;
  --fui-green-soft: rgb(84 164 125 / 12%);
  --fui-red: #d26969;
  --fui-red-soft: rgb(210 105 105 / 11%);
  --fui-accent: #7774d8;
  --fui-accent-soft: rgb(119 116 216 / 14%);
  border: 0;
  border-radius: 0 0 8px 8px;
  background:
    radial-gradient(ellipse 62% 45% at 58% -8%, rgb(105 102 194 / 7%), transparent 68%),
    var(--fui-bg);
  box-shadow: none;
  color: var(--fui-ink);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: -.006em;
}
.fui-scene small { color: var(--fui-subtle); font-size: 9px; }
.fui-scene img { filter: grayscale(1) brightness(1.65); opacity: .68; }
.fui-scene button { border-radius: 5px; }
.fui-scene button:focus-visible { outline-color: var(--fui-accent); }

.fui-appbar {
  grid-template-columns: 172px minmax(240px, 320px) minmax(150px, 1fr);
  height: 42px;
  padding: 0 10px;
  border-color: var(--fui-line-strong);
  background: rgb(12 13 16 / 94%);
  box-shadow: none;
  backdrop-filter: blur(18px);
}
.fui-brand { gap: 7px; }
.fui-brand > b {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 5px;
  background: #dedee2;
  color: #111216;
  font-size: 11px;
}
.fui-brand > span { color: #dddddf; font-size: 11px; font-weight: 590; letter-spacing: -.015em; }
.fui-brand > small { margin-left: 0; color: #62646c; font-size: 8px; }
.fui-command {
  grid-template-columns: 16px minmax(0, 1fr) auto;
  height: 26px;
  padding: 0 6px 0 8px;
  border-color: var(--fui-line-strong);
  border-radius: 5px;
  background: #111217;
  box-shadow: none;
  color: #656770;
  font-size: 9px;
}
.fui-command kbd {
  height: 16px;
  padding: 0 4px;
  border-color: var(--fui-line);
  border-radius: 3px;
  background: #17181d;
  color: #555760;
  font-size: 7px;
  line-height: 14px;
}
.fui-appbar__actions { gap: 2px; }
.fui-appbar__actions > button {
  width: 25px;
  height: 25px;
  border-radius: 5px;
  color: #62646d;
  font-size: 9px;
}
.fui-appbar__actions > button:hover { border-color: var(--fui-line-strong); background: #17181c; color: #d7d7da; }
.fui-avatar {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  border-color: var(--fui-line-strong);
  background: #202126;
  color: #9b9da5;
  font-size: 8px;
}

.fui-workspace {
  grid-template-columns: 172px minmax(0, 1fr);
  min-height: 700px;
}
.fui-sidebar {
  padding: 10px 8px;
  border-color: var(--fui-line-strong);
  background: #0c0d10;
}
.fui-sidebar__workspace {
  grid-template-columns: 22px minmax(0, 1fr) 10px;
  gap: 7px;
  padding: 5px 6px;
  border-color: transparent;
  border-radius: 5px;
  background: transparent;
}
.fui-sidebar__workspace:hover { background: #14151a; }
.fui-sidebar__workspace > span {
  width: 22px;
  height: 22px;
  border: 1px solid var(--fui-line-strong);
  border-radius: 5px;
  background: #1b1c21;
  color: #b9bac0;
  font-size: 7px;
}
.fui-sidebar__workspace strong { color: #c7c8cc; font-size: 9px; font-weight: 540; }
.fui-sidebar__workspace small { color: #555760; font-size: 7px; }
.fui-sidebar__workspace > b { color: #4b4d55; font-size: 8px; }
.fui-sidebar nav { gap: 1px; margin-top: 12px; }
.fui-sidebar nav p {
  position: relative;
  grid-template-columns: 17px 1fr 16px;
  min-height: 27px;
  padding: 0 6px;
  border-radius: 4px;
  color: #74767f;
  font-size: 9px;
  font-weight: 480;
}
.fui-sidebar nav p::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 6px;
  width: 2px;
  height: 15px;
  border-radius: 0 2px 2px 0;
  background: transparent;
}
.fui-sidebar nav p:hover { background: #131419; color: #c0c1c6; }
.fui-sidebar nav p.is-active {
  background: #17181d;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 3%);
  color: #e2e2e4;
  font-weight: 530;
}
.fui-sidebar nav p.is-active::before { background: var(--fui-accent); }
.fui-sidebar nav p > span { color: #5b5d65; }
.fui-sidebar nav p > span img { width: 12px; height: 12px; filter: grayscale(1) brightness(1.55); opacity: .55; }
.fui-sidebar nav p.is-active > span img { filter: grayscale(1) brightness(2); opacity: .78; }
.fui-sidebar kbd {
  width: 15px;
  height: 15px;
  border-color: transparent;
  background: transparent;
  color: #45474f;
  font-size: 6px;
  line-height: 13px;
}
.fui-sidebar__sync {
  grid-template-columns: 6px minmax(0, 1fr) 20px;
  gap: 6px;
  padding: 8px 6px 0;
  border-color: var(--fui-line);
}
.fui-sidebar__sync > i { width: 5px; height: 5px; box-shadow: none; }
.fui-sidebar__sync strong { color: #85878f; font-size: 8px; font-weight: 500; }
.fui-sidebar__sync small { color: #4d4f57; font-size: 7px; }
.fui-sidebar__sync button { width: 20px; height: 20px; color: #51535b; font-size: 9px; }

.fui-main { padding: 16px 18px 22px; }
.fui-screen-head,
.fui-module-head { gap: 16px; }
.fui-screen-head h3,
.fui-module-head h3 {
  margin-top: 3px;
  color: #e8e8ea;
  font-size: 19px;
  font-weight: 540;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.fui-eyebrow {
  color: #5d5f68;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: .08em;
}
.fui-screen-actions,
.fui-module-head > div:last-child { gap: 5px; }
.fui-tabs {
  gap: 0;
  padding: 0;
  border: 1px solid var(--fui-line-strong);
  border-radius: 5px;
  background: transparent;
  color: #686a73;
  font-size: 8px;
}
.fui-tabs > b,
.fui-tabs > span {
  min-width: 52px;
  min-height: 26px;
  padding: 7px 8px 0;
  border-radius: 0;
}
.fui-tabs > b {
  border-right: 1px solid var(--fui-line);
  background: #1b1c21;
  box-shadow: none;
  color: #dedee1;
  font-weight: 530;
}
.fui-tabs > b:first-child { border-radius: 4px 0 0 4px; }
.fui-period {
  height: 27px;
  border-color: var(--fui-line-strong);
  border-radius: 5px;
  background: transparent;
}
.fui-period button { width: 26px; height: 25px; color: #656770; }
.fui-period strong { min-width: 88px; color: #a6a7ad; font-size: 8px; font-weight: 500; }
.fui-primary {
  height: 27px;
  padding: 0 10px !important;
  border: 1px solid rgb(146 143 232 / 28%) !important;
  border-radius: 5px !important;
  background: #5f5cb6 !important;
  box-shadow: inset 0 1px rgb(255 255 255 / 9%) !important;
  color: #f5f5f7 !important;
  font-size: 8px !important;
  font-weight: 540 !important;
}
.fui-primary:hover { transform: none; border-color: rgb(164 162 243 / 50%) !important; background: #6a67c5 !important; box-shadow: inset 0 1px rgb(255 255 255 / 12%) !important; }

.fui-forecast { margin-top: 15px; }
.fui-forecast__meta {
  gap: 9px;
  height: 20px;
  color: #5a5c64;
  font-size: 8px;
}
.fui-forecast__meta > span { gap: 5px; color: #b6b7bc; font-size: 8px; font-weight: 520; }
.fui-forecast__meta img { width: 12px; height: 12px; }
.fui-forecast__meta > b {
  padding: 2px 5px;
  border: 1px solid rgb(119 116 216 / 15%);
  border-radius: 4px;
  background: var(--fui-accent-soft);
  color: #9d9ae7;
  font-size: 7px;
}
.fui-forecast__meta > button { color: #696b74; font-size: 8px; }
.fui-widget-row { grid-template-columns: 1.45fr .9fr .82fr; gap: 6px; }
.fui-widget,
.fui-budget-card,
.fui-team-card,
.fui-cost-card,
.fui-project-metrics article,
.fui-metric-summary,
.fui-wallet-table,
.fui-sync-panel,
.fui-balance article {
  border: 1px solid var(--fui-line-strong);
  border-radius: 6px;
  background: rgb(20 21 25 / 78%);
  box-shadow: none;
  backdrop-filter: none;
}
.fui-widget { min-height: 83px; }
.fui-widget > header,
.fui-project-metrics article > header,
.fui-balance article > header {
  height: 26px;
  padding: 0 8px;
  border-color: var(--fui-line);
  background: #15161a;
}
.fui-widget > header img,
.fui-project-metrics article > header img,
.fui-balance article > header img { width: 12px; height: 12px; }
.fui-widget > header strong,
.fui-project-metrics article > header strong { color: #9a9ca4; font-size: 8px; font-weight: 500; }
.fui-widget > header button,
.fui-project-metrics article > header button { color: #52545d; font-size: 8px; }
.fui-widget > div { min-height: 55px; padding: 8px 10px; }
.fui-widget > div p { gap: 2px; }
.fui-widget > div p > strong { color: #e3e3e5; font-size: 15px; font-weight: 540; }
.fui-widget > div p > em { color: var(--fui-green); font-size: 7px; }
.fui-widget > div > em { color: #666871; font-size: 7px; }
.fui-widget--forecast > div > i { height: 36px; background: var(--fui-line); }
.fui-widget--forecast ul { min-width: 94px; margin-left: 10px; gap: 3px; }
.fui-widget--forecast li { color: #757781; font-size: 8px; }
.fui-widget--forecast li small { color: #51535b; font-size: 6px; }
.fui-widget--danger { border-color: rgb(210 105 105 / 21%); background: rgb(24 18 20 / 65%); }
.fui-widget--danger > header { background: rgb(210 105 105 / 8%); color: #bd7676; }
.fui-widget--danger > header img { filter: grayscale(1) brightness(1.9); opacity: .65; }
.fui-widget--danger > div p > strong { color: #dc8585; }

.fui-plan-tools {
  grid-template-columns: auto minmax(210px, 1fr) auto auto;
  gap: 5px;
  margin-top: 12px;
  color: #5d5f67;
  font-size: 8px;
}
.fui-plan-tools > span { color: #9b9da4; font-weight: 520; }
.fui-plan-tools > button {
  height: 26px;
  padding: 0 7px;
  border-color: var(--fui-line-strong);
  border-radius: 5px;
  background: #111216;
  color: #5f616a;
}
.fui-plan-tools kbd { color: #464851; font-size: 7px; }
.fui-plan-tools > b {
  padding: 6px 7px;
  border-radius: 4px;
  color: #656770;
  font-weight: 480;
}
.fui-plan-tools > b:hover { border-color: var(--fui-line); background: #15161a; }

.fui-budget-grid { gap: 6px; margin-top: 6px; }
.fui-budget-card { border-radius: 6px; }
.fui-budget-card > header {
  min-height: 61px;
  padding: 9px 10px;
  border-color: var(--fui-line);
  background: #141519;
}
.fui-budget-card > header > div { column-gap: 6px; }
.fui-budget-card > header p { gap: 5px; margin-bottom: 6px; color: #a6a8af; font-size: 8px; font-weight: 520; }
.fui-budget-card > header p img,
.fui-budget-card > header button img { width: 12px; height: 12px; }
.fui-budget-card > header strong { color: #eeeef0; font-size: 21px; font-weight: 510; letter-spacing: -.035em; }
.fui-budget-card > header small { color: #5e6068; font-size: 8px; }
.fui-budget-card > header button,
.fui-team-card > header button,
.fui-cost-card > header button,
.fui-wallet-table > header button {
  min-height: 24px;
  padding: 0 7px;
  border-color: var(--fui-line-strong);
  border-radius: 4px;
  background: #18191e;
  box-shadow: none;
  color: #777982;
  font-size: 7px;
}
.fui-budget-card > header button:hover,
.fui-team-card > header button:hover,
.fui-cost-card > header button:hover,
.fui-wallet-table > header button:hover {
  transform: none;
  border-color: rgb(255 255 255 / 15%);
  background: #1c1d22;
  color: #b8b9be;
}
.fui-progress {
  gap: 4px 10px;
  padding: 6px 10px 7px;
  border-color: var(--fui-line);
  color: #555760;
  font-size: 7px;
}
.fui-progress span b { color: #9a9ca4; font-weight: 520; }
.fui-progress > i { height: 2px; background: #25262c; }
.fui-progress > i b { background: #a65353; }
.fui-progress > i em { background: #34353c; }
.fui-budget-card--income .fui-progress > i b { background: #4b8f70; }

.fui-table-head,
.fui-table-row {
  grid-template-columns: minmax(0, 1.4fr) minmax(116px, .94fr) 70px 20px;
  gap: 5px;
  padding: 0 7px 0 9px;
}
.fui-table-head {
  min-height: 24px;
  border-color: var(--fui-line);
  background: #111216;
  color: #4e5058;
  font-size: 6px;
  font-weight: 540;
  letter-spacing: .055em;
}
.fui-table-row {
  min-height: 34px;
  border-color: var(--fui-line);
  color: #858790;
  font-size: 8px;
}
.fui-table-row:hover { background: #16171b; }
.fui-table-row > strong { gap: 4px; color: #b0b1b7; font-size: 8px; font-weight: 500; }
.fui-table-row > b { color: #cfd0d3; font-size: 9px; font-weight: 520; }
.fui-table-row > button { color: #484a52; font-size: 7px; }
.fui-table-row--group { min-height: 32px; background: #141519; }
.fui-table-row--child { padding-left: 21px; }
.fui-check { width: 10px; height: 10px; border-color: #3a3b43; border-radius: 3px; background: #111216; }
.fui-table-row .fui-row-icon { width: 11px; height: 11px; }
.fui-chip {
  min-height: 17px;
  padding: 0 4px;
  border-color: var(--fui-line-strong);
  border-radius: 4px;
  background: #1a1b20;
  color: #777982;
  font-size: 6px !important;
}
.fui-chip--date { color: #777982; }
.fui-chip--date.is-overdue { border-color: rgb(210 105 105 / 22%); background: var(--fui-red-soft); color: #c87575; }
.fui-chip--pending { border-color: rgb(214 138 84 / 20%); background: var(--fui-orange-soft); color: #c48a62; }
.fui-chip--paid { border-color: rgb(84 164 125 / 20%); background: var(--fui-green-soft); color: #6eaf8e; }
.fui-chip--neutral { background: #1c1d22; color: #858790; }
.fui-project-tag { border: 1px solid rgb(119 116 216 / 18%); background: var(--fui-accent-soft) !important; color: #a19fe6 !important; font-size: 6px !important; }
.fui-add-row {
  height: 24px;
  padding-left: 21px !important;
  border-color: var(--fui-line) !important;
  color: #555760 !important;
  font-size: 7px !important;
}
.fui-add-row:hover { background: #15161a; color: #888a92 !important; }

.fui-relation {
  right: 18px;
  bottom: 18px;
  width: 520px;
  border-color: rgb(255 255 255 / 12%);
  border-radius: 7px;
  background: rgb(20 21 25 / 97%);
  box-shadow: 0 24px 70px rgb(0 0 0 / 52%), 0 0 0 1px rgb(0 0 0 / 45%);
  backdrop-filter: blur(16px);
}
.fui-relation > header {
  height: 36px;
  padding: 0 10px;
  border-color: var(--fui-line-strong);
  background: #17181d;
}
.fui-relation > header > img { width: 14px; height: 14px; }
.fui-relation > header strong { color: #c9cace; font-size: 9px; font-weight: 520; }
.fui-relation > header small { color: #62646c; font-size: 7px; }
.fui-relation > header > mark { color: #72ad8e; font-size: 7px; }
.fui-relation > header button { width: 21px; height: 21px; border-color: var(--fui-line); border-radius: 4px; color: #666871; }
.fui-relation__body { grid-template-columns: .88fr 1.12fr; background: #111216; }
.fui-relation dl { grid-template-columns: 1fr 1fr; gap: 9px; padding: 10px; border-color: var(--fui-line); }
.fui-relation dl > div { display: grid; grid-template-columns: 46px 1fr; gap: 5px; padding: 3px 0; }
.fui-relation dl > div:last-child { grid-column: 1 / -1; }
.fui-relation dl small { color: #575961; font-size: 7px; }
.fui-relation dl strong { color: #b9bac0; font-size: 9px; font-weight: 510; }
.fui-relation__match {
  grid-column: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 1px;
  padding: 0;
  border-top: 0;
  border-color: var(--fui-line);
  background: var(--fui-line);
}
.fui-relation__match p { padding: 8px; background: #15161a; }
.fui-relation__match small,
.fui-relation__match strong { display: block; }
.fui-relation__match small { color: #555760; font-size: 6px; }
.fui-relation__match strong { margin-top: 4px; color: #aeb0b6; font-size: 8px; font-weight: 510; }
.fui-relation__match footer { grid-column: 1 / -1; display: flex; gap: 4px; padding: 6px 8px; background: #131419; }
.fui-relation__match span,
.fui-relation__match b { padding: 3px 5px; border-radius: 3px; background: var(--fui-green-soft); color: #72b392; font-size: 6px; }
.fui-relation > footer { border-color: var(--fui-line-strong); background: #15161a; }
.fui-relation > footer button { height: 30px; border-color: var(--fui-line); color: #70727b; font-size: 7px; }
.fui-relation > footer button:hover { background: #1a1b20; color: #b9bac0; }
.fui-relation > footer button.is-danger { color: #bd6969; }

.case-showcase--product .product-shot figcaption,
.product-gallery--systems .product-shot figcaption {
  grid-template-columns: 160px 1fr;
  gap: 18px;
  min-height: 46px;
  padding: 11px 12px;
  border-color: #1b1c20;
  background: #08090b;
}
.case-showcase--product .product-shot figcaption span,
.product-gallery--systems .product-shot figcaption span { color: #7d7f87; font-size: 8px; letter-spacing: .07em; }
.case-showcase--product .product-shot figcaption em,
.product-gallery--systems .product-shot figcaption em { max-width: 64ch; color: #4f5159; font-size: 9px; line-height: 1.45; }

.fui-scene--project,
.fui-scene--wallets { min-height: 540px; padding: 0; }
.fui-project-shell,
.fui-wallet-shell { padding: 15px 18px 20px; }
.fui-module-head {
  min-height: 68px;
  padding-bottom: 12px;
  border-color: var(--fui-line-strong);
}
.fui-module-head h3 { gap: 7px; margin-top: 4px; font-size: 20px; }
.fui-module-head h3 > span {
  width: 21px;
  height: 21px;
  border: 1px solid rgb(119 116 216 / 18%);
  border-radius: 5px;
  background: var(--fui-accent-soft);
  color: #9996e3;
  font-size: 9px;
}
.fui-module-head ul { gap: 4px; margin-top: 7px; }
.fui-module-head li {
  padding: 3px 5px;
  border-color: var(--fui-line);
  border-radius: 3px;
  background: #15161a;
  color: #656770;
  font-size: 7px;
}
.fui-module-copy { margin-top: 7px !important; color: #666871; font-size: 8px; }
.fui-project-toolbar,
.fui-wallet-toolbar {
  min-height: 40px;
  gap: 5px;
  border-color: var(--fui-line);
}
.fui-project-toolbar > p { color: #565860; font-size: 7px; }
.fui-project-toolbar > p strong { color: #858790; }
.fui-project-toolbar > button,
.fui-wallet-toolbar > button {
  min-height: 25px;
  padding: 0 7px;
  border-color: var(--fui-line-strong);
  border-radius: 4px;
  background: #15161a;
  color: #666871;
  font-size: 7px;
}

.fui-project-layout { grid-template-columns: minmax(0, 1fr) 244px; gap: 7px; margin-top: 8px; }
.fui-project-stack { gap: 7px; }
.fui-team-card > header,
.fui-cost-card > header,
.fui-wallet-table > header {
  min-height: 42px;
  padding: 0 9px;
  border-color: var(--fui-line);
  background: #15161a;
}
.fui-team-card > header > div,
.fui-cost-card > header > span,
.fui-wallet-table > header > div { gap: 6px; }
.fui-team-card > header img,
.fui-cost-card > header img,
.fui-wallet-table > header img { width: 13px; height: 13px; }
.fui-team-card > header strong,
.fui-cost-card > header strong,
.fui-wallet-table > header strong { color: #a7a8ae; font-size: 8px; font-weight: 510; }
.fui-team-card > header p b,
.fui-cost-card > header p b { color: #d2d2d5; font-size: 11px; font-weight: 520; }
.fui-team-card > header p small,
.fui-cost-card > header p small { color: #555760; font-size: 7px; }
.fui-team-card > header button,
.fui-cost-card > header button { min-height: 21px; }
.fui-team-row {
  grid-template-columns: .84fr 1.22fr .86fr .66fr .88fr 18px;
  gap: 6px;
  min-height: 35px;
  padding: 0 7px;
  border-color: var(--fui-line);
  color: #7d7f87;
  font-size: 8px;
}
.fui-team-row:hover { background: #16171b; }
.fui-team-row--head {
  min-height: 24px;
  background: #111216;
  color: #4f5159;
  font-size: 6px;
}
.fui-team-row > strong { color: #a8a9af; font-size: 8px; font-weight: 500; }
.fui-team-row > b { color: #73757e; font-size: 8px; }
.fui-team-row > strong:nth-last-child(2) { color: #cbcbce; }
.fui-cost-card > header { min-height: 38px; }
.fui-cost-card > div span,
.fui-cost-card > div strong {
  min-height: 29px;
  padding: 8px 9px;
  border-color: var(--fui-line);
  color: #777982;
  font-size: 8px;
}
.fui-cost-card > div strong { color: #bbbdc2; font-weight: 510; }

.fui-project-metrics { gap: 7px; }
.fui-metric-summary { padding: 9px; }
.fui-metric-summary > span { color: #5d5f67; font-size: 7px; }
.fui-metric-summary > strong { margin-top: 3px; color: #d6d6d9; font-size: 12px; font-weight: 520; }
.fui-metric-summary > i { height: 2px; margin-top: 7px; background: #25262c; }
.fui-metric-summary > i b { background: #548e72; }
.fui-metric-summary > small { margin-top: 5px; color: #5d5f67; font-size: 7px; }
.fui-project-metrics article { min-height: 80px; padding: 0; }
.fui-project-metrics article > header button {
  margin-left: auto;
  padding: 3px 5px;
  border: 1px solid var(--fui-line);
  border-radius: 4px;
  background: #18191e;
  box-shadow: none;
  color: #62646c;
  font-size: 7px;
}
.fui-project-metrics article > div { padding: 9px; }
.fui-project-metrics article > div > strong { color: #dedee1; font-size: 17px; font-weight: 510; }
.fui-project-metrics article > div p { margin-top: 5px; color: #62646c; font-size: 7px; }
.fui-project-metrics article > div p b { color: #8f9199; }
.fui-project-metrics article > div p.is-coral b { color: #c18961; }
.fui-project-metrics article > div span { margin-top: 6px; padding: 3px 5px; border-radius: 3px; background: var(--fui-orange-soft); color: #bd835b; font-size: 6px; }
.fui-project-metrics article.is-green { border-color: rgb(84 164 125 / 19%); background: rgb(20 21 25 / 78%); color: var(--fui-ink); }
.fui-project-metrics article.is-green > header { background: var(--fui-green-soft); color: #81ba9c; }
.fui-project-metrics article.is-green > header img { filter: grayscale(1) brightness(1.8); opacity: .65; }
.fui-project-metrics article.is-green > header button { color: #698574; }

.fui-wallet-toolbar > p { color: #8b8d95; font-size: 8px; font-weight: 500; }
.fui-wallet-toolbar > p i { width: 5px; height: 5px; box-shadow: none; }
.fui-wallet-toolbar > span { color: #51535b; font-size: 7px; }
.fui-wallet-layout { grid-template-columns: minmax(0, 1fr) 282px; gap: 7px; margin-top: 8px; }
.fui-wallet-groups { gap: 7px; }
.fui-wallet-table > header { min-height: 37px; }
.fui-wallet-table > header > button { min-height: 21px; }
.fui-wallet-row {
  grid-template-columns: 1.42fr .83fr .9fr 76px 18px;
  gap: 6px;
  min-height: 40px;
  padding: 0 7px 0 9px;
  border-color: var(--fui-line);
  color: #777982;
  font-size: 8px;
}
.fui-wallet-row:hover { background: #16171b; }
.fui-wallet-row--head {
  min-height: 24px;
  background: #111216;
  color: #4f5159;
  font-size: 6px;
}
.fui-wallet-row > strong { grid-template-columns: 17px 1fr; color: #a9aab0; font-size: 8px; font-weight: 500; }
.fui-wallet-row > strong > img { width: 12px; height: 12px; }
.fui-wallet-row > strong > small { color: #53555d; font-size: 6px; }
.fui-wallet-row > b { color: #d0d0d3; font-size: 10px; font-weight: 510; }
.fui-wallet-row > b small { color: #686a72; font-size: 6px; }
.fui-wallet-row > span { gap: 5px; color: #70727b; }
.fui-wallet-row > span i {
  width: 23px;
  height: 17px;
  border-color: var(--fui-line-strong);
  border-radius: 3px;
  background: #18191e;
  color: #858790;
  font-size: 6px;
}
.fui-wallet-row > button { min-height: 22px; color: #676972; font-size: 7px; }
.fui-wallet-row > button img { width: 10px; height: 10px; }
.fui-wallet-row.is-new { background: rgb(214 138 84 / 7%); }
.fui-wallet-row.is-new:hover { background: rgb(214 138 84 / 10%); }

.fui-wallet-aside { gap: 8px; }
.fui-sync-panel > header {
  min-height: 28px;
  padding: 0 8px;
  border-color: var(--fui-line);
  background: #111216;
  color: #555760;
  font-size: 7px;
}
.fui-sync-panel > header button { width: 20px; height: 20px; }
.fui-sync-panel > p {
  grid-template-columns: 24px 1fr auto;
  gap: 6px;
  min-height: 38px;
  padding: 0 8px;
  border-color: var(--fui-line);
}
.fui-sync-panel > p > i { width: 22px; height: 22px; border-radius: 5px; font-size: 8px; }
.fui-sync-panel > p > i.is-revolut { background: #26272d; color: #bfc0c5; }
.fui-sync-panel > p > i.is-wise { background: #343461; color: #bbb9f1; }
.fui-sync-panel > p strong { color: #a7a8ae; font-size: 8px; font-weight: 500; }
.fui-sync-panel > p small { color: #53555d; font-size: 6px; }
.fui-sync-panel > p mark { padding: 3px 5px; border-radius: 3px; background: var(--fui-green-soft); color: #72ad8e; font-size: 6px; }
.fui-balance-label { margin: 1px 0 -2px; }
.fui-balance-label span { color: #96989f; font-size: 8px; font-weight: 510; }
.fui-balance-label small { color: #50525a; font-size: 6px; }
.fui-balance { gap: 6px; }
.fui-balance > div { gap: 6px; }
.fui-balance article {
  min-height: 69px;
  border-color: var(--fui-line-strong);
  border-radius: 6px;
  background: rgb(20 21 25 / 78%) !important;
  color: var(--fui-ink) !important;
}
.fui-balance article > header { height: 25px; padding: 0 7px; color: #777982; font-size: 6px; }
.fui-balance article > strong { padding: 8px 8px 0; color: #dedee1; font-size: 16px; font-weight: 510; }
.fui-balance article > small { padding: 4px 8px 7px; color: #555760; font-size: 6px; }
.fui-balance__total { border-color: rgb(84 164 125 / 18%) !important; }
.fui-balance__total > header { background: var(--fui-green-soft) !important; color: #7eb797; }
.fui-balance__total > header img { filter: grayscale(1) brightness(1.8); opacity: .65; }
.fui-balance article.is-red { border-color: rgb(210 105 105 / 18%); }
.fui-balance article.is-red > header { background: var(--fui-red-soft); color: #bd7777; }
.fui-balance article.is-red > strong { color: #d18282; }
.fui-balance__after { border-color: rgb(119 116 216 / 21%) !important; }
.fui-balance__after > header { background: var(--fui-accent-soft) !important; color: #9694dd; }
.fui-balance__after > header img { filter: grayscale(1) brightness(1.8); opacity: .65; }

@media (max-width: 1023px) {
  .fui-appbar { grid-template-columns: 1fr auto; }
  .fui-workspace { grid-template-columns: 1fr; }
  .fui-sidebar { display: none; }
  .fui-main { padding-inline: 16px; }
  .fui-project-layout { grid-template-columns: minmax(0, 1fr) 224px; }
  .fui-wallet-layout { grid-template-columns: minmax(0, 1fr) 252px; }
}

@media (max-width: 840px) {
  .fui-screen-head { display: flex; align-items: flex-end; }
  .fui-widget-row { grid-template-columns: 1.35fr 1fr; }
  .fui-widget--danger { grid-column: 1 / -1; }
  .fui-project-layout,
  .fui-wallet-layout { grid-template-columns: 1fr; }
  .fui-project-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fui-project-metrics article.is-green { grid-column: auto; }
  .fui-wallet-aside { grid-template-columns: 1fr 1fr; }
  .fui-sync-panel { grid-row: span 2; }
  .fui-balance-label,
  .fui-balance { grid-column: 2; }
}

@media (max-width: 767px) {
  .fui-scene--budget > .fui-appbar,
  .fui-scene--budget > .fui-workspace { width: 880px; }
  .fui-scene--project > .fui-appbar,
  .fui-scene--project > .fui-project-shell,
  .fui-scene--wallets > .fui-appbar,
  .fui-scene--wallets > .fui-wallet-shell { width: 900px; }
  .fui-widget-row { grid-template-columns: 1.45fr .9fr .82fr; }
  .fui-widget--danger { grid-column: auto; }
  .fui-project-layout { grid-template-columns: minmax(0, 1fr) 244px; }
  .fui-wallet-layout { grid-template-columns: minmax(0, 1fr) 282px; }
  .fui-project-metrics { grid-template-columns: 1fr; }
  .fui-wallet-aside { grid-template-columns: 1fr; }
  .fui-sync-panel { grid-row: auto; }
  .fui-balance-label,
  .fui-balance { grid-column: auto; }
  .fui-relation { right: 18px; bottom: 18px; width: 500px; }
}

/* Fintellect product UI v4 — Figma-native, tightened with Linear discipline. */

@font-face {
  font-family: "MacPaw Fixel Local";
  src: local("MacPaw Fixel"), local("MacPawFixel-VF"), local("Fixel Text");
  font-style: normal;
  font-weight: 100 900;
}

.fui-scene {
  --fui-bg: #e7e7e5;
  --fui-panel: #f7f7f5;
  --fui-white: #fff;
  --fui-ink: #2f2f31;
  --fui-subtle: #6f7072;
  --fui-muted: #929294;
  --fui-line: rgb(47 47 49 / 9%);
  --fui-line-strong: rgb(47 47 49 / 14%);
  --fui-orange: #f0934f;
  --fui-orange-soft: rgb(240 147 79 / 13%);
  --fui-green: #2a9366;
  --fui-green-soft: rgb(42 147 102 / 10%);
  --fui-red: #c62828;
  --fui-red-soft: rgb(198 40 40 / 9%);
  --fui-accent: #2f2f31;
  --fui-accent-soft: rgb(47 47 49 / 7%);
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 67% 16%, rgb(255 255 255 / 75%), transparent 34%),
    linear-gradient(118deg, #e3e3e1 0%, #eeeeec 56%, #dfdfdd 100%);
  color: var(--fui-ink);
  font-family: "MacPaw Fixel", "Fixel Text", Manrope, sans-serif;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
}

.fui-scene *,
.fui-scene button,
.fui-scene input { font-family: inherit; }
.fui-scene button { color: inherit; }
.fui-scene img { filter: none; opacity: .82; }
.fui-scene small { color: var(--fui-muted); }

.fui-workspace {
  display: grid;
  grid-template-columns: 182px minmax(0, 1fr);
  min-height: 660px;
}
.fui-scene--project .fui-workspace { min-height: 760px; }
.fui-scene--wallets .fui-workspace { min-height: 610px; }

.fui-sidebar {
  display: flex;
  flex-direction: column;
  padding: 16px 11px 12px;
  border-right: 1px solid var(--fui-line);
  background: rgb(230 230 228 / 72%);
  backdrop-filter: blur(18px);
}
.fui-sidebar__workspace {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 7px;
  min-height: 37px;
  padding: 5px 7px;
  border: 1px solid rgb(255 255 255 / 54%);
  border-radius: 8px 8px 3px 3px;
  background: rgb(255 255 255 / 24%);
}
.fui-sidebar__workspace > span,
.fui-sidebar__person > span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid rgb(47 47 49 / 7%);
  border-radius: 50%;
  background: #fff;
  color: #343436;
  font-size: 8px;
  font-weight: 700;
}
.fui-sidebar__workspace strong { display: block; color: #343436; font-size: 10px; font-weight: 600; }
.fui-sidebar__workspace small { display: none; }
.fui-sidebar__workspace > b { color: #8b8c8e; font-size: 10px; font-weight: 500; text-align: right; }
.fui-sidebar__person {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 4px 7px;
  border: 1px solid rgb(255 255 255 / 54%);
  border-top: 0;
  border-radius: 3px 3px 8px 8px;
  background: rgb(47 47 49 / 4%);
}
.fui-sidebar__person > span { width: 20px; height: 20px; border-radius: 6px; background: #f9f9f7; }
.fui-sidebar__person strong { overflow: hidden; color: #3b3b3d; font-size: 9px; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; }
.fui-sidebar__person button { color: #77787a; font-size: 10px; }
.fui-sidebar nav { display: grid; gap: 2px; margin-top: 14px; }
.fui-sidebar nav p {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #4f5052;
  font-size: 10px;
  font-weight: 520;
}
.fui-sidebar nav p::before { display: none; }
.fui-sidebar nav p > span { display: grid; place-items: center; width: 16px; height: 16px; }
.fui-sidebar nav p > span img { width: 14px; height: 14px; filter: grayscale(1); opacity: .58; }
.fui-sidebar nav p:hover { border-color: rgb(47 47 49 / 6%); background: rgb(255 255 255 / 34%); color: #2f2f31; }
.fui-sidebar nav p.is-active {
  border-color: rgb(255 255 255 / 72%);
  background: rgb(255 255 255 / 76%);
  box-shadow: none;
  color: var(--fui-orange);
  font-weight: 590;
}
.fui-sidebar nav p.is-active > span img { filter: sepia(1) saturate(4) hue-rotate(328deg); opacity: .82; }
.fui-sidebar__sync {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding: 10px 7px 0;
  border-top: 1px solid var(--fui-line);
}
.fui-sidebar__sync > i { width: 6px; height: 6px; border-radius: 50%; background: var(--fui-orange); box-shadow: none; }
.fui-sidebar__sync strong { color: #58595b; font-size: 8px; font-weight: 580; }
.fui-sidebar__sync small { color: #99999b; font-size: 7px; }
.fui-sidebar__sync button { width: 22px; height: 22px; color: #77787a; }

.fui-main,
.fui-project-shell,
.fui-wallet-shell {
  min-width: 0;
  padding: 16px 20px 22px;
}
.fui-screen-head { min-height: 62px; align-items: flex-start; }
.fui-screen-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.fui-tabs {
  display: inline-flex;
  gap: 0;
  padding: 0;
  border: 1px solid var(--fui-line-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / 28%);
  overflow: hidden;
}
.fui-tabs > b,
.fui-tabs > span {
  min-width: 0;
  min-height: 29px;
  padding: 8px 11px 0;
  border: 0;
  border-radius: 999px;
  color: #747577;
  font-size: 9px;
  font-weight: 520;
  line-height: 1;
}
.fui-tabs > b {
  background: #303032;
  box-shadow: none;
  color: #fff;
  font-weight: 590;
}
.fui-period {
  display: grid;
  grid-template-columns: 25px auto 25px;
  align-items: center;
  height: 29px;
  border: 1px solid var(--fui-line-strong);
  border-radius: 7px;
  overflow: hidden;
  background: rgb(255 255 255 / 66%);
}
.fui-period button { width: 25px; height: 27px; border: 0; border-radius: 0; color: #57585a; background: transparent; }
.fui-period strong { min-width: 76px; padding-top: 1px; color: #39393b; font-size: 9px; font-weight: 590; text-align: center; }
.fui-secondary,
.fui-dark,
.fui-add,
.fui-round,
.fui-back {
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid var(--fui-line-strong);
  border-radius: 7px;
  background: rgb(255 255 255 / 72%);
  color: #3f4042;
  font-size: 8px;
  font-weight: 570;
}
.fui-dark { border-color: #303032; background: #303032; color: #fff; }
.fui-add { color: var(--fui-green); }
.fui-back { min-height: 25px; margin-bottom: 16px; padding: 0 8px; }

.fui-forecast {
  margin-top: 0;
  padding: 10px;
  border: 1px solid rgb(47 47 49 / 5%);
  border-radius: 14px;
  background: rgb(47 47 49 / 5.5%);
}
.fui-forecast__meta { height: 20px; gap: 7px; color: #5b5c5e; font-size: 8px; }
.fui-forecast__meta > span { display: inline-flex; align-items: center; gap: 5px; color: #414244; font-size: 8px; font-weight: 590; }
.fui-forecast__meta img { width: 12px; height: 12px; }
.fui-forecast__meta > b { padding: 3px 6px; border: 0; border-radius: 5px; background: #fff; color: var(--fui-orange); font-size: 7px; font-weight: 590; }
.fui-forecast__meta > button { margin-left: auto; min-height: 24px; padding: 0 8px; border-radius: 6px; background: #fff; color: #444547; font-size: 8px; font-weight: 560; }
.fui-widget-row { grid-template-columns: 1.6fr .94fr .86fr; gap: 7px; margin-top: 7px; }
.fui-widget,
.fui-budget-card,
.fui-team-card,
.fui-cost-card,
.fui-project-metrics article,
.fui-metric-summary,
.fui-wallet-table,
.fui-balance article {
  border: 1px solid rgb(47 47 49 / 8%);
  border-radius: 8px;
  background: rgb(255 255 255 / 78%);
  box-shadow: 0 8px 24px rgb(47 47 49 / 4%);
  backdrop-filter: blur(14px);
}
.fui-widget { min-height: 82px; padding: 0; overflow: hidden; }
.fui-widget > header,
.fui-project-metrics article > header,
.fui-balance article > header {
  height: 26px;
  padding: 0 9px;
  border-bottom: 1px solid var(--fui-line);
  background: rgb(255 255 255 / 54%);
}
.fui-widget > header img,
.fui-project-metrics article > header img,
.fui-balance article > header img { width: 11px; height: 11px; }
.fui-widget > header strong,
.fui-project-metrics article > header strong { color: #4e4f51; font-size: 8px; font-weight: 590; }
.fui-widget > header button,
.fui-project-metrics article > header button { margin-left: auto; color: #aaa; font-size: 7px; }
.fui-widget > div { min-height: 55px; padding: 9px 11px; }
.fui-widget > div p > strong { color: #2f2f31; font-size: 16px; font-weight: 620; letter-spacing: -.055em; }
.fui-widget > div p > small { margin-top: 4px; color: #858587; font-size: 7px; }
.fui-widget > div p > em { color: var(--fui-green); font-size: 7px; }
.fui-widget > div > em { color: #77787a; font-size: 7px; }
.fui-widget--forecast > div > i { width: 1px; height: 38px; background: var(--fui-line); }
.fui-widget--forecast ul { min-width: 112px; gap: 4px; }
.fui-widget--forecast li { color: #525355; font-size: 8px; }
.fui-widget--forecast li small { color: #999a9c; font-size: 6px; }
.fui-widget--danger { border-color: rgb(198 40 40 / 13%); background: rgb(255 255 255 / 76%); }
.fui-widget--danger > header { background: #d9232c; color: #fff; }
.fui-widget--danger > header strong,
.fui-widget--danger > header button { color: #fff; }
.fui-widget--danger > header img { filter: brightness(0) invert(1); opacity: .9; }
.fui-widget--danger > div p > strong { color: #9d2429; }

.fui-filter-state { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.fui-filter-state button,
.fui-filter-state span { min-height: 26px; padding: 7px 9px 0; border: 1px solid var(--fui-line); border-radius: 7px; background: rgb(255 255 255 / 46%); color: #4f5052; font-size: 8px; }
.fui-filter-state span { background: #fff; color: var(--fui-orange); }
.fui-search-row {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin-top: 10px;
  padding: 0 11px;
  border: 1px solid rgb(255 255 255 / 74%);
  border-radius: 8px;
  background: rgb(255 255 255 / 66%);
  color: #b0b0b2;
  font-size: 8px;
}
.fui-search-row > span { margin-right: 6px; color: #c8c8ca; font-size: 7px; }
.fui-search-row kbd { margin-left: auto; color: #aaa; font: 500 7px/1 Manrope, sans-serif; }
.fui-plan-tools { gap: 7px; margin-top: 9px; }
.fui-plan-tools > span { flex: 1; }
.fui-plan-tools > button,
.fui-plan-tools > b { min-height: 25px; padding: 7px 9px 0; border: 1px solid var(--fui-line); border-radius: 6px; background: rgb(255 255 255 / 58%); color: #737476; font-size: 7px; font-weight: 550; }
.fui-plan-tools > b:first-of-type { color: var(--fui-orange); }

.fui-budget-grid { gap: 10px; margin-top: 9px; }
.fui-budget-card { overflow: hidden; border-radius: 11px; }
.fui-budget-card > header { min-height: 66px; padding: 11px 13px 8px; border-bottom: 0; background: rgb(255 255 255 / 44%); }
.fui-budget-card > header p { color: #444547; font-size: 8px; font-weight: 600; }
.fui-budget-card > header p img,
.fui-budget-card > header button img { width: 12px; height: 12px; }
.fui-budget-card > header strong { margin-top: 6px; color: #303032; font-size: 22px; font-weight: 620; letter-spacing: -.055em; }
.fui-budget-card > header small { margin-left: 6px; color: #aaa; font-size: 7px; }
.fui-budget-card > header button,
.fui-team-card > header button,
.fui-cost-card > header button,
.fui-wallet-table > header button { min-height: 23px; padding: 0 7px; border: 1px solid var(--fui-line); border-radius: 6px; background: #fff; color: #555658; box-shadow: none; font-size: 7px; font-weight: 570; }
.fui-budget-card--expense > header button { color: var(--fui-red); }
.fui-budget-card--income > header button { color: var(--fui-green); }
.fui-progress { padding: 0 13px 10px; border-bottom: 1px solid var(--fui-line); color: #77787a; font-size: 7px; }
.fui-progress span b { display: inline; color: #3d3e40; font-weight: 600; }
.fui-progress > i { height: 4px; background: #e8e8e6; }
.fui-progress > i b { background: #3ab882; }
.fui-progress > i em { background: #f1aa43; }
.fui-table-head,
.fui-table-row { grid-template-columns: minmax(0, 1.35fr) .92fr .63fr 16px; min-height: 31px; padding: 0 10px; border-top: 1px solid var(--fui-line); }
.fui-table-head { min-height: 25px; margin: 8px 8px 4px; padding-inline: 8px; border: 0; border-radius: 6px; background: rgb(47 47 49 / 7%); color: #696a6c; font-size: 7px; }
.fui-table-row { margin-inline: 7px; font-size: 8px; }
.fui-table-row:hover { background: rgb(255 255 255 / 64%); }
.fui-table-row--group { min-height: 34px; border-radius: 5px; background: rgb(255 255 255 / 34%); }
.fui-table-row--child { padding-left: 17px; }
.fui-table-row > strong { color: #3d3e40; font-size: 7px; font-weight: 550; }
.fui-table-row > b { color: #3d3e40; font-size: 8px; font-weight: 620; }
.fui-table-row > button { color: #aaa; }
.fui-check { width: 9px; height: 9px; border-color: #bcbcbf; border-radius: 3px; background: #fff; }
.fui-table-row .fui-row-icon { width: 11px; height: 11px; }
.fui-chip { min-height: 18px; padding: 5px 6px 0; border: 0; border-radius: 5px; background: rgb(47 47 49 / 7%); color: #555658; font-size: 6px; font-weight: 580; }
.fui-chip--date { background: #363638; color: #fff; }
.fui-chip--date.is-overdue { background: #ea4d58; color: #fff; }
.fui-chip--pending { background: var(--fui-orange-soft); color: #b55f21; }
.fui-chip--paid { background: var(--fui-green-soft); color: var(--fui-green); }
.fui-chip--neutral { background: rgb(47 47 49 / 8%); color: #4e4f51; }
.fui-project-tag { border: 0; background: rgb(47 47 49 / 7%) !important; color: #444547 !important; }
.fui-add-row { min-height: 27px; margin: 4px 8px 7px; border: 1px solid rgb(255 255 255 / 82%) !important; border-radius: 6px; background: #fff; color: var(--fui-green) !important; font-size: 7px; font-weight: 590; }

.fui-relation {
  right: 18px;
  bottom: 16px;
  width: 470px;
  border: 1px solid rgb(47 47 49 / 9%);
  border-radius: 10px;
  background: rgb(250 250 248 / 94%);
  box-shadow: 0 24px 70px rgb(47 47 49 / 18%);
  backdrop-filter: blur(18px);
}
.fui-relation > header { height: 36px; padding: 0 11px; border-bottom: 1px solid var(--fui-line); background: #fff; }
.fui-relation > header > img { width: 12px; height: 12px; }
.fui-relation > header > span { color: #343436; font-size: 8px; font-weight: 590; }
.fui-relation > header > mark { color: var(--fui-green); font-size: 7px; }
.fui-relation > header button { color: #88898b; }
.fui-relation__body { grid-template-columns: .9fr 1.1fr; background: #f5f5f3; }
.fui-relation dl { grid-template-columns: 1fr; gap: 0; padding: 10px; border-color: var(--fui-line); }
.fui-relation dl > div,
.fui-relation dl > div:last-child { display: grid; grid-template-columns: 54px 1fr; grid-column: auto; align-items: center; gap: 5px; padding: 6px 0; border-bottom: 1px solid var(--fui-line); }
.fui-relation dl > div:last-child { border-bottom: 0; }
.fui-relation dt { color: #929294; font-size: 7px; }
.fui-relation dd { color: #444547; font-size: 8px; font-weight: 570; }
.fui-relation__match { gap: 1px; padding: 10px; border: 0; background: var(--fui-line); }
.fui-relation__match p { padding: 8px; background: #fff; }
.fui-relation__match small { color: #929294; font-size: 6px; }
.fui-relation__match strong { color: #3d3e40; font-size: 9px; }
.fui-relation__match footer { background: #ededeb; }
.fui-relation__match span,
.fui-relation__match b { background: var(--fui-green-soft); color: var(--fui-green); }
.fui-relation > footer { border-color: var(--fui-line); background: #fff; }
.fui-relation > footer button { height: 29px; border-color: var(--fui-line); color: #4d4e50; font-size: 7px; }
.fui-relation > footer button.is-danger { color: var(--fui-red); }

.fui-project-shell,
.fui-wallet-shell { padding-top: 12px; }
.fui-module-head { align-items: center; gap: 14px; min-height: 84px; padding: 11px 14px 12px; border: 1px solid var(--fui-line); border-radius: 11px 11px 0 0; background: rgb(255 255 255 / 24%); }
.fui-module-head > div { min-width: 0; }
.fui-module-head > div:last-child { display: flex; align-items: center; gap: 7px; }
.fui-module-head h3 { display: flex; align-items: center; gap: 7px; margin: 0; color: #353537; font-size: 17px; font-weight: 620; letter-spacing: -.045em; }
.fui-module-head h3 > span { display: grid; place-items: center; width: 21px; height: 21px; border: 0; border-radius: 5px; background: #353537; color: #fff; font-size: 8px; }
.fui-module-head ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.fui-module-head li { min-height: 20px; padding: 6px 7px 0; border: 0; border-radius: 5px; background: rgb(47 47 49 / 8%); color: #555658; font-size: 7px; font-weight: 570; }
.fui-module-head li.is-active { background: var(--fui-orange); color: #fff; }
.fui-wallet-shell .fui-module-head { align-items: flex-start; min-height: 69px; padding: 0 0 10px; border: 0; border-radius: 0; background: transparent; }
.fui-wallet-shell .fui-module-head > div:first-child { display: flex; flex-direction: column; gap: 8px; }
.fui-round { align-self: flex-start; min-height: 24px; }

.fui-project-toolbar,
.fui-wallet-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid var(--fui-line);
  border-top: 0;
  background: rgb(255 255 255 / 24%);
}
.fui-project-toolbar--sprint { border-radius: 0 0 11px 11px; }
.fui-project-toolbar > span { flex: 1; }
.fui-project-toolbar > p { color: #77787a; font-size: 7px; }
.fui-project-toolbar > button,
.fui-wallet-toolbar > button,
.fui-sprint-picker {
  min-height: 27px;
  padding: 0 8px;
  border: 1px solid var(--fui-line);
  border-radius: 6px;
  background: #fff;
  color: #555658;
  font-size: 7px;
  font-weight: 570;
}
.fui-project-toolbar > button.is-selected { background: rgb(47 47 49 / 8%); color: #333436; }
.fui-sprint-picker { display: grid; grid-template-columns: 20px minmax(95px, auto) 20px; align-items: center; padding: 0; overflow: hidden; }
.fui-sprint-picker button { height: 25px; color: #66676a; }
.fui-sprint-picker strong { font-size: 7px; font-weight: 580; text-align: center; }
.fui-project-toolbar + .fui-project-toolbar { margin-top: 12px; border-top: 1px solid var(--fui-line); border-radius: 8px; background: transparent; }
.fui-wallet-toolbar { justify-content: flex-end; min-height: 33px; padding: 0 0 8px; border: 0; background: transparent; }

.fui-project-layout { grid-template-columns: minmax(0, 1fr) 228px; gap: 10px; margin-top: 10px; }
.fui-project-stack { gap: 8px; }
.fui-team-card,
.fui-cost-card { overflow: hidden; }
.fui-team-card > header,
.fui-cost-card > header,
.fui-wallet-table > header { min-height: 42px; padding: 0 10px; border-bottom: 1px solid var(--fui-line); background: rgb(255 255 255 / 48%); }
.fui-team-card > header > div,
.fui-cost-card > header > span,
.fui-wallet-table > header > div { display: flex; align-items: center; gap: 6px; }
.fui-team-card > header img,
.fui-cost-card > header img,
.fui-wallet-table > header img { width: 12px; height: 12px; }
.fui-team-card > header strong,
.fui-cost-card > header strong,
.fui-wallet-table > header strong { color: #424345; font-size: 9px; font-weight: 610; }
.fui-team-card > header p,
.fui-cost-card > header p { display: flex; align-items: baseline; gap: 6px; }
.fui-team-card > header p b,
.fui-cost-card > header p b { color: #343436; font-size: 13px; font-weight: 620; }
.fui-team-card > header p small,
.fui-cost-card > header p small { color: #999a9c; font-size: 6px; }
.fui-team-row { grid-template-columns: .88fr 1.25fr 1fr .8fr .9fr 14px; min-height: 34px; padding: 0 10px; border-top: 1px solid var(--fui-line); font-size: 7px; }
.fui-team-row--head { min-height: 26px; margin: 7px 8px 0; padding-inline: 8px; border: 0; border-radius: 6px; background: rgb(47 47 49 / 7%); color: #68696b; }
.fui-team-row > strong { color: #3e3f41; font-size: 7px; font-weight: 570; }
.fui-team-row > b { color: #555658; font-size: 7px; font-weight: 570; }
.fui-team-row > strong:nth-last-child(2) { color: #303032; font-weight: 620; }
.fui-cost-card > header { min-height: 39px; }
.fui-cost-card > div { display: grid; grid-template-columns: 1fr auto; }
.fui-cost-card > div span,
.fui-cost-card > div strong { min-height: 29px; padding: 9px 10px 0; border-top: 1px solid var(--fui-line); color: #626365; font-size: 7px; }
.fui-cost-card > div strong { color: #393a3c; font-weight: 590; text-align: right; }
.fui-cost-card > div strong em { color: var(--fui-red); font-style: normal; }
.fui-cost-card--collapsed > header { border-bottom: 0; }

.fui-project-metrics { gap: 8px; }
.fui-metric-summary { padding: 10px; }
.fui-metric-summary > span { color: #7f8082; font-size: 7px; }
.fui-metric-summary > strong { margin-top: 3px; color: #343436; font-size: 12px; font-weight: 620; }
.fui-metric-summary > i { height: 3px; margin-top: 7px; background: #e2e2df; }
.fui-metric-summary > i b { background: var(--fui-green); }
.fui-metric-summary > small { margin-top: 5px; color: #88898b; font-size: 6px; }
.fui-project-metrics article { min-height: 86px; padding: 0; }
.fui-project-metrics article > div { padding: 10px; }
.fui-project-metrics article > div > strong { color: #343436; font-size: 17px; font-weight: 620; }
.fui-project-metrics article > div p { margin-top: 5px; color: #77787a; font-size: 6px; }
.fui-project-metrics article > div p b { color: var(--fui-orange); }
.fui-project-metrics article > div span { margin-top: 6px; background: rgb(47 47 49 / 7%); color: #8b8c8e; }
.fui-project-metrics article.is-green { border-color: rgb(42 147 102 / 18%); background: rgb(255 255 255 / 82%); color: #343436; }
.fui-project-metrics article.is-green > header { background: #3ab882; color: #fff; }
.fui-project-metrics article.is-green > header strong,
.fui-project-metrics article.is-green > header button { color: #fff; }
.fui-project-metrics article.is-green > header img { filter: brightness(0) invert(1); opacity: .9; }

.fui-wallet-layout { grid-template-columns: minmax(0, 1fr) 284px; gap: 12px; margin-top: 0; }
.fui-wallet-groups { gap: 9px; }
.fui-wallet-table { border-radius: 10px; }
.fui-wallet-table > header { min-height: 39px; }
.fui-wallet-row { grid-template-columns: minmax(150px, 1.2fr) .85fr 1fr 65px 14px; min-height: 37px; padding: 0 10px; border-top: 1px solid var(--fui-line); font-size: 7px; }
.fui-wallet-row--head { min-height: 27px; margin: 7px 8px 0; padding-inline: 8px; border: 0; border-radius: 6px; background: rgb(47 47 49 / 7%); color: #68696b; }
.fui-wallet-row > strong { display: grid; grid-template-columns: 15px 1fr; gap: 6px; color: #3e3f41; font-size: 7px; font-weight: 570; }
.fui-wallet-row > strong > img { width: 11px; height: 11px; }
.fui-wallet-row > strong > small { grid-column: 2; color: #9a9b9d; font-size: 6px; }
.fui-wallet-row > b { color: #37383a; font-size: 9px; font-weight: 620; }
.fui-wallet-row > b small { color: #8d8e90; font-size: 6px; }
.fui-wallet-row > span { color: #67686a; }
.fui-wallet-row > span i { display: inline-grid; place-items: center; width: 30px; height: 20px; margin-right: 5px; border: 0; border-radius: 5px; background: #343436; color: #fff; font: 600 6px/1 Manrope, sans-serif; }
.fui-wallet-row > button { min-height: 22px; padding: 0 6px; border: 1px solid var(--fui-line); border-radius: 6px; background: #fff; color: #555658; font-size: 7px; }
.fui-wallet-row > button:last-child { padding: 0; border: 0; background: transparent; color: #aaa; }
.fui-wallet-row.is-new { background: var(--fui-orange-soft); }
.fui-wallet-aside { gap: 8px; }
.fui-balance { gap: 8px; padding: 12px; border-radius: 13px; background: rgb(47 47 49 / 5%); }
.fui-balance > div { gap: 8px; }
.fui-balance article { min-height: 82px; padding: 0; overflow: hidden; background: #fff !important; color: #343436 !important; }
.fui-balance article > header { height: 27px; padding: 0 9px; color: #565759; font-size: 6px; }
.fui-balance article > strong { padding: 10px 9px 0; color: #343436; font-size: 18px; font-weight: 620; }
.fui-balance article > small { padding: 4px 9px 8px; color: #929294; font-size: 6px; }
.fui-balance__total { border-color: rgb(42 147 102 / 18%) !important; background: #fff !important; }
.fui-balance__total > header { background: #3ab882 !important; color: #fff !important; }
.fui-balance__total > header img { filter: brightness(0) invert(1); }
.fui-balance article.is-red { border-color: rgb(198 40 40 / 13%); }
.fui-balance article.is-red > header { background: var(--fui-red-soft); color: var(--fui-red); }
.fui-balance article.is-red > strong { color: #9d2429; }
.fui-balance__after { border-color: var(--fui-line-strong) !important; background: #fff !important; }
.fui-balance__after > header { background: rgb(47 47 49 / 6%) !important; color: #4d4e50; }

@media (max-width: 1023px) {
  .fui-workspace { grid-template-columns: 1fr; }
  .fui-sidebar { display: none; }
  .fui-project-layout { grid-template-columns: minmax(0, 1fr) 228px; }
  .fui-wallet-layout { grid-template-columns: minmax(0, 1fr) 260px; }
}

@media (max-width: 840px) {
  .fui-project-layout,
  .fui-wallet-layout { grid-template-columns: 1fr; }
  .fui-project-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fui-wallet-aside { display: block; }
  .fui-balance { display: grid; grid-template-columns: 1fr 1fr; }
  .fui-balance > div { display: contents; }
}

@media (max-width: 767px) {
  .fui-scene--budget > .fui-workspace,
  .fui-scene--project > .fui-workspace,
  .fui-scene--wallets > .fui-workspace { width: 960px; }
  .fui-scene--project .fui-workspace { min-height: 760px; }
  .fui-scene--wallets .fui-workspace { min-height: 610px; }
  .fui-widget-row { grid-template-columns: 1.6fr .94fr .86fr; }
  .fui-budget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fui-project-layout { grid-template-columns: minmax(0, 1fr) 228px; }
  .fui-wallet-layout { grid-template-columns: minmax(0, 1fr) 284px; }
  .fui-project-metrics { grid-template-columns: 1fr; }
  .fui-balance { display: flex; }
  .fui-balance > div { display: grid; }
  .fui-relation { position: absolute; right: 18px; bottom: 16px; width: 470px; margin: 0; }
}

/* Fintellect case study — single production UI proof */
.legacy-product-showcase,
.product-gallery--systems {
  display: none;
}

.case-showcase--product.exact-case-showcase {
  padding: clamp(20px, 2.8vw, 44px);
  border: 0;
  background: #08090b;
}

.exact-case-showcase .exact-case-shot {
  margin: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.exact-window {
  position: relative;
  overflow: hidden;
  border: 1px solid #2b2c32;
  border-radius: clamp(8px, .8vw, 12px);
  background: #111216;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 2%), 0 32px 90px rgb(0 0 0 / 44%);
}

.exact-window__bar {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 88px;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  color: #63656d;
  background: #111216;
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .055em;
  text-transform: uppercase;
}

.exact-window__bar p {
  margin: 0;
  overflow: hidden;
  color: #73757e;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exact-window__bar > span {
  justify-self: end;
  padding: 5px 7px;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 999px;
  color: #8a8c94;
  background: rgb(255 255 255 / 3%);
}

.exact-window__lights {
  display: flex;
  gap: 6px;
}

.exact-window__lights i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34363d;
}

.exact-window__lights i:nth-child(2) { opacity: .72; }
.exact-window__lights i:nth-child(3) { opacity: .46; }

.exact-capture {
  position: relative;
  width: 100%;
  min-height: 1px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #e5e5e5;
}

.exact-capture iframe {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: var(--exact-width, 1440px);
  height: var(--exact-height, 1060px);
  border: 0;
  background: #e5e5e5;
  transform: scale(var(--exact-scale, .75));
  transform-origin: 0 0;
  pointer-events: none;
}

.exact-case-showcase .exact-case-shot figcaption {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  min-height: 0;
  padding: 15px 2px 0;
  border: 0;
  color: #71737b;
  background: transparent;
}

.exact-case-showcase .exact-case-shot figcaption span {
  color: #858790;
  font: 500 9px/1.4 var(--font-mono);
  letter-spacing: .065em;
}

.exact-case-showcase .exact-case-shot figcaption em {
  max-width: 460px;
  margin: 0;
  color: #555760;
  font-size: 10px;
  line-height: 1.45;
  text-align: left;
}

@media (max-width: 767px) {
  .case-showcase--product.exact-case-showcase {
    padding: 10px;
  }

  .exact-case-showcase .exact-case-shot figcaption {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 2px 2px;
  }

  .exact-case-showcase .exact-case-shot figcaption em {
    text-align: left;
  }
}

/* Fintellect case study — team economics and modular analytics */
.case-story--team,
.case-story--analytics {
  border-top: 1px solid var(--line);
}

.case-story--team .case-story__body,
.case-story--analytics .case-story__body {
  min-height: clamp(280px, 30vw, 440px);
}

.exact-case-showcase--team .exact-window {
  background: #e5e5e5;
}

.snack-analytics {
  --snack-gap: 16px;
  --snack-radius-panel: 18px;
  --snack-radius-card: 16px;
  --snack-radius-header: 12px;
  --snack-radius-control: 8px;
  margin-top: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.snack-analytics__header,
.snack-analytics__footer {
  display: none;
  align-items: center;
  color: #666972;
  font: 500 9px/1.3 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.snack-analytics__header {
  grid-template-columns: 190px minmax(0, 1fr) 120px;
  height: 48px;
  padding: 0 18px;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  background: #0d0e11;
}

.snack-analytics__header p,
.snack-analytics__header i,
.snack-analytics__footer em {
  margin: 0;
  font: inherit;
  font-style: normal;
}

.snack-analytics__header p { text-align: center; }
.snack-analytics__header i { justify-self: end; }

.snack-analytics__viewport {
  overflow-x: visible;
  overscroll-behavior-inline: contain;
  background: transparent;
}

.snack-analytics__viewport::-webkit-scrollbar { height: 6px; }
.snack-analytics__viewport::-webkit-scrollbar-thumb { background: #35373e; }

.snack-analytics__canvas {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(5, 96px);
  gap: var(--snack-gap);
  width: 100%;
  min-width: 0;
  padding: 24px 0 72px;
}

.snack-coordinate { display: none; }

.snack-cluster {
  display: contents;
}

.snack-cluster::before { display: none; }

.snack-cluster--team .snack-widget:nth-child(1) { grid-area: 1 / 1 / 2 / 4; }
.snack-cluster--team .snack-widget:nth-child(2) { grid-area: 1 / 4 / 2 / 7; }
.snack-cluster--team .snack-widget:nth-child(3) { grid-area: 1 / 7 / 2 / 10; }
.snack-cluster--team .snack-widget:nth-child(4) { grid-area: 1 / 10 / 2 / 13; }
.snack-cluster--forecast .snack-widget:nth-child(1) { grid-area: 2 / 1 / 3 / 4; }
.snack-cluster--forecast .snack-widget:nth-child(2) { grid-area: 3 / 1 / 4 / 4; }
.snack-cluster--forecast .snack-widget:nth-child(3) { grid-area: 3 / 4 / 4 / 7; }
.snack-cluster--project .snack-widget:nth-child(1) { grid-area: 3 / 7 / 4 / 10; }
.snack-cluster--project .snack-widget:nth-child(2) { grid-area: 4 / 1 / 5 / 4; }
.snack-cluster--project .snack-widget:nth-child(3) { grid-area: 3 / 10 / 6 / 13; }
.snack-cluster--margin .snack-widget:nth-child(1) { grid-area: 4 / 4 / 5 / 7; }
.snack-cluster--margin .snack-widget:nth-child(2) { grid-area: 4 / 7 / 5 / 10; }
.snack-widget--balance { grid-area: 2 / 4 / 3 / 7; }
.snack-widget--net { grid-area: 2 / 7 / 3 / 10; }
.snack-widget--runway { grid-area: 2 / 10 / 3 / 13; }

.snack-green-row {
  display: grid;
  grid-area: 5 / 1 / 6 / 10;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--snack-gap);
  min-width: 0;
}

.snack-green-row .snack-widget { height: 96px; }

.snack-widget {
  height: 96px;
  min-width: 0;
  color: #2f2f31;
  filter: drop-shadow(0 10px 24px rgb(47 47 49 / 8%));
  font-family: "Fixel", sans-serif;
  font-synthesis: none;
}

.snack-analytics.is-motion-ready .snack-widget {
  opacity: 0;
  transform: translateY(12px);
}

.snack-analytics.is-running .snack-widget {
  animation: snack-widget-in 520ms cubic-bezier(.2,.72,.2,1) both;
  animation-delay: calc(var(--reveal-order, 0) * 55ms);
}

@keyframes snack-widget-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.snack-widget > header {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 32px;
  height: 32px;
  padding: 8px 12px;
  border-radius: var(--snack-radius-header) var(--snack-radius-header) 0 0;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.24px;
  white-space: nowrap;
}

.snack-widget > header img { width: 16px; height: 16px; }
.snack-widget--icon-ink > header img { filter: brightness(0) saturate(100%); opacity: .78; }
.snack-widget > header span { overflow: hidden; text-overflow: ellipsis; }
.snack-widget > header em { margin-left: auto; padding: 4px 7px; border-radius: var(--snack-radius-control); color: #2a9366; background: #fff; font-size: 11px; font-style: normal; }

.snack-widget__body {
  display: flex;
  align-items: center;
  flex: 0 0 64px;
  height: 64px;
  min-height: 64px;
  overflow: hidden;
  padding: 12px 16px;
  border: 1px solid #fff;
  border-radius: 0 0 var(--snack-radius-card) var(--snack-radius-card);
  background: #f8f8f8;
}

.snack-widget__body > strong,
.snack-widget__body p > strong {
  color: #2f2f31;
  font-size: clamp(18px, 1.65vw, 22px);
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -.44px;
  white-space: nowrap;
}

.snack-widget__body p { margin: 0; }
.snack-widget__body small { color: #5e5f62; font-size: 11px; line-height: 1.2; letter-spacing: -.2px; }
.snack-widget__body small b { color: #2f2f31; font-weight: 600; }
.snack-widget__body--split > i,
.snack-widget__body--forecast > i { flex: none; width: 1px; height: 34px; margin: 0 14px; background: rgb(47 47 49 / 14%); }
.snack-widget__body--split p,
.snack-widget__body--detail,
.snack-widget__body--payment p { display: flex; flex-direction: column; gap: 4px; }
.snack-widget__body--split small { display: block; white-space: nowrap; }

.snack-widget--utilisation .snack-widget__body { gap: 12px; }
.snack-widget--budget .snack-widget__body { gap: 12px; }
.snack-widget--sprint .snack-widget__body--split > i,
.snack-widget--net .snack-widget__body--split > i { margin-inline: 9px; }
.snack-widget--sprint .snack-widget__body small,
.snack-widget--net .snack-widget__body small { font-size: 9px; }
.snack-widget--sprint {
  display: flex;
  flex-direction: column;
  height: auto;
  filter: drop-shadow(0 14px 34px rgb(47 47 49 / 10%));
}

.snack-widget--sprint .snack-widget__body {
  align-items: stretch;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
  padding: 18px 16px 20px;
}

.snack-payment-ledger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.snack-payment-ledger__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.snack-payment-ledger__summary > strong {
  color: #2f2f31;
  font-size: 22px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -.44px;
  white-space: nowrap;
}

.snack-payment-ledger__summary > small {
  color: #2f2f31;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: -.22px;
}

.snack-payment-ledger__divider {
  width: 100%;
  height: 1px;
  opacity: .9;
}

.snack-payment-ledger__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.snack-payment-ledger__group p {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  color: #2f2f31;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: -.22px;
  white-space: nowrap;
}

.snack-payment-ledger__group img {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.snack-payment-ledger__group b {
  color: #919192;
  font-weight: 600;
}
.snack-progress { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 100px; }
.snack-progress small { display: flex; justify-content: space-between; }
.snack-progress small b { color: #3ab882; }
.snack-progress small em { color: #919192; font-style: normal; }
.snack-progress > i { display: block; width: 100%; height: 4px; overflow: hidden; border-radius: 4px; background: rgb(47 47 49 / 18%); }
.snack-progress > i b { display: block; width: 100%; height: 4px; background: #3ab882; transform: scaleX(var(--progress, .73)); transform-origin: left center; }
.snack-analytics.is-motion-ready .snack-progress > i b { transform: scaleX(0); }
.snack-analytics.is-running .snack-progress > i b { transform: scaleX(var(--progress, .73)); transition: transform 900ms cubic-bezier(.2,.72,.2,1); }

.snack-widget__body--forecast { gap: 0; }
.snack-widget__body--forecast p { display: flex; flex-direction: column; gap: 3px; }
.snack-widget__body--forecast p:last-child { min-width: 155px; }
.snack-widget__body--forecast p:last-child small { white-space: nowrap; }
.snack-widget__body--forecast small > em { margin-left: 4px; color: #2f2f31; font-style: normal; }
.snack-widget__body--detail { align-items: flex-start; justify-content: center; }
.snack-widget__body--detail small b { margin-left: auto; }
.snack-widget--danger > header { color: #fff; background: #c62828; }
.snack-widget--danger > header img,
.snack-widget--success > header img { filter: brightness(0) invert(1); }
.snack-widget--danger-soft > header { color: #c62828; background: #fff; }
.snack-widget--success > header { color: #fff; background: #3ab882; }
.snack-widget--success > header em { color: #fff; background: #2a9366; }
.snack-widget--muted .snack-widget__body > strong { color: #919192; }
.snack-widget--metric .snack-widget__body { min-height: 64px; }
.snack-widget .is-red { color: #c62828; }
.snack-widget .is-green { color: #2a9366; }

@media (prefers-reduced-motion: reduce) {
  .snack-analytics.is-motion-ready .snack-widget,
  .snack-analytics.is-running .snack-widget { opacity: 1; transform: none; animation: none; }
  .snack-analytics.is-motion-ready .snack-progress > i b,
  .snack-analytics.is-running .snack-progress > i b { transform: scaleX(var(--progress, .73)); transition: none; }
}

.snack-analytics__footer {
  grid-template-columns: 1fr 1fr;
  min-height: 52px;
  padding: 14px 18px;
  border-top: 1px solid rgb(255 255 255 / 9%);
  background: #0d0e11;
}

.snack-analytics__footer em { justify-self: end; color: #555760; text-transform: none; }

@media (max-width: 900px) {
  .snack-analytics__header { grid-template-columns: 1fr auto; }
  .snack-analytics__header p { display: none; }
  .snack-analytics__viewport { overflow-x: auto; }
  .snack-analytics__canvas { min-width: 980px; padding: 24px 0 64px; }
}

@media (max-width: 767px) {
  .case-story--team .case-story__body,
  .case-story--analytics .case-story__body { min-height: 0; }
  .snack-analytics { margin-inline: calc(var(--gutter) * -1); border-inline: 0; }
  .snack-analytics__footer { grid-template-columns: 1fr; gap: 5px; }
  .snack-analytics__footer em { justify-self: start; }
}