/* Mercurium Data website. The look is MercuriumData's own (static/css/mercuriumdata.css, light values):
   the Mercurium font, white cards on the light grey page, hairline borders, the blue scale, the dark primary
   button; the product's own screens (shots/, taken from the mockups by tools/capture.mjs) carry the page.
   Rounded rectangles only, no gradients, no glow.
   The fonts, tokens and the shared parts (buttons, menu bar, cards, stat cards, screenshot frames, dark band, segmented
   control) live in ONE file both websites link: static/css/mercurium_site.css (owned by the public website session).
   This file holds only what is the Mercurium Data site's own. */

.band-white { background: var(--card); }

/* ── navigation: the app's rounded section bar ── */
.nav-brand { gap: 10px; color: #404040; }
.brand-icon { display: block; flex: none; width: 38px; height: 38px; }
.brand-icon svg, .hero-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.brand-word { font-size: 21px; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.brand-word strong { font-weight: 700; }
.nav-drawer .drawer-cta { display: none; }
.nav + main .hero { margin-top: -76px; padding-top: calc(76px + clamp(48px, 7vw, 96px)); }

/* ── hero: the product, with search and a record floating over it ── */
.hero { padding-left: var(--gutter); padding-right: var(--gutter); padding-bottom: 0; }
.hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-icon { display: block; width: clamp(68px, 7vw, 96px); height: clamp(68px, 7vw, 96px); margin-bottom: 28px; }
.hero h1 { max-width: 14ch; font-size: clamp(44px, 6.4vw, 88px); line-height: 1.02; letter-spacing: -.03em; }
.lead { max-width: 62ch; margin-top: 24px; color: var(--text-muted); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.hero-note { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--text-muted); font-size: 15px; }
.hero-note i { color: var(--brand-deep); }
.stage { position: relative; margin: clamp(48px, 6vw, 80px) auto 0; padding: 0 clamp(0px, 7vw, 120px); }
.shot-main { position: relative; z-index: 1; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.shot-float-left { z-index: 2; left: 0; bottom: 9%; width: 30%; }
.shot-float-right { z-index: 2; right: 0; top: 14%; width: 25%; }

/* ── numbers: the app's stat cards ── */
.numbers { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; padding: 28px var(--gutter) 0; }

/* ── feature rows: words beside the screen, alternating sides ── */
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 88px); align-items: center; padding: clamp(80px, 10vw, 140px) var(--gutter); }
.feature.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature.flip .feature-copy { order: 2; }
.feature-copy { display: flex; flex-direction: column; align-items: flex-start; }
.feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 12px; background: var(--brand-tint); color: var(--brand-deep); font-size: 20px; }
.band-dark .feature-icon { background: rgba(89, 183, 229, .16); color: var(--brand); }
.feature h2, .band-head h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.02em; }
.feature-copy > p { max-width: 52ch; margin-top: 16px; color: var(--text-muted); font-size: 18px; }
.ticks { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; }
.ticks i { color: var(--good); font-size: 18px; line-height: 1.3; }
.shot-tall { width: 100%; max-width: 560px; justify-self: center; }
.pair { position: relative; padding-bottom: 12%; }
.pair-float { right: -2%; bottom: 0; width: 46%; }

