/* ---------------------------------------------------------------
   audit-fixes.css — small overrides applied after the Webflow CSS.
   Each rule has a one-line note explaining the underlying issue.
   --------------------------------------------------------------- */

/* Mobile logo collapses to ~17px because the brand-holder flex item
   has no min-width and the right-side nav cluster consumes the row. */
.brand-holder {
  flex: 0 0 auto;
  min-width: 120px;
}
.brand-holder .brand,
.brand-holder .brand-image {
  display: block;
  width: auto;
  max-width: 140px;
}

/* Below the medium breakpoint Webflow hides the desktop nav links
   but keeps .navbar-container at `justify-content: flex-end` with a
   70px column-gap meant for the now-hidden links. Result: the brand
   is shoved into the middle and there's a 70px void between the
   hamburger and Explore button. Pin brand left, shrink the gap, and
   group the hamburger + Explore on the right. */
@media (max-width: 991px) {
  .navbar-container {
    justify-content: flex-start !important;
    column-gap: 12px !important;
  }
  .navbar-container .menu-cart-holder {
    margin-left: auto;
  }
}

/* Between 992 and ~1280 the desktop nav is shown but the 70px gap on
   .navbar-container + 18px gap between links push "Our Ecosystem" and
   "Contact Us" to wrap onto two lines. Tighten both gaps in this
   range so the labels stay on one line. */
@media (min-width: 992px) and (max-width: 1279px) {
  .navbar-container {
    column-gap: 24px !important;
  }
  .nav-links {
    column-gap: 12px !important;
  }
}

/* Sticky nav pill: Webflow's design uses a rounded pill on
   .container-2.nav-container-wrapper with 75% white. The pill sits
   35px below the viewport top while sticky, so the 35px strip
   above it lets headings scroll through. Two changes on scroll:
   1) snap the pill to the viewport top so the strip closes,
   2) push the pill to near-opaque + real blur so it stays legible
      across dense sections. */
.navbar-2 .container-2.nav-container-wrapper {
  transition: background-color 200ms ease, backdrop-filter 200ms ease, box-shadow 200ms ease;
}
.navbar-2.is-scrolled {
  top: 16px !important;
  margin-top: 16px !important;
}
.navbar-2.is-scrolled .container-2.nav-container-wrapper {
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 4px 18px rgba(11, 23, 51, 0.08);
}

/* Footer bottom bar: add breathing room between copyright, socials,
   and back-to-top across all viewports. */
.footer-bottom-flex-wrap {
  gap: 24px;
}

/* Footer link columns ship with no headers — readers see three
   unlabeled columns of links. Restore basic legibility. */
.footer-column-heading {
  display: block;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(11, 23, 51, 0.55);
  margin-bottom: 0.75rem;
}

/* Respect users who prefer reduced motion — disables the
   opacity-0 → reveal animations that drive most of the CLS. */
