/* Final presentation layer for the 2026-07-17 header and signed-out showcase group. */

/* The logo artwork, theme mask, price readout, and hidden Killah Beez target all
   live in this container, so one offset keeps every layer registered. */
.hero .appLogo{
  margin-top:20px!important;
}

/* Signed-out project command center */
#projectsSignedOut.projectReferenceShowcase,
#inventorySignedOut.inventoryReferenceShowcase{
  --ref-accent:var(--accent,var(--v3a,#4f8cff));
  --ref-accent-2:var(--accent-2,var(--v3b,#75b5ff));
  container-type:inline-size;
  overflow:hidden;
  padding:clamp(28px,5vw,62px)!important;
  border:1px solid color-mix(in srgb,var(--ref-accent) 38%,var(--line))!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--ref-accent) 13%,transparent),transparent 32%),
    linear-gradient(150deg,color-mix(in srgb,var(--surface-raised) 98%,transparent),color-mix(in srgb,var(--surface-input) 94%,transparent))!important;
  box-shadow:0 28px 70px rgba(0,0,0,.22),inset 0 1px color-mix(in srgb,var(--ref-accent-2) 20%,transparent)!important;
}
body.signed-out #projectsSignedOut.projectReferenceShowcase,
body.signed-out #inventorySignedOut.inventoryReferenceShowcase{display:block!important}

