/* Feature pictures for /features and the homepage tour (www.foundersquiver.com).
   Small looping scenes drawn like the app, built on the tokens in site.css.
   Every class starts with fq- so nothing collides with site.css. */

/* feature rows */
.fq-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.fq-jump a { font: 600 14.5px var(--f); color: var(--ink); text-decoration: none; padding: 8px 14px; border-radius: 99px; background: var(--bg2); border: 1px solid var(--line); }
.fq-jump a:hover { border-color: var(--sub); }
.fq-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.fq-row.flip .fq-copy { order: 2; }
.fq-copy { display: grid; gap: 14px; min-width: 0; }
.fq-copy h2 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.06; font-weight: 800; margin-top: 0; }
.fq-copy > p { color: var(--muted); font-size: 18px; }
.fq-who { display: flex; gap: 6px; flex-wrap: wrap; }
.fq-who span { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--sub); }
.fq-ticks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; font-size: 16.5px; }
.fq-ticks li { display: flex; gap: 10px; align-items: flex-start; }
.fq-ticks li::before { content: "✓"; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--good-tint); color: var(--good); font: 700 12px/20px var(--f); text-align: center; }
.fq-feature + .fq-feature { border-top: 1px solid var(--line); }
@media (max-width: 860px) { .fq-row { grid-template-columns: minmax(0, 1fr); } .fq-row.flip .fq-copy { order: 0; } }

/* scene frame */
.fq-scene { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 20px; min-width: 0; overflow: hidden; }
.fq-scene-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; font-weight: 700; font-size: 15px; }
.fq-scene-h .fq-ex { font: 500 10.5px var(--mono); letter-spacing: .1em; color: var(--sub); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; font-weight: 500; white-space: nowrap; }
.fq-s { color: var(--sub); font-size: 11.5px; display: block; }
.fq-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--f); color: #fff; flex: none; }

