/* /nexa hero — the approved round-3 "H · split": copy left, the product video right.
   Replaces hero-downloads.css (deleted with its three stacked download cards).

   Loaded LAST on nexa.html on purpose: it owns the hero layer over nexa.css,
   download-counter.css and nexa-video-rail.css without a single !important. */

/* ---------- the split ---------- */
.nx-hero { padding: clamp(30px, 5vh, 60px) 0 0; }
.hero-intro {
  --ico-dl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11'/><path d='m7 10.5 5 5 5-5'/><path d='M5 20h14'/></svg>");
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 4.4vw, 72px);
  align-items: center;
}
.hero-copy {
  min-width: 0; container-type: inline-size;
  display: grid; justify-items: start; gap: clamp(22px, 3.2vh, 36px);
}
/* The headline is the only copy in this hero now — no sub-paragraph under it — so it takes the
   wider half of the split and scales up with it. It is sized off THIS COLUMN (cqw), not the
   viewport: "The agentic coding" renders at ~8.55x the font size, so 10.6cqw leaves that line a
   10% margin inside this column at every width — including the wider fallback face before Geist
   loads. The rise animation clips each line to its own box, so a wrapped line would tear in half
   on load. */
.hero-copy .trio { font-size: clamp(32px, 10.6cqw, 58px); letter-spacing: -0.032em; line-height: 1.05; }

/* ---------- version: a quiet label directly above the two builds ---------- */
/* #download is this block, and it already sits above the fold. A raw hash jump (/nexa#download
   from the home page, or the closing CTA) would pin it to y=0 and scroll the nav and the
   "Meet Nexa." title off-screen, so arriving at the downloads lands you LOWER than the page
   starts. The margin is larger than the block can ever be from the top, so the jump clamps to
   the top of the page and the hero arrives whole. */
.hero-get { display: grid; gap: 16px; width: 100%; max-width: 580px; scroll-margin-top: 100vh; }
.hero-ver {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40);
}
.hero-ver i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.hero-ver b { color: var(--ink); font-weight: 700; letter-spacing: .06em; }
.hero-ver s { text-decoration: none; }
.hero-ver s::before { content: "·"; margin-right: 7px; opacity: .55; }

/* One friendly note between the version and the builds: some Safari installs still swallow a
   download press, and the answer is another browser, not another click. Azure blue is
   deliberate and fixed in both themes - it is the only hue on the page, so it reads as a note
   rather than a failure. The fill is solid and dark enough that white copy clears AA (4.5:1);
   a brighter azure looks louder and reads worse. */
/* The note and the two builds are one block: the note's own line length sets the block width,
   and the builds stretch to that same edge. Nothing is hard-coded, so the right sides stay
   flush at any font size, theme or translated string, and the block folds to the column when
   the line no longer fits. */
.hero-lead { display: grid; gap: 14px; width: max-content; max-width: 100%; }

.hero-tip {
  --tip-fill: #0067de;
  display: block; width: 100%;
  margin: -2px 0 0; padding: 10px 14px;
  border: 1px solid #000; border-radius: var(--r-sm);
  background: var(--tip-fill);
  box-shadow: 0 1px 0 rgba(0,0,0,.28);
  font-size: var(--fs-lead); line-height: 1.45; letter-spacing: .01em; color: #fff;
}
.hero-tip b { font-weight: 700; }

/* ---------- two builds, identical weight ---------- */
/* Both cards carry the same finish: the bare OS mark, the name, and one trailing glyph — a
   download arrow on the direct build, the caret on the Mac picker — so neither side looks
   like the primary by accident. */
/* The pair reads as a control, not a banner: one row per card, no arch or file-size line on
   the face (the Mac builds are named inside its menu, and the Windows build has only one).
   Width comes from .hero-lead so both cards end exactly where the note above them does, and
   the inner padding matches the note's so the mark, the name and the note's first word all
   sit on one left edge. */
.hero-os { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.os {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) 14px;
  column-gap: 9px; align-items: center;
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--glass-border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--glass-spec) 42%, transparent), transparent 58%),
    var(--glass-tint);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.os-mark { grid-column: 1; width: 18px; height: 18px; fill: currentColor; opacity: .85; }
