/* Shared layer for the redesigned marketing pages (nv_base.html).
 * Each page defines its own palette (--bg, --text, --accent, --glass, …) on
 * :root and :root[data-theme="light"]; everything here reads those tokens. */

:root { --logo-glow: rgba(181,171,252,.45); }
:root[data-theme="light"] { --logo-glow: rgba(49,95,202,.25); }

html, body { margin: 0; background: var(--stage); }
body { color: var(--text); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }

.nv-stage { min-height: 100vh; background: var(--stage); transition: background .4s; }
.nv-root {
  container-type: inline-size; position: relative; min-height: 100vh;
  background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif;
  overflow: clip; transition: background .4s, color .4s;
}
.nv-root a { color: var(--accent); text-decoration: none; }
.nv-root a:hover { color: var(--text); }
.nv-root button { font-family: inherit; }
.nv-root h1, .nv-root h2, .nv-root h3, .nv-root p, .nv-root blockquote { font-family: 'Inter', system-ui, sans-serif; }
.nv-root :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nv-root ::selection { background: var(--tint-a); }
@keyframes nvpulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* ---- page layout ----
 * Every section shares the hero's width and gutters, so copy lines up under
 * the logo and demos under Sign in. A .nv-row is copy on the left and a demo
 * on the right in the hero's proportions, their tops level; it stacks below
 * 1040px. */