@media (prefers-reduced-motion: reduce) {
  [data-w-id] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Hero/section title ladder.
   Webflow ships .section-title at 64px desktop -> 45px @ <=991 -> 35px
   @ <=767 -> 20px @ <=479. The 20px floor is smaller than a default h1
   and reads as body text — the hero loses all weight on phones. Use a
   gentler curve and switch letter-spacing to em so it tracks correctly
   at every size. */
@media screen and (max-width: 991px) {
  .section-title {
    font-size: 56px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
  }
}
@media screen and (max-width: 767px) {
  .section-title {
    font-size: 44px !important;
  }
}
@media screen and (max-width: 479px) {
  .section-title {
    font-size: 36px !important;
  }
}

/* ---------------------------------------------------------------
   Use Cases page
   --------------------------------------------------------------- */

/* These sections borrow the site's core surface vocabulary so they read as
   MasChain: the soft blue card gradient from .single-addition-features-card
   (#f5faff -> #f9fcff), the #d1e0ff pill border from .section-mini-title-wrap,
   the violet brand colour, and the #0042c5 -> #2970ff accent gradient. */

/* Hero — headline + lead paragraph. Natural height with balanced top padding
   so the headline -> video -> explainer flow reads as one connected unit. */
.inner-banner.use-cases-hero {
  display: flex;
  flex-direction: column;
  padding-top: 48px;
  padding-bottom: 0; /* the video section sits directly below */
}

/* Explainer video — its own section so it fills the same 1326px container as
   the explainer card below, edges aligned. Flush under the hero. */
.uc-video-section { padding-top: 48px; padding-bottom: 64px; }
.use-cases-video-wrap {
  position: relative;
  width: 100%;
  max-width: none; /* full container width, matching the explainer strip below */
  margin: 0 auto;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e1ebff;
  box-shadow: 0 16px 48px rgba(0, 64, 193, 0.10);
}
.use-cases-video-iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

/* Blockchain explainer strip — 4 plain-language steps on the brand surface. */
.uc-explainer-section { padding-top: 0; }
.uc-explainer-card {
  width: 100%;
  background-image: linear-gradient(90deg, #f5faff, #f9fcff);
  border: 1px solid #e1ebff;
  border-radius: 16px;
  padding: 48px 32px;
}
.uc-explainer-title {
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: var(--grey-60);
  max-width: 760px;
  margin: 0 auto 40px;
  line-height: 1.6;
}
.uc-explainer-title strong { color: var(--violet); font-weight: 500; }
/* Steps sit on a single connector rail: gap:0 keeps columns exactly 25% wide,
   so each step's ::after line (width:100%) reaches the next icon's centre. */
.uc-explainer-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.uc-explainer-step {
  text-align: center;
  padding: 0 12px;
  position: relative;
}
/* Connector segment from this icon's centre to the next icon's centre.
   Runs behind the gradient icon nodes (which paint on top and hide the ends). */
.uc-explainer-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 31px;            /* icon centre (64px node) */
  left: 50%;
  width: 100%;
  height: 2px;
  background: #cdddff;
  z-index: 0;
}
.uc-step-icon {
  position: relative;
  z-index: 1;
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background-image: linear-gradient(150deg, #2970ff, #0042c5);
  box-shadow: 0 10px 22px rgba(0, 64, 193, 0.25);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.uc-step-icon svg { width: 26px; height: 26px; }
.uc-step-badge {
  position: absolute; top: -3px; right: -3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d1e0ff;
  box-shadow: 0 2px 6px rgba(0, 64, 193, 0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--violet);
}
.uc-step-title { font-size: 15px; font-weight: 500; color: var(--grey-90); margin-bottom: 6px; }
.uc-step-desc { font-size: 13px; color: var(--grey-50); line-height: 1.55; }
@media (max-width: 767px) {
  .uc-explainer-steps { grid-template-columns: 1fr; gap: 28px; }
  .uc-explainer-step { padding: 0; }
  .uc-explainer-step:not(:last-child)::after { display: none; }
}

/* Use-case rows — alternating content + illustration on the brand card surface. */
.uc-cases-section .mg-top-16px { margin-top: 16px; }
.uc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  background-image: linear-gradient(90deg, #f5faff, #f9fcff);
  border: 1px solid #e1ebff;
  border-radius: 16px;
  padding: 48px;
  margin-bottom: 28px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Gated to real pointers — on touch, :hover sticks after a tap and the row
   stays highlighted until you tap elsewhere, which reads as a stuck state. */
@media (any-hover: hover) {
  .uc-row:hover { border-color: #d1e0ff; box-shadow: 0 16px 48px rgba(0, 64, 193, 0.07); }
}
.uc-row--reverse .uc-content { order: 2; }
.uc-row--reverse .uc-visual { order: 1; }

.uc-content { display: flex; flex-direction: column; }

/* Category tag — the site's pill recipe (pale-blue fill, #d1e0ff border,
   violet text). Kept as one brand chip so the three rows feel like a set. */
.uc-tag,
.uc-tag--supply,
.uc-tag--identity,
.uc-tag--esg {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 400; letter-spacing: 0;
  text-transform: none;
  color: var(--violet);
  background: var(--purple);
  border: 1px solid #d1e0ff;
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 18px;
  width: fit-content;
}

.uc-num {
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em;
  color: var(--grey-40); text-transform: uppercase;
  margin-bottom: 10px;
}
.uc-title {
  font-size: 28px; font-weight: 500;
  color: var(--grey-90); line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.uc-problem {
  font-size: 15px; color: var(--grey-50);
  line-height: 1.7;
  margin-bottom: 24px;
  padding-left: 18px;
  border-left: 2px solid #d1e0ff;
}
.uc-problem strong { color: var(--grey-90); font-weight: 500; }

.uc-solution-title {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--violet);
  margin: 0 0 14px;
}
.uc-solution-title--tight { margin-bottom: 12px; }

.uc-features {
  list-style: none;
  display: flex; flex-direction: column; gap: 12px;
  margin: 0 0 28px;
  padding: 0;
}
.uc-features li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; color: var(--grey-60);
  line-height: 1.6;
}
.uc-dot,
.uc-dot--supply,
.uc-dot--identity,
.uc-dot--esg {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--violet);
  flex-shrink: 0; margin-top: 7px;
}

.uc-audience { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.uc-pill {
  font-size: 13px; font-weight: 400;
  padding: 7px 14px;
  border-radius: 100px;
  background: #fff;
  border: 1px solid #d1e0ff;
  color: var(--grey-70);
}

.uc-content .inner-button { width: fit-content; }

.uc-visual {
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  padding: 8px;
}
.uc-visual--supply,
.uc-visual--esg      { background: radial-gradient(120% 120% at 72% 28%, rgba(22, 163, 74, 0.09), rgba(41, 112, 255, 0.05) 46%, rgba(255, 255, 255, 0) 76%); }
.uc-visual--identity { background: radial-gradient(120% 120% at 70% 30%, rgba(0, 64, 193, 0.07), rgba(255, 255, 255, 0) 70%); }
.uc-visual svg { width: 100%; max-width: 430px; height: auto; }

@media (max-width: 767px) {
  .uc-row { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px; }
  .uc-row--reverse .uc-content,
  .uc-row .uc-content { order: 2; }
  .uc-row--reverse .uc-visual,
  .uc-row .uc-visual { order: 1; }
  .uc-title { font-size: 24px; }
}

/* Scroll-reveal — strong ease-out curve; JS adds .is-visible per row in view. */
.uc-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.uc-reveal.is-visible { opacity: 1; transform: none; }

/* Press feedback — every CTA on this page (row demos, teaser, bottom CTA)
   scales down on press so the tap registers. Scoped to the page's content
   sections so the global button class is untouched. */
.uc-cases-section .inner-button,
.use-cases-cta-section .inner-button {
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.uc-cases-section .inner-button:active,
.use-cases-cta-section .inner-button:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .uc-reveal { opacity: 1 !important; transform: none !important; }
  /* Reduced motion = no movement: drop the press scale. */
  .uc-cases-section .inner-button:active,
  .use-cases-cta-section .inner-button:active { transform: none; }
}

/* ===============================================================
   Use Cases 01-03 — card grid (reference-style)
   Clean white cards on the brand surface: a brand-tinted line
   illustration that draws itself in on hover, a title, a short
   description, and a "Read more" link to the live demo.
   =============================================================== */

/* Section header — big title left, supporting copy right. */
.uc-cards-head {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px;
  align-items: end; margin-bottom: 48px;
}
.uc-cards-title {
  font-size: 40px; line-height: 1.12; font-weight: 500;
  letter-spacing: -0.02em; color: var(--grey-90); margin: 0;
}
.uc-cards-intro { font-size: 15px; line-height: 1.7; color: var(--grey-50); margin: 0; }

/* Card grid */
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.uc-card2 {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e1ebff; border-radius: 16px; padding: 32px;
  transition: transform .35s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow .35s cubic-bezier(0.23, 1, 0.32, 1),
              border-color .35s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Stagger the scroll-reveal of the three cards. */
.uc-grid .uc-reveal:nth-child(2) { transition-delay: 80ms; }
.uc-grid .uc-reveal:nth-child(3) { transition-delay: 160ms; }
/* Hover/focus is driven by JS toggling .is-lit (pointerenter + focus) rather
   than CSS :hover + an any-hover media query, which didn't fire reliably on the
   user's device. Works for mouse, pen, touch, and keyboard alike. */
.uc-card2.is-lit {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 64, 193, 0.10);
  border-color: #d1e0ff;
}

/* Illustration — themed pixel-dot grid on a soft blue wash. Dots sit faint at
   rest and cascade to solid brand-blue left-to-right on hover; the per-dot
   transition-delay that makes the sweep is set in JS (the grid is built there). */
.uc-card2-art {
  display: grid; place-items: center;
  aspect-ratio: 1 / 1; margin-bottom: 28px; border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 70% 28%, rgba(41, 112, 255, 0.06), rgba(255, 255, 255, 0) 72%);
}
.uc-pix { position: relative; width: 100%; max-width: 224px; aspect-ratio: 13 / 9; }
/* Overview card art uses each use case's illustration, filling the square box. */
.uc-card2-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}
.uc-dot2 {
  position: absolute;
  width: 7px; height: 7px; border-radius: 50%;
  background: #c2d4f7;                       /* faint at rest */
  transform: translate(-50%, -50%) scale(0.7);
  transition: background-color .45s ease,
              transform .45s cubic-bezier(0.23, 1, 0.32, 1);
  /* transition-delay is set per dot in JS for the left-to-right cascade */
}
.uc-card2.is-lit .uc-dot2 {
  background: #2970ff;                        /* solid brand blue */
  transform: translate(-50%, -50%) scale(1);
}

/* Card text */
.uc-card2-title { font-size: 19px; font-weight: 500; letter-spacing: -.01em; color: var(--grey-90); margin: 0 0 12px; }
.uc-card2-desc { font-size: 14px; line-height: 1.65; color: var(--grey-50); margin: 0 0 24px; flex: 1 1 auto; }
.uc-card2-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500; color: var(--violet);
  text-decoration: none; width: fit-content;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.uc-card2-link svg { transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1); }
.uc-card2.is-lit .uc-card2-link svg { transform: translateX(4px); }
.uc-card2-link:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 4px; }