.os b { grid-column: 2; font-size: var(--fs-copy); font-weight: 600; letter-spacing: -0.015em; }
.os-caret {
  grid-column: 3; width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  color: var(--ink-40); transition: transform .18s ease;
}
/* the download build has no caret, so the same slot gets the arrow — masked, not an <img>,
   so it inherits the card's ink and flips with the theme */
.os[download]::after {
  content: ""; grid-column: 3; width: 14px; height: 14px;
  background: currentColor; opacity: .38;
  -webkit-mask: var(--ico-dl) center / 14px 14px no-repeat;
  mask: var(--ico-dl) center / 14px 14px no-repeat;
  transition: opacity .2s ease, transform .2s ease;
}
.os:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 46%, var(--glass-border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--glass-spec) 52%, transparent), transparent 58%),
    color-mix(in srgb, var(--accent) 7%, var(--glass-tint));
  box-shadow: 0 16px 34px -22px var(--glass-shadow);
}
.os:hover .os-mark { opacity: 1; }
.os[download]:hover::after { opacity: .82; transform: translateY(2px); }
.os:active { transform: translateY(0); }
.os:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent); outline-offset: 2px; }

/* Mac is one card that opens its two builds — Apple silicon and Intel in one place,
   instead of an Intel link stranded at the bottom of the block. */
.os-pick { position: relative; }
.os-pick.is-open > .os {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--glass-border));
  background: color-mix(in srgb, var(--accent) 7%, var(--glass-tint));
}
.os-pick.is-open .os-caret { transform: rotate(180deg); }
.os-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  display: grid; gap: 2px; padding: 4px;
  border-radius: var(--r-sm); border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 22px 50px -20px var(--glass-shadow);
}
.os-menu[hidden] { display: none; }
/* one line per build — the name carries it, the arch trails in mono */
.os-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 9px; border-radius: var(--r-sm); color: var(--ink);
  transition: background .16s ease;
}
.os-menu a b { font-size: var(--fs-body); font-weight: 600; letter-spacing: -0.01em; }
.os-menu a span { font-family: var(--mono); font-size: var(--fs-small); color: var(--ink-40); }
.os-menu a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.os-menu a:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 44%, transparent); outline-offset: -2px; }

/* ---------- live download count: the number is the point, so drop the card ---------- */
.hero-meta { display: grid; gap: 9px; }
.dlc {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible;
}
.dlc-num {
  display: inline-flex; align-items: center;
  font-size: clamp(26px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.02em;
  transform: scale(1);
}
.dlc-label {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: var(--fs-copy); font-weight: 500; letter-spacing: 0; color: var(--ink-60);
}
.dlc-label small { font-size: var(--fs-body); font-weight: 400; letter-spacing: .01em; }
.dlc-live { margin-left: 6px; font-size: var(--fs-micro); letter-spacing: .14em; }
.dlc.is-hit::after { display: none; }
/* The tick used to flash the counter blue. With the accent being the page's own ink that
   was a no-op - same colour, no visible tick - so the hit is a scale pop instead. */
.dlc.is-hit .dlc-num { transform: scale(1.07); transition: transform .5s cubic-bezier(.2,.9,.3,1.3); }

.hero-fine {
  margin: 0; font-family: var(--mono); font-size: var(--fs-body);
  letter-spacing: .02em; color: var(--ink-40);
}
.hero-fine s { margin: 0 8px; opacity: .5; text-decoration: none; }
#hero-free-note { color: var(--ink-60); font-weight: 500; }

/* ---------- right column: the product, playing ---------- */
.hero-stage { min-width: 0; display: grid; gap: 10px; align-content: center; }
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stage-head h2 {
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40);
}
/* The player box is now just a wrapper: the 16/9 screen and the guide playlist under it. */
.hero-stage .video-player {
  position: relative; aspect-ratio: auto; overflow: visible;
  border: 0; background: transparent; box-shadow: none;
}
.video-screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--hairline) 80%, transparent);
  background: #05080d;
}
/* The rail used to float over the top of the video because it was the only signpost that
   the other guides existed. Below the screen it is permanently in view, so the hide-on-play
   state is neutralised here rather than in the rail's own file. */
