/* The look shared by the two product pages, index.html (the Pulsorb visualizer) and
   conductor.html (Pulsorb Conductor): tokens, header, buttons, hero, feature cards, the
   two-column split, checks, plans, FAQ, the Windows-only note, footer and motion. Each page
   keeps only its own drawings inline (the visualizer's orb and monitors, Conductor's session
   and Orb). Dark only, like the apps. The terms, privacy and 404 pages use legal.css. */
:root {
  --ink: #07090f;          /* page */
  --panel: #0e1220;        /* raised surfaces */
  --line: #1e2436;         /* hairlines, borders */
  --fg: #eef1f8;           /* text */
  --muted: #98a1b6;        /* secondary text */
  --cyan: #4fe0ff;         /* brand gradient start */
  --violet: #9b6bff;       /* brand gradient end */
  --display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --gradient: linear-gradient(120deg, var(--cyan), var(--violet));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font: 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1120px, 100%); margin: 0 auto; padding-inline: 24px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h2 { font: 700 clamp(26px, 4vw, 38px)/1.15 var(--display); letter-spacing: -0.02em; }
.eyebrow { font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.lede { color: var(--muted); font-size: 18px; max-width: 60ch; }

/* ----- header ----- */
header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.nav { display: flex; align-items: center; gap: 28px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 18px var(--display); letter-spacing: -0.01em; }
.brand img { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; font-weight: 500; color: var(--muted); }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--fg); }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; border: 1px solid transparent;
  font: 650 15px var(--body); text-decoration: none; cursor: pointer;
  transition: transform 0.12s, filter 0.15s, background 0.15s;
}
.button:active { transform: scale(0.97); }
/* border-box origin: the gradient spans the (transparent) border too, instead of repeating
   into it and leaving a sliver of cyan along the right edge */
.button.primary { background: var(--gradient); background-origin: border-box; color: var(--ink); }
.button.primary:hover { filter: brightness(1.1); }
.button.quiet { background: transparent; color: var(--fg); border-color: var(--line); }
.button[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.button.quiet:hover { background: var(--panel); }
.button.small { padding: 8px 16px; font-size: 14px; }
.button svg { width: 18px; height: 18px; fill: currentColor; }

/* ----- hero ----- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 72px 56px; }
.hero h1 { font: 700 clamp(40px, 6.4vw, 76px)/1.02 var(--display); letter-spacing: -0.035em; }
.hero h1 .pulse { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { margin: 22px 0 30px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fine { margin-top: 16px; color: var(--muted); font-size: 14px; }
/* a small pill in a drawing's corner (the visualizer's BPM meter, Conductor's Orb label) */
.meter {
  position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 85%, transparent); border: 1px solid var(--line);
  font: 500 12px var(--mono); color: var(--muted); white-space: nowrap;
}

/* ----- features ----- */
section { padding-block: 72px; }
.section-head { display: grid; gap: 14px; margin-bottom: 40px; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature { padding: 26px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.feature h3 { font: 600 19px/1.3 var(--body); margin: 14px 0 8px; }
.feature p { margin: 0; color: var(--muted); }
.feature .glyph { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.feature .glyph svg { width: 22px; height: 22px; fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spec { display: block; margin-top: 16px; font: 500 12px var(--mono); color: color-mix(in srgb, var(--cyan) 75%, var(--muted)); }

/* ----- two columns: a drawing beside a pitch (the visualizer's wallpaper, Conductor's Orb) ----- */
.wallpaper, .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; color: var(--muted); }
.checks li b { color: var(--fg); font-weight: 600; }
.checks svg { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pro-chip { display: inline-block; padding: 2px 8px; margin-left: 8px; border-radius: 6px; background: var(--gradient); color: var(--ink); font: 700 11px var(--mono); letter-spacing: 0.08em; vertical-align: 4px; }

/* ----- pricing ----- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.plan { display: flex; flex-direction: column; gap: 18px; padding: 30px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); }
.plan.pro { border-color: color-mix(in srgb, var(--violet) 55%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--cyan) 7%, var(--panel)), color-mix(in srgb, var(--violet) 12%, var(--panel))); }
.plan h3 { font: 700 20px var(--display); }
.price { display: flex; align-items: baseline; gap: 8px; }
.price strong { font: 700 44px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price span { color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; flex: 1; }
.plan li { display: flex; gap: 10px; color: var(--muted); }
.plan li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.plan .button { align-self: stretch; }
.plan .note { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }

/* ----- faq ----- */
.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 4px 20px; }
.faq summary { cursor: pointer; padding-block: 14px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 500 20px/1 var(--mono); color: var(--muted); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 16px; color: var(--muted); max-width: 70ch; }

/* ----- the note that replaces a download on phones, tablets and computers that aren't Windows (site.js) ----- */
.get-note { width: min(440px, calc(100vw - 32px)); max-width: none; padding: 26px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.get-note::backdrop { background: rgba(3, 5, 10, 0.72); backdrop-filter: blur(4px); }
.get-note h3 { font: 700 20px/1.25 var(--display); letter-spacing: -0.01em; }
.get-note p { margin: 10px 0 0; color: var(--muted); }
.get-note .copy-row { display: flex; gap: 8px; margin-top: 18px; }
.get-note input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink); color: var(--fg); font: 500 13px var(--mono); }
.get-note .actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-top: 18px; }
.get-note .actions form { margin: 0; }
.get-note .anyway { font-size: 13px; color: var(--muted); }
.get-note .anyway:hover { color: var(--fg); }
.get-note .status { min-height: 1.2em; margin-top: 8px; font-size: 13px; color: var(--cyan); }

/* ----- footer ----- */
footer { border-top: 1px solid var(--line); padding-block: 36px 48px; color: var(--muted); font-size: 14px; }
.foot { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--fg); }