/* the film: the Mercurium Data video (brand/videos, made by the videos session) */
.film-section { padding: clamp(80px, 10vw, 140px) var(--gutter) 0; }
.film { max-width: 1120px; margin: 0 auto; background: #000; }
.film video { display: block; width: 100%; height: auto; }

/* the dark band and the showcases: a heading over a wide screen */
.band-dark, .showcase { padding: clamp(80px, 10vw, 140px) var(--gutter); }
.band-head { display: flex; flex-direction: column; align-items: center; max-width: 780px; margin: 0 auto clamp(36px, 4vw, 56px); text-align: center; }
.band-head p { margin-top: 16px; color: var(--text-muted); font-size: 18px; }
.band-dark .band-head p { color: var(--night-text); }
.shot-wide { max-width: 1280px; margin: 0 auto; }
.showcase { display: flex; flex-direction: column; align-items: center; }
.showcase .band-head { margin-bottom: 28px; }
.panes { display: grid; width: 100%; max-width: 1280px; margin-top: 28px; }
.panes > .shot { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.panes > .shot.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }


/* ── sections with cards ── */
.section { padding: clamp(80px, 9vw, 128px) var(--gutter); }
.section-head { margin-bottom: 28px; }
.section-head h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -.02em; }
.section-head p { max-width: 70ch; margin-top: 12px; color: var(--text-muted); font-size: 18px; }
.tag { padding: 3px 8px; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-tag); color: var(--text); font-size: 13px; }
.status { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.dot { width: 8px; height: 8px; border-radius: 2px; }
.dot.good { background: var(--good); }
.dot.closed { background: var(--text-faint); }

/* ── the glimpse search: a few real rows, then made-up rows under a blur ── */
.glimpse { padding: 22px; }
.glimpse-form { display: flex; gap: 10px; }
.glimpse-form.is-busy .btn { opacity: .6; }
.glimpse-input { display: flex; flex: 1; align-items: center; gap: 10px; padding: 0 14px; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-ctl); }
.glimpse-input:focus-within { border-color: var(--seq-4); }
.glimpse-input i { color: var(--text-faint); }
.glimpse-input input { flex: 1; min-width: 0; padding: 12px 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.glimpse-meta { margin-top: 10px; color: var(--text-faint); font-size: 14px; }
.glimpse-out:not(:empty) { margin-top: 18px; }
.g-wait { color: var(--text-muted); }
.g-head { margin-bottom: 8px; color: var(--text-muted); font-size: 15px; }
.g-head strong { color: var(--text); }
.g-rows { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-ctl); overflow: hidden; }
.g-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 112px; align-items: center; gap: 14px; padding: 12px 14px; background: var(--card); }
.g-row + .g-row { border-top: 1px solid var(--border); }
.g-row img { width: 26px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--border); }
.g-name { display: flex; flex-direction: column; min-width: 0; }
.g-name strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.g-name span { color: var(--text-muted); font-size: 13px; }
.g-num { color: var(--text-faint); font-size: 14px; letter-spacing: .08em; }
.g-row .status { justify-content: flex-start; font-size: 14px; }
.g-locked { position: relative; margin-top: 10px; }
.g-blur { filter: blur(5px); pointer-events: none; user-select: none; }
.g-cta { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 24px); padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: 0 8px 30px rgba(15, 23, 42, .10); transform: translate(-50%, -50%); }
.g-cta > i { color: var(--brand-deep); font-size: 20px; }
.g-cta div { display: flex; flex-direction: column; }
.g-cta span { color: var(--text-muted); font-size: 14px; }
.g-also { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; color: var(--text-muted); font-size: 14px; }
.g-also > span:first-child { margin-right: 4px; }
.g-also .tag i { margin-right: 5px; color: var(--text-faint); font-size: 12px; }
.g-sample { margin-top: 12px; color: var(--text-faint); font-size: 13px; }
.g-note { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 18px; background: var(--page); border: 1px solid var(--border); border-radius: var(--r-ctl); }
.g-note > i { color: var(--brand-deep); font-size: 24px; }
.g-note div { flex: 1 1 280px; }
.g-note p { color: var(--text-muted); font-size: 15px; }
.g-note .btn { margin-left: auto; }

/* ── what's inside ── */
.families { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.family { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.family-wide { grid-column: span 2; }
.family-top { display: flex; align-items: center; gap: 12px; }
.family-top h3 { font-size: 17px; line-height: 1.25; }
.family-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-ctl); background: var(--brand-tint); color: var(--brand-deep); font-size: 18px; }
.family-figure { margin-top: 4px; font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.family-figure span { margin-left: 4px; color: var(--text-muted); font-size: 15px; font-weight: 400; letter-spacing: 0; }
.family p { color: var(--text-muted); font-size: 15px; }
.family .family-src { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 13px; }
.family-feature { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.feature-text { display: flex; flex-direction: column; gap: 10px; flex: 1 1 380px; }
.feature-text .family-src { margin-top: 4px; }
.feature-tags { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: 1.4 1 520px; }
.feature-tags li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--page); border: 1px solid var(--border); border-radius: var(--r-ctl); font-size: 15px; }
.feature-tags i { color: var(--brand-deep); font-size: 17px; }

