/* Finkut landing preview C — "blend".
   A's product sections told with B's story; loads after site_silver.css and site_story.css.
   Scoped to body.is-blend (and the .c-* blocks), so previews A and B are unaffected. */

/* Hero: letter headline over a slow network of joined points, above the tool tour */
.c-hero .p-hero__inner { position: relative; }
.c-hero .q-display { font-size: clamp(38px, 6.4vw, 86px); line-height: 1.03; }
.c-net { position: absolute; left: 0; top: -72px; z-index: -1; width: 100%; height: min(100%, 860px); pointer-events: none;
  mask-image: linear-gradient(#000 0%, #000 52%, transparent 96%); -webkit-mask-image: linear-gradient(#000 0%, #000 52%, transparent 96%);
  animation: c-net-in 1.8s ease both; }
@keyframes c-net-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .c-net { animation: none; } }

/* Noise -> one thread: twelve scattered inputs settle around the wordmark */
.c-thread { height: 260vh; }
.c-thread .p-h2 span { -webkit-text-fill-color: var(--muted); }
.c-thread .p-thread__viz { margin-top: clamp(22px, 4vh, 44px); }
.c-thread .p-thread__tabs > a { will-change: transform; transition: border-color .5s, background .5s, box-shadow .5s; }
.c-thread:not(.is-sorted) .p-thread__tabs > a { border-color: var(--line-2); background: var(--surface); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9); }
.c-thread .q-swap { display: grid; margin-top: 8px; }
.c-thread .q-swap b { grid-area: 1 / 1; margin: 0; transition: opacity .45s, transform .45s var(--ease); }
.c-thread .q-swap__b { opacity: 0; transform: translateY(6px); color: var(--text); }
.c-thread.is-sorted .q-swap__a { opacity: 0; transform: translateY(-6px); }
.c-thread.is-sorted .q-swap__b { opacity: 1; transform: none; transition-delay: .15s; }
/* The thread is drawn once the cards have landed, and withdrawn at once when they lift again. */
.c-thread.is-sorted .p-thread__tabs > a::after, .c-thread.is-sorted .p-thread__stem { transform: scaleY(1); }
.c-thread.is-sorted .p-thread__join { transform: scaleX(1); }
.c-thread.is-sorted .p-thread__one { opacity: 1; }
.c-thread:not(.is-sorted) .p-thread__tabs > a::after, .c-thread:not(.is-sorted) .p-thread__stem, .c-thread:not(.is-sorted) .p-thread__join, .c-thread:not(.is-sorted) .p-thread__one { transition-duration: .2s; transition-delay: 0s; }
@media (max-width: 1060px) { .c-thread .p-thread__one { margin: 12px 0; } .c-thread .p-thread__stem { display: none; } }
@media (max-width: 560px) { .c-thread .p-thread__viz { --gap: 8px; } .c-thread .p-thread__tabs > a { padding: 10px 11px 11px; } .c-thread .p-thread__tabs b { font-size: 12.5px; } }

/* When the scene does not fit the screen it is shown settled, without pinning. */
.q-chaos.is-static { height: auto; }
.q-chaos.is-static .q-chaos__pin { position: static; height: auto; padding: 72px 0; overflow: visible; }

@media (prefers-reduced-motion: reduce) { .c-thread { height: auto; } }
.c-hero { padding-top: clamp(44px, 5.5vw, 80px); }
.c-hero .p-hero__stage { margin-top: clamp(36px, 4.5vw, 56px); }
/* Feature cards with a product crop: taller window, so more of the screen shows */
.is-blend .s-card--wide .v-shot { min-height: 260px; max-height: 340px; }
/* The workspace follows the thread scene directly: the scene already leaves room below itself. */
.is-blend .c-thread + .c-tools { padding-top: clamp(40px, 5vw, 72px); }
/* Plans: the comparison table sits under the cards, in the same steel as the rest of the page */
.is-blend .s-plan__amount span { font-size: 13.5px; }
.is-blend .s-compare2 { border-radius: 20px; }
.is-blend .s-compare2__head h3 { font-size: 26px; font-weight: 500; letter-spacing: -.03em; }
.is-blend .s-compare2 thead th.is-featured { background: linear-gradient(180deg, rgba(110, 155, 220, .16), var(--surface)); }
.is-blend .s-compare2 td:nth-child(3), .is-blend .s-compare2 thead th.is-featured { box-shadow: inset 1px 0 0 rgba(190, 206, 232, .16), inset -1px 0 0 rgba(190, 206, 232, .16); }
.is-blend .s-switchline input:checked + .s-switch { background: rgba(138, 180, 248, .35); border-color: rgba(138, 180, 248, .6); }
/* The tool tour opens as it is scrolled into view: --open runs 0 -> 1 with the scroll position
   (set by landing_blend_preview.js), so it is never fully open on arrival and never late either. */
.js .c-hero .p-hero__stage[data-reveal] { --open: 1; opacity: calc(.2 + .8 * var(--open)); transition: none; perspective: 1600px;
  transform: translateY(calc((1 - var(--open)) * 46px)); }
.js .c-hero .p-hero__stage[data-reveal] .s-reel { transform-origin: 50% 0; transform: rotateX(calc((1 - var(--open)) * 22deg)) scale(calc(.88 + .12 * var(--open))); will-change: transform; }
.c-hero { padding-top: clamp(24px, 3.4vw, 52px); }
.c-hero .p-kicker { margin-bottom: 16px; }
.c-hero .p-lede { margin-top: 18px; }
.c-hero .p-actions { margin-top: 26px; }
.c-hero .p-fine { margin-top: 14px; }
.c-hero .p-hero__stage { margin-top: clamp(22px, 2.6vw, 36px); }