@media (max-width: 860px) {
  .hero, .wallpaper, .split { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-block: 40px 24px; }
  .features, .plans { grid-template-columns: minmax(0, 1fr); }
  .nav-links { display: none; }
  .nav .button { margin-left: auto; }
  section { padding-block: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ===== motion: arrival, scroll reveals, hover feedback. All off for reduced motion. ===== */
:root { --ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* The hero eases in, line by line (CSS only: visible even without scripts). */
@keyframes arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes arrive-orb { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
.hero .eyebrow, .hero h1, .hero .lede, .hero .cta, .hero .fine { animation: arrive 0.9s var(--ease) both; }
.hero h1 { animation-delay: 0.08s; }
.hero .lede { animation-delay: 0.16s; }
.hero .cta { animation-delay: 0.24s; }
.hero .fine { animation-delay: 0.32s; }
/* "pulse": the gradient drifts slowly through the word */
@keyframes drift { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
.hero h1 .pulse { background-image: linear-gradient(120deg, var(--cyan), var(--violet), var(--cyan)); background-size: 200% 100%; animation: drift 6s linear infinite; }
/* a faint light behind the hero that breathes with the page */
.hero { position: relative; }
.hero::before { content: ""; position: absolute; z-index: -1; inset: -10% -20% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--violet) 14%, transparent), transparent 65%); filter: blur(10px); animation: breathe 9s ease-in-out infinite; pointer-events: none; }
@keyframes breathe { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }

/* Header: firmer once the page scrolls; the current section is underlined. */
header { transition: background 0.3s, box-shadow 0.3s, border-color 0.3s; }
header.scrolled { background: color-mix(in srgb, var(--ink) 94%, transparent); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.nav-links a { position: relative; transition: color 0.2s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.nav-links a:hover::after, .nav-links a.current::after { transform: scaleX(1); }
.nav-links a.current { color: var(--fg); }

/* Buttons: a small lift, a soft glow, and a sheen across the primary ones. */
.button { transition: transform 0.25s var(--ease), filter 0.2s, background 0.2s, box-shadow 0.25s, border-color 0.2s; position: relative; overflow: hidden; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(0.97); }
.button.primary:hover { box-shadow: 0 10px 30px color-mix(in srgb, var(--cyan) 28%, transparent); }
.button.primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.7s var(--ease); pointer-events: none; }
.button.primary:hover::after { transform: translateX(120%); }
.button.quiet:hover { border-color: color-mix(in srgb, var(--cyan) 45%, var(--line)); }

/* Cards: lift, a light that follows the cursor, and a tinted edge. */
.feature, .plan { position: relative; transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s var(--ease); }
.feature::before, .plan::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--cyan) 9%, transparent), transparent 60%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.feature:hover, .plan:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cyan) 35%, var(--line)); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.feature:hover::before, .plan:hover::before { opacity: 1; }
.feature > *, .plan > * { position: relative; }
.feature .glyph { transition: transform 0.4s var(--ease), background 0.3s; }
.feature:hover .glyph { transform: scale(1.08) rotate(-4deg); background: color-mix(in srgb, var(--cyan) 20%, transparent); }
/* the Pro card's edge: a slow-moving gradient border */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin-edge { to { --angle: 360deg; } }
.plan.pro, .plan.pro:hover {
  border-color: transparent;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--cyan) 7%, var(--panel)), color-mix(in srgb, var(--violet) 12%, var(--panel))) padding-box,
    conic-gradient(from var(--angle), var(--cyan), var(--violet), color-mix(in srgb, var(--violet) 25%, var(--line)), var(--cyan)) border-box;
  animation: spin-edge 8s linear infinite;
}
main { overflow-x: clip; }

/* Scroll reveals: only when scripts run (html.js), so the page is complete without them. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.in { opacity: 1; transform: none; }
/* feature icons draw themselves when their card arrives */
.js .feature.reveal .glyph svg * { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms + 200ms); }
.js .feature.reveal.in .glyph svg * { stroke-dashoffset: 0; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.checks li { transition: transform 0.3s var(--ease); }
.checks li:hover { transform: translateX(4px); }

/* FAQ answers open and close smoothly where the browser supports it. */
.faq details { transition: border-color 0.3s, background 0.3s; }
.faq details:hover, .faq details[open] { border-color: color-mix(in srgb, var(--cyan) 30%, var(--line)); }
.faq summary { transition: color 0.2s; }
.faq summary:hover { color: var(--cyan); }
.faq summary::after { transition: transform 0.35s var(--ease); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: hidden; transition: height 0.4s var(--ease), content-visibility 0.4s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero h1, .hero .lede, .hero .cta, .hero .fine, .hero h1 .pulse, .hero::before, .plan.pro { animation: none; }
  .js .reveal, .js .feature.reveal .glyph svg * { opacity: 1; transform: none; stroke-dashoffset: 0; transition: none; }
  .button, .feature, .plan, .button.primary::after { transition: none; }
  .button:hover, .feature:hover, .plan:hover { transform: none; }
  .faq details::details-content { transition: none; }
}