/* ── questions: the FAQ, also given to search engines (FAQPage, word for word) ── */
.faq { display: flex; flex-direction: column; gap: 10px; max-width: 960px; }
.faq-item { padding: 0; overflow: hidden; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--hover); }
.faq-item summary i { flex: none; color: var(--text-muted); font-size: 18px; transition: transform 280ms cubic-bezier(.22, 1, .36, 1); }
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-item p { padding: 0 22px 20px; color: var(--text-muted); font-size: 16px; }
.faq-item[open] p { animation: faq-in .3s ease; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── who it's for ── */
.audiences { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.audience { display: flex; flex-direction: column; gap: 8px; padding: 22px; }
.audience > i { color: var(--brand-deep); font-size: 24px; }
.audience h3 { margin-top: 4px; font-size: 18px; }
.audience p { color: var(--text-muted); font-size: 15px; }
.audience-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-size: 15px; }
.audience-link i { transition: transform .2s; }
.audience-link:hover i { transform: translateX(3px); }

/* ── analytics, closing, footer ── */
.analytics { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 3vw, 36px); }
.analytics-text { flex: 1 1 520px; }
.analytics h2 { font-size: clamp(24px, 2.4vw, 32px); }
.analytics p { max-width: 75ch; margin-top: 10px; color: var(--text-muted); font-size: 17px; }
.closing { display: flex; flex-direction: column; align-items: center; text-align: center; }
.closing h2 { font-size: clamp(36px, 4.6vw, 64px); letter-spacing: -.025em; }
.closing p { max-width: 56ch; margin-top: 16px; color: var(--night-text); font-size: 18px; }
.footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 24px var(--gutter) 32px; color: var(--text-muted); font-size: 14px; }
.footer-brand { display: flex; align-items: center; gap: 8px; color: #404040; }
.footer-brand .brand-icon { width: 28px; height: 28px; }
.footer-brand .brand-word { font-size: 16px; }
.analytics-logo { display: block; margin-bottom: 14px; }
.analytics-logo svg { display: block; height: 34px; width: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.footer-links a { color: var(--text-muted); }
.footer-links a:hover { color: var(--text); }

/* ── appear on scroll (off when the visitor prefers less motion) ── */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .seg-thumb, .panes > .shot, .faq-item summary i { transition: none; }
  .faq-item[open] p { animation: none; }
}

/* ── touch screens: everything you tap is at least 44px tall (Apple's and Google's guidance) ── */
@media (pointer: coarse) {
  .btn, .seg button, .faq-item summary { min-height: 44px; }
  .nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .nav-brand { min-height: 44px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .audience-link { min-height: 44px; }
}

/* ── smaller screens ── */
@media (max-width: 1280px) {
  .numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .families { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
  .stage { padding: 0; }
  .shot-float-left, .shot-float-right { display: none; }
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); }
  .feature.flip .feature-copy { order: 0; }
  .audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .brand-icon { width: 32px; height: 32px; }
  .brand-word { font-size: 18px; }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .families, .audiences { grid-template-columns: minmax(0, 1fr); }
  .family-wide { grid-column: auto; }
  .feature-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; }
  .pair-float { display: none; }
  .pair { padding-bottom: 0; }
  .seg button { padding: 8px 12px; font-size: 14px; }
  .glimpse-form { flex-direction: column; }
  .g-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .g-num { display: none; }
  .g-cta { flex-wrap: wrap; justify-content: center; text-align: center; }
  .footer-links { margin-left: 0; }
}
@media (max-width: 480px) {
  .nav { padding-top: 10px; }
  .nav-inner { gap: 12px; padding: 8px 8px 8px 14px; }
  .brand-icon { width: 30px; height: 30px; }
  .brand-word { font-size: 17px; }
  .nav-actions .btn-primary { display: none; }
  .nav-drawer .drawer-cta { display: block; margin-top: 4px; background: var(--primary-bg); color: var(--primary-ink); text-align: center; }
  .nav-drawer .drawer-cta:hover { background: #2a3150; }
}