/* ============================================================
   Neqstline product page — overlay on Odd Button Studio styles.
   Adds product-specific accents (purple gradient) on top of the
   OBS chrome/visual system.
============================================================ */

.nq-page {
  /* No per-subpage accent colour: the page accent now follows the site DS
     tokens (--blue / --blue-deep), exactly like the homepage. The plugin
     purples survive ONLY in the example prototype (.nq-anim, overridden below)
     and inside the Neqstline logo SVG. The accent var names are kept so the
     rest of the file needs no edits — only their values change. */
  --nq-purple-1: var(--blue-deep);
  --nq-purple-2: var(--blue);
  --nq-purple-3: var(--blue);
  --nq-brand:    var(--blue-deep);
  --nq-brand-2:  var(--blue);
  --nq-lav:      color-mix(in oklab, var(--blue) 45%, #fff);
  --nq-gradient: var(--blue);
}

/* Example prototype keeps the plugin's purple brand — re-declare the tokens on
   the demo container so they override the blue page values for its DOM subtree
   (custom properties inherit, so every .nq-src* element inside picks these up). */
.nq-anim {
  --nq-purple-1: #5235C7;
  --nq-purple-2: #5D3CE1;
  --nq-purple-3: #876AFF;
  --nq-brand:    #4F378A;
  --nq-brand-2:  #6553C1;
  --nq-lav:      #D0BCFF;
  --nq-gradient: linear-gradient(95deg, #5235C7 0%, #5D3CE1 35%, #876AFF 65%, #5D3CE1 100%);
}

/* Page-scoped selection */
.nq-page ::selection { background: var(--nq-purple-3); color: #fff; }

/* Gradient text */
.nq-grad {
  background: var(--nq-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Status pill (re-uses product-card .status styles by reference) */
.nq-page .status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  font-weight: 700;
  border: 2px solid var(--ink);
}
.nq-page .status.--live { background: var(--blue); color: var(--ink); }

/* ===== Hero stage ===== */
.nq-hero-stage {
  position: relative;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  max-width: 460px;
  width: 100%;
}
.nq-hero-stage > svg {
  position: relative;
  z-index: 2;
  border: 3px solid var(--ink);
  border-radius: 36px;
  box-shadow: 6px 6px 0 var(--ink);
  background: #fff;
  transform: rotate(-3deg);
  transition: transform .4s ease;
}
.nq-hero-stage:hover > svg { transform: rotate(-1deg) translateY(-4px); }

.nq-hero-glow {
  position: absolute;
  inset: 10% 10% 10% 10%;
  background: radial-gradient(closest-side, rgba(135, 106, 255, 0.35), rgba(135, 106, 255, 0));
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}

.nq-hero-bubble {
  position: absolute;
  z-index: 3;
  font-family: var(--font-rounded);
  font-weight: 800;
  font-size: 13px;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
  white-space: nowrap;
}
.nq-hero-bubble--a { top: 6%;  left: -6%;  transform: rotate(-5deg); }
.nq-hero-bubble--b { top: 50%; right: -10%; transform: rotate(4deg);  }
.nq-hero-bubble--c { bottom: 8%; left: 8%;  transform: rotate(-3deg); background: var(--ink); color: var(--bg); }
@media (max-width: 920px) {
  .nq-hero-stage { max-width: 320px; margin: 24px auto 0; }
  .nq-hero-bubble--a { left: 0; }
  .nq-hero-bubble--b { right: 0; }
}

/* ===== Steps ===== */
.nq-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
}
.nq-step {
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 4px 4px 0 var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nq-step__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-4);
  letter-spacing: 0.1em;
}
.nq-step__label {
  font-family: var(--font-rounded);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nq-step p { color: var(--ink-3); font-size: 14.5px; font-weight: 600; margin-top: 4px; }
.nq-step__arrow {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 28px;
  color: var(--nq-purple-2);
  font-weight: 700;
}
@media (max-width: 860px) {
  .nq-steps { grid-template-columns: 1fr; }
  .nq-step__arrow { transform: rotate(90deg); }
}

/* ===== Features grid ===== */
.nq-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.nq-feat {
  background: var(--bg-2);
  border: 2px solid var(--ink);
  border-radius: 22px;
  padding: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 240px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.nq-feat:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.nq-feat--xl { grid-column: span 2; grid-row: span 2; min-height: 380px; }
.nq-feat--ink { background: var(--ink); color: var(--bg); }
.nq-feat .tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 4px 8px;
  background: var(--bg-3);
  border-radius: 999px;
  font-weight: 600;
}
.nq-feat--ink .tag { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }
.nq-feat h3 { font-size: 22px; letter-spacing: -0.015em; }
.nq-feat p { color: var(--ink-3); font-size: 14.5px; font-weight: 600; max-width: 36ch; }
@media (max-width: 920px) {
  .nq-feat-grid { grid-template-columns: repeat(2, 1fr); }
  .nq-feat--xl { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 600px) {
  .nq-feat-grid { grid-template-columns: 1fr; }
  .nq-feat--xl { grid-column: auto; }
}

.nq-kbd-accent {
  background: color-mix(in oklab, var(--nq-purple-2) 16%, #fff) !important;
  color: var(--nq-purple-1) !important;
  border-color: var(--nq-purple-2) !important;
}
.nq-caret {
  display: inline-block;
  width: 1.5px; height: 14px;
  background: var(--nq-purple-2);
  margin-left: 2px;
  vertical-align: -2px;
  animation: nq-blink 1s steps(2) infinite;
}
@keyframes nq-blink { to { opacity: 0; } }

.nq-mini-edit {
  margin-top: 14px;
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 15px;
  background: color-mix(in oklab, var(--nq-purple-3) 10%, #fff);
  border: 2px solid color-mix(in oklab, var(--nq-purple-2) 30%, var(--ink));
  padding: 10px 14px;
  border-radius: 10px;
  display: inline-block;
  color: var(--ink-2);
}
.nq-mini-edit b { color: var(--nq-purple-2); font-weight: 800; }

/* Split visual */
.nq-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 24px;
  flex: 1;
}
.nq-split__src {
  background: #fff;
  border: 2px dashed var(--ink);
  border-radius: 14px;
  padding: 16px;
}
.nq-split__arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--nq-gradient);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.nq-split__out { display: flex; flex-direction: column; gap: 6px; }
.nq-block {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 12px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-family: var(--font-rounded);
}
.nq-block__label {
  font-size: 9.5px !important;
  color: var(--nq-purple-2) !important;
  flex-shrink: 0;
  width: 56px;
}
.nq-block__text { font-weight: 700; font-size: 13px; }
.nq-chip {
  background: #fff;
  border: 1.5px solid var(--ink);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.nq-chip--ink { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 720px) {
  .nq-split { grid-template-columns: 1fr; }
  .nq-split__arrow { transform: rotate(90deg); margin: 0 auto; }
}

/* Insert visual */
.nq-insert {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nq-insert__src {
  align-self: flex-start;
  background: color-mix(in oklab, var(--nq-purple-3) 12%, #fff);
  border: 2px solid color-mix(in oklab, var(--nq-purple-2) 30%, var(--ink));
  padding: 10px 14px;
  border-radius: 10px;
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 13px;
}
.nq-insert__target {
  background: #fff;
  border: 2px solid var(--ink);
  padding: 10px 14px;
  border-radius: 10px;
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ===== Platforms ===== */
.nq-platforms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.nq-plat {
  background: var(--bg-2);
  border: 2px solid var(--ink);
  border-radius: 28px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 4px 4px 0 var(--ink);
}
.nq-plat h3 { font-size: 28px; margin-top: 4px; letter-spacing: -0.02em; }
.nq-plat p { color: var(--ink-3); font-size: 15.5px; font-weight: 600; max-width: 36ch; }
.nq-plat__badge {
  align-self: flex-start;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--bg-3);
  border: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}
@media (max-width: 820px) { .nq-platforms { grid-template-columns: 1fr; } }

/* Figma preview */
.nq-fp {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 16px;
  box-shadow: 3px 3px 0 var(--ink);
}
.nq-fp__head { padding: 12px 16px; border-bottom: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: center; }
.nq-fp__icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--nq-purple-3) 18%, #fff);
  color: var(--nq-purple-1);
  border-radius: 6px;
  font-family: var(--font-rounded); font-weight: 800; font-size: 12px;
  border: 1.5px solid color-mix(in oklab, var(--nq-purple-2) 30%, var(--ink));
}
.nq-fp__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.nq-fp__drop {
  padding: 18px;
  background: color-mix(in oklab, var(--nq-purple-3) 10%, #fff);
  border: 2px dashed var(--nq-purple-2);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: center;
  font-family: var(--font-rounded); font-weight: 600; font-size: 13px;
  color: var(--ink-3);
}
.nq-fp__drop b { color: var(--ink); font-weight: 800; }

/* Mac preview */
.nq-mp {
  background: linear-gradient(180deg, #2a2632 0%, #15121c 100%);
  border-radius: 16px;
  overflow: hidden;
  padding: 12px;
  margin-top: 16px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.nq-mp__bar {
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; font-size: 11px;
  padding: 4px 8px;
  font-family: var(--font-mono);
}
.nq-mp__capture {
  position: relative;
  height: 120px;
  margin-top: 10px;
  background: rgba(255,255,255,.04);
  border: 2px dashed var(--nq-purple-3);
  border-radius: 10px;
}
.nq-mp__h, .nq-mp__v {
  position: absolute;
  background: var(--nq-purple-3);
}
.nq-mp__h { left: 0; right: 0; top: 50%; height: 1px; }
.nq-mp__v { top: 0; bottom: 0; left: 50%; width: 1px; }
.nq-mp__dim {
  position: absolute;
  right: 6px; bottom: 4px;
  font-size: 10px;
  background: #000;
  color: var(--nq-purple-3);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ===== Pricing plans ===== */
.nq-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.nq-plan {
  background: var(--bg-2);
  border: 2px solid var(--ink);
  border-radius: 24px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.nq-plan:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.nq-plan.is-hl {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.nq-plan.is-hl h3 { color: var(--bg); }
.nq-plan__ribbon {
  position: absolute;
  top: -14px; right: 20px;
  background: var(--blue);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--ink);
}
.nq-plan h3 { font-size: 24px; }
.nq-plan__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 10px;
}
.nq-plan__amount {
  font-family: var(--font-rounded);
  font-weight: 900;
  font-size: 48px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.nq-plan.is-hl .nq-plan__amount {
  background: var(--blue);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nq-plan__every {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nq-plan.is-hl .nq-plan__every { color: rgba(255,255,255,.55); }
.nq-plan__tag { font-size: 14px; color: var(--ink-3); font-weight: 600; }
.nq-plan.is-hl .nq-plan__tag { color: rgba(255,255,255,.7); }
.nq-plan__feats {
  list-style: none;
  padding: 0;
  margin: 16px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nq-plan__feats li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
.nq-plan.is-hl .nq-plan__feats li { color: rgba(255,255,255,.85); }
@media (max-width: 900px) { .nq-plans { grid-template-columns: 1fr; } }

/* ===== Testimonials ===== */
.nq-testis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.nq-testi {
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nq-testi p {
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.45;
}
.nq-testi__author { display: flex; gap: 12px; align-items: center; margin-top: auto; }
.nq-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--nq-gradient);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-rounded); font-weight: 800; font-size: 13px;
  border: 2px solid var(--ink);
}
@media (max-width: 900px) { .nq-testis { grid-template-columns: 1fr; } }

/* ============================================================
   Prototype animation (in the XL feature card)
============================================================ */
.nq-anim {
  position: relative;
  width: 100%;
  aspect-ratio: 1.35 / 1;
  margin-top: 18px;
  flex: 1;
}

.nq-anim__win {
  position: absolute;
  left: 0; top: 0;
  width: 62%;
  aspect-ratio: 4 / 3.2;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--ink);
  overflow: hidden;
  z-index: 1;
}
.nq-anim__chrome {
  height: 28px;
  padding: 0 12px;
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.nq-anim__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.2); }
.nq-anim__dot.r { background: #ff5f57; }
.nq-anim__dot.y { background: #febc2e; }
.nq-anim__dot.g { background: #28c840; }
.nq-anim__title {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}
.nq-anim__stage {
  position: relative;
  padding: 14px;
  height: calc(100% - 28px);
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
}

/* Source UI being captured */
.nq-src { position: relative; z-index: 1; }
.nq-src__head { display: flex; gap: 10px; align-items: center; padding: 4px 4px 0; }
.nq-src__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--nq-gradient);
  border: 1.5px solid var(--ink);
  flex-shrink: 0;
}
.nq-src__name { font-family: var(--font-rounded); font-weight: 800; font-size: 12px; }
.nq-src__sub { font-size: 10px; color: var(--ink-4); font-family: var(--font-mono); }
.nq-src__body { padding: 10px 4px 0; }
.nq-src__heading { font-family: var(--font-rounded); font-weight: 900; font-size: 16px; letter-spacing: -0.02em; }
.nq-src__copy { font-size: 11px; color: var(--ink-3); margin-top: 4px; font-weight: 600; }
.nq-src__btns { display: flex; gap: 6px; margin-top: 10px; }
.nq-src-btn {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-rounded);
  font-weight: 700;
  border: 1.5px solid var(--ink);
}
.nq-src-btn--primary { background: var(--ink); color: #fff; }
.nq-src-btn--ghost { background: #fff; color: var(--ink-2); }

/* Selection rectangle */
.nq-sel {
  position: absolute;
  left: 16px; top: 56px;
  width: 0; height: 0;
  border: 2.5px dashed var(--nq-purple-2);
  border-radius: 10px;
  background: color-mix(in oklab, var(--nq-purple-3) 10%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: width .9s cubic-bezier(.4,0,.2,1), height .9s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  z-index: 4;
}
.nq-sel.is-shown { opacity: 1; }
.nq-sel.is-growing { width: calc(100% - 32px); height: calc(100% - 70px); }
.nq-sel:not(.is-growing).is-shown { width: calc(100% - 32px); height: calc(100% - 70px); }
.nq-sel.is-fade { opacity: .4; }
.nq-sel__label {
  position: absolute;
  top: -11px; left: 10px;
  background: var(--nq-purple-2);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: .12em;
  border: 1.5px solid var(--ink);
}
.nq-sel__corner {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--nq-purple-2);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
}
.nq-sel__corner.tl { top: -6px; left: -6px; }
.nq-sel__corner.tr { top: -6px; right: -6px; }
.nq-sel__corner.bl { bottom: -6px; left: -6px; }
.nq-sel__corner.br { bottom: -6px; right: -6px; }
.nq-sel__scan {
  position: absolute;
  left: 0; right: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--nq-purple-3) 35%, transparent) 50%, transparent 100%);
  animation: nq-scan 1.2s ease-in-out infinite;
}
@keyframes nq-scan {
  0% { top: 0; opacity: 1; }
  100% { top: 100%; opacity: .3; }
}

.nq-cursor {
  position: absolute;
  left: 10px; top: 16px;
  z-index: 5;
  pointer-events: none;
  transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.nq-cursor.is-drag { left: calc(100% - 36px); top: calc(100% - 36px); }

/* Results panel */
.nq-anim__panel {
  position: absolute;
  right: 0; top: 10%;
  width: 50%;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--ink);
  overflow: hidden;
  opacity: 0;
  transform: translateX(20px) rotate(2deg);
  transition: opacity .5s ease, transform .5s ease;
  z-index: 6;
}
.nq-anim__panel.is-in { opacity: 1; transform: rotate(2deg); }
.nq-panel__head {
  padding: 10px 12px;
  border-bottom: 2px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
}
.nq-panel__brand { display: flex; align-items: center; gap: 8px; }
.nq-panel__mark { display: inline-flex; }
.nq-panel__title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink);
  font-weight: 700;
}
.nq-panel__badge {
  background: color-mix(in oklab, var(--nq-purple-3) 18%, #fff);
  color: var(--nq-purple-1);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in oklab, var(--nq-purple-2) 30%, var(--ink));
  font-weight: 700;
}
.nq-panel__head .kbd { font-size: 9.5px; padding: 2px 6px; }

.nq-panel__body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nq-anim-block {
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--bg-2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease, border-color .2s ease, background .2s ease;
  position: relative;
}
.nq-anim-block.is-in { opacity: 1; transform: none; }
.nq-anim-block.is-active {
  border-color: var(--nq-purple-2);
  background: color-mix(in oklab, var(--nq-purple-3) 12%, #fff);
}
.nq-anim-block__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--nq-purple-2);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  font-weight: 700;
}
.nq-anim-block__text {
  font-family: var(--font-rounded);
  font-weight: 800;
  font-size: 12.5px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.nq-anim-block__actions {
  display: flex;
  gap: 5px;
  margin-top: 7px;
  opacity: .75;
}
.nq-anim-block__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink-3);
  border: 1px solid var(--line);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nq-anim-block.is-active .nq-anim-block__btn:first-child {
  background: var(--nq-purple-2);
  color: #fff;
  border-color: var(--nq-purple-2);
}
.nq-anim-block .nq-caret {
  display: inline-block;
  width: 1.5px; height: 13px;
  background: var(--nq-purple-2);
  margin-left: 2px;
  vertical-align: -2px;
  animation: nq-blink 1s steps(2) infinite;
}
.nq-fly-out {
  position: absolute;
  right: -10px; bottom: -10px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--nq-purple-2);
  animation: nq-fly 1.4s cubic-bezier(.4,0,.2,1) forwards;
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--nq-purple-2) 25%, transparent);
}
@keyframes nq-fly {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-90px, 110px) scale(.4); opacity: 0; }
}

