/* Product landing pages (EQOMP and any page built the same way)
   ==========================================================================

   These pages were pasted into the editor as complete standalone documents:
   their own font imports, their own reset, their own nav, their own footer.
   That is why /eqomp/ did not look like the rest of the site — it was not
   using the site's design at all, it was carrying a second one.

   Worse, the CSS shipped inside the post content, and wpautop rewrote it:
   95 <br> tags ended up inside the stylesheet, which killed everything
   after the first rule. Styling that lives in post content will be broken
   again the next time someone edits the page in the visual editor. So it
   lives here instead, where the editor cannot touch it.

   The design intent is kept — full-bleed hero, spec grid, bento features —
   but every colour, font and step of spacing now comes from tokens.css.
   Changing the brand accent in the Customizer moves this page with it,
   and a product with its own accent (product-meta.php) tints it too.
*/

/* The page's own shell. Kept as an id so the pasted markup still matches,
   but the reset it used to carry is gone — the theme already normalises. */
#eq-root {
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

#eq-root * {
  box-sizing: border-box;
}

/* ── Dot navigation ─────────────────────────────────────────────────── */
.eq-nav {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.eq-nav a {
  width: 8px;
  height: 8px;
  background: var(--border-overlay);
  border-radius: 50%;
  display: block;
  transition: background var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.eq-nav a:hover,
.eq-nav a.active {
  background: var(--product-accent);
  transform: scale(1.5);
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.eq-hero {
  position: relative;
  /* The theme header is fixed and overlays the page, so a full 100vh hero
     pushes its own first line under it. */
  min-height: min(100vh, 46rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: #000;
}

.eq-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.eq-video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.78vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.eq-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(11, 14, 20, 0.88) 100%);
}

.eq-hero-content {
  position: relative;
  z-index: 3;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--product-accent);
  margin-bottom: var(--space-md);
}

.eq-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--product-accent);
  animation: eqPulseDot 2s ease-in-out infinite;
}

@keyframes eqPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.6); }
}

.eq-logo-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

/* The two-tone wordmark. .eq-blue was a hardcoded iOS blue that belonged to
   no palette here; both halves now sit on the platform accents. */
.eq-logo-title .eq-blue { color: var(--accent-cyan); }
.eq-logo-title .eq-teal { color: var(--product-accent); }

.eq-hero-sub {
  font-size: var(--text-lg);
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
  letter-spacing: 0.02em;
}

.eq-hero-desc {
  max-width: 52ch;
  font-size: var(--text-base);
  color: var(--text-faint);
  line-height: 1.75;
  margin-bottom: var(--space-lg);
}

.eq-btns {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons match the theme's .btn so a visitor moving between pages does not
   meet a second button language. */
.eq-btn-primary,
.eq-btn-ghost {
  padding: 0.85rem 1.75rem;
  border-radius: 6px;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              color var(--duration-fast) ease;
}

.eq-btn-primary {
  background: var(--product-accent);
  color: var(--bg-obsidian);
  font-weight: 700;
}

.eq-btn-primary:hover {
  background: color-mix(in srgb, var(--product-accent) 80%, white);
}

.eq-btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-overlay);
  font-weight: 500;
}

.eq-btn-ghost:hover {
  border-color: var(--product-accent);
  color: var(--product-accent);
}

.eq-hero-scroll {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: eqBounce 2.5s ease-in-out infinite;
}

@keyframes eqBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; }
  50%      { transform: translateX(-50%) translateY(6px); opacity: 0.8; }
}

.eq-hero-scroll svg { stroke: currentColor; }

/* ── Sections ───────────────────────────────────────────────────────── */
.eq-section {
  padding: var(--space-section) 0;
  background: var(--bg-obsidian);
}

.eq-section.alt {
  background: var(--bg-charcoal);
}

.eq-wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eq-divider {
  height: 1px;
  background: var(--border-overlay);
}

.eq-sec-hd {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.eq-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--product-accent);
  margin-bottom: var(--space-xs);
}

.eq-h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.eq-h2 em {
  font-style: normal;
  color: var(--product-accent);
}

.eq-lead {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 56ch;
  margin-inline: auto;
}

/* ── Concept + spec grid ────────────────────────────────────────────── */
.eq-concept-img {
  width: 100%;
  max-width: 860px;
  margin: 0 auto var(--space-xl);
  display: block;
  border-radius: 12px;
  border: 1px solid var(--border-overlay);
}

.eq-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-overlay);
  max-width: 860px;
  margin-inline: auto;
  border: 1px solid var(--border-overlay);
  border-radius: 12px;
  overflow: hidden;
}

.eq-spec-cell {
  background: var(--bg-charcoal);
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eq-spec-cell-key {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-xs);
}

