/* Below-fold landing chrome — loaded after first paint (media=print onload). */

/* --- src/components/sections/CommunityShowcase.astro --- */
  .stills {
    background: var(--color-bg);
    padding: var(--section-pad-y) 0;
    border-bottom: 1px solid var(--color-rule);
  }

  .stills-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 36rem;
    margin: 0 auto;
  }

  .stills-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-text);
    border: 1px solid var(--color-hairline-strong);
    background: transparent;
  }

  .stills-badge-mark {
    width: 5px;
    height: 5px;
    background: currentColor;
  }

  .stills-title {
    margin: 16px 0 0;
    font-size: clamp(1.875rem, 3.4vw, 2.75rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.04em;
    color: var(--color-ink);
    text-wrap: balance;
  }

  .stills-sub {
    margin: 12px 0 0;
    max-width: 28rem;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--color-muted);
    text-wrap: pretty;
  }

  .stills-stage {
    margin-top: 40px;
    min-height: 0;
  }

  @media (min-width: 768px) {
    .stills-stage {
      min-height: 440px;
    }
  }

/* --- src/components/sections/NodeFlow.astro --- */
  .flow-desktop { display: none; }
  .flow-story { display: block; }
  .flow-desktop:has(.flow) .flow-boot-fallback { display: none; }

  .flow-story-list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .flow-story-step.is-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .flow-story-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .flow-story-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .flow-story-tag.is-image { color: var(--medium-image); }
  .flow-story-tag.is-audio { color: var(--medium-audio); }
  .flow-story-tag.is-mesh { color: var(--medium-3d); }

  .flow-story-art {
    overflow: hidden;
    position: relative;
    background: var(--color-black);
  }

  .flow-story-art img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transform: scale(1.24);
    transform-origin: 50% 46%;
  }
  .flow-story-art.is-mesh img {
    transform: scale(1.52);
    transform-origin: 46% 34%;
  }
  .flow-story-art.is-audio img {
    transform: scale(1.48);
    transform-origin: 50% 38%;
  }

  .flow-story-title {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--color-muted);
  }

  .flow-story-join {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 0;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-faint);
  }

  .flow-story-join::before,
  .flow-story-join::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-rule);
  }

  @media (hover: hover) {
    .flow-story-art img {
      transition: transform 420ms var(--ease-out-expo);
    }
    .flow-story-card:hover .flow-story-art img,
    .flow-story-card:focus-within .flow-story-art img {
      transform: scale(1.28);
    }
    .flow-story-card:hover .flow-story-art.is-mesh img,
    .flow-story-card:focus-within .flow-story-art.is-mesh img {
      transform: scale(1.56);
    }
    .flow-story-card:hover .flow-story-art.is-audio img,
    .flow-story-card:focus-within .flow-story-art.is-audio img {
      transform: scale(1.54);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .flow-story-art img {
      transition: none;
    }
  }

  @media (min-width: 768px) {
    .flow-desktop { display: block; }
    .flow-story { display: none; }
  }

/* --- src/components/sections/Features.astro --- */
  .features-wrap {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-rule);
  }