/* Responsive */
@media (max-width: 991px) {
  .uc-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .uc-cards-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .uc-cards-title { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .uc-card2, .uc-card2-link svg { transition: none; }
  .uc-card2.is-lit { transform: none; }
  /* Pixel dots: no cascade or scale — just an instant colour intensify on hover. */
  .uc-dot2 {
    transition: background-color .2s ease !important;
    transition-delay: 0s !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
}

/* "More coming" teaser — brand surface, dashed to signal "not ready yet". */
.uc-teaser {
  border: 1px dashed #c3d6ff;
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  background: #f9fcff;
  margin-top: 8px;
}
.uc-teaser-title { font-size: 18px; font-weight: 500; color: var(--grey-80); margin: 0 0 8px; }
.uc-teaser-sub { font-size: 14px; color: var(--grey-50); margin: 0 0 28px; }
.uc-teaser-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.uc-teaser-pill {
  font-size: 13px; font-weight: 400;
  padding: 7px 14px;
  border-radius: 100px;
  background: #fff;
  border: 1px solid #e1ebff;
  color: var(--grey-50);
}
.uc-teaser .inner-button { margin: 0 auto; }

/* Bottom CTA — a contained brand-gradient card that floats on the white page,
   giving a clear, high-contrast finish with breathing room around it. Reused on
   the overview + all use-case detail pages. */
.use-cases-cta-section { background: transparent; padding-top: 88px; padding-bottom: 96px; }
.use-cases-cta-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  width: 100%;
  max-width: none; /* fill the container so it matches the other sections' width */
  margin: 0 auto;
  padding: 88px 56px;
  border-radius: 24px;
  background-image: linear-gradient(135deg, #0042c5, #2970ff);
  box-shadow: 0 30px 60px rgba(0, 64, 193, 0.22);
}
/* Faint pixel-dot motif fading into the bottom-right corner — echoes the hero
   art without competing with the copy. Pure CSS, decorative only. */
.use-cases-cta-card::after {
  content: "";
  position: absolute;
  right: -30px; bottom: -30px;
  width: 280px; height: 280px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 2px, transparent 2.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(circle at bottom right, #000, transparent 68%);
          mask-image: radial-gradient(circle at bottom right, #000, transparent 68%);
  pointer-events: none;
}
/* Keep copy above the decorative motif. */
.use-cases-cta-card > * { position: relative; z-index: 1; }
.use-cases-cta-title { font-size: 44px !important; color: #fff; }
/* .accent-color normally paints a clipped blue gradient with a transparent
   text-fill — invisible on the blue card. Reset it to solid white + bold. */
.use-cases-cta-card .accent-color {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background-image: none;
  font-weight: 700;
}
.use-cases-cta-desc { text-align: center; color: rgba(255, 255, 255, 0.85); max-width: 620px; margin-left: auto; margin-right: auto; }
.use-cases-cta-buttons { justify-content: center; }

/* Button hierarchy on the gradient: primary = solid white with blue text,
   secondary = white-outline ghost. Overrides the default violet-filled look. */
.use-cases-cta-card .uc-cta-primary { background-color: #fff !important; }
.use-cases-cta-card .uc-cta-primary .inner-button-text,
.use-cases-cta-card .uc-cta-primary .inner-button-hover-text {
  color: var(--violet) !important;
  -webkit-text-stroke-color: var(--violet) !important;
}
.use-cases-cta-card .uc-cta-ghost {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.use-cases-cta-card .uc-cta-ghost .inner-button-text,
.use-cases-cta-card .uc-cta-ghost .inner-button-hover-text {
  color: #fff !important;
  -webkit-text-stroke-color: #fff !important;
}
@media (any-hover: hover) {
  .use-cases-cta-card .uc-cta-ghost:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
  }
}
@media (max-width: 767px) {
  .use-cases-cta-card { padding: 48px 26px; }
  .use-cases-cta-title { font-size: 36px !important; }
}

/* ===============================================================
   Use-case detail — "How it works" staggered flow
   A zig-zag of alternating-tone cards joined by dashed elbow
   connectors, each with a rotated number pill. Scoped to .uc-flow
   so the overview page's .uc-explainer-steps primer is untouched.
   =============================================================== */
.uc-flow { position: relative; display: flex; flex-direction: column; }
.uc-flow-step { position: relative; padding-bottom: 44px; }
.uc-flow-step:last-child { padding-bottom: 0; }

.uc-flow-card {
  position: relative;
  z-index: 1;
  width: 58%;
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid #e1ebff;
  box-shadow: 0 8px 24px rgba(11, 23, 51, 0.04);
}
.uc-flow-step:nth-child(odd)  .uc-flow-card { margin-right: auto; }
.uc-flow-step:nth-child(even) .uc-flow-card { margin-left: auto; }

/* Alternating card tones — pale-blue brand surface / light grey. */
.uc-flow-step:nth-child(odd)  .uc-flow-card { background-image: linear-gradient(90deg, #f5faff, #f9fcff); }
.uc-flow-step:nth-child(even) .uc-flow-card { background: #f4f6f9; border-color: #e6e9ef; }

/* Rotated number pill on the card's left edge. */
.uc-flow-pill {
  flex: 0 0 46px;
  border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
}
.uc-flow-step:nth-child(odd)  .uc-flow-pill { background: #0042c5; }
.uc-flow-step:nth-child(even) .uc-flow-pill { background: #0b1733; }
.uc-flow-pill span {
  transform: rotate(-90deg);
  white-space: nowrap;
  font-size: 14px; font-weight: 600; letter-spacing: 0.18em; color: #fff;
}

/* Card body: icon + title row, then description. */
.uc-flow-body { flex: 1 1 auto; padding: 10px 14px 12px 0; }
.uc-flow-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.uc-flow-icon {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(41, 112, 255, 0.1); color: var(--violet);
}
.uc-flow-icon svg { width: 19px; height: 19px; }
.uc-flow-title { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--grey-90); margin: 0; }
.uc-flow-desc { font-size: 14px; line-height: 1.6; color: var(--grey-60); margin: 0; }

/* Dashed elbow connectors, drawn in the 44px gap below each card. Two dashed
   borders + a rounded corner form the elbow; direction flips by side. */
.uc-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  height: 44px;
  border: 0 dashed #c3d6ff;
}
.uc-flow-step:nth-child(odd):not(:last-child)::after {
  left: 30%; width: 28%;
  border-top-width: 2px; border-right-width: 2px;
  border-top-right-radius: 14px;
}
.uc-flow-step:nth-child(even):not(:last-child)::after {
  left: 42%; width: 28%;
  border-top-width: 2px; border-left-width: 2px;
  border-top-left-radius: 14px;
}

@media (any-hover: hover) {
  .uc-flow-card { transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow .3s ease; }
  .uc-flow-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 64, 193, 0.09); }
}
@media (prefers-reduced-motion: reduce) {
  .uc-flow-card { transition: none; }
  .uc-flow-card:hover { transform: none; }
}

/* Collapse to a single vertical column with a straight dashed spine. */
@media (max-width: 800px) {
  .uc-flow-step { padding-bottom: 28px; }
  .uc-flow-card,
  .uc-flow-step:nth-child(odd) .uc-flow-card,
  .uc-flow-step:nth-child(even) .uc-flow-card { width: 100%; margin: 0; }
  .uc-flow-step:not(:last-child)::after,
  .uc-flow-step:nth-child(odd):not(:last-child)::after,
  .uc-flow-step:nth-child(even):not(:last-child)::after {
    left: 38px; width: 0; height: 28px;
    border-width: 0 0 0 2px;
    border-radius: 0;
  }
}

/* ===============================================================
   Use-case DETAIL pages (use-case-*.html)
   Long-form per-use-case pages. These reuse the surface vocabulary
   above — .uc-explainer-steps (how it works), .uc-tag, .uc-problem,
   .uc-features, .uc-teaser, .uc-card2 (related), .inner-button — and
   add only the layout pieces unique to a detail page below.
   =============================================================== */

/* Overview card: the primary link now goes to the detail page, with a small
   secondary "Live demo" link beneath the description. Push the links to the
   card foot and space them so both stay tappable. */
.uc-card2-links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.uc-card2-demo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 400; color: var(--grey-50);
  text-decoration: none;
}
.uc-card2-demo:hover { color: var(--violet); }
.uc-card2-demo:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }

/* The site's .container is a centered column flex (align-items: center), which
   shrinks and horizontally centres every section child — so narrow blocks (the
   heading, prose, a lone card) land at different left edges and read as "off".
   Stretch children to full width so every section shares one left edge; inner
   blocks re-cap their own max-width and stay left via margin/max-width below. */
.uc-detail-hero > .container,
.uc-detail-section > .container { align-items: stretch; }

/* Breadcrumb back to the overview. */
.uc-detail-breadcrumb {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--grey-50);
  text-decoration: none; margin-bottom: 22px;
}
.uc-detail-breadcrumb:hover { color: var(--violet); }
.uc-detail-breadcrumb svg { width: 15px; height: 15px; }

/* Hero — content left, pixel-dot art right. Sized to fill most of the first
   screen (min-height 80vh) with its content vertically centred, so it reads as
   a proper hero rather than a short banner. */
.uc-detail-hero {
  display: flex;
  align-items: center;
  min-height: 80vh;
  padding-top: 40px;
  padding-bottom: 56px;
}
.uc-detail-hero-grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center;
}
.uc-detail-title {
  font-size: clamp(38px, 4.6vw, 54px); line-height: 1.08; font-weight: 500;
  letter-spacing: -0.03em; color: var(--grey-90); margin: 0 0 20px;
}
.uc-detail-lead { font-size: 17px; line-height: 1.65; color: var(--grey-60); margin: 0 0 28px; max-width: 560px; }
.uc-detail-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
/* Reuse the .uc-card2-art wash for the hero illustration panel. The pixel dots
   sit solid brand-blue here (no hover target around them on a detail page). */
.uc-detail-hero .uc-card2-art { height: 280px; margin: 0; }
.uc-detail-hero-art .uc-pix { max-width: 300px; }
.uc-detail-hero-art .uc-dot2 {
  background: #2970ff;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0s;
}
/* Custom hero illustration (used where a graphic replaces the pixel-dot art). */
.uc-detail-hero-img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 991px) {
  .uc-detail-hero { min-height: auto; padding-top: 28px; }
  .uc-detail-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .uc-detail-hero .uc-card2-art { height: 220px; }
}

/* Shared section header for the detail sections. Section-to-section gap is
   driven by this top padding — viewport-responsive via clamp so it breathes on
   taller screens but never gets tight on laptops or absurd on large monitors. */
.uc-detail-section { padding-top: clamp(88px, 9vh, 120px); padding-bottom: 0; }
.uc-detail-head { width: 100%; max-width: 720px; margin: 0 auto 36px 0; }
.uc-detail-kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--violet); margin: 0 0 10px;
}
.uc-detail-h2 {
  font-size: 32px; line-height: 1.15; font-weight: 500;
  letter-spacing: -0.02em; color: var(--grey-90); margin: 0;
}
.uc-detail-h2 + .uc-detail-sub { margin-top: 14px; }
.uc-detail-sub { font-size: 15px; line-height: 1.7; color: var(--grey-50); margin: 0; }
@media (max-width: 767px) { .uc-detail-h2 { font-size: 26px; } }