/* 1. investor tracker */
.fq-board-wrap { position: relative; }
.fq-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fq-col { background: var(--bg2); border-radius: 12px; padding: 8px; min-height: 196px; display: grid; align-content: start; gap: 6px; }
.fq-col h5 { margin: 0 0 2px; font: 600 12px var(--f); color: var(--muted); display: flex; justify-content: space-between; gap: 4px; }
.fq-card { background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 7px 8px; font-size: 12px; line-height: 1.35; min-width: 0; }
.fq-card b { display: block; font-size: 12.5px; }
.fq-slot { visibility: hidden; }
.fq-slot, .fq-mover { height: 58px; overflow: hidden; }
.fq-mover { position: absolute; top: 36px; left: 8px; width: calc(25% - 22px); border-color: var(--brand); box-shadow: 0 10px 24px -10px rgba(227,95,33,.55); animation: fq-move 9s ease-in-out infinite; }
@keyframes fq-move { 0%, 10% { left: 8px; transform: rotate(0); } 18% { transform: rotate(-2deg); } 28%, 38% { left: calc(25% + 6px); transform: rotate(0); } 50%, 60% { left: calc(50% + 4px); } 72%, 100% { left: calc(75% + 2px); } }
.fq-mover .fq-st::after { content: "Ping sent Mon"; animation: fq-st 9s steps(1) infinite; }
@keyframes fq-st { 0% { content: "Ping sent Mon"; } 28% { content: "Conversation started"; } 50% { content: "Viewed your pitch deck"; } 72% { content: "Committed ₹20L"; } }
.fq-round { margin-top: 16px; display: grid; gap: 6px; }
.fq-round-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--muted); }
.fq-round-top b { color: var(--ink); }
.fq-round-top b::after { content: "₹60L of ₹2Cr committed"; animation: fq-amt 9s steps(1) infinite; }
@keyframes fq-amt { 0% { content: "₹60L of ₹2Cr committed"; } 78% { content: "₹80L of ₹2Cr committed"; } }
.fq-bar { height: 10px; border-radius: 99px; background: var(--bg2); overflow: hidden; position: relative; }
.fq-bar i { position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: 99px; background: var(--brand); animation: fq-fill 9s ease-in-out infinite; }
@keyframes fq-fill { 0%, 70% { width: 30%; } 80%, 100% { width: 40%; } }
@media (max-width: 560px) {
  .fq-scene { padding: 14px; }
  .fq-board { gap: 5px; }
  .fq-col { min-height: 168px; padding: 5px; gap: 5px; }
  .fq-col h5 { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .fq-col h5 span { display: none; }
  .fq-card { font-size: 10px; padding: 5px; }
  .fq-card b { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fq-s { font-size: 10px; }
  .fq-slot, .fq-mover { height: 50px; }
  .fq-mover { top: 30px; left: 5px; width: calc(25% - 14px); }
  @keyframes fq-move { 0%, 10% { left: 5px; } 28%, 38% { left: calc(25% + 3px); } 50%, 60% { left: calc(50% + 1px); } 72%, 100% { left: calc(75% - 1px); } }
}

/* 2. time on each page */
.fq-pages { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; align-items: end; height: 150px; padding-top: 30px; position: relative; }
.fq-pg { background: var(--brand); border-radius: 5px 5px 2px 2px; transform-origin: bottom; animation: fq-grow 7s ease-out infinite; }
.fq-pg.low { opacity: .45; }
@keyframes fq-grow { 0% { transform: scaleY(.15); } 25%, 100% { transform: scaleY(1); } }
.fq-pglab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; margin-top: 6px; font: 500 10px var(--mono); color: var(--sub); text-align: center; }
.fq-callout { position: absolute; left: 38%; top: 0; background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 8px; white-space: nowrap; animation: fq-pop 7s ease-out infinite; }
@keyframes fq-pop { 0% { opacity: 1; } 4%, 28% { opacity: 0; transform: translateY(6px); } 36%, 100% { opacity: 1; transform: none; } }
.fq-readers { display: grid; gap: 10px; margin-top: 18px; }
.fq-reader { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; }
.fq-rb { height: 6px; border-radius: 9px; background: var(--bg2); overflow: hidden; margin-top: 4px; }
.fq-rb i { display: block; height: 100%; background: var(--good); border-radius: 9px; }
.fq-tag { font: 600 11.5px var(--f); padding: 3px 9px; border-radius: 99px; background: var(--good-tint); color: var(--good); white-space: nowrap; }
.fq-tag.warm { background: var(--tint); color: var(--brand-ink); }
@media (max-width: 420px) { .fq-reader { grid-template-columns: 30px minmax(0, 1fr); } .fq-reader .fq-tag { grid-column: 2; justify-self: start; } }

/* 3. watermarked page */
.fq-deck { position: relative; aspect-ratio: 16 / 10; max-width: 100%; border-radius: 12px; background: linear-gradient(135deg, #2B2622, #3A2E26); color: #F4EFE8; padding: 22px; overflow: hidden; display: grid; align-content: space-between; }
.fq-deck h4 { margin: 0; font-size: clamp(17px, 2.4vw, 25px); font-weight: 700; max-width: 70%; position: relative; z-index: 1; }
.fq-chart { display: flex; gap: 6px; align-items: end; height: 70px; position: relative; z-index: 1; }
.fq-chart i { flex: 1; background: #E35F21; border-radius: 3px 3px 0 0; }
.fq-wm { position: absolute; inset: -40%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; transform: rotate(-24deg); align-content: center; pointer-events: none; z-index: 2; animation: fq-wm 6s ease-in-out infinite; }
.fq-wm span { font: 500 12px var(--mono); color: rgba(255,255,255,.24); white-space: nowrap; }
@keyframes fq-wm { 0%, 15% { opacity: .25; } 35%, 100% { opacity: 1; } }
.fq-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.fq-chips span { font-size: 12.5px; padding: 5px 11px; border-radius: 99px; background: var(--bg2); color: var(--muted); }
.fq-code { display: flex; gap: 8px; margin-top: 12px; align-items: center; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.fq-code b { font: 500 15px var(--mono); letter-spacing: .2em; background: var(--bg2); padding: 4px 10px; border-radius: 8px; color: var(--ink); }

/* 4. company page, two views */
.fq-views { display: inline-flex; gap: 4px; background: var(--bg2); border: 1px solid var(--line); border-radius: 99px; padding: 4px; max-width: 100%; margin-bottom: 16px; flex-wrap: wrap; }
.fq-views button { font: 600 13.5px var(--f); border: 0; background: transparent; color: var(--muted); padding: 7px 13px; border-radius: 99px; cursor: pointer; }
.fq-views button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(40,25,10,.14); }
.fq-cp-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.fq-logo { width: 44px; height: 44px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.fq-cp-head b { display: block; }
.fq-cp-head span { font-size: 13.5px; color: var(--muted); }
.fq-kvs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fq-kv { background: var(--bg2); border-radius: 10px; padding: 10px; min-width: 0; }
.fq-kv .k { font-size: 11.5px; color: var(--sub); }
.fq-kv .v { font-weight: 700; font-size: 16px; transition: filter .5s, opacity .5s; }
.fq-locked .fq-kv.priv .v { filter: blur(6px); opacity: .6; }
.fq-files { margin-top: 10px; display: grid; gap: 6px; }
.fq-file { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; background: var(--bg2); border-radius: 10px; padding: 9px 11px; }
.fq-file .st { font: 600 12px var(--f); white-space: nowrap; color: var(--good); }
.fq-file .st::before { content: "Open"; }
.fq-locked .fq-file .st { color: var(--sub); }
.fq-locked .fq-file .st::before { content: "Locked"; }
.fq-strip { margin-top: 12px; font-size: 13.5px; padding: 10px 12px; border-radius: 10px; background: var(--tint); color: var(--brand-ink); font-weight: 600; }
@media (max-width: 520px) { .fq-kvs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 5. a ping */
.fq-pingbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fq-phone { background: var(--bg2); border-radius: 14px; padding: 12px; min-height: 220px; display: grid; align-content: start; gap: 8px; min-width: 0; }
.fq-phone .who { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sub); }
.fq-bubble { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; font-size: 13px; line-height: 1.45; }
.fq-bubble.mine { background: var(--brand); color: #fff; border-color: var(--brand); justify-self: end; max-width: 92%; }
.fq-answers { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.fq-answers span { font: 600 11.5px var(--f); padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.fq-answers .yes { animation: fq-tap 8s ease-out infinite; }
@keyframes fq-tap { 0%, 30% { background: transparent; color: var(--muted); } 36%, 100% { background: var(--brand); color: #fff; border-color: var(--brand); } }
.fq-in { animation: fq-in 8s ease-out infinite; }
@keyframes fq-in { 0% { opacity: 1; } 3%, 6% { opacity: 0; transform: translateY(-10px); } 14%, 100% { opacity: 1; transform: none; } }
.fq-r1 { animation: fq-r1 8s ease-out infinite; }
@keyframes fq-r1 { 0% { opacity: 1; } 3%, 42% { opacity: 0; transform: translateY(8px); } 52%, 100% { opacity: 1; transform: none; } }
.fq-r2 { animation: fq-r2 8s ease-out infinite; }
@keyframes fq-r2 { 0% { opacity: 1; } 3%, 62% { opacity: 0; transform: translateY(8px); } 72%, 100% { opacity: 1; transform: none; } }
@media (max-width: 520px) { .fq-pingbox { grid-template-columns: minmax(0, 1fr); } .fq-phone { min-height: 0; } }

/* 6. Deal Radar */
.fq-fit { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 12px; background: var(--paper); }
.fq-fit .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.fq-fitpill { font: 600 12.5px var(--f); padding: 3px 11px; border-radius: 99px; background: var(--good-tint); color: var(--good); }
.fq-checks { display: grid; gap: 7px; font-size: 14px; }
.fq-checks div { display: flex; gap: 9px; align-items: center; animation: fq-chk 8s ease-out infinite both; }
.fq-checks div:nth-child(2) { animation-delay: .4s; } .fq-checks div:nth-child(3) { animation-delay: .8s; } .fq-checks div:nth-child(4) { animation-delay: 1.2s; } .fq-checks div:nth-child(5) { animation-delay: 1.6s; }
@keyframes fq-chk { 0% { opacity: .15; transform: translateX(-6px); } 6%, 100% { opacity: 1; transform: none; } }
.fq-ok { color: var(--good); font-weight: 800; } .fq-q { color: var(--soon); font-weight: 800; }
.fq-months { display: flex; gap: 4px; margin-top: 6px; }
.fq-months i { flex: 1; height: 26px; border-radius: 5px; background: var(--bg2); }
.fq-months i.on { background: var(--brand); }

/* 7. community */
.fq-feed { display: grid; gap: 8px; }
.fq-post { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; background: var(--bg2); border-radius: 12px; padding: 11px; }
.fq-post b { font-size: 14px; display: block; }
.fq-post p { font-size: 13.5px; color: var(--muted); }
.fq-post .meta { font: 500 11px var(--mono); color: var(--sub); margin-top: 4px; }

/* What's free */
.fq-free { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.fq-plan { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.fq-plan h3 { font-size: 22px; }
.fq-price { font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.fq-price span { font-size: 15.5px; font-weight: 500; color: var(--sub); letter-spacing: 0; }
.fq-plan .btn { align-self: flex-start; margin-top: 4px; }
.fq-later { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 14.5px; color: var(--sub); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) { .fq-free { grid-template-columns: minmax(0, 1fr); } }

/* homepage tour */
.fq-tour { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.fq-tile { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.fq-tile:hover { border-color: var(--sub); }
.fq-tile h3 { font-size: 20px; margin-top: 4px; }
.fq-tile p { font-size: 15.5px; color: var(--muted); }
.fq-tile .go { margin-top: auto; font: 600 14.5px var(--f); color: var(--brand-ink); }
@media (max-width: 900px) { .fq-tour { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fq-tour { grid-template-columns: minmax(0, 1fr); } }

/* homepage Slider card */
.fq-slider-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: center; background: var(--night); color: var(--night-ink); border-radius: 28px; padding: clamp(24px, 4vw, 44px); }
.fq-slider-card h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; font-weight: 800; margin-top: 12px; }
.fq-slider-card p { color: var(--night-muted); margin-top: 12px; font-size: 17px; }
.fq-slider-card .soon { color: #F1C66B; background: rgba(241,198,107,.14); }
.fq-slider-card .label { color: #FF9B66; }
.fq-slider-card a.more { display: inline-block; margin-top: 16px; color: #FF9B66; font-weight: 700; text-decoration: none; }
.fq-eg { background: var(--night2); border: 1px solid var(--night-line); border-radius: 16px; padding: 16px; font-size: 15px; display: grid; gap: 8px; }
.fq-eg .t { font: 500 11px var(--mono); letter-spacing: .1em; color: var(--night-muted); }
.fq-eg .t + div { margin-bottom: 4px; }
@media (max-width: 800px) { .fq-slider-card { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .fq-mover, .fq-bar i, .fq-pg, .fq-callout, .fq-wm, .fq-answers .yes, .fq-in, .fq-r1, .fq-r2, .fq-checks div, .fq-mover .fq-st::after, .fq-round-top b::after { animation: none; }
  .fq-mover { left: calc(50% + 4px); }
}

/* ── tile pictures (homepage tour, investors page) ── */
.fq-mini { height: 190px; border-radius: 14px; background: var(--bg2); position: relative; overflow: hidden; padding: 12px; }
.fq-mini .fq-card b, .fq-mini .fq-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* tracker */
.fq-tm { display: grid; grid-template-rows: auto auto; align-content: space-between; }
.fq-tm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fq-tm-col { background: var(--paper); border-radius: 10px; padding: 7px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.fq-tm-col h5 { margin: 0; font: 600 11.5px/18px var(--f); color: var(--muted); display: flex; justify-content: space-between; }
.fq-tm-slot { height: 44px; }
.fq-tm .fq-card { height: 44px; padding: 5px 8px; border-radius: 8px; }
.fq-tm-move { position: absolute; top: 43px; left: 19px; width: calc(50% - 30px); border: 1.5px solid var(--brand) !important; box-shadow: 0 10px 22px -10px rgba(227,95,33,.6); animation: fq-tmmove 6s ease-in-out infinite; }
@keyframes fq-tmmove { 0%, 22% { left: 19px; transform: rotate(0); } 30% { transform: rotate(-2deg); } 48%, 100% { left: calc(50% + 11px); transform: rotate(0); } }
.fq-tm-move .fq-s::after { content: "Conversation started"; animation: fq-tmst 6s steps(1) infinite; }
@keyframes fq-tmst { 0% { content: "Conversation started"; } 48% { content: "Viewed your pitch deck"; } }
.fq-tm-round { font-size: 12px; color: var(--muted); display: grid; gap: 4px; }
.fq-tm-round b { color: var(--ink); }
.fq-tm-bar { height: 7px; border-radius: 9px; background: var(--paper); overflow: hidden; }
.fq-tm-bar i { display: block; height: 100%; width: 40%; background: var(--brand); border-radius: 9px; }
/* reading */
.fq-rm { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; }
.fq-rm-tag { justify-self: start; background: var(--ink); color: var(--bg); font: 700 11.5px var(--f); padding: 4px 9px; border-radius: 7px; animation: fq-pop 6s ease-out infinite; }
.fq-rm-bars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; align-items: end; }
.fq-rm-bars i { background: var(--brand); border-radius: 4px 4px 1px 1px; transform-origin: bottom; animation: fq-grow2 6s ease-out infinite; }
.fq-rm-bars i.low { opacity: .4; }
@keyframes fq-grow2 { 0% { transform: scaleY(1); } 4% { transform: scaleY(.15); } 28%, 100% { transform: scaleY(1); } }
.fq-rm-nums { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; font: 500 10px var(--mono); color: var(--sub); text-align: center; }
/* deck page */
.fq-dm { height: 100%; border-radius: 10px; background: linear-gradient(135deg, #2B2622, #3A2E26); color: #F4EFE8; padding: 14px; display: grid; align-content: space-between; position: relative; overflow: hidden; }
.fq-dm h4 { margin: 0; font-size: 15px; font-weight: 700; max-width: 78%; }
.fq-dm-ch { display: flex; gap: 4px; align-items: end; height: 46px; }
.fq-dm-ch i { flex: 1; background: #E35F21; border-radius: 2px 2px 0 0; }
.fq-dm-wm { position: absolute; left: -8%; right: -8%; top: 46%; text-align: center; transform: rotate(-12deg); font: 500 12px var(--mono); color: rgba(255,255,255,.8); background: rgba(0,0,0,.28); padding: 4px 0; white-space: nowrap; animation: fq-wmin 6s ease-in-out infinite; }
@keyframes fq-wmin { 0% { opacity: 1; } 6%, 25% { opacity: 0; } 45%, 100% { opacity: 1; } }
.fq-dm-lock { position: absolute; right: 10px; top: 10px; font: 600 10px var(--mono); letter-spacing: .06em; background: rgba(255,255,255,.14); padding: 3px 7px; border-radius: 99px; }
/* fit checks */
.fq-fitm { background: var(--paper); border-radius: 10px; padding: 10px 12px; height: 100%; display: grid; gap: 6px; align-content: start; font-size: 13px; }
.fq-fitm .row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.fq-fitm .chk { display: flex; gap: 7px; animation: fq-chk2 7s ease-out infinite both; }
.fq-fitm .chk:nth-child(3) { animation-delay: .35s; } .fq-fitm .chk:nth-child(4) { animation-delay: .7s; } .fq-fitm .chk:nth-child(5) { animation-delay: 1.05s; }
@keyframes fq-chk2 { 0% { opacity: 1; } 3% { opacity: .15; transform: translateX(-6px); } 10%, 100% { opacity: 1; transform: none; } }
/* months */
.fq-mon { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; height: 100%; align-content: center; }
.fq-mon div { background: var(--paper); border-radius: 8px; padding: 8px 4px; font-size: 10.5px; text-align: center; color: var(--sub); display: grid; gap: 4px; min-width: 0; }
.fq-mon div b { font-size: 12.5px; color: var(--ink); }
.fq-mon div i { height: 6px; border-radius: 9px; background: var(--line); }
.fq-mon div.on i { background: var(--brand); animation: fq-mon 8s ease-out infinite both; }
.fq-mon div:nth-child(2) i { animation-delay: .3s; } .fq-mon div:nth-child(3) i { animation-delay: .6s; } .fq-mon div:nth-child(4) i { animation-delay: .9s; } .fq-mon div:nth-child(5) i { animation-delay: 1.2s; }
@keyframes fq-mon { 0% { background: var(--brand); } 2% { background: var(--line); } 10%, 100% { background: var(--brand); } }
.fq-mon div.now { outline: 1.5px dashed var(--brand); }
/* watchlist */
.fq-wl { display: grid; gap: 6px; }
.fq-wl .row { display: flex; justify-content: space-between; gap: 6px; background: var(--paper); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; }
.fq-wl .row em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--sub); white-space: nowrap; }
.fq-toast { position: absolute; left: 10px; right: 10px; bottom: 10px; background: var(--ink); color: var(--bg); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; animation: fq-toast 6s ease-out infinite; }
.fq-toast small { display: block; font: 500 9.5px var(--mono); letter-spacing: .08em; opacity: .75; }
@keyframes fq-toast { 0% { opacity: 1; } 4%, 25% { opacity: 0; transform: translateY(10px); } 35%, 100% { opacity: 1; transform: none; } }
/* pipeline */
.fq-pl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; height: 100%; }
.fq-pl > div { background: var(--paper); border-radius: 10px; padding: 7px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.fq-pl h5 { margin: 0; font: 600 11.5px/18px var(--f); color: var(--muted); }
.fq-pl .fq-card { height: 44px; padding: 5px 8px; border-radius: 8px; }
.fq-pl-move { position: absolute; top: 43px; left: 19px; width: calc(50% - 30px); border: 1.5px solid var(--brand) !important; animation: fq-plmove 6s ease-in-out infinite; }
@keyframes fq-plmove { 0%, 25% { left: 19px; } 50%, 100% { left: calc(50% + 11px); } }
.fq-pl-move .fq-s::after { content: "Added from a ping"; animation: fq-plst 6s steps(1) infinite; }
@keyframes fq-plst { 0% { content: "Added from a ping"; } 50% { content: "Call booked Fri"; } }
/* ping */
.fq-pgm { background: var(--paper); border-radius: 10px; padding: 10px 11px; font-size: 12.5px; line-height: 1.45; }
.fq-pgm .ans { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; }
.fq-pgm .ans span { font: 600 10.5px var(--f); padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.fq-pgm .ans .yes { animation: fq-tap 6s ease-out infinite; }
.fq-pgm-note { display: block; margin-top: 8px; font-size: 12px; color: var(--sub); }

/* ── a story that plays its steps in order (homepage, How it works) ── */
.fq-story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 48px); align-items: center; margin-top: 48px; }
.fq-story-steps { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
.fq-story-steps button { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 18px; padding: 14px 16px; cursor: pointer; color: var(--ink); font: inherit; }
.fq-story-steps .n { width: 38px; height: 38px; border-radius: 50%; background: var(--bg2); color: var(--muted); display: grid; place-items: center; font: 800 16px var(--f); }
.fq-story-steps .h { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.fq-story-steps .p { display: block; color: var(--muted); font-size: 16px; margin-top: 3px; }
.fq-story-steps .t { display: block; margin-top: 6px; font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sub); }
.fq-story-steps button[aria-current="step"] { background: var(--paper); border-color: var(--line); box-shadow: var(--shadow); }
.fq-story-steps button[aria-current="step"] .n { background: var(--brand); color: #fff; }
.fq-story-stage { min-height: 340px; position: relative; }
.fq-story-stage > [data-pane] { display: none; }
.fq-story-stage > [data-pane].show { display: block; animation: fq-fadein .45s ease-out; }
@keyframes fq-fadein { from { opacity: .2; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .fq-story { grid-template-columns: minmax(0, 1fr); } .fq-story-stage { min-height: 0; } }
.fq-field { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; align-items: center; }
.fq-field:first-of-type { border-top: 0; }
.fq-field span { color: var(--sub); font-size: 13px; }
.fq-field b { font-weight: 600; }
.show .fq-typein { animation: fq-typein .6s steps(20) both; }
.show .fq-field:nth-child(3) .fq-typein { animation-delay: .5s; } .show .fq-field:nth-child(4) .fq-typein { animation-delay: 1s; } .show .fq-field:nth-child(5) .fq-typein { animation-delay: 1.5s; }
@keyframes fq-typein { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.fq-upd { display: grid; gap: 12px; }
.fq-upd-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.fq-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fq-num { background: var(--bg2); border-radius: 10px; padding: 10px; min-width: 0; }
.fq-num .k { font-size: 12px; color: var(--sub); }
.fq-num .v { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.fq-num .d { font-size: 12px; color: var(--good); font-weight: 600; }
.fq-signed { font-size: 13px; color: var(--sub); border-top: 1px solid var(--line); padding-top: 8px; }
.fq-req { display: grid; gap: 12px; }
.fq-req-who { display: flex; gap: 10px; align-items: center; }
.fq-req-who b { display: block; }
.fq-req-msg { background: var(--bg2); border-radius: 12px; padding: 10px 12px; font-size: 14.5px; color: var(--muted); }
.fq-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.fq-b { display: inline-flex; align-items: center; font: 600 13px var(--f); padding: 6px 13px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.fq-b.dark { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.show .fq-approve { animation: fq-press 3.6s ease-out both; }
@keyframes fq-press { 0%, 45% { background: transparent; color: var(--muted); border-color: var(--line); } 55%, 100% { background: var(--good); color: #fff; border-color: var(--good); } }
.show .fq-after { animation: fq-after 3.6s ease-out both; }
@keyframes fq-after { 0%, 58% { opacity: 0; transform: translateY(6px); } 70%, 100% { opacity: 1; transform: none; } }
.fq-find { display: grid; gap: 8px; }
.fq-inv { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; font-size: 14px; }
.fq-inv b { display: block; }
.show .fq-inv:nth-child(1) { animation: fq-fadein .4s .2s both; } .show .fq-inv:nth-child(2) { animation: fq-fadein .4s .6s both; } .show .fq-inv:nth-child(3) { animation: fq-fadein .4s 1s both; }
.fq-pill { justify-self: start; font: 600 12px var(--f); padding: 3px 10px; border-radius: 99px; background: var(--good-tint); color: var(--good); white-space: nowrap; }
.fq-pill.warm { background: var(--tint); color: var(--brand-ink); }
@media (max-width: 520px) { .fq-field { grid-template-columns: 92px minmax(0, 1fr); font-size: 14px; } .fq-num .v { font-size: 18px; } .fq-story-steps .h { font-size: 18px; } }

/* ── privacy: the same page seen two ways (switches by itself) ── */
.fq-priv { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 48px); align-items: center; margin-top: 40px; }
.fq-priv .levels .lv { transition: opacity .3s, border-color .3s; }
.fq-priv .lv.dim { opacity: .45; }
.fq-priv .lv.hl { border-color: var(--brand); }
@media (max-width: 860px) { .fq-priv { grid-template-columns: minmax(0, 1fr); } }

/* ── problem bars that grow month by month ── */
.cmp.new .bar i { transform-origin: bottom; animation: fq-mgrow 8s ease-out infinite both; }
.cmp.new .bar i:nth-child(2) { animation-delay: .25s; } .cmp.new .bar i:nth-child(3) { animation-delay: .5s; } .cmp.new .bar i:nth-child(4) { animation-delay: .75s; } .cmp.new .bar i:nth-child(5) { animation-delay: 1s; } .cmp.new .bar i:nth-child(6) { animation-delay: 1.25s; } .cmp.new .bar i:nth-child(7) { animation-delay: 1.5s; } .cmp.new .bar i:nth-child(8) { animation-delay: 1.75s; }
@keyframes fq-mgrow { 0% { transform: scaleY(1); } 2% { transform: scaleY(0); } 12%, 100% { transform: scaleY(1); } }
.fq-mnote { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.fq-mnote span { font-size: 12.5px; background: var(--bg2); border-radius: 99px; padding: 3px 10px; color: var(--muted); }

/* ── community ── */
.fq-comm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.fq-feedwin { height: 260px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.fq-feedroll { display: grid; gap: 8px; animation: fq-roll 16s linear infinite; }
@keyframes fq-roll { to { transform: translateY(calc(-50% - 4px)); } }
.fq-match { display: grid; gap: 12px; align-content: start; }
.fq-match-top { display: flex; gap: 12px; align-items: center; }
.fq-match-top .fq-av { width: 46px; height: 46px; font-size: 15px; }
.fq-match-top b { display: block; }
.fq-chiprow { display: flex; gap: 6px; flex-wrap: wrap; }
.fq-chiprow span { font-size: 13px; background: var(--bg2); border-radius: 99px; padding: 4px 11px; color: var(--muted); }
.fq-alsorow { margin-top: 18px; color: var(--muted); font-size: 16px; }
@media (max-width: 760px) { .fq-comm { grid-template-columns: minmax(0, 1fr); } }

/* investors page cards with pictures */
.feats .feat .fq-mini { margin: -8px -8px 6px; height: 170px; }

/* ── Slider: the rule types itself, then the alert arrives ── */
.fq-sl-alert { margin-top: 14px; background: #0F0E0D; border-left: 3px solid #FF9B66; border-radius: 10px; padding: 10px 12px; font-size: 15px; transition: opacity .4s, transform .4s; }
.fq-sl-alert small { display: block; font: 500 10.5px var(--mono); color: var(--night-muted); margin-top: 4px; letter-spacing: .06em; }
.fq-sl-alert.wait { opacity: 0; transform: translateY(8px); }

@media (prefers-reduced-motion: reduce) {
  .fq-tm-move, .fq-tm-move .fq-s::after, .fq-rm-tag, .fq-rm-bars i, .fq-dm-wm, .fq-fitm .chk, .fq-mon div.on i, .fq-toast, .fq-pl-move, .fq-pl-move .fq-s::after, .fq-pgm .ans .yes,
  .fq-story-stage > [data-pane].show, .show .fq-typein, .show .fq-approve, .show .fq-after, .show .fq-inv, .cmp.new .bar i, .fq-feedroll { animation: none; }
}

/* investors page: pictures on the three access steps */
.fq-mini.fq-stepvis { height: 110px; display: grid; align-content: center; gap: 10px; margin-bottom: 6px; }
.fq-stepvis > * { justify-self: start; }
.fq-stepvis .fq-req-who b { font-size: 14px; }
.fq-badge { animation: fq-badge 6s ease-out infinite; }
@keyframes fq-badge { 0% { transform: scale(1); } 4%, 30% { transform: scale(0); opacity: 0; } 40% { transform: scale(1.12); opacity: 1; } 48%, 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fq-badge, .fq-sl-alert { animation: none; transition: none; } }