.hero-stage .video-rail,
.hero-stage .video-player.rail-hidden .video-rail {
  position: static; margin-top: 12px; padding: 0;
  border: 0; background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
.hero-stage .video-rail-title { color: var(--ink-40); letter-spacing: .16em; }
.hero-stage .video-card { color: var(--ink); border-color: transparent; }
.hero-stage .video-card-thumb { height: 52px; border-color: var(--hairline); }
.hero-stage .video-card-meta > span { color: var(--accent); }
.hero-stage .video-card-meta strong { color: var(--ink); font-size: var(--fs-body); }
.hero-stage .video-card-meta small { color: var(--ink-40); }
.hero-stage .video-card:hover:not(:disabled) { background: var(--glass-tint); border-color: var(--hairline); }
.hero-stage .video-card.active {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--glass-border));
}
.hero-stage .video-card.active .video-card-thumb {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--hairline)); box-shadow: none;
}

/* The founder note is a gate the visitor has to read before the Windows guide opens. The
   hero screen is smaller than the old full-width player, so the card is compressed to fit
   inside it rather than opening pre-scrolled with its heading cut off. */
.hero-stage .video-note { padding: 10px; }
.hero-stage .video-note-card { width: 100%; padding: 14px 16px 12px; border-radius: 14px; }
.hero-stage .video-note-heart { top: 10px; right: 12px; width: 26px; height: 26px; font-size: 12px; }
.hero-stage .video-note-kicker { font-size: 9px; letter-spacing: .16em; }
.hero-stage .video-note-card h3 { margin: 5px 0 8px; font-size: clamp(16px, 1.7vw, 19px); }
.hero-stage .video-note-card p { margin: 0 0 6px; font-size: clamp(11.5px, 1.1vw, 12.5px); line-height: 1.45; }
.hero-stage .video-note-thanks { margin: 0 0 9px !important; }
.hero-stage .video-note-go { height: 38px; font-size: 11px; border-radius: 10px; }

@media (max-width: 1000px) {
  .hero-intro { grid-template-columns: 1fr; gap: 38px; }
  .hero-copy { justify-items: stretch; }
  .hero-get { max-width: 620px; }
}
@media (max-width: 640px) {
  .hero-os { grid-template-columns: 1fr; }
  .hero-stage .video-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-stage .video-card { flex: none; width: auto; }
  /* Nothing overlays the screen any more, so the play button goes back to dead centre. */
  .hero-stage .video-player .hero-play { inset: 0; }
  .hero-stage .video-card-meta small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .os, .os-caret, .os-menu a { transition: none; }
}

/* ---------- mac install sheet ---------- */
/* The Mac download opens its three steps first: a Nexa left in Downloads can never
   update itself, so the place it has to live is said before the file arrives. */
.macx {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.macx[hidden] { display: none; }
.macx-card {
  position: relative; width: min(440px, 100%); display: grid; gap: 12px;
  padding: 22px; border-radius: var(--r-sm);
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  box-shadow: 0 40px 90px -34px var(--glass-shadow);
}
.macx-x {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
  border: 0; border-radius: var(--r-sm); background: none;
  color: var(--ink-40); font-size: 20px; line-height: 1; cursor: pointer;
}
.macx-x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.macx-title { font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.02em; padding-right: 30px; }
.macx-lead { margin: 0; color: var(--ink-60); font-size: var(--fs-body); }
.macx-steps { display: grid; gap: 10px; margin: 2px 0 0; padding: 0 0 0 22px; }
.macx-steps li { color: var(--ink-60); }
.macx-steps li::marker { color: var(--accent); font-weight: 700; }
.macx-steps b { display: block; color: var(--ink); font-size: var(--fs-body); font-weight: 600; }
.macx-steps i { font-style: normal; font-size: var(--fs-small); }
.macx-warn {
  margin: 0; padding: 9px 11px; border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--glass-border));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--ink-60); font-size: var(--fs-small);
}
.macx-go {
  display: block; padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-on);
  font-size: var(--fs-copy); font-weight: 650; text-align: center;
}
.macx-go:hover { filter: brightness(1.06); }
.macx-go:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px; }
.macx-done { margin: 0; color: var(--ink-60); font-size: var(--fs-small); text-align: center; }
.macx-done[hidden] { display: none; }
/* the sheet owns the screen while it is up */
html.macx-open, html.macx-open body { overflow: hidden; }