/* Body prose for the "why this use case" narrative. */
.uc-detail-prose { width: 100%; max-width: 720px; margin-right: auto; }

/* "Why it matters" two-column: text left, supporting illustration right. */
.uc-why { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.uc-why-media { display: flex; justify-content: center; }
@media (max-width: 800px) {
  .uc-why { grid-template-columns: 1fr; gap: 32px; }
  .uc-why-media .uc-detail-hero-img { max-width: 420px; }
}
.uc-detail-prose p { font-size: 15px; line-height: 1.75; color: var(--grey-60); margin: 0 0 16px; }
.uc-detail-prose p:last-child { margin-bottom: 0; }
.uc-detail-prose strong { color: var(--grey-90); font-weight: 500; }

/* Benefits — three audience cards on the brand card surface. */
.uc-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.uc-benefit-card {
  background: #fff; border: 1px solid #e1ebff; border-radius: 16px; padding: 30px 28px;
}
.uc-benefit-role {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--violet); margin: 0 0 12px;
}
.uc-benefit-text { font-size: 15px; line-height: 1.65; color: var(--grey-60); margin: 0; }
@media (max-width: 991px) { .uc-benefit-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* Try-it-live band — centred call to the external demo on the brand surface. */
.uc-demo-band {
  background-image: linear-gradient(90deg, #f5faff, #f9fcff);
  border: 1px solid #e1ebff; border-radius: 16px;
  padding: 48px 32px; text-align: center;
}
.uc-demo-title { font-size: 24px; font-weight: 500; color: var(--grey-90); margin: 0 0 12px; letter-spacing: -0.01em; }
.uc-demo-sub { font-size: 15px; line-height: 1.65; color: var(--grey-50); max-width: 560px; margin: 0 auto 28px; }
.uc-demo-band .inner-button { margin: 0 auto; }

/* Real solutions — a responsive grid of case-study cards (empty for now). auto-fit
   means one card fills the row instead of leaving dead columns, and the grid just
   collapses to nothing while there are no real cases yet. */
.uc-solutions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.uc-case-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e1ebff; border-radius: 16px; padding: 30px 28px;
}
.uc-case-name { font-size: 18px; font-weight: 500; color: var(--grey-90); margin: 0 0 4px; letter-spacing: -0.01em; }
.uc-case-org { font-size: 13px; color: var(--grey-40); margin: 0 0 20px; }
.uc-case-field { margin: 0 0 16px; }
.uc-case-field:last-child { margin-bottom: 0; }
.uc-case-label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--violet); margin-bottom: 5px;
}
.uc-case-value { font-size: 14px; line-height: 1.6; color: var(--grey-60); margin: 0; }

