/* Finkut landing preview B — "story" direction.
   A scroll narrative on top of the silver palette (site_silver.css): noise -> order -> how it works.
   Scoped to body.is-story; preview A does not load this file. */

/* Hero: the wordmark as a halftone ghost, the headline arriving letter by letter */
.q-hero { position: relative; min-height: min(92vh, 900px); display: grid; align-items: center; padding: 40px 0 96px; text-align: center; isolation: isolate; overflow: clip; }
.q-hero::before { content: ""; position: absolute; inset: -160px 0 0; z-index: -2; background: radial-gradient(50% 52% at 50% 46%, rgba(44, 78, 124, .38), rgba(22, 40, 68, .14) 56%, transparent 78%); }
.q-hero__ghost { position: absolute; left: 50%; top: 50%; z-index: -1; margin: 0; transform: translate(-50%, -54%); font: 500 clamp(84px, 18vw, 300px)/1 var(--wordmark); letter-spacing: .1em; white-space: nowrap; color: transparent; pointer-events: none; user-select: none;
  background: radial-gradient(circle, rgba(160, 190, 230, .4) 1.1px, transparent 1.7px) 0 0 / 9px 9px; -webkit-background-clip: text; background-clip: text;
  mask-image: radial-gradient(60% 70% at 50% 50%, #000 30%, transparent 85%); -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000 30%, transparent 85%);
  animation: q-ghost 2.4s var(--ease) both; }
@keyframes q-ghost { from { opacity: 0; transform: translate(-50%, -54%) scale(1.06); } }
.q-display { margin: 0; font: 500 clamp(36px, 6vw, 82px)/1.06 var(--sans); letter-spacing: -.042em; color: var(--text); text-wrap: balance; }
.q-line { display: block; }
.q-line--metal, .q-line--metal .q-l { color: transparent; background: var(--metal); -webkit-background-clip: text; background-clip: text; }
.q-display.is-split .q-line--metal { background: none; }
.q-w { display: inline-block; white-space: nowrap; }
.q-l { display: inline-block; padding-bottom: .1em; opacity: 0; transform: translateY(.4em); filter: blur(8px); animation: q-letter .7s var(--ease) forwards; animation-delay: calc(var(--i) * 24ms + .1s); }
@keyframes q-letter { to { opacity: 1; transform: none; filter: none; } }
.q-hero__cue { position: absolute; left: 50%; bottom: 34px; width: 1px; height: 44px; background: linear-gradient(var(--line-3), transparent); animation: q-cue 2.2s ease-in-out infinite; }
@keyframes q-cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Noise -> order: scattered inputs settle into a grid while the section stays pinned */
.q-chaos { position: relative; height: 240vh; }
.q-chaos__pin { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; overflow: clip; text-align: center; }
.q-chaos__caps { position: relative; height: 1.6em; margin: 14px 0 0; color: var(--text-2); font-size: clamp(16px, 1.5vw, 20px); }
.q-chaos__caps span { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s var(--ease); }
.q-chaos__caps span.is-on { opacity: 1; transform: none; }
.q-chaos__caps span:last-child { color: var(--text); }
.q-chaos__grid { list-style: none; margin: clamp(28px, 4vh, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.q-chip { padding: 12px 13px 13px; border: 1px solid var(--line-2); border-radius: 13px; background: var(--surface); text-align: left; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9); will-change: transform; transition: border-color .5s, box-shadow .5s, background .5s; }
.q-chip small { display: block; color: var(--tone); font: 500 10px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.q-chip b { display: block; margin-top: 7px; color: var(--text-2); font-size: 13px; font-weight: 500; line-height: 1.3; }
.q-chaos.is-sorted .q-chip { border-color: var(--line); background: var(--bg-2); box-shadow: none; }
@media (max-width: 1000px) { .q-chaos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .q-chip:nth-child(n+13) { display: none; } }
@media (max-width: 560px) { .q-chaos__grid { grid-template-columns: 1fr 1fr; gap: 8px; } .q-chip { padding: 10px 11px; } .q-chip b { font-size: 12.5px; } }
@media (max-height: 640px) { .q-chip:nth-child(n+13) { display: none; } }
@media (prefers-reduced-motion: reduce) { .q-chaos { height: auto; } .q-chaos__pin { position: static; height: auto; padding: 80px 0; } }

/* How it works */
.q-step { max-width: 980px; margin: 0 auto 18px; padding: clamp(24px, 3vw, 38px); border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg, rgba(190, 210, 240, .03), transparent 50%), var(--bg-2); }
.q-step > header { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; align-items: start; margin-bottom: clamp(22px, 3vw, 32px); }
.q-step__n { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-3); border-radius: 50%; color: var(--text); font: 500 14px/1 var(--mono); }
.q-step h3 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; letter-spacing: -.03em; line-height: 1.2; }
.q-step > header p { margin: 8px 0 0; max-width: 60ch; color: var(--text-2); font-size: 16px; line-height: 1.6; }
.q-step > header em { font-style: normal; color: var(--muted); }
.q-step .p-fine { margin-top: 16px; }