.eq-spec-cell-val {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.eq-spec-cell-val strong { color: var(--product-accent); }

/* ── Feature bento ──────────────────────────────────────────────────── */
.eq-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-overlay);
  border: 1px solid var(--border-overlay);
  border-radius: 12px;
  overflow: hidden;
}

.eq-bento-card {
  background: var(--bg-charcoal);
  overflow: hidden;
  transition: background var(--duration-fast) ease;
}

.eq-bento-card:hover { background: var(--bg-charcoal-hover); }
.eq-bento-card.span2 { grid-column: 1 / span 2; }

.eq-bento-video {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  background: #000;
}

.eq-bento-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: scale(1.05);
}

.eq-bento-video-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 5;
  background: var(--product-accent);
  color: var(--bg-obsidian);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 4px;
}

.eq-bento-img {
  height: 260px;
  background-size: cover;
  background-position: center;
}

.eq-bento-body {
  padding: var(--space-md);
}

.eq-bento-body h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.eq-bento-body p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.7;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* The dot nav sits on top of content on narrow screens and has no room
     to be a useful target. */
  .eq-nav { display: none; }

  .eq-bento,
  .eq-spec-grid {
    grid-template-columns: 1fr;
  }

  .eq-bento-card.span2 { grid-column: auto; }

}

@media (prefers-reduced-motion: reduce) {
  .eq-eyebrow-dot,
  .eq-hero-scroll {
    animation: none;
  }
}

/* ── Feature tag ────────────────────────────────────────────────────── */
.eq-bento-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--product-accent);
  border: 1px solid var(--product-accent-dim);
  border-radius: 3px;
  padding: 3px 8px;
  display: inline-block;
  margin-bottom: var(--space-sm);
}

/* ── Signal flow diagram ────────────────────────────────────────────── */
.eq-flow-wrap {
  background: var(--bg-obsidian);
  border: 1px solid var(--border-overlay);
  border-radius: 12px;
  padding: var(--space-lg) var(--space-md);
  margin-top: var(--space-xl);
  /* The diagram has a hard minimum width; scroll it rather than let it
     push the whole page sideways on a phone. */
  overflow-x: auto;
  text-align: center;
}

.eq-flow-svg {
  display: block;
  width: 100%;
  max-width: 920px;
  min-width: 640px;
  margin-inline: auto;
}

/* ── Pricing ────────────────────────────────────────────────────────── */
.eq-price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-overlay);
  border: 1px solid var(--border-overlay);
  border-radius: 12px;
  overflow: hidden;
  margin: var(--space-xl) auto 0;
  max-width: 860px;
}

.eq-price-card {
  background: var(--bg-charcoal);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}

/* The paid tier, tinted with the product accent instead of a fixed green. */
.eq-price-card.featured {
  background: color-mix(in srgb, var(--product-accent) 8%, var(--bg-charcoal));
}

.eq-price-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--product-accent);
  margin-bottom: var(--space-sm);
}

.eq-price-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.eq-price-card > p {
  font-size: var(--text-sm);
  color: var(--text-faint);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.eq-price-num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.eq-price-num span {
  font-size: 0.5em;
  color: var(--product-accent);
  vertical-align: super;
}

.eq-price-free {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-faint);
  margin-bottom: var(--space-md);
}

.eq-price-feats { margin-bottom: var(--space-md); }

.eq-price-feat-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border-overlay);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.eq-price-feat-row:last-child { border-bottom: none; }
.eq-price-feat-row svg { flex-shrink: 0; stroke: var(--product-accent); }

/* "Not included" rows — dimmed, not invisible. */
.eq-price-feat-row.dim { color: var(--text-faint); }
.eq-price-feat-row.dim svg { stroke: var(--border-overlay); }

.eq-btn-full {
  display: block;
  width: 100%;
  padding: 0.875rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  text-align: center;
  transition: background var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              color var(--duration-fast) ease;
}

.eq-btn-full.primary {
  background: var(--product-accent);
  color: var(--bg-obsidian);
}

.eq-btn-full.primary:hover {
  background: color-mix(in srgb, var(--product-accent) 80%, white);
}

.eq-btn-full.outline {
  border: 1px solid var(--border-overlay);
  color: var(--text-muted);
}

.eq-btn-full.outline:hover {
  border-color: var(--product-accent);
  color: var(--product-accent);
}

.eq-fmt-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  border: 1px solid var(--border-overlay);
  border-radius: 3px;
  padding: 3px 7px;
}

@media (max-width: 900px) {
  .eq-price-grid { grid-template-columns: 1fr; }
  .eq-price-card { padding: var(--space-lg) var(--space-md); }
}