/* "Build yours" — full-width dashed invitation band, on its own line below the
   case grid so it reads as intentional whether there are zero or many cases. */
.uc-solutions-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  border: 1px dashed #c3d6ff; border-radius: 16px;
  background: #f9fcff; padding: 30px 36px; margin-top: 24px;
}
.uc-solutions-cta-title { font-size: 18px; font-weight: 500; color: var(--grey-90); margin: 0 0 6px; letter-spacing: -0.01em; }
.uc-solutions-cta-desc { font-size: 14px; line-height: 1.6; color: var(--grey-50); margin: 0; max-width: 620px; }
.uc-solutions-cta .inner-button { flex: 0 0 auto; }
@media (max-width: 767px) {
  .uc-solutions-cta { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
}

/* Explore other use cases — reuse the .uc-card2 grid at two columns. */
.uc-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 767px) { .uc-related-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* Press feedback on the detail-page CTAs, matching the overview page. */
.uc-detail-hero .inner-button,
.uc-demo-band .inner-button,
.uc-solutions-cta .inner-button {
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.uc-detail-hero .inner-button:active,
.uc-demo-band .inner-button:active,
.uc-solutions-cta .inner-button:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .uc-detail-hero .inner-button:active,
  .uc-demo-band .inner-button:active,
  .uc-solutions-cta .inner-button:active { transform: none; }
}