.q-sources { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.q-sources li { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 8px 16px; border: 1px solid var(--line); border-radius: 16px; color: var(--text-2); font-size: 13.5px; text-align: center; opacity: .35; transition: opacity .6s, border-color .6s, transform .6s var(--ease); transition-delay: calc(var(--i) * 140ms); transform: translateY(8px); }
.q-sources.is-in li { opacity: 1; border-color: var(--line-2); transform: none; }
@media (max-width: 760px) { .q-sources { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.q-demo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 14px; }
.q-demo__col { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(4, 7, 12, .5); }
.q-demo__col--thread { background: radial-gradient(120% 70% at 50% 0%, rgba(110, 155, 220, .1), transparent 65%), rgba(4, 7, 12, .5); border-color: var(--line-2); }
.q-demo__label { margin: 0 0 14px; color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.q-finds, .q-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.q-find { display: grid; grid-template-columns: 8px 1fr auto; gap: 12px; align-items: center; padding: 12px 12px 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg-2); transition: opacity .4s, border-color .3s; }
.q-find > i, .q-thread li > i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.q-find b, .q-thread b { display: block; color: var(--text); font-size: 14px; font-weight: 500; line-height: 1.35; }
.q-find small, .q-thread small { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.q-find.is-pinned { opacity: .45; }
.q-pin { min-width: 68px; min-height: 34px; padding: 0 14px; border: 1px solid var(--line-3); border-radius: 999px; background: transparent; color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.q-pin:hover { background: var(--gold-2); color: var(--gold-ink); border-color: transparent; }
.q-pin[disabled] { border-color: var(--line); color: var(--muted); background: transparent; cursor: default; }
.q-thread { position: relative; counter-reset: thread; }
.q-thread li:not(.q-thread__empty) { display: grid; grid-template-columns: 8px 1fr; gap: 12px; align-items: start; padding: 12px 12px 12px 14px; border: 1px solid var(--line-2); border-radius: 13px; background: var(--surface); animation: q-drop .5s var(--ease) both; }
.q-thread li > i { margin-top: 6px; }
@keyframes q-drop { from { opacity: 0; transform: translateX(-18px) scale(.97); } }
.q-thread__empty { padding: 26px 14px; border: 1px dashed var(--line-2); border-radius: 13px; color: var(--faint); font-size: 13.5px; text-align: center; }
@media (max-width: 760px) { .q-demo { grid-template-columns: 1fr; } }

.q-funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.q-stage { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(4, 7, 12, .5); min-height: 190px; }
.q-stage > p { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 14px; }
.q-stage > p b { font-size: 14.5px; font-weight: 500; }
.q-stage > p small { color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.q-stage > span { margin-top: auto; padding-top: 14px; color: var(--muted); font-size: 12.5px; }
.q-bars { display: grid; gap: 5px; }
.q-bars i { height: 4px; width: var(--w); border-radius: 2px; background: var(--line-3); }
.q-bars--raw { gap: 4px; }
.q-bars--raw i { height: 3px; background: var(--line-2); }
.q-bars--sorted i { height: 5px; }
.q-bars--found { gap: 9px; }
.q-bars--found i { height: 7px; border-radius: 4px; background: var(--tone); opacity: .85; }
.q-stage--clear { border-color: var(--line-3); background: radial-gradient(120% 80% at 50% 0%, rgba(110, 155, 220, .14), transparent 65%), rgba(4, 7, 12, .5); }
.q-verdict strong { display: block; font-size: 30px; font-weight: 500; letter-spacing: -.035em; line-height: 1; color: transparent; background: var(--metal); -webkit-background-clip: text; background-clip: text; padding-bottom: 4px; }
.q-verdict em { display: block; margin-top: 6px; color: var(--text-2); font-style: normal; font-size: 13.5px; }
@media (max-width: 760px) { .q-funnel { grid-template-columns: 1fr 1fr; } .q-stage { min-height: 160px; } }

/* Statement */
.q-statement { padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 110px); text-align: center; }
.q-statement p { margin: 0; color: var(--muted); font-size: clamp(22px, 3vw, 40px); font-weight: 500; letter-spacing: -.03em; line-height: 1.25; }
.q-statement__metal { color: transparent !important; background: var(--metal); -webkit-background-clip: text; background-clip: text; padding-bottom: .1em; }

/* Twelve tools, four questions */
.q-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.q-group { padding: 24px 22px 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-2); }
.q-group h3 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.q-group > p { margin: 8px 0 18px; min-height: 3.1em; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.q-group ul { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line); }
.q-group a { display: flex; align-items: center; gap: 12px; margin: 0 -10px; padding: 8px 10px; border-radius: 12px; color: var(--text-2); font-size: 14.5px; font-weight: 500; text-decoration: none; transition: background .2s, color .2s; }
.q-group a:hover, .q-group a:focus-visible { background: rgba(255, 255, 255, .04); color: var(--text); }
.q-group .s-ficon { width: 32px; height: 32px; border-radius: 9px; }
.q-group .s-ficon svg { width: 16px; height: 16px; }
@media (max-width: 1000px) { .q-groups { grid-template-columns: 1fr 1fr; } .q-group > p { min-height: 0; } }
@media (max-width: 560px) { .q-groups { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .q-l, .q-hero__ghost, .q-hero__cue, .q-thread li { animation: none !important; opacity: 1; transform: none; filter: none; }
  .q-hero__ghost { transform: translate(-50%, -54%); }
  .q-sources li { transition: none; opacity: 1; transform: none; }
}