@font-face {
    font-family: "Aspekta Variable";
    src: url("assets/fonts/aspekta-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: block;
  }

  :root {
    --img-mainstreet: url("assets/images/mainstreet.jpg");
    --img-aerial: url("assets/images/aerial.jpg");
    --img-vet: url("assets/images/pixel-vet.jpg");
    --img-roofing: url("assets/images/pixel-roofing.jpg");
    --img-dental: url("assets/images/pixel-dental.jpg");
    --img-medspa: url("assets/images/pixel-medspa.jpg");
    --img-hvac: url("assets/images/pixel-hvac.jpg");
    --img-restaurant: url("assets/images/pixel-restaurant.jpg");
    --img-hero: url("assets/images/hero.jpg");
    --background: 0 0% 100%;
    --foreground: 0 0% 6%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 42%;
    --border: 0 0% 91%;
    --border-strong: 0 0% 6%;

    /* Animation timing scale */
    --d-fast: 140ms;
    --d-base: 200ms;
    --d-slow: 280ms;

    /* Border weights */
    --b-thin: 1px;
    --b-thick: 1.5px;

    /* Legacy brand-color tokens — currently unused. Kept for reference only. */
    --brand-1: 36 95% 62%;    /* legacy, light, #FBAD41 */
    --brand-2: 28 89% 54%;    /* legacy, deep, #F38020 */

    /* Orbital logo colors: two-tone blue from the original mark */
    --logo-1: 217 90% 62%;    /* light cobalt, #4A90F2 */
    --logo-2: 222 78% 28%;    /* deep navy,  #15378A */

    /* Radii */
    --r-sharp: 0;
    --r-base: 6px;
    --r-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06);
  }

  /* Tailwind utility overrides: keep the radius system unified through --r-base */
  .rounded-sm { border-radius: var(--r-base) !important; }

  /* Orbital lockup: uses the official PNG */
  .brand-lockup { display: inline-flex; align-items: center; text-decoration: none; }
  .brand-logo-img { height: 30px; width: auto; display: block; }

  /* Announcement eyebrow: adds an arrow + hover affordance for the link variant */
  a.hero-eyebrow { text-decoration: none; transition: border-color var(--d-base) ease, background var(--d-base) ease; }
  a.hero-eyebrow:hover { border-color: hsl(var(--border-strong)); background: hsl(var(--background) / 0.95); }
  .hero-eyebrow .eyebrow-arrow { margin-left: 2px; transition: transform var(--d-base) ease; display: inline-block; }
  a.hero-eyebrow:hover .eyebrow-arrow { transform: translateX(3px); }
  /* Suppress the default green pulse-dot when an announcement tag is present */
  .hero-eyebrow:has(.eyebrow-tag)::before { display: none; }
  .hero-eyebrow:has(.eyebrow-tag) {
    text-transform: none;
    letter-spacing: -0.005em;
    font-size: 12.5px;
    font-weight: 500;
  }
  .hero-eyebrow .eyebrow-tag {
    background: hsl(var(--brand-2));
    color: hsl(0 0% 100%);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-right: 2px;
  }

  * { -webkit-font-smoothing: antialiased; }

  html, body {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-feature-settings: "ss01", "cv11";
  }
  ::selection { background: hsl(var(--foreground)); color: hsl(var(--background)); }

  .display    { font-family: "Aspekta Variable", system-ui, sans-serif; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; }
  .display-xl { font-family: "Aspekta Variable", system-ui, sans-serif; font-weight: 500; letter-spacing: -0.035em; text-wrap: balance; }
  /* Default emphasis: same weight, same color as base. Element exists as a hook for the
     occasional tonal-contrast moment via .display-tonal on the parent H2 (use sparingly). */
  .display-em { font-family: "Aspekta Variable", system-ui, sans-serif; font-weight: 500; letter-spacing: -0.025em; color: inherit; }
  .display-tonal { color: hsl(var(--muted-foreground)); }
  .display-tonal .display-em { color: hsl(var(--foreground)); }
  .label      { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .label-on-dark { color: hsl(var(--background)); opacity: 0.55; }

  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 20px;
    font-size: 14px; font-weight: 500;
    border-radius: var(--r-base);
    transition: background var(--d-base) ease, color var(--d-base) ease, border-color var(--d-base) ease;
    cursor: pointer; white-space: nowrap;
  }
  .btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
  .btn .arrow { transition: transform var(--d-base) ease; }
  .btn:hover .arrow { transform: translateX(3px); }
  .btn-primary {
    background: hsl(var(--foreground)); color: hsl(var(--background));
    border: var(--b-thick) solid hsl(var(--foreground));
    transform: translateY(0);
    box-shadow: 0 0 0 0 hsl(var(--foreground) / 0);
    transition: background var(--d-base) ease, color var(--d-base) ease,
                border-color var(--d-base) ease,
                transform var(--d-base) cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow var(--d-base) ease;
  }
  .btn-primary:hover {
    background: hsl(0 0% 18%); border-color: hsl(0 0% 18%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px hsl(var(--foreground) / 0.32),
                0 2px 4px -1px hsl(var(--foreground) / 0.18);
  }
  .btn-primary:active { transform: translateY(0); transition-duration: 80ms; }
  .btn-secondary { background: hsl(0 0% 100% / 0.85); color: hsl(var(--foreground)); border: var(--b-thick) solid hsl(var(--foreground)); backdrop-filter: blur(4px); }
  .btn-secondary:hover { background: hsl(var(--foreground)); color: hsl(var(--background)); }
  .btn-on-dark { background: hsl(var(--background)); color: hsl(var(--foreground)); border: var(--b-thick) solid hsl(var(--background)); }
  .btn-on-dark:hover { background: hsl(0 0% 90%); border-color: hsl(0 0% 90%); }
  .btn-ghost-on-dark { background: transparent; color: hsl(var(--background)); border: var(--b-thick) solid hsl(var(--background) / 0.3); }
  .btn-ghost-on-dark:hover { background: hsl(var(--background) / 0.08); border-color: hsl(var(--background) / 0.5); }

  .card { background: hsl(var(--background)); border: var(--b-thin) solid hsl(var(--border)); border-radius: var(--r-base); transition: border-color var(--d-base) ease; }
  .card:hover { border-color: hsl(var(--border-strong)); }

  .pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
    background: hsl(var(--background));
    border: var(--b-thin) solid hsl(var(--border));
    border-radius: var(--r-pill);
  }
  .tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px;
    font-family: "Inter", sans-serif;
    font-feature-settings: "tnum", "ss01";
    font-size: 12px; font-weight: 500;
    background: hsl(var(--background));
    border: var(--b-thin) solid hsl(var(--border));
    border-radius: var(--r-base);
  }
  .status {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px;
    font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
    background: hsl(var(--background));
    border: var(--b-thin) solid hsl(var(--border));
    border-radius: var(--r-pill);
  }
  .live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: hsl(332 72% 52%);
    animation: live-pulse 1.4s ease-in-out infinite;
    display: inline-block;
    flex-shrink: 0;
  }
  .status-tracked { letter-spacing: 0.07em; }
  .tag-inverted {
    background: hsl(var(--foreground));
    color: hsl(var(--background));
    border-color: hsl(var(--foreground));
  }
  .dot-grid {
    background-image: radial-gradient(circle, hsl(var(--background)) 1px, transparent 1px);
    background-size: 16px 16px;
  }
  @keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
  /* Terminal accent */
  .term-ok { color: hsl(145 55% 65%); }

  .marquee-track { display: flex; gap: 56px; animation: scroll 50s linear infinite; white-space: nowrap; align-items: center; }
  @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .logo-cell {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    height: 56px;
    padding: 0 4px;
  }
  .customer-logo {
    height: 32px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
    opacity: 0.85;
    transition: opacity var(--d-base) ease;
  }
  /* Square-mark fallbacks (logo.dev icons) render smaller so they don't tower over wordmarks */
  .customer-logo.customer-logo-mark {
    height: 38px;
    max-width: 38px;
    border-radius: 6px;
  }
  .logo-cell:hover .customer-logo { opacity: 1; }

  #hero-shader { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

  /* Site nav: transparent over hero, solid white on scroll */
  .site-nav {
    background: transparent;
    border-bottom: var(--b-thin) solid transparent;
    transition: background var(--d-base) ease, border-color var(--d-base) ease, backdrop-filter var(--d-base) ease;
  }
  .site-nav .nav-links a,
  .site-nav .nav-login {
    color: hsl(var(--foreground));
    opacity: 0.85;
  }
  .site-nav .nav-links a:hover,
  .site-nav .nav-login:hover {
    opacity: 1;
  }
  /* Once scrolled past the hero, the nav picks up the standard white bg */
  .site-nav.nav-scrolled {
    background: hsl(var(--background) / 0.88);
    border-bottom-color: hsl(var(--border));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .site-nav.nav-scrolled .nav-links a,
  .site-nav.nav-scrolled .nav-login {
    color: hsl(var(--muted-foreground));
    opacity: 1;
  }
  .site-nav.nav-scrolled .nav-links a:hover,
  .site-nav.nav-scrolled .nav-login:hover {
    color: hsl(var(--foreground));
  }

  /* Hero: full-bleed illustration with centered type overlay */
  .hero-modern {
    position: relative;
    overflow: hidden;
    background: hsl(var(--background));
    /* Pull the section up under the sticky nav so the image flows behind it.
       The nav is 64px tall, plus its own announcement bar above isn't sticky,
       so we use negative margin-top to push the section up behind the nav. */
    margin-top: -64px;
    padding-top: 64px;
  }
  .hero-modern-image {
    position: absolute; inset: 0;
    background-image: var(--img-hero, var(--img-aerial));
    background-size: cover;
    background-position: center 75%;
    image-rendering: pixelated;
    z-index: 0;
  }
  /* Sunset breathing: slow warm tint shift over the sky to give the static
     pixel-art a sense that the sun is drifting. The painting itself never
     moves; we just animate hue + saturation on a soft-light tinted layer. */
  .hero-sunset {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
      to bottom,
      hsl(14 92% 56% / 0.34) 0%,
      hsl(20 80% 62% / 0.18) 35%,
      hsl(28 70% 70% / 0.06) 60%,
      transparent 78%
    );
    mix-blend-mode: overlay;
    animation: sunset-breathe 70s ease-in-out infinite alternate;
  }
  @keyframes sunset-breathe {
    0%   { filter: hue-rotate(-22deg) saturate(0.7);  opacity: 0.45; }
    50%  { filter: hue-rotate(0deg)   saturate(1.05); opacity: 0.85; }
    100% { filter: hue-rotate(34deg)  saturate(1.35); opacity: 1;    }
  }

  /* Pixel-art bird overlay: matches the chunky pixel scale of the hero painting.
     Each bird is a 7×3 sprite with two frames (wings up / wings down) toggled
     via CSS to give a real flap, then drifts across the sky. */
  .hero-birds {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
  }
  .pixel-bird {
    position: absolute;
    width: 14px; height: 6px;
    image-rendering: pixelated;
    will-change: transform, opacity;
    animation: bird-fly linear infinite;
  }
  .pixel-bird svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .pixel-bird .bird-frame { fill: hsl(265 18% 28% / 0.72); }
  .pixel-bird .bird-up   { animation: bird-frame-a 0.46s steps(1, end) infinite; }
  .pixel-bird .bird-down { animation: bird-frame-b 0.46s steps(1, end) infinite; }
  @keyframes bird-frame-a { 0%, 49.999% { opacity: 1; } 50%, 100% { opacity: 0; } }
  @keyframes bird-frame-b { 0%, 49.999% { opacity: 0; } 50%, 100% { opacity: 1; } }
  .pixel-bird.bb1 { top: 14%; transform: scale(1);    animation-duration: 46s; animation-delay: -8s;  }
  .pixel-bird.bb2 { top: 19%; transform: scale(0.75); animation-duration: 58s; animation-delay: -32s; }
  .pixel-bird.bb3 { top: 11%; transform: scale(1.15); animation-duration: 39s; animation-delay: -3s;  }
  .pixel-bird.bb4 { top: 23%; transform: scale(0.6);  animation-duration: 64s; animation-delay: -18s; }
  @keyframes bird-fly {
    0%   { left: -3%;  opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 103%; opacity: 0; }
  }
  /* Bottom fade: the only hard edge fade, so the section transitions into white */
  .hero-modern-image::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 22%;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      hsl(var(--background) / 0.6) 60%,
      hsl(var(--background)) 100%
    );
  }
  /* No top fade: keep nav region full-color saturated */
  .hero-modern-content {
    position: relative;
    z-index: 1;
    min-height: clamp(580px, 80vh, 860px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: clamp(48px, 7vh, 88px);
    padding-top: clamp(160px, 28vh, 320px);
    text-align: center;
  }
  /* Bottom-anchored variant: pushes the text down into the empty street so
     it sits over the lightest part of the illustration. */
  .hero-modern-content-low {
    justify-content: flex-end !important;
    padding-top: clamp(280px, 46vh, 520px) !important;
    padding-bottom: clamp(72px, 10vh, 130px) !important;
  }
  /* Full-bleed bottom scrim: fades the lower half of the hero to white so
     the type block sits in clean negative space. */
  .hero-modern-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 38%,
      hsl(var(--background) / 0.55) 55%,
      hsl(var(--background) / 0.88) 72%,
      hsl(var(--background) / 0.96) 100%
    );
  }
  /* Soft radial halo behind the headline for extra contrast. */
  .hero-modern-content::before {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 110%; height: 70%;
    background: radial-gradient(
      ellipse 55% 60% at 50% 75%,
      hsl(var(--background) / 0.85) 0%,
      hsl(var(--background) / 0.55) 45%,
      transparent 80%
    );
    z-index: -1;
    pointer-events: none;
    filter: blur(10px);
  }
  .hero-modern-content > * { position: relative; }
  .hero-modern-content h1 {
    color: hsl(var(--foreground));
    animation: hero-fade-up 720ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero-modern-content p {
    color: hsl(var(--foreground));
    animation: hero-fade-up 720ms cubic-bezier(0.2, 0.7, 0.2, 1) 80ms both;
  }
  .hero-modern-content .hero-eyebrow {
    animation: hero-fade-up 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  @keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin-bottom: 22px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(var(--foreground));
    background: hsl(var(--background) / 0.78);
    border: var(--b-thin) solid hsl(var(--border));
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .hero-eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    background: hsl(145 50% 45%);
    border-radius: 999px;
    box-shadow: 0 0 0 3px hsl(145 50% 45% / 0.15);
  }
  /* Subtle hover lift used on cards. */
  .hover-lift {
    transition:
      transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
      border-color 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
      box-shadow 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .hover-lift:hover {
    transform: translateY(-2px);
    border-color: hsl(var(--border-strong));
    box-shadow: 0 6px 20px -6px rgba(0,0,0,0.08), 0 2px 6px -2px rgba(0,0,0,0.05);
  }
  /* Section reveal: fade-up the first time each major section enters view. */
  .section-reveal { opacity: 0; transform: translateY(18px); transition: opacity 720ms cubic-bezier(0.16, 1, 0.3, 1), transform 720ms cubic-bezier(0.16, 1, 0.3, 1); }
  .section-reveal.is-visible { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .section-reveal { opacity: 1; transform: none; transition: none; }
    .hover-lift { transition: none; }
    .hero-modern-content h1, .hero-modern-content p, .hero-modern-content .hero-eyebrow { animation: none !important; }
    .hero-birds { display: none; }
    .hero-sunset { animation: none !important; opacity: 0.7; }
  }
  /* Pulsing live dot for the feed section indicator. */
  @keyframes ticker-pulse {
    0%, 100% { box-shadow: 0 0 0 0 hsl(145 60% 50% / 0.6); }
    50%      { box-shadow: 0 0 0 8px hsl(145 60% 50% / 0); }
  }
  .ticker-dot {
    display: inline-block;
    width: 6px; height: 6px;
    background: hsl(145 60% 50%);
    border-radius: 999px;
    animation: ticker-pulse 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
  }
  /* Tabular numerals for runtime data + IDs in the feed. */
  .t-mono {
    font-family: "SF Mono", ui-monospace, Menlo, monospace;
    font-feature-settings: "tnum", "zero";
  }

  /* Pill that sits inside the illustration above the headline */
  .pill-on-image {
    background: hsl(var(--foreground));
    color: hsl(var(--background));
    border: var(--b-thin) solid hsl(var(--foreground));
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: var(--shadow-md);
  }

  .hero-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
    animation: pin-fade-in 0.6s ease-out backwards;
  }
  .hero-pin:nth-child(1) { animation-delay: 0.2s; }
  .hero-pin:nth-child(2) { animation-delay: 0.4s; }
  .hero-pin:nth-child(3) { animation-delay: 0.6s; }
  .hero-pin:nth-child(4) { animation-delay: 0.8s; }
  @keyframes pin-fade-in {
    from { opacity: 0; transform: translate(-50%, -45%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }
  .hero-pin-dot {
    width: 14px; height: 14px;
    background: hsl(332 75% 55%);
    border: 3px solid hsl(var(--background));
    border-radius: 50%;
    box-shadow: var(--shadow-md), 0 0 0 1px hsl(var(--foreground) / 0.3);
    margin: 0 auto 6px auto;
    animation: pin-pulse 1.6s ease-in-out infinite;
  }
  @keyframes pin-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
  }
  .hero-pin-card {
    background: hsl(var(--background));
    border: var(--b-thin) solid hsl(var(--foreground));
    border-radius: var(--r-base);
    padding: 7px 11px;
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    text-align: center;
  }
  .hero-pin-name {
    font-size: 12.5px; font-weight: 700;
    letter-spacing: -0.005em;
    color: hsl(var(--foreground));
  }
  .hero-pin-meta {
    font-size: 11px;
    color: hsl(0 0% 38%);
    margin-top: 1px;
  }

  /* Subtle pill variant */
  .pill-subtle {
    background: hsl(var(--background) / 0.7);
    backdrop-filter: blur(8px);
    border-color: hsl(var(--border));
  }

  /* Larger button variant */
  .btn-lg { height: 52px; padding: 0 26px; font-size: 15px; }

  .shader-fallback {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 90% 75% at 42% 50%, hsla(340, 85%, 80%, 0.50) 0%, hsla(28, 90%, 80%, 0.35) 35%, transparent 70%),
      hsl(36 35% 97%);
  }
  .grain {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.45; mix-blend-mode: overlay;
    background-image: url("assets/images/grain.svg");
  }


  /* Pixel crops */
  .pixel-thumb {
    width: 100%; aspect-ratio: 1/1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-bottom: var(--b-thin) solid hsl(var(--border));
    image-rendering: pixelated;
  }
  .pixel-hvac       { background-image: var(--img-hvac); }
  .pixel-roofing    { background-image: var(--img-roofing); }
  .pixel-dental     { background-image: var(--img-dental); }
  .pixel-vet        { background-image: var(--img-vet); }
  .pixel-medspa     { background-image: var(--img-medspa); }
  .pixel-restaurant { background-image: var(--img-restaurant); }

  /* ========================================================
     FOOTER VARIANT 2: Editorial baseline
     ======================================================== */
  .footer-v2 {
    background: hsl(var(--background));
  }
  .footer-v2-strip {
    position: relative;
    height: clamp(180px, 26vw, 320px);
    margin-top: 32px;
    background-image: var(--img-mainstreet);
    background-size: cover;
    background-position: 50% 80%;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    border-bottom: var(--b-thick) solid hsl(var(--foreground));
  }
  .footer-v2-strip::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom,
      hsl(var(--background) / 0.0) 30%,
      hsl(var(--background) / 0.55) 100%);
    pointer-events: none;
  }
  .footer-v2-body {
    padding-top: 56px;
    padding-bottom: 32px;
  }
  .footer-v2-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 2.4fr;
    gap: 64px;
    align-items: start;
  }
  .footer-v2-brand {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 16px;
  }
  .footer-v2-logo {
    width: clamp(220px, 22vw, 320px);
    height: auto;
    display: block;
    margin-top: -6px;
    user-select: none;
  }
  .footer-v2-tagline {
    font-size: 15.5px;
    line-height: 1.5;
    color: hsl(0 0% 28%);
    margin: 0;
    max-width: 38ch;
  }
  .footer-v2-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  .footer-v2-bottom {
    margin-top: 40px; padding-top: 20px;
    border-top: var(--b-thin) solid hsl(var(--border));
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 16px 24px;
  }
  @media (max-width: 900px) {
    .footer-v2-grid { grid-template-columns: 1fr; gap: 36px; }
    .footer-v2-links { grid-template-columns: repeat(2, 1fr); }
  }

  /* Sticky conversion bar: a clean floating pill, lower-right */
  .sticky-cta {
    position: fixed; right: 24px; bottom: 24px;
    transform: translateY(20px);
    background: hsl(var(--foreground)); color: hsl(var(--background));
    padding: 12px 18px;
    border-radius: var(--r-pill);
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
    text-decoration: none;
    box-shadow: 0 10px 30px -8px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.10);
    opacity: 0; pointer-events: none;
    transition: opacity var(--d-slow) ease,
                transform var(--d-slow) cubic-bezier(0.2, 0.7, 0.3, 1),
                background var(--d-base) ease;
    z-index: 50;
  }
  .sticky-cta:hover { background: hsl(0 0% 18%); }
  .sticky-cta .arrow { transition: transform var(--d-base) ease; }
  .sticky-cta:hover .arrow { transform: translateX(3px); }
  .sticky-cta-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }
  /* ====== Case study editorial carousel ====== */
  .case-carousel {
    position: relative;
    margin-left: calc(-1 * max(0px, (100vw - 1440px) / 2 + 24px));
    margin-right: calc(-1 * max(0px, (100vw - 1440px) / 2 + 24px));
    padding-left: max(24px, (100vw - 1440px) / 2 + 24px);
    padding-right: max(24px, (100vw - 1440px) / 2 + 24px);
    overflow: hidden;
  }
  .case-track {
    display: flex; gap: 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .case-track::-webkit-scrollbar { display: none; }
  /* ===== Case card v5 · Angle 4: papery base + brand-color top wash ===== */
  .case-card {
    flex: 0 0 min(440px, 88vw);
    scroll-snap-align: start;
    background: hsl(40 18% 99.5%);
    border: none;
    border-radius: 14px;
    padding: 32px 32px 28px;
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
      0 1px 0 hsl(0 0% 0% / 0.04),
      0 24px 48px -28px hsl(40 30% 12% / 0.32),
      0 4px 12px -6px hsl(40 30% 12% / 0.10);
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms ease;
  }
  .case-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 1px 0 hsl(0 0% 0% / 0.05),
      0 36px 72px -32px hsl(40 30% 12% / 0.42),
      0 10px 22px -10px hsl(40 30% 12% / 0.16);
  }
  /* Top brand-color wash: top ~30% fades from a soft tint to paper. Each customer
     gets its own tint via the data-brand attribute on the card. */
  .case-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%;
    z-index: 0; pointer-events: none;
  }
  .case-card[data-brand="realwork"]::before   { background: linear-gradient(180deg, hsl(28 80% 92%) 0%, hsl(28 80% 96% / 0) 100%); }
  .case-card[data-brand="belfry"]::before     { background: linear-gradient(180deg, hsl(220 60% 92%) 0%, hsl(220 60% 96% / 0) 100%); }
  .case-card[data-brand="bevi"]::before       { background: linear-gradient(180deg, hsl(195 75% 92%) 0%, hsl(195 75% 96% / 0) 100%); }
  .case-card[data-brand="greenspark"]::before { background: linear-gradient(180deg, hsl(140 50% 92%) 0%, hsl(140 50% 96% / 0) 100%); }
  .case-card[data-brand="onthestage"]::before { background: linear-gradient(180deg, hsl(0 70% 94%) 0%, hsl(0 70% 96% / 0) 100%); }
  .case-card[data-brand="skimmer"]::before    { background: linear-gradient(180deg, hsl(210 70% 92%) 0%, hsl(210 70% 96% / 0) 100%); }
  .case-card[data-brand="seed"]::before       { background: linear-gradient(180deg, hsl(40 30% 92%) 0%, hsl(40 30% 96% / 0) 100%); }
  .case-card > * { position: relative; z-index: 1; }

  .case-meta {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    padding-bottom: 26px; border-bottom: var(--b-thin) solid hsl(0 0% 0% / 0.08);
    min-height: 52px;
  }
  .case-meta-left { display: flex; align-items: center; min-width: 0; flex: 1; }
  .case-meta-logo {
    height: 40px; width: auto; max-width: 180px;
    object-fit: contain; flex-shrink: 0;
    display: block;
  }
  .case-meta-dot {
    width: 10px; height: 10px; border-radius: 999px;
    background: hsl(var(--foreground));
    opacity: 0.6;
    flex-shrink: 0;
    margin-right: 12px;
  }
  .case-industry {
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: hsl(var(--foreground));
  }
  /* When a logo is present in the row, hide the redundant industry label so the logo carries the brand */
  .case-meta-left:has(.case-meta-logo) .case-industry { display: none; }
  .case-industry { color: hsl(var(--foreground)); }
  .case-stack {
    background: hsl(0 0% 100% / 0.7);
    border: 1px solid hsl(0 0% 0% / 0.08);
    padding: 4px 10px; border-radius: 999px;
    font-size: 10.5px;
    text-transform: uppercase; letter-spacing: 0.10em; font-weight: 600;
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
  }
  .case-stat { padding: 6px 0 22px; }
  .case-stat-num {
    font-family: "Aspekta Variable", sans-serif;
    font-weight: 700; letter-spacing: -0.05em;
    font-size: clamp(56px, 5.6vw, 72px);
    line-height: 0.9;
    color: hsl(var(--foreground));
  }
  /* In case-stat-num the big number IS the emphasis; suppress accent color so the stat reads ink */
  .case-stat-num .display-em { font-weight: 700; letter-spacing: -0.05em; color: hsl(var(--foreground)); }
  .case-stat-label {
    font-size: 13.5px; line-height: 1.45; margin-top: 14px;
    color: hsl(var(--muted-foreground));
    max-width: 30ch;
  }
  .case-quote {
    font-family: "Aspekta Variable", sans-serif;
    font-weight: 500; letter-spacing: -0.005em;
    font-size: 16px; line-height: 1.5;
    color: hsl(var(--foreground));
    flex: 1;
    padding: 6px 0 24px 22px;
    margin: 0;
    position: relative;
  }
  .case-quote::before {
    content: "\201C";
    position: absolute; top: 6px; left: -2px;
    font-size: 56px; line-height: 0.6; font-weight: 500;
    letter-spacing: -0.05em;
    color: hsl(var(--foreground));
    opacity: 0.14;
    pointer-events: none;
  }
  .case-author {
    display: flex; align-items: center; gap: 14px;
    padding-top: 22px;
    border-top: 1px solid hsl(0 0% 0% / 0.08);
  }
  .case-avatar {
    width: 48px; height: 48px;
    border-radius: 999px;
    overflow: hidden;
    background: white;
    box-shadow: 0 0 0 1px hsl(0 0% 0% / 0.08), 0 2px 4px hsl(0 0% 0% / 0.04);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .case-avatar-img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    display: block;
  }
  .case-avatar-logo {
    max-width: 78%; max-height: 56%;
    width: auto; height: auto;
    object-fit: contain;
    display: block;
  }
  .case-avatar--initials {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  }
  .case-byline { line-height: 1.25; flex: 1; }
  .case-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; }
  .case-role { font-size: 12.5px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
  .case-link {
    font-size: 12.5px; font-weight: 600;
    color: hsl(var(--foreground));
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none;
    margin-top: 14px;
    align-self: flex-start;
  }
  .case-link .arrow { transition: transform var(--d-base) ease; }
  .case-link:hover .arrow { transform: translateX(3px); }
  .carousel-btn {
    width: 38px; height: 38px;
    border: var(--b-thin) solid hsl(var(--border));
    background: hsl(var(--background));
    border-radius: 999px;
    font-size: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color var(--d-base) ease, background var(--d-base) ease;
  }
  .carousel-btn:hover { border-color: hsl(var(--border-strong)); background: hsl(var(--muted)); }
  .carousel-btn:disabled { opacity: 0.35; cursor: default; }

  /* ====== Signal Feed: pixel-art Main Street with annotated signal pins ====== */
  .section-feed { background: hsl(40 28% 96.5%); }

  /* Live status meta below the H2/sub */
  .signal-meta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    background: hsl(0 0% 100%);
    border: var(--b-thin) solid hsl(var(--border-strong) / 0.3);
    border-radius: 999px;
  }
  .signal-meta-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: hsl(145 60% 38%);
    box-shadow: 0 0 0 4px hsl(145 60% 38% / 0.16);
    animation: live-pulse 1.6s ease-in-out infinite;
  }
  .signal-meta-text {
    font-size: 12.5px; font-weight: 500;
    letter-spacing: -0.005em;
    color: hsl(var(--foreground));
  }

  /* Staged image with overlaid signal pins */
  .signal-stage {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: 10px;
    overflow: hidden;
    border: var(--b-thin) solid hsl(var(--foreground) / 0.18);
    box-shadow: 0 36px 80px -28px rgba(0,0,0,0.28),
                0 8px 18px -6px rgba(0,0,0,0.10);
  }
  .signal-stage-img {
    position: absolute; inset: 0;
    background-image: url("assets/images/stage-feed.png");
    background-size: cover;
    background-position: center;
    image-rendering: pixelated;
  }

  /* Each signal pin sits absolutely at a position, with a dot anchored to a building
     and a card connected to it. Hovering brings the card forward. */
  .signal-pin {
    position: absolute;
    z-index: 2;
    display: flex; flex-direction: column; align-items: flex-start;
    pointer-events: none;
  }
  .signal-pin-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: hsl(var(--foreground));
    border: 2px solid hsl(0 0% 100%);
    box-shadow: 0 0 0 2px hsl(var(--foreground) / 0.85),
                0 8px 18px -4px rgba(0,0,0,0.30);
  }
  .signal-pin::before {
    /* connector line from dot to card edge */
    content: "";
    position: absolute;
    left: 5px; top: 12px;
    width: 1px; height: 14px;
    background: hsl(var(--foreground) / 0.55);
  }
  .signal-pin-card {
    margin-top: 26px;
    background: hsl(0 0% 100%);
    border: var(--b-thin) solid hsl(var(--foreground) / 0.18);
    border-radius: 8px;
    padding: 8px 12px 9px;
    box-shadow: 0 12px 28px -8px rgba(0,0,0,0.28),
                0 3px 8px -2px rgba(0,0,0,0.10);
    display: flex; flex-direction: column; gap: 1px;
    min-width: 184px;
    pointer-events: auto;
    transition: transform var(--d-base) ease, box-shadow var(--d-base) ease;
  }
  .signal-pin-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -10px rgba(0,0,0,0.34),
                0 4px 10px -2px rgba(0,0,0,0.12);
  }
  .signal-pin-tag {
    align-self: flex-start;
    padding: 2px 7px;
    background: hsl(0 0% 96%);
    color: hsl(var(--foreground));
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
    border-radius: 3px;
    margin-bottom: 4px;
  }
  .signal-pin-tag.tag-growth {
    background: hsl(145 60% 92%);
    color: hsl(145 50% 24%);
    letter-spacing: -0.005em; text-transform: none;
    font-weight: 600;
  }
  .signal-pin-tag.tag-owner {
    background: hsl(35 80% 92%);
    color: hsl(28 70% 26%);
  }
  .signal-pin-name {
    font-family: "Aspekta Variable", system-ui, sans-serif;
    font-weight: 600; letter-spacing: -0.01em;
    font-size: 13px; line-height: 1.2;
    color: hsl(var(--foreground));
  }
  .signal-pin-detail {
    font-size: 11.5px;
    color: hsl(var(--muted-foreground));
    line-height: 1.3;
  }

  /* On narrow screens, pins stack underneath the image as a list */
  @media (max-width: 900px) {
    .signal-stage { aspect-ratio: 4/3; }
    .signal-pin {
      position: relative;
      left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
      flex-direction: row; align-items: center; gap: 10px;
      margin: 8px 0 0;
    }
    .signal-pin::before { display: none; }
    .signal-pin-dot { display: none; }
    .signal-pin-card { margin-top: 0; }
  }

  /* ====== "In your market" — 3 staged pixel-art chapters ====== */
  .market-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .market-card {
    display: flex; flex-direction: column;
    background: hsl(var(--background));
    border: var(--b-thin) solid hsl(var(--foreground) / 0.18);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color var(--d-base) ease, transform var(--d-base) ease;
  }
  .market-card:hover {
    border-color: hsl(var(--foreground) / 0.4);
    transform: translateY(-2px);
  }
  .market-img {
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    image-rendering: pixelated;
    border-bottom: var(--b-thin) solid hsl(var(--foreground) / 0.12);
    transform: scale(1);
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .market-card:hover .market-img { transform: scale(1.04); }
  .market-body {
    padding: 22px 22px 24px;
    flex: 1;
    display: flex; flex-direction: column;
  }
  .market-eyebrow {
    font-family: "Aspekta Variable", system-ui, sans-serif;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.10em; text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    margin-bottom: 10px;
  }
  .market-title {
    font-family: "Aspekta Variable", system-ui, sans-serif;
    font-weight: 500; letter-spacing: -0.025em;
    font-size: 22px; line-height: 1.18;
    color: hsl(var(--foreground));
    margin: 0 0 10px;
  }
  .market-text {
    font-size: 14px; line-height: 1.55;
    color: hsl(var(--muted-foreground));
    margin: 0;
  }
  @media (max-width: 900px) {
    .market-grid { grid-template-columns: 1fr; gap: 18px; }
  }

  /* ============================================================
     WHY ORBITAL + WHAT IT DOES — 4-block value grid, visual per block
     ============================================================ */
  .value-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: var(--b-thin) solid hsl(var(--foreground) / 0.18);
    border-bottom: var(--b-thin) solid hsl(var(--foreground) / 0.18);
  }
  .value-block {
    padding: 32px 32px 28px;
    border-right: var(--b-thin) solid hsl(var(--foreground) / 0.12);
    border-bottom: var(--b-thin) solid hsl(var(--foreground) / 0.12);
    display: flex; flex-direction: column;
    min-height: 380px;
  }
  .value-block:nth-child(2n) { border-right: none; }
  .value-block:nth-last-child(-n+2) { border-bottom: none; }
  .value-visual {
    flex: 1;
    display: flex; flex-direction: column; justify-content: center;
    padding: 8px 0 24px;
    position: relative;
    overflow: hidden;
  }
  .value-content {
    border-top: var(--b-thin) solid hsl(var(--foreground) / 0.10);
    padding-top: 18px;
  }
  .label-num {
    font-family: "Aspekta Variable", system-ui, sans-serif;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.10em; text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    margin-bottom: 10px; display: block;
    font-feature-settings: "tnum";
  }
  .value-title {
    font-family: "Aspekta Variable", system-ui, sans-serif;
    font-weight: 500; letter-spacing: -0.025em;
    font-size: 22px; line-height: 1.2;
    color: hsl(var(--foreground));
    margin: 0 0 10px;
  }
  .value-body {
    font-size: 14px; line-height: 1.55;
    color: hsl(var(--muted-foreground));
    margin: 0;
    max-width: 50ch;
  }

  /* === BLOCK 1: TAM — massive number with subtle dot grid === */
  .visual-tam {
    align-items: flex-start;
  }
  .visual-tam::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, hsl(var(--foreground) / 0.10) 1px, transparent 1px);
    background-size: 12px 12px;
    background-position: -2px -2px;
    pointer-events: none;
  }
  .visual-tam-num {
    position: relative;
    font-family: "Aspekta Variable", system-ui, sans-serif;
    font-weight: 500; letter-spacing: -0.05em;
    font-size: clamp(96px, 12vw, 144px);
    line-height: 0.9;
    color: hsl(var(--foreground));
  }
  .visual-tam-plus {
    color: hsl(var(--muted-foreground));
    font-weight: 400;
  }
  .visual-tam-label {
    position: relative;
    font-size: 13px; line-height: 1.4;
    color: hsl(var(--muted-foreground));
    margin-top: 14px;
    letter-spacing: -0.005em;
  }

  /* === BLOCK 2: Owners — minimal owner contact lockup === */
  .visual-owners {
    align-items: stretch; justify-content: flex-start;
    padding-top: 18px;
  }
  .visual-owners-card {
    background: hsl(var(--background));
    border: var(--b-thin) solid hsl(var(--foreground) / 0.18);
    border-radius: 8px;
    padding: 16px 18px;
    max-width: 380px;
    box-shadow: 0 12px 28px -10px rgba(0,0,0,0.14),
                0 2px 6px -2px rgba(0,0,0,0.06);
  }
  .visual-owners-name {
    font-family: "Aspekta Variable", system-ui, sans-serif;
    font-weight: 600; letter-spacing: -0.015em;
    font-size: 15.5px;
    color: hsl(var(--foreground));
  }
  .visual-owners-role {
    font-size: 12.5px;
    color: hsl(var(--muted-foreground));
    margin-bottom: 14px;
    margin-top: 1px;
    letter-spacing: -0.005em;
  }
  .visual-owners-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0;
    border-top: var(--b-thin) solid hsl(0 0% 95%);
    font-size: 13px;
    color: hsl(var(--foreground));
    font-feature-settings: "tnum";
  }
  .visual-owners-row svg { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); flex-shrink: 0; }
  .visual-owners-text { flex: 1; letter-spacing: -0.005em; }
  .visual-owners-flag {
    background: hsl(145 60% 92%);
    color: hsl(145 50% 26%);
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
  }

  /* === BLOCK 3: Signals — live indicator + count + signal type pills === */
  .visual-signals {
    align-items: flex-start; justify-content: flex-start;
    padding-top: 16px;
  }
  .visual-signals-pulse {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 10px;
    background: hsl(var(--background));
    border: var(--b-thin) solid hsl(var(--foreground) / 0.18);
    border-radius: 999px;
    margin-bottom: 14px;
  }
  .visual-signals-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: hsl(145 60% 38%);
    box-shadow: 0 0 0 4px hsl(145 60% 38% / 0.18);
    animation: live-pulse 1.6s ease-in-out infinite;
  }
  .visual-signals-live {
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: hsl(var(--foreground));
  }
  .visual-signals-num {
    font-family: "Aspekta Variable", system-ui, sans-serif;
    font-weight: 500; letter-spacing: -0.05em;
    font-size: clamp(80px, 10vw, 120px);
    line-height: 0.9;
    color: hsl(var(--foreground));
  }
  .visual-signals-label {
    font-size: 13px; line-height: 1.4;
    color: hsl(var(--muted-foreground));
    margin-top: 10px; margin-bottom: 14px;
    max-width: 32ch;
  }
  .visual-signals-pills { display: flex; flex-wrap: wrap; gap: 6px; }
  .visual-signals-pill {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    background: hsl(0 0% 100% / 0.7);
    border: var(--b-thin) solid hsl(var(--foreground) / 0.15);
    border-radius: 999px;
    font-size: 11px; font-weight: 500;
    letter-spacing: -0.005em;
    color: hsl(var(--foreground));
  }

  /* === BLOCK 4: Channels — 5 channel chips === */
  .visual-channels {
    flex-direction: row; flex-wrap: wrap;
    gap: 10px;
    align-items: center; justify-content: flex-start;
    padding: 16px 0;
  }
  .channel-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: hsl(var(--background));
    border: var(--b-thin) solid hsl(var(--foreground) / 0.18);
    border-radius: 8px;
    font-family: "Aspekta Variable", system-ui, sans-serif;
    font-size: 13px; font-weight: 500;
    letter-spacing: -0.005em;
    color: hsl(var(--foreground));
    transition: border-color var(--d-base) ease, transform var(--d-base) ease;
  }
  .channel-chip:hover {
    border-color: hsl(var(--foreground) / 0.4);
    transform: translateY(-1px);
  }
  .channel-chip svg { width: 16px; height: 16px; color: hsl(var(--muted-foreground)); }

  @media (max-width: 900px) {
    .value-grid { grid-template-columns: 1fr; }
    .value-block {
      border-right: none;
      border-bottom: var(--b-thin) solid hsl(var(--foreground) / 0.12);
      min-height: 0;
      padding: 28px 0;
    }
    .value-block:last-child { border-bottom: none; }
  }