.nv-sec { max-width: 1600px; margin: 0 auto; padding: clamp(72px,8.5cqi,120px) clamp(20px,4.4cqi,64px); }
.nv-sec-head { display: flex; flex-direction: column; gap: 20px; max-width: 860px; }
.nv-kicker { display: flex; align-items: center; gap: 20px; font-size: clamp(17px,1.5cqi,20px); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.nv-kicker::after { content: ''; flex: 1; max-width: 520px; height: 1px; background: linear-gradient(90deg, var(--border-2), transparent); }
.nv-h2 { margin: 0; font-size: clamp(36px,4.4cqi,60px); line-height: 1.06; letter-spacing: -.03em; font-weight: 500; text-wrap: balance; }
.nv-lede { margin: 0; max-width: 720px; font-size: clamp(18px,1.6cqi,22px); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
/* An orb that opens the live demo (/demo): it lifts and brightens on hover,
   with a caption that says what a click does. */
.nv-orb-link { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--text-2) !important; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.nv-orb-link .nv-orb-ball { position: relative; display: block; width: 100%; aspect-ratio: 1/1; transition: transform .6s cubic-bezier(.16,1,.3,1), filter .6s ease; will-change: transform; }
.nv-orb-link .nv-orb-glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, var(--glow-a), transparent 68%); filter: blur(28px); transition: opacity .6s ease, transform .6s ease; }
.nv-orb-link:hover .nv-orb-ball, .nv-orb-link:focus-visible .nv-orb-ball { transform: scale(1.06); filter: brightness(1.18); }
.nv-orb-link:hover .nv-orb-glow, .nv-orb-link:focus-visible .nv-orb-glow { transform: scale(1.25); }
.nv-orb-link:focus-visible { outline: none; }
.nv-orb-link:focus-visible .nv-orb-cap { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The caption tucks up under the orb and stays a faint, see-through label;
   hovering (or focusing) the orb raises it into a lit neumorphic pill. */
.nv-orb-cap { display: inline-flex; align-items: center; gap: 6px; margin-top: -40px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; box-shadow: none; color: var(--text); opacity: .45;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  transition: opacity .35s ease, background .35s ease, box-shadow .35s ease, border-color .35s ease, color .35s ease; }
.nv-orb-cap .ph { font-size: 14px; color: var(--accent); }
.nv-orb-link:is(:hover, :focus-visible) .nv-orb-cap { opacity: 1; color: var(--accent); border-color: rgba(255,255,255,.06);
  background: linear-gradient(145deg, #1f2028, #111217);
  box-shadow: 5px 5px 12px rgba(0,0,0,.7), -3px -3px 9px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.09); }
:root[data-theme="light"] .nv-orb-link:is(:hover, :focus-visible) .nv-orb-cap { border-color: transparent; background: linear-gradient(145deg, #ffffff, #e3eef5);
  box-shadow: 5px 5px 12px rgba(118,148,172,.38), -5px -5px 12px rgba(255,255,255,1); }
/* Touch screens have no hover, so the label stays readable there. */
@media (hover: none) { .nv-orb-cap { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .nv-orb-link .nv-orb-ball, .nv-orb-link .nv-orb-glow, .nv-orb-cap { transition: none; } }
/* "Who uses novpha": a 3 x 3 grid of near-square cards. An icon tile, the
   group, what they use novpha for, and a search they might run. */
.nv-who { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px,1.6cqi,24px); }
@container (max-width: 959.98px) { .nv-who { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@container (max-width: 559.98px) { .nv-who { grid-template-columns: minmax(0,1fr); } }
/* Cards size to their content; the example search sits at the bottom so it lines up across a row. */
.nv-who-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(20px,1.9cqi,28px);
  border: 1px solid var(--border); border-radius: 22px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nv-who-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 13px;
  background: linear-gradient(145deg, #1f2028, #111217); box-shadow: 5px 5px 12px rgba(0,0,0,.7), -3px -3px 9px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.09);
  color: var(--accent); font-size: 22px; }
:root[data-theme="light"] .nv-who-ico { background: linear-gradient(145deg, #ffffff, #e3eef5); box-shadow: 5px 5px 12px rgba(118,148,172,.38), -5px -5px 12px rgba(255,255,255,1); }
.nv-who-card h3 { margin: 0; font-size: clamp(18px,1.45cqi,20px); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.nv-who-card p { margin: 0 0 8px; font-size: clamp(15px,1.15cqi,16.5px); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.nv-who-eg { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--field, rgba(255,255,255,.03)); color: var(--text-3); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-who-eg .ph { flex: none; font-size: 15px; color: var(--text-2); }
/* Section heading that stays in view beside a long right column (two-column layout only). */
@container (min-width: 1040px) { .nv-sticky { position: sticky; top: 120px; } }
.nv-steps { display: flex; flex-direction: column; gap: clamp(112px,16cqi,240px); margin-top: clamp(80px,10cqi,150px); }
/* A step dims until it scrolls up towards the middle of the screen (--focus,
   set by NV.focusSteps). The copy and demo dim; a step's label keeps at least
   half strength so the walkthrough still reads as a sequence. */
[data-nv-focus] :is(.nv-row-demo > *, .nv-row-text > p, .nv-step-head .nv-h3) { opacity: var(--focus, 1); }
[data-nv-focus] .nv-step-kicker { opacity: max(var(--focus, 1), .5); }
.nv-row { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); column-gap: clamp(56px,7.5cqi,112px); row-gap: 40px; align-items: start; }
.nv-row-text { --h3-size: clamp(30px,3.6cqi,52px); display: flex; flex-direction: column; gap: 24px; max-width: 620px; }
.nv-row-demo { justify-self: end; display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 620px; container-type: inline-size; }
@container (max-width: 1039.98px) {
  .nv-row { grid-template-columns: minmax(0,1fr); }
  .nv-row-demo { justify-self: center; }
}
/* Small raised neumorphic tags (About's step cards), lit like the header's buttons. */
.nv-pill {
  flex: none; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px; border-radius: 999px; border: 0;
  background: linear-gradient(145deg, #1f2028, #111217);
  box-shadow: 6px 6px 14px rgba(0,0,0,.72), -4px -4px 11px rgba(255,255,255,.045), inset 0 1px 0 rgba(255,255,255,.1);
  color: var(--text); font-size: 17px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.nv-pill.is-sm { min-height: 36px; padding: 0 15px; font-size: 14.5px;
  box-shadow: 4px 4px 10px rgba(0,0,0,.6), -3px -3px 8px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.09); }
:root[data-theme="light"] .nv-pill { background: linear-gradient(145deg, #ffffff, #e3eef5);
  box-shadow: 6px 6px 14px rgba(118,148,172,.4), -6px -6px 14px rgba(255,255,255,1); }
:root[data-theme="light"] .nv-pill.is-sm { box-shadow: 4px 4px 10px rgba(118,148,172,.35), -4px -4px 10px rgba(255,255,255,1); }
/* A step's label and title: the label is a small divider kicker, like the
   section kickers, sitting above the title on the copy's left edge. */
.nv-step-head { display: flex; flex-direction: column; gap: 18px; }
.nv-step-kicker { display: flex; align-items: center; gap: 16px; font-size: clamp(15px,1.2cqi,17px); line-height: 1.2;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.nv-step-kicker::after { content: ''; flex: 1; max-width: 520px; height: 1px; background: linear-gradient(90deg, var(--border-2), transparent); }
/* How it works: the progress rail's dots sit level with each step's label. */
.nv-rail-dot { top: calc(clamp(15px,1.2cqi,17px) * .6 - 7.5px) !important; }
.nv-h3 { margin: 0; font-size: var(--h3-size, clamp(30px,3.6cqi,52px)); line-height: 1.1; letter-spacing: -.025em; font-weight: 500; text-wrap: balance; }
.nv-body { margin: 0; font-size: clamp(18px,1.55cqi,22px); line-height: 1.72; color: var(--text-2); text-wrap: pretty; }
.nv-body code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .86em; color: var(--accent); }
/* A dated timeline beside a demo (the small-farm example). */
.nv-timeline { display: flex; flex-direction: column; }
.nv-tl-row { display: grid; grid-template-columns: 86px minmax(0,1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--border); }
.nv-tl-row.is-last { border-bottom: 1px solid var(--border); }
.nv-tl-row > span { padding-top: 5px; font-size: 15px; font-weight: 600; color: var(--text-3); }
.nv-tl-row > span.is-accent { color: var(--accent); }
/* The right-hand column of a .nv-row that holds copy or a plain card rather
   than an app demo; same edge as the demos. */
.nv-row-side { justify-self: end; width: 100%; max-width: 620px; }
@container (max-width: 1039.98px) { .nv-row-side { justify-self: stretch; max-width: none; } }
/* The How it works progress rail sits in the left margin, so the copy keeps
   the logo's edge; it goes where the margin is too narrow to hold it. */
@container (max-width: 1439.98px) { .nv-rail { display: none; } }
/* Secondary "More answers … →" links: a small glass button, so they read as
   buttons rather than stray text. Colour comes from .nv-root a (the accent). */
.nv-glass-link { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05); font-size: 15.5px; font-weight: 500; line-height: 1.3; transition: background .2s, border-color .2s; }
:root[data-theme="light"] .nv-glass-link { box-shadow: 0 6px 18px rgba(21,40,70,.1), inset 0 1px 0 rgba(255,255,255,.8); }
.nv-glass-link:hover { background: var(--glass-2); border-color: var(--border-2); }
.nv-glass-link i { transition: transform .25s cubic-bezier(.16,1,.3,1); }
.nv-glass-link:hover i { transform: translateX(3px); }

/* Day theme background: a lavender glow from above the top edge that fades
   to white three quarters of the way down the screen, fixed behind the page
   (radial-gradient 125% 125% at 50% -50%, #c7d2fe 40%, transparent 100%). It
   reuses the night sky's fixed glow layer and replaces each page's own day
   glows. The page layers above turn transparent, and the white base goes on
   <html> so the layer at z-index -1 is not painted over by <body>. */
:root[data-theme="light"] { background: #fff; }
:root[data-theme="light"] body,
:root[data-theme="light"] .nv-stage,
:root[data-theme="light"] .nv-root { background: transparent; }
:root[data-theme="light"] body .cosmic-glow { display: block; background: radial-gradient(125% 125% at 50% -50%, #c7d2fe 40%, transparent 100%); }
:root[data-theme="light"] [data-day-glow] { display: none; }