/* --- src/components/sections/UseCases.astro --- */
  .uc {
    background: var(--color-bg);
    padding: var(--section-pad-y) 0;
    border-bottom: 1px solid var(--color-rule);
  }

  .uc .stills-head {
    margin-bottom: 40px;
  }

  .uc-rail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  @media (min-width: 768px) {
    .uc-rail {
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
  }

  @media (min-width: 1100px) {
    .uc-rail {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
    }
    .uc-card {
      min-height: 440px;
    }
  }

  .uc-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 380px;
    padding: 28px;
    background: var(--color-black);
    color: var(--color-white);
    border: 0;
  }
  .uc-card:focus {
    outline: none;
  }
  .uc-card:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  @media (min-width: 768px) {
    .uc-card {
      min-height: 440px;
      padding: 36px;
    }
  }

  .uc-art,
  .uc-art-fade {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .uc-art {
    z-index: 0;
    overflow: hidden;
    background: var(--color-black);
  }
  .uc-art picture {
    position: absolute;
    inset: 0;
    display: block;
  }
  .uc-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--uc-pos, 50% 50%);
  }
  .uc-tone {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.18;
    background-image: radial-gradient(circle, var(--color-black) 0.55px, transparent 0.65px);
    background-size: 5px 5px;
    -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.45), transparent 70%);
    mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.45), transparent 70%);
  }
  .uc-art-fade {
    z-index: 1;
    background: linear-gradient(
      to bottom,
      rgb(0 0 0 / 0) 0%,
      rgb(0 0 0 / 0) 52%,
      color-mix(in srgb, var(--color-black) 22%, transparent) 72%,
      color-mix(in srgb, var(--color-black) 48%, transparent) 90%,
      color-mix(in srgb, var(--color-black) 58%, transparent) 100%
    );
  }

  .uc-n {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 2;
    font-family: var(--font-sans);
    font-size: 4.5rem;
    font-weight: 600;
    letter-spacing: -0.08em;
    line-height: 0.78;
    color: color-mix(in srgb, var(--color-white) 18%, transparent);
    pointer-events: none;
    user-select: none;
  }
  @media (min-width: 768px) {
    .uc-n {
      top: 20px;
      right: 24px;
      font-size: 5.5rem;
    }
  }

  .uc-body {
    position: relative;
    z-index: 3;
  }
  .uc-title {
    margin: 0;
    font-size: clamp(1.2rem, 1.6vw, 1.4rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--color-white);
    text-wrap: balance;
  }
  .uc-copy {
    margin: 8px 0 0;
    max-width: 28em;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: -0.02em;
    color: color-mix(in srgb, var(--color-white) 78%, transparent);
  }

  @media (hover: hover) {
    .uc-art img {
      transition: transform 420ms var(--ease-out-expo);
    }
    .uc-card:hover .uc-art img,
    .uc-card:focus-within .uc-art img {
      transform: scale(1.04);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .uc-art img {
      transition: none;
    }
  }

/* --- src/components/sections/FAQ.astro --- */
  .faq {
    background: var(--color-bg);
    color: var(--color-white);
    padding: 48px 0 56px;
    border-bottom: 1px solid var(--color-rule);
  }
  .faq-inner {
    width: min(100%, var(--container-max, 1440px));
    margin: 0 auto;
    padding: 0 var(--container-gutter, 24px);
  }
  .faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 4px 8px;
    width: fit-content;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    border: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent);
    background: color-mix(in srgb, var(--color-ink) 4%, transparent);
  }
  .faq-badge-mark {
    width: 5px;
    height: 5px;
    background: currentColor;
  }
  .faq .rows{
    margin: 0;
  }
  .faq .row{
    border-bottom: 1px solid var(--color-rule);
  }
  .faq .row:first-of-type{
    border-top: 1px solid var(--color-rule);
  }
  .faq .row > summary{
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 28px;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    min-height: 44px;
  }
  .faq .row > summary::-webkit-details-marker{ display: none; }
  .faq .row > summary:focus-visible{
    outline: 2px solid var(--color-focus);
    outline-offset: 4px;
  }
  @media (hover: hover) {
    .faq .row > summary:hover .q{
      color: var(--color-ink);
    }
    .faq .row > summary:hover .toggle{
      border-color: color-mix(in srgb, var(--color-white) 40%, transparent);
      background: color-mix(in srgb, var(--color-white) 6%, transparent);
    }
  }
  .faq .row .num{
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.04em;
    color: color-mix(in srgb, var(--color-white) 42%, transparent);
    transition: color 0.38s var(--ease-out-expo);
  }
  .faq .row .q{
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: -0.03em;
    color: var(--color-white);
    line-height: 1.3;
    transition: color 0.38s var(--ease-out-expo);
  }
  .faq .row .toggle{
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-hairline-strong);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 15px;
    justify-self: end;
    line-height: 1;
    background: transparent;
    transition:
      transform 0.38s var(--ease-out-expo),
      border-color 0.38s var(--ease-out-expo),
      background 0.38s var(--ease-out-expo);
  }
  .faq .row[open]:not(.is-closing) .toggle{
    transform: rotate(45deg);
    border-color: color-mix(in srgb, var(--color-white) 40%, transparent);
    background: color-mix(in srgb, var(--color-white) 8%, transparent);
  }
  .faq .row[open]:not(.is-closing) .num{
    color: color-mix(in srgb, var(--color-white) 58%, transparent);
  }

  /* Height tween only while [open] (including is-closing). Closed rows keep
     the UA `display: none` so answers stay out of the accessibility tree. */
  .faq .row[open] > .body {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    overflow: hidden;
    transition:
      grid-template-rows 0.5s var(--ease-out-expo),
      opacity 0.38s var(--ease-out-expo);
  }
  .faq .row.is-closing > .body {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  @starting-style {
    .faq .row[open]:not(.is-closing) > .body {
      grid-template-rows: 0fr;
      opacity: 0;
    }
  }
  .faq .body-inner{
    overflow: hidden;
    min-height: 0;
  }
  .faq .row .a{
    margin: 0 0 14px 56px;
    max-width: 52rem;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.02em;
    color: color-mix(in srgb, var(--color-white) 82%, transparent);
    transform: translateY(8px);
    transition: transform 0.5s var(--ease-out-expo);
  }
  .faq .row[open]:not(.is-closing) .a{
    transform: none;
  }

  .faq .ctas{
    margin-top: 20px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .faq .ctas .btn{
    transition:
      background 0.28s var(--ease-out-expo),
      color 0.28s var(--ease-out-expo);
  }
  .faq .ctas .btn .arrow{
    transition: transform 0.38s var(--ease-out-expo);
  }

  @media (hover: hover) {
    .faq .row > summary:hover .num{
      color: color-mix(in srgb, var(--color-white) 62%, transparent);
    }
    .faq .row > summary:hover .toggle{
      border-color: color-mix(in srgb, var(--color-white) 42%, transparent);
      background: color-mix(in srgb, var(--color-white) 8%, transparent);
    }
    .faq .ctas .btn:hover .arrow{
      transform: translateX(3px);
    }
  }

  @media (max-width: 720px) {
    .faq .row > summary{
      grid-template-columns: 36px minmax(0, 1fr) 28px;
      gap: 10px;
    }
    .faq .row .a{ margin-left: 46px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .row .num,
    .row .q,
    .row .toggle,
    .row .a,
    .faq .row[open] > .body,
    .ctas .btn,
    .faq .ctas .btn .arrow{
      transition: none;
    }
  }

/* --- src/components/sections/Pricing.astro --- */
  .pricing-note {
    padding-bottom: var(--section-pad-y);
    margin-top: -48px;
  }

/* --- src/components/sections/Download.astro --- */
  .closing {
    --px: 0;
    --py: 0;
    --ht-cell: 9px;
    --ht-dot: 1.85px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--color-bg);
    letter-spacing: -0.04em;
  }

  .closing-halftone {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .closing-halftone-ink {
    position: absolute;
    inset: -10% -2% -4% 12%;
    transform: translate3d(calc(var(--px) * 14px), calc(var(--py) * 10px), 0);
    -webkit-mask-image: radial-gradient(
      92% 82% at calc(100% + (var(--px) * 5%)) calc(100% + (var(--py) * 4%)),
      #000 0%,
      #000 22%,
      rgb(0 0 0 / 0.7) 48%,
      transparent 76%
    );
    mask-image: radial-gradient(
      92% 82% at calc(100% + (var(--px) * 5%)) calc(100% + (var(--py) * 4%)),
      #000 0%,
      #000 22%,
      rgb(0 0 0 / 0.7) 48%,
      transparent 76%
    );
  }

  .closing-halftone-sheet {
    position: absolute;
    inset: calc(var(--ht-cell) * -2);
  }

  /* Square grid. Metallic ramp lives in the beads — gaps stay canvas. */
  .closing-halftone-dots {
    position: absolute;
    inset: 0;
    background: radial-gradient(
      42% 54% at calc(98% + (var(--px) * 4%)) calc(100% + (var(--py) * 3%)),
      color-mix(in srgb, var(--color-print-hot) 8%, white) 0%,
      color-mix(in srgb, var(--color-print-hot) 38%, white) 12%,
      var(--color-print-hot) 24%,
      var(--color-print) 42%,
      var(--color-print-deep) 64%,
      color-mix(in srgb, var(--color-print-deep) 78%, var(--color-print)) 100%
    );
    -webkit-mask-image: radial-gradient(
      circle,
      #000 0%,
      #000 calc(var(--ht-dot) * 0.5),
      rgb(0 0 0 / 0.55) var(--ht-dot),
      transparent calc(var(--ht-dot) + 0.7px)
    );
    mask-image: radial-gradient(
      circle,
      #000 0%,
      #000 calc(var(--ht-dot) * 0.5),
      rgb(0 0 0 / 0.55) var(--ht-dot),
      transparent calc(var(--ht-dot) + 0.7px)
    );
    -webkit-mask-size: var(--ht-cell) var(--ht-cell);
    mask-size: var(--ht-cell) var(--ht-cell);
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    mix-blend-mode: plus-lighter;
  }

  .closing.is-halftone-live .closing-halftone-sheet {
    animation: closing-halftone-drift 28s linear infinite;
  }

  .closing-split {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .closing-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
    padding: 48px var(--container-gutter, 24px) 28px;
  }

  .closing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .closing-eyebrow::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--color-ink);
  }

  .closing-title .em-mono {
    color: inherit;
  }

  .closing-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.125rem, 3.6vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
    color: var(--color-ink);
    text-wrap: balance;
  }

  .closing-sub {
    margin: 0;
    font-size: 14.5px;
    color: var(--color-muted);
  }

  .closing-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  .closing-cta .btn {
    height: 44px;
    padding: 0 20px;
    font-size: 13.5px;
    font-weight: 600;
    transition: transform 280ms var(--ease-out-expo), background 250ms var(--ease-out-expo);
  }

  .closing-team {
    margin: 0;
    font-size: 13.5px;
    color: var(--color-muted);
  }

  .closing-team a {
    color: var(--color-ink);
    text-decoration: underline;
  }

  .closing-cover {
    display: grid;
    place-items: center;
    padding: 8px var(--container-gutter, 24px) 40px;
  }

  .closing-cover-frame {
    position: relative;
    isolation: isolate;
    overflow: visible;
    width: 100%;
    max-width: 40rem;
    aspect-ratio: var(--closing-art-ratio);
    background: transparent;
  }

  .closing-cover-frame img,
  .closing-cover-frame picture {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 28px 48px rgb(0 0 0 / 0.42));
  }

  @media (hover: hover) {
    .closing-cover-frame img,
    .closing-cover-frame picture {
      transition: transform 480ms var(--ease-out-expo), filter 480ms var(--ease-out-expo);
    }
    .closing-cover-frame:hover img,
    .closing-cover-frame:hover picture {
      transform: translate3d(0, -6px, 0);
      filter: drop-shadow(0 36px 56px rgb(0 0 0 / 0.5));
    }

    .closing-halftone-dots {
      transition: filter 420ms var(--ease-out-expo);
    }

    .closing.is-hovered .closing-halftone-dots {
      filter: brightness(1.08);
    }

    .closing-cta .btn:hover {
      transform: scale(1.03);
    }

    .closing-cta .btn:active {
      transform: scale(0.985);
    }

    .closing-team a {
      text-underline-offset: 3px;
      transition: color 0.18s var(--ease-out-expo);
    }

    .closing-team a:hover {
      color: var(--color-ink-soft);
      opacity: 1;
    }
  }

  @media (min-width: 768px) {
    .closing {
      --ht-cell: 10px;
      --ht-dot: 2.05px;
    }
    .closing-halftone-ink {
      inset: -8% 0 -2% 22%;
    }
    .closing-split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      min-height: 100dvh;
    }
    .closing-copy {
      width: 100%;
      max-width: 26rem;
      margin-inline: auto;
      padding: 48px 40px 48px var(--container-gutter, 48px);
    }
    .closing-cover {
      min-height: 100dvh;
      padding: 48px 40px 48px 12px;
    }
    .closing-cover-frame {
      max-width: none;
    }
  }

  @media (min-width: 1024px) {
    .closing {
      --ht-cell: 11px;
      --ht-dot: 2.2px;
    }
    .closing-cover { padding: 56px 48px 56px 16px; }
    .closing-copy { padding: 56px 48px 56px var(--container-gutter, 48px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .closing-cover-frame img,
    .closing-cover-frame picture {
      transition: none;
      transform: none;
    }

    .closing-cta .btn,
    .closing-halftone-ink,
    .closing-halftone-sheet,
    .closing-halftone-dots {
      animation: none;
      transform: none;
      transition: none;
      filter: none;
    }
  }

  @keyframes closing-halftone-drift {
    to { transform: translate3d(var(--ht-cell), var(--ht-cell), 0); }
  }