/* Target field */
.nq-anim__target {
  position: absolute;
  left: 4%; bottom: 0;
  width: 54%;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 12px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
  z-index: 5;
}
.nq-anim__target.is-active {
  border-color: var(--nq-purple-2);
  box-shadow: 3px 3px 0 var(--nq-purple-2);
}
.nq-target__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  margin-bottom: 6px;
  font-weight: 700;
}
.nq-target__field {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  min-height: 32px;
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
}

/* Step pills */
.nq-anim__steps {
  position: absolute;
  right: 0; bottom: -4px;
  display: flex;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 50%;
}
.nq-pstep {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1.5px solid var(--ink);
  color: var(--ink-4);
  font-weight: 700;
  transition: all .25s ease;
}
.nq-pstep.on {
  background: color-mix(in oklab, var(--nq-purple-3) 14%, #fff);
  color: var(--nq-purple-1);
}
.nq-pstep.now {
  background: var(--nq-purple-2);
  color: #fff;
  border-color: var(--ink);
  transform: scale(1.06);
  box-shadow: 2px 2px 0 var(--ink);
}
.nq-pstep__num { opacity: .55; letter-spacing: 0.04em; }
.nq-pstep.now .nq-pstep__num { opacity: 1; }

/* Responsive */
@media (max-width: 1100px) {
  .nq-anim { aspect-ratio: 1.2 / 1; }
}
@media (max-width: 720px) {
  .nq-anim { aspect-ratio: auto; min-height: 440px; padding-bottom: 60px; }
  .nq-anim__steps {
    position: static;
    margin-top: 16px;
    max-width: none;
    justify-content: flex-start;
  }
  .nq-anim__win { width: 70%; }
  .nq-anim__panel { width: 56%; top: 6%; }
  .nq-anim__target { width: 64%; }
}

/* ===== Final CTA tweaks ===== */
.nq-final {
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.nq-final::before {
  content: "";
  position: absolute;
  inset: -50% -10% auto auto;
  width: 80%;
  height: 200%;
  background: radial-gradient(circle, rgba(135,106,255,.22) 0%, transparent 60%);
  pointer-events: none;
}
.nq-final__visual {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.nq-final__visual > svg:first-child {
  border: 3px solid var(--blue);
  border-radius: 36px;
  background: #fff;
  transform: rotate(-4deg);
  box-shadow: 6px 6px 0 var(--blue);
}

/* ============================================================
   BRIEF BUILD — Figma & FigJam plugin landing
   Hero animation slot · "Neqst it!" dictionary · Free grid ·
   PRO block · Trust strip
============================================================ */

/* Hero: animation lives in the right column */
.nq-hero-anim {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
}
.nq-hero-anim .nq-anim { margin-top: 0; }
@media (max-width: 920px) {
  .nq-hero-anim { margin: 8px auto 0; }
}

/* Eyebrow chip with the Figma mark */
.nq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--nq-brand);
  background: color-mix(in oklab, var(--nq-lav) 30%, #fff);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: 2px 2px 0 var(--ink);
}

/* Headline gradient already via .nq-grad. Hero CTA spacing reuse .cta-row */

/* ===== "Neqst it!" dictionary card ===== */
.nq-dict-wrap { display: flex; justify-content: center; }
.nq-dict {
  position: relative;
  max-width: 680px;
  width: 100%;
  background: var(--bg-2);
  border: 2px solid var(--ink);
  border-radius: 24px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(28px, 4vw, 44px);
}
.nq-dict__tab {
  position: absolute;
  top: -14px; left: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  background: var(--nq-brand);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 12px;
  box-shadow: 2px 2px 0 var(--ink);
}
.nq-dict__termrow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.nq-dict__term {
  font-family: var(--font-rounded);
  font-weight: 900;
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1;
}
/* Dictionary headline "Neqst it!" stays ink (not the cyan/gradient accent). */
.nq-dict__term .nq-grad {
  padding-right: 2px;
  background: none;
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
}
.nq-dict__pron {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ink-3);
  font-weight: 500;
}
.nq-dict__pos {
  font-family: var(--font-rounded);
  font-style: italic;
  font-weight: 700;
  font-size: 15px;
  color: var(--nq-brand);
}
.nq-dict__def {
  margin-top: 18px;
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 52ch;
}
.nq-dict__ex {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px solid var(--line);
  font-size: 15.5px;
  color: var(--ink-3);
  font-weight: 600;
  line-height: 1.55;
}
.nq-dict__ex b { color: var(--nq-brand); font-weight: 800; }

/* ===== Feature icon chip (monochrome purple) ===== */
.nq-fi {
  width: 46px; height: 46px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: color-mix(in oklab, var(--nq-lav) 26%, #fff);
  border: 2px solid var(--ink);
  color: var(--nq-brand);
  box-shadow: 2px 2px 0 var(--ink);
}

/* ===== Free feature grid (2×3) ===== */
.nq-free-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.nq-free {
  background: var(--bg-2);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.nq-free:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.nq-free h3 { font-size: 20px; letter-spacing: -0.015em; }
.nq-free p { color: var(--ink-3); font-size: 14.5px; font-weight: 600; line-height: 1.55; }
.nq-free p b { color: var(--ink); font-weight: 800; }
.nq-free .kbd { margin: 0 1px; }
@media (max-width: 900px) { .nq-free-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .nq-free-grid { grid-template-columns: 1fr; } }

/* ===== PRO section ===== */
.nq-pro {
  --nq-pro-bg: var(--pro-bg);
  background:
    radial-gradient(120% 90% at 85% 0%, var(--pro-glow) 0%, transparent 55%),
    var(--nq-pro-bg);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.nq-pro__head { max-width: 620px; }
.nq-pro__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: var(--ink);
  background: var(--pro-chip);
  border: 2px solid #000;
  border-radius: 999px;
  padding: 5px 14px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.6);
}
.nq-pro__head h2 {
  color: #fff;
  margin-top: 18px;
  font-size: clamp(30px, 4vw, 46px);
}
.nq-pro__head p {
  color: var(--nq-lav);
  margin-top: 16px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  max-width: 50ch;
}
.nq-pro__head p b { color: #fff; font-weight: 800; }

.nq-pro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.nq-pro-card {
  background: var(--pro-surface);
  border: 2px solid var(--pro-border);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nq-pro-card h3 { color: #fff; font-size: 20px; letter-spacing: -0.015em; }
.nq-pro-card p { color: var(--pro-text-soft); font-size: 14.5px; font-weight: 600; line-height: 1.55; }
.nq-pro-card p b { color: #fff; font-weight: 800; }
.nq-pro-card .nq-fi {
  background: rgba(208,188,255,.16);
  border-color: rgba(208,188,255,.5);
  color: var(--nq-lav);
  box-shadow: none;
}
/* Local OCR — the hero PRO feature spans full width */
.nq-pro-card--feature {
  grid-column: 1 / -1;
  background:
    radial-gradient(90% 140% at 100% 0%, var(--pro-surface-glow) 0%, transparent 60%),
    var(--pro-surface);
  border-color: var(--pro-border);
  flex-direction: row;
  gap: 22px;
  align-items: flex-start;
}
.nq-pro-card--feature .nq-fi {
  width: 56px; height: 56px;
  border-radius: 15px;
}
.nq-pro-card--feature h3 { font-size: 23px; }
.nq-offline-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #0E1; color: #5DE0A0;
  background: rgba(93,224,160,.12);
  border: 1.5px solid rgba(93,224,160,.5);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
/* "Free to try, then PRO" — the freemium trial trio (Reverse / Merge / Add card).
   Green like the plugin's "Go PRO" trial tooltip; pinned to the card's bottom. */
.nq-trial-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #5DE0A0;
  background: rgba(93,224,160,.12);
  border: 1.5px solid rgba(93,224,160,.5);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.nq-pro__cta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
  flex-wrap: wrap;
}
/* Steps on the left, button pushed to the right. */
.nq-pro__cta > .btn { margin-left: auto; }
.nq-pro__cta .btn--lav {
  background: var(--nq-lav);
  color: #221643;
  border-color: #000;
}
.nq-pro__cta .btn--lav:hover { background: #fff; }
.nq-pro__cta .btn--ghost-lav {
  background: transparent;
  color: var(--nq-lav);
  border: 2px solid rgba(208,188,255,.55);
  box-shadow: none;
}
.nq-pro__cta .btn--ghost-lav:hover {
  background: rgba(208,188,255,.12);
  border-color: var(--nq-lav);
  transform: translate(-1px, -1px);
}
.nq-pro__subnote {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(208,188,255,.7);
}
/* Unlock-PRO how-to — three short steps next to the newsletter button. */
.nq-pro__steps { max-width: 440px; }
.nq-pro__steps-lead {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(208,188,255,.6);
  margin-bottom: 8px;
}
.nq-pro__steps ol {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(232,224,255,.9);
}
.nq-pro__steps li { padding-left: 3px; }
.nq-pro__steps li::marker { color: var(--nq-lav); font-weight: 800; }
@media (max-width: 720px) {
  .nq-pro-grid { grid-template-columns: 1fr; }
  .nq-pro-card--feature { flex-direction: column; }
  /* Stack the steps, then the button below them. */
  .nq-pro__cta { flex-direction: column; align-items: flex-start; }
  .nq-pro__cta > .btn { margin-left: 0; }
}

/* ===== Trust strip ===== */
.nq-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.nq-trust__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px 24px;
  background: var(--bg-2);
  border: 2px solid var(--ink);
  border-radius: 16px;
}
.nq-trust__item .nq-fi {
  width: 38px; height: 38px;
  border-radius: 11px;
}
.nq-trust__item h4 {
  font-family: var(--font-rounded);
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
.nq-trust__item p { color: var(--ink-3); font-size: 13.5px; font-weight: 600; margin-top: 3px; line-height: 1.5; }
@media (max-width: 760px) { .nq-trust { grid-template-columns: 1fr; } }

/* ============================================================
   Feature videos — "See it work". DS tokens only (no purple);
   privacy-first facade (poster button → youtube-nocookie iframe).
============================================================ */
.nq-video-list { display: flex; flex-direction: column; gap: clamp(28px, 5vw, 56px); margin-top: 40px; }
.nq-video-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.nq-video-row--flip .nq-video { order: 2; }   /* video on the right for odd rows */

.nq-video {
  --nq-video-bg: linear-gradient(150deg, #2C1B5A 0%, #160E2C 100%);  /* dark purple stage */
  position: relative;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  background: var(--nq-video-bg);
  box-shadow: 4px 4px 0 var(--ink);
}
.nq-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Scale-crop the player: YouTube letterboxes the 16:9 clip, so making the iframe
   ~34% taller and pulling it up pushes YouTube's title bar (top) and logo/"more
   videos" row (bottom) into the cropped letterbox area — gone, with NO video content
   lost (the clip itself still fills the 16:9 frame). .nq-video has overflow:hidden. */
.nq-video__frame > div, .nq-video__frame iframe { position: absolute; left: 0; top: -17%; width: 100%; height: 134%; border: 0; display: block; }
/* Transparent click-shield over the player — swallows every click and routes it to
   our play/pause, so YouTube's own chrome (title/share/logo) is never clicked. */
.nq-video__shield { position: absolute; inset: 0; z-index: 2; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; transition: background .2s ease; }
/* Paused → opaque purple cover hides YouTube's pause chrome (title, share/copy-link). */
.nq-video__shield.is-paused { background: var(--nq-video-bg); }
.nq-video__shield:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
/* Our own minimal controls (play/pause + mute) — the only UI on the clip. */
.nq-video__ctrls { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: flex; gap: 8px; }
.nq-video__ctrl {
  width: 38px; height: 38px; border-radius: 999px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23, 23, 23, .68); color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .5); cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .15s ease, transform .12s ease;
}
.nq-video__ctrl:hover { background: var(--ink); }
.nq-video__ctrl:active { transform: translateY(1px); }
.nq-video__ctrl:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.nq-video__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; cursor: pointer; background: var(--nq-video-bg); display: block;
}
.nq-video__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nq-video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transition: transform .15s ease, box-shadow .2s ease;
}
.nq-video__play svg { margin-left: 3px; }   /* optically centre the triangle */
.nq-video__poster:hover .nq-video__play { transform: translate(-50%, -50%) scale(1.06); box-shadow: 4px 4px 0 var(--ink); }
.nq-video__poster:active .nq-video__play { transform: translate(-50%, -50%) scale(.96); box-shadow: 1px 1px 0 var(--ink); }
.nq-video__poster:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.nq-video-tag {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}
.nq-video-copy h3 { font-size: clamp(22px, 2.4vw, 30px); }
.nq-video-copy p { color: var(--ink-2); font-weight: 500; line-height: 1.6; max-width: 46ch; }
.nq-video-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  font-family: var(--font-rounded); font-weight: 800; font-size: 14.5px;
  color: var(--ink); border-bottom: 2px solid var(--blue); padding-bottom: 2px;
}
.nq-video-link:hover { color: var(--blue-deep); }

@media (max-width: 820px) {
  .nq-video-row, .nq-video-row--flip { grid-template-columns: 1fr; }
  .nq-video-row--flip .nq-video { order: 0; }   /* video always on top when stacked */
}