.projectReferenceHeader,
.inventoryReferenceHeader{max-width:none!important;margin:0!important;text-align:left!important}
.projectReferenceHeader>span,
.inventoryReferenceHeader>span{display:flex!important;align-items:center;gap:11px;color:var(--ref-accent)!important;font-size:.78rem!important;font-weight:900!important;letter-spacing:.18em!important}
.projectReferenceHeader>span svg,.inventoryReferenceHeader>span svg{width:25px;height:25px;padding:3px;stroke:currentColor;fill:none;stroke-width:1.8}
.projectReferenceHeadline,.inventoryReferenceHeadline{display:grid;grid-template-columns:72px minmax(220px,.9fr) minmax(280px,1.15fr);align-items:center;gap:28px;margin:44px 0 28px}
.projectReferenceHeadline .referenceHeadlineIcon,.inventoryReferenceHeadline .referenceHeadlineIcon{display:grid;place-items:center;width:68px;height:68px;border:1px solid color-mix(in srgb,var(--ref-accent) 38%,var(--line));border-radius:20px;background:color-mix(in srgb,var(--ref-accent) 8%,var(--surface-input));box-shadow:inset 0 1px color-mix(in srgb,#fff 18%,transparent),0 14px 26px rgba(0,0,0,.15);color:var(--ref-accent)}
.projectReferenceHeadline .referenceHeadlineIcon svg,.inventoryReferenceHeadline .referenceHeadlineIcon svg{width:36px;height:36px;stroke:currentColor;fill:none;stroke-width:1.8}
.projectReferenceShowcase .projectReferenceHeadline h2,
.inventoryReferenceShowcase .inventoryReferenceHeadline h2{margin:0!important;color:var(--text)!important;font-family:inherit!important;font-size:clamp(2.7rem,5.2vw,5.15rem)!important;font-style:normal!important;font-weight:850!important;line-height:.96!important;letter-spacing:-.055em!important;text-wrap:balance}
.projectReferenceShowcase .projectReferenceHeadline h2.referenceAccentHeadline,
.inventoryReferenceShowcase .inventoryReferenceHeadline h2.referenceAccentHeadline{color:var(--ref-accent)!important}
.projectReferenceHeadline h2>.titleIcon,.inventoryReferenceHeadline h2>.titleIcon{display:none!important}
.projectReferenceHeader>p,.inventoryReferenceHeader>p{max-width:720px!important;margin:0 0 28px!important;color:var(--muted)!important;font-size:clamp(1rem,1.65vw,1.3rem)!important;line-height:1.65!important}
.projectReferenceShowcase .showcaseV3SignIn,.inventoryReferenceShowcase .showcaseV3SignIn{width:min(100%,490px)!important;min-height:70px!important;margin:0!important;padding:12px 18px!important;border-color:color-mix(in srgb,var(--ref-accent) 72%,var(--line))!important;border-radius:16px!important;background:linear-gradient(100deg,color-mix(in srgb,var(--ref-accent) 88%,#0b4fff),var(--ref-accent))!important;color:#fff!important;box-shadow:0 15px 30px color-mix(in srgb,var(--ref-accent) 22%,transparent)!important}
.projectReferenceShowcase .showcaseV3SignIn img,.inventoryReferenceShowcase .showcaseV3SignIn img{width:43px;height:43px;padding:7px;border-radius:50%;background:#fff}
.projectReferenceShowcase .showcaseV3SignIn span,.inventoryReferenceShowcase .showcaseV3SignIn span{font-size:1.05rem!important;font-weight:800!important}
.projectReferenceShowcase .showcaseV3SignIn b,.inventoryReferenceShowcase .showcaseV3SignIn b{margin-left:auto;font-size:1.8rem;font-weight:400;transition:transform .2s ease}
.projectReferenceShowcase .showcaseV3SignIn:hover b,.inventoryReferenceShowcase .showcaseV3SignIn:hover b{transform:translateX(5px)}

.projectReferenceConsole{position:relative;margin-top:72px;padding:30px;border:1px solid color-mix(in srgb,var(--ref-accent) 22%,var(--line));border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-input) 92%,transparent),color-mix(in srgb,var(--surface-raised) 98%,transparent));box-shadow:0 24px 50px rgba(0,0,0,.16),inset 0 1px color-mix(in srgb,#fff 13%,transparent)}
.projectReferenceTop{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;min-height:68px}
.consoleStatus{display:flex;align-items:center;gap:10px;color:#31b867;font-size:.76rem;font-weight:900;letter-spacing:.1em}
.consoleStatus i{width:11px;height:11px;border-radius:50%;background:#46d779;box-shadow:0 0 15px #46d779}
.projectReferenceTabs{display:flex;gap:12px;margin-top:-70px}
.projectReferenceTabs span{display:grid;place-items:center;gap:8px;width:105px;min-height:108px;padding:16px 10px;border:1px solid color-mix(in srgb,var(--ref-accent) 28%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--surface-raised) 98%,transparent);box-shadow:0 14px 32px rgba(0,0,0,.15);color:var(--ref-accent)}
.projectReferenceTabs svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.8}.projectReferenceTabs b{color:var(--text);font-size:.78rem;text-transform:uppercase}
.projectReferenceBody{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;margin-top:10px}
.projectReferencePhoto,.projectReferenceRecipe{min-width:0;border:1px solid color-mix(in srgb,var(--ref-accent) 17%,var(--line));border-radius:19px;background:color-mix(in srgb,var(--surface-raised) 96%,transparent)}
.projectReferencePhoto{display:grid;grid-template-columns:minmax(150px,220px) 1fr;align-items:center;gap:22px;padding:18px}
.projectReferencePhoto>div{display:grid;place-items:center;overflow:hidden;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--ref-accent) 14%,var(--line));border-radius:16px;background:#fff}
.projectReferencePhoto img{width:100%;height:100%;object-fit:contain}
.projectReferencePhoto span{display:grid;gap:7px}.projectReferencePhoto small,.projectReferenceRecipe>small,.projectReferenceMetrics small{color:var(--muted);font-size:.67rem;font-weight:900;letter-spacing:.11em}.projectReferencePhoto b{font-size:1.2rem}.projectReferencePhoto em{color:var(--muted);font-size:.82rem;font-style:normal}
.projectReferenceRecipe{display:flex;flex-direction:column;justify-content:center;gap:15px;padding:28px}
.projectReferenceRecipe span{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:10px;color:var(--muted)}.projectReferenceRecipe span i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 10px color-mix(in srgb,var(--c) 50%,transparent)}.projectReferenceRecipe span b{color:var(--text)}
.projectReferenceMetrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.projectReferenceMetrics>span{display:grid;grid-template-columns:50px 1fr;grid-template-rows:auto auto;align-items:center;gap:2px 13px;padding:5px 20px;border-right:1px solid var(--line)}.projectReferenceMetrics>span:last-child{border:0}.projectReferenceMetrics svg,.metricCurrency{grid-row:1/3;display:grid;place-items:center;width:48px;height:48px;padding:11px;border-radius:50%;background:color-mix(in srgb,var(--ref-accent) 11%,var(--surface-input));color:var(--ref-accent);stroke:currentColor;fill:none;stroke-width:1.8;font-size:1.25rem;font-weight:700}.projectReferenceMetrics b{font-size:1.08rem}.projectReferenceMetrics>span:last-child b{color:#31b867}
.projectReferenceFlow,.inventoryReferenceFlow{display:grid!important;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:18px;margin-top:34px!important;padding:25px!important;border:1px solid color-mix(in srgb,var(--ref-accent) 18%,var(--line))!important;border-radius:22px!important;background:color-mix(in srgb,var(--surface-raised) 96%,transparent)!important}
.projectReferenceFlow article,.inventoryReferenceFlow article{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:15px}.projectReferenceFlow article svg,.inventoryReferenceFlow article svg{width:50px;height:50px;padding:12px;border-radius:50%;background:color-mix(in srgb,var(--ref-accent) 10%,var(--surface-input));color:var(--ref-accent);stroke:currentColor;fill:none;stroke-width:1.8}.projectReferenceFlow article span,.inventoryReferenceFlow article span{display:grid;gap:3px}.projectReferenceFlow article b,.inventoryReferenceFlow article b{text-transform:uppercase}.projectReferenceFlow article small,.inventoryReferenceFlow article small{color:var(--muted);line-height:1.4}.projectReferenceFlow>i,.inventoryReferenceFlow>i{color:var(--ref-accent);font-size:1.8rem;font-style:normal}

/* Signed-out inventory operations dashboard */
.inventoryReferenceHeadline{grid-template-columns:72px minmax(230px,.95fr) 1px minmax(250px,1.1fr)}
.inventoryReferenceHeadline>i{width:1px;height:90px;background:var(--line)}
.inventoryReferenceHeader .v3Live{width:10px;height:10px;border-radius:50%;background:#52d671;box-shadow:0 0 12px #52d671}
.inventoryReferenceBoard{margin-top:50px;padding:28px;border:1px solid color-mix(in srgb,var(--ref-accent) 22%,var(--line));border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-input) 93%,transparent),color-mix(in srgb,var(--surface-raised) 98%,transparent));box-shadow:0 24px 50px rgba(0,0,0,.16)}
.inventoryReferenceTop{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.inventoryReferenceTop span{display:flex;align-items:center;gap:10px;font-size:.82rem;font-weight:900;letter-spacing:.1em}.inventoryReferenceTop svg{width:26px;height:26px;padding:4px;border-radius:8px;background:color-mix(in srgb,var(--ref-accent) 10%,transparent);color:var(--ref-accent);stroke:currentColor;fill:none;stroke-width:1.8}.inventoryReferenceTop b{color:#4bd36c;font-size:1rem}
.inventoryReferenceLocations{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.inventoryReferenceLocations article{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:3px 12px;padding:18px;border:1px solid color-mix(in srgb,var(--ref-accent) 18%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--surface-raised) 95%,transparent)}.inventoryReferenceLocations svg{grid-row:1/3;width:46px;height:46px;padding:8px;color:var(--ref-accent);stroke:currentColor;fill:none;stroke-width:1.8}.inventoryReferenceLocations b{font-size:1rem}.inventoryReferenceLocations small{color:var(--muted)}.inventoryReferenceLocations article>i{grid-column:1/-1;display:block;width:var(--w);height:5px;margin-top:12px;border-radius:99px;background:linear-gradient(90deg,var(--ref-accent),color-mix(in srgb,var(--ref-accent-2) 75%,#fff));box-shadow:0 0 12px color-mix(in srgb,var(--ref-accent) 24%,transparent)}
.inventoryReferenceSummary{display:grid;grid-template-columns:1fr 150px;align-items:center;gap:28px;margin-top:18px;padding:22px;border:1px solid color-mix(in srgb,var(--ref-accent) 15%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--surface-input) 92%,transparent)}.inventoryReferenceSummary>div:first-child{display:grid;gap:15px}.inventoryReferenceSummary article{display:grid;grid-template-columns:130px 1fr 65px;align-items:center;gap:14px}.inventoryReferenceSummary article span{display:flex;align-items:center;gap:9px;font-weight:700}.inventoryReferenceSummary article span i{width:11px;height:11px;border-radius:50%;background:var(--c)}.inventoryReferenceSummary article b{grid-column:3;text-align:right}.inventoryReferenceSummary article em{grid-column:2;grid-row:1;display:block;width:100%;height:8px;overflow:hidden;border-radius:99px;background:color-mix(in srgb,var(--line) 70%,transparent);font-style:normal}.inventoryReferenceSummary article em::before{content:"";display:block;width:var(--w);height:100%;border-radius:inherit;background:var(--c);box-shadow:0 0 12px color-mix(in srgb,var(--c) 30%,transparent)}
.inventoryReferenceDonut{display:grid;place-items:center;width:128px;height:128px;border-radius:50%;background:conic-gradient(#5a63ff 0 45%,#ff5c58 45% 67%,#ffbc18 67% 100%);box-shadow:0 0 25px color-mix(in srgb,var(--ref-accent) 18%,transparent)}.inventoryReferenceDonut::before{content:"";grid-area:1/1;width:76px;height:76px;border-radius:50%;background:var(--surface-input);box-shadow:inset 0 0 0 1px var(--line)}.inventoryReferenceDonut span{z-index:1;grid-area:1/1;color:var(--text)}.inventoryReferenceDonut svg{width:36px;height:36px;stroke:currentColor;fill:none;stroke-width:1.7}
.inventoryReferenceLegend{display:flex;justify-content:center;gap:24px;width:max-content;max-width:100%;margin:-10px auto 0;padding:14px 28px;border:1px solid var(--line);border-radius:14px;background:var(--surface-raised);box-shadow:0 12px 26px rgba(0,0,0,.16)}.inventoryReferenceLegend span{display:flex;align-items:center;gap:8px;white-space:nowrap}.inventoryReferenceLegend i{width:14px;height:14px;border-radius:50%;background:var(--c)}
.inventoryReferenceFeatures{display:grid!important;grid-template-columns:repeat(4,1fr);gap:0;margin:34px 0 0!important;padding:26px 14px!important;border:1px solid color-mix(in srgb,var(--ref-accent) 16%,var(--line))!important;border-radius:22px!important;background:color-mix(in srgb,var(--surface-raised) 96%,transparent)!important;list-style:none!important}.inventoryReferenceFeatures li{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:12px;padding:8px 18px;border-right:1px solid var(--line)}.inventoryReferenceFeatures li:last-child{border:0}.inventoryReferenceFeatures svg{width:50px;height:50px;padding:12px;border-radius:50%;background:color-mix(in srgb,var(--ref-accent) 9%,var(--surface-input));color:var(--ref-accent);stroke:currentColor;fill:none;stroke-width:1.8}.inventoryReferenceFeatures span{display:grid;gap:4px}.inventoryReferenceFeatures b{font-size:.88rem}.inventoryReferenceFeatures small{color:var(--muted);line-height:1.45}

@media(max-width:760px){
  .hero .appLogo{margin-top:14px!important}
  #projectsSignedOut.projectReferenceShowcase,#inventorySignedOut.inventoryReferenceShowcase{padding:25px 20px!important;border-radius:22px!important}
  .projectReferenceHeadline,.inventoryReferenceHeadline{grid-template-columns:52px 1fr;gap:16px;margin:30px 0 20px}
  .projectReferenceHeadline .referenceHeadlineIcon,.inventoryReferenceHeadline .referenceHeadlineIcon{width:52px;height:52px;border-radius:16px}.projectReferenceHeadline .referenceHeadlineIcon svg,.inventoryReferenceHeadline .referenceHeadlineIcon svg{width:29px;height:29px}
  .projectReferenceShowcase .projectReferenceHeadline h2,.inventoryReferenceShowcase .inventoryReferenceHeadline h2{font-size:clamp(2.35rem,12vw,3.8rem)!important}
  .projectReferenceHeadline h2.referenceAccentHeadline,.inventoryReferenceHeadline h2.referenceAccentHeadline{grid-column:2}
  .inventoryReferenceHeadline>i{display:none}
  .projectReferenceHeader>p,.inventoryReferenceHeader>p{font-size:1rem!important;line-height:1.55!important}
  .projectReferenceConsole,.inventoryReferenceBoard{margin-top:42px;padding:17px}
  .projectReferenceTop{min-height:0}.projectReferenceTabs{position:static;display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin:0 0 18px}.projectReferenceTop{display:grid}.projectReferenceTop .consoleStatus{order:2}.projectReferenceTabs span{width:auto;min-height:79px;padding:10px 5px}.projectReferenceTabs svg{width:25px;height:25px}
  .projectReferenceBody{grid-template-columns:1fr}.projectReferencePhoto{grid-template-columns:115px 1fr;padding:12px}.projectReferenceRecipe{padding:20px}
  .projectReferenceMetrics{grid-template-columns:1fr;gap:9px}.projectReferenceMetrics>span{border-right:0;border-bottom:1px solid var(--line);padding:10px}.projectReferenceMetrics>span:last-child{border:0}
  .projectReferenceFlow,.inventoryReferenceFlow{grid-template-columns:1fr!important;gap:10px!important;padding:16px!important}.projectReferenceFlow>i,.inventoryReferenceFlow>i{display:none}.projectReferenceFlow article,.inventoryReferenceFlow article{grid-template-columns:44px 1fr}.projectReferenceFlow article svg,.inventoryReferenceFlow article svg{width:42px;height:42px;padding:10px}
  .inventoryReferenceLocations{grid-template-columns:1fr}.inventoryReferenceSummary{grid-template-columns:1fr;padding:17px}.inventoryReferenceSummary article{grid-template-columns:105px 1fr 52px;gap:8px}.inventoryReferenceDonut{width:112px!important;height:112px!important;margin:auto}
  .inventoryReferenceLegend{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;width:100%;margin:14px 0 0;padding:14px 16px}.inventoryReferenceLegend span:last-child{grid-column:1/-1}
  .inventoryReferenceFeatures{grid-template-columns:1fr 1fr!important;padding:12px!important}.inventoryReferenceFeatures li{grid-template-columns:40px 1fr;padding:12px 7px;border-right:0;border-bottom:1px solid var(--line)}.inventoryReferenceFeatures li:nth-last-child(-n+2){border-bottom:0}.inventoryReferenceFeatures svg{width:38px;height:38px;padding:9px}.inventoryReferenceFeatures small{font-size:.72rem}
}

@media(max-width:430px){
  .projectReferenceHeadline,.inventoryReferenceHeadline{grid-template-columns:42px 1fr;gap:12px}.projectReferenceHeadline .referenceHeadlineIcon,.inventoryReferenceHeadline .referenceHeadlineIcon{width:42px;height:42px}.projectReferenceShowcase .projectReferenceHeadline h2,.inventoryReferenceShowcase .inventoryReferenceHeadline h2{font-size:2.2rem!important}
  .projectReferencePhoto{grid-template-columns:1fr}.projectReferencePhoto>div{max-height:185px}.projectReferencePhoto span{text-align:center}
  .inventoryReferenceTop{align-items:flex-start}.inventoryReferenceTop b{font-size:.85rem}.inventoryReferenceFeatures{grid-template-columns:1fr!important}.inventoryReferenceFeatures li,.inventoryReferenceFeatures li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}.inventoryReferenceFeatures li:last-child{border:0}
}