/* HarnessDesk: the desk, on the page.
   The product is the picture: three sections of this page are the production
   renderer running over a recorded wire. Everything here is built to get out
   of its way.

   System, in one place:
     colour   cool neutral + near-black, one amber accent, whole page.
                Vendor colour appears only as an agent dot.
     radius   14px app frames and panels · 8px buttons, chips, cards · 999px
                only for the round window dots. No other radii.
     type     Geist for everything, Geist Mono for facts and captions.
     motion   level 4: entry reveals, hover lift, the dock/zoom transform.
                All of it collapses under prefers-reduced-motion.
*/

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --page: #fbfbfb;
  --paper: #ffffff;
  --panel: #f3f3f4;
  --ink: #0d0d0f;
  --ink-2: #52525b;
  --ink-3: #6b6b74;
  --line: rgba(13, 13, 15, .13);
  --line-soft: rgba(13, 13, 15, .07);
  --box: #0d0d0f;
  --box-ink: #fbfbfb;
  --accent: #a25a08;
  --accent-bg: rgba(184, 107, 24, .11);
  /* The page is near-white and so is the app window on it, so the frame is
     separated by depth rather than by tone: three stacked, barely-there
     shadows instead of one heavy drop. */
  --shadow: 0 2px 4px rgba(13, 13, 15, .04), 0 12px 28px rgba(13, 13, 15, .07),
            0 40px 90px rgba(13, 13, 15, .11), 0 1px 0 rgba(255, 255, 255, .7) inset;
  --shadow-sm: 0 1px 2px rgba(13, 13, 15, .06), 0 4px 12px rgba(13, 13, 15, .07);

  --r-lg: 18px;
  --r: 8px;
  /* The docked frame is laid out full size and scaled by a transform, which
     leaves its layout box the original height. These two make the loss
     computable so the dock can take it back with a negative margin, and that
     only works while the window chrome is a known height. */
  --frame-h: clamp(460px, 70vh, 620px);
  --frame-total: calc(var(--frame-h) + 48px);
  --shell: 1240px;
  --gut: clamp(20px, 5vw, 56px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0a0a0c;
    --paper: #141416;
    --panel: #1b1b1f;
    --ink: #f2f2f0;
    --ink-2: #b4b4bc;
    --ink-3: #84848d;
    --line: rgba(242, 242, 240, .20);
    --line-soft: rgba(242, 242, 240, .10);
    --box: #f2f2f0;
    --box-ink: #0e0e10;
    --accent: #eda856;
    --accent-bg: rgba(237, 168, 86, .14);
    --shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 14px 32px rgba(0, 0, 0, .5), 0 44px 96px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .07) inset;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0a0a0c;
  --paper: #141416;
  --panel: #1b1b1f;
  --ink: #f2f2f0;
  --ink-2: #b4b4bc;
  --ink-3: #84848d;
  --line: rgba(242, 242, 240, .20);
  --line-soft: rgba(242, 242, 240, .10);
  --box: #f2f2f0;
  --box-ink: #0e0e10;
  --accent: #eda856;
  --accent-bg: rgba(237, 168, 86, .14);
  --shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 14px 32px rgba(0, 0, 0, .5), 0 44px 96px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .07) inset;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .35);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  position: relative;
  background: var(--page);
  color: var(--ink);
  font-family: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 980px;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(62% 48% at 68% 8%, rgba(96, 112, 148, .13), transparent 72%),
    radial-gradient(46% 40% at 12% 0%, rgba(168, 132, 82, .075), transparent 72%),
    linear-gradient(180deg, rgba(120, 132, 156, .06), transparent 62%);
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(62% 48% at 68% 8%, rgba(128, 150, 200, .16), transparent 72%),
    radial-gradient(46% 40% at 12% 0%, rgba(214, 158, 88, .09), transparent 72%),
    linear-gradient(180deg, rgba(150, 165, 200, .06), transparent 62%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before {
    background:
      radial-gradient(62% 48% at 68% 8%, rgba(128, 150, 200, .16), transparent 72%),
      radial-gradient(46% 40% at 12% 0%, rgba(214, 158, 88, .09), transparent 72%),
      linear-gradient(180deg, rgba(150, 165, 200, .06), transparent 62%);
  }
}
.hero, .nav, .band, .cta-final, footer { position: relative; z-index: 1; }

img, video, svg { max-width: 100%; }
a { color: inherit; }
:where(h1, h2, h3, p, ul, ol) { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 92px; }

.mono {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  letter-spacing: .01em;
}
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding-inline: var(--gut); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--box); color: var(--box-ink); padding: 12px 18px; border-radius: var(--r);
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- type scale ---------- */
.display {
  font-size: clamp(38px, 5.2vw, 66px);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 600;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 600;
  text-wrap: balance;
}
.h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.015em; font-weight: 600; }
.lede { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.55; color: var(--ink-2); max-width: 54ch; }
.body { color: var(--ink-2); max-width: 58ch; }
.body + .body { margin-top: 14px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
  font: inherit; font-size: 15px; font-weight: 500; text-decoration: none;
  padding: 11px 20px; border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn-solid { background: var(--box); color: var(--box-ink); box-shadow: var(--shadow-sm); }
.btn-solid:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(17, 17, 30, .16); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--panel); border-color: var(--ink-3); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-big { font-size: 16px; padding: 14px 26px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (max-width: 520px) {
  .cta-row { display: grid; grid-template-columns: 1fr; }
  .cta-row .btn { width: 100%; }
}


/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 68px;
  background: transparent;
  border-bottom: 1px solid transparent;
  max-width: none;
  transition: border-color .2s ease, background-color .2s ease;
}
/* At the top the bar is glass over nothing, so the wash behind the hero runs
   under it unbroken; an opaque band there put a hard seam across the page.
   It only becomes a surface once there is content to sit on. */
.nav.stuck {
  background: color-mix(in srgb, var(--page) 82%, transparent);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border-bottom-color: var(--line-soft);
}
@supports not (backdrop-filter: blur(4px)) { .nav.stuck { background: var(--page); } }
.nav > * { min-width: 0; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 16.5px; letter-spacing: -.02em; text-decoration: none;
}
.mark { width: 24px; height: 18px; color: var(--ink); flex: none; }
/* Every control on one height, icons bare, hairline rules between the groups,
   chrome only on the primary button. That is shadcn's top bar, and it is why
   ours read as three different components sitting next to each other. */
.nav-right { display: flex; align-items: center; gap: 2px; }
.nav-link {
  display: inline-flex; align-items: center; height: 36px; padding: 0 11px;
  font-size: 14.5px; color: var(--ink-2); text-decoration: none;
  border-radius: var(--r); white-space: nowrap; transition: color .16s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-rule { flex: none; width: 1px; height: 18px; background: var(--line); margin-inline: 9px; }
.nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r);
  background: none; color: var(--ink-2); cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.nav-icon:hover { color: var(--ink); background: var(--panel); }
.glyph { width: 18px; height: 18px; }
.nav-cta { height: 36px; padding: 0 16px; font-size: 14px; }
@media (max-width: 899px) {
  .nav-link { display: none; }
  .nav-right > .nav-rule:first-of-type { display: none; }
}
@media (max-width: 460px) { .nav-right > .nav-icon:first-of-type { display: none; } }

/* ---------- hero ---------- */
.hero { padding-block: clamp(44px, 6vw, 92px) clamp(48px, 6vw, 84px); }
.hero .display { font-size: clamp(28px, 7.6vw, 60px); }
.hero .lede { max-width: 46ch; margin-top: 20px; }


/* ---------- the agent marquee ----------
   The track holds two identical groups and travels exactly half its width, so
   the loop closes on itself with no jump. It moves because the list is longer
   than the screen, which is the point being made; it stops on hover so a name
   can be read, and stops entirely under reduced motion, where it wraps into a
   plain block instead. Marks are the same lobe-icons files the app draws, on
   `currentColor`, so they take the page's ink in both themes. */
.marquee {
  margin-top: clamp(30px, 4vw, 48px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee-run 64s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee-run { to { transform: translateX(-50%); } }
.marquee-group { display: flex; align-items: center; gap: 46px; padding-right: 46px; }
.agent-chip {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-size: 15px; color: var(--ink-2);
}
.agent-mark { width: 21px; height: 21px; flex: none; color: var(--ink); }

/* ---------- section rhythm ---------- */
.band { padding-block: clamp(64px, 8vw, 112px); border-top: 1px solid var(--line-soft); }
.band-tight { padding-block: clamp(48px, 5.5vw, 76px); }
.band-head { max-width: 62ch; }
.band-head .body { margin-top: 18px; }

/* ---------- act 1 and 2: copy beside a docked desk ---------- */
/* The frame is laid out full size and scaled into one column, so the zoom is
   a single transform and the renderer inside never reflows. */
.demo-stage { margin-top: clamp(32px, 5vw, 56px); }
.demo-screen { position: relative; background: var(--panel); }
.demo-screen iframe {
  display: block; width: 100%; height: var(--frame-h);
  border: 0; background: transparent;
}
.demo-zoom { display: none; }
.demo-mobile { display: none; position: relative; }
.demo-mobile img { width: 100%; height: auto; vertical-align: top; }
/* The <picture> around each still exists only to gate the fetch on width,
   so it must not introduce a box: display:contents leaves the rule above
   and .only-light/.only-dark applying to the <img> exactly as before. */
.demo-mobile picture { display: contents; }
.demo-mobile span {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  background: var(--box); color: var(--box-ink);
  font-size: 11px; text-align: center; border-radius: var(--r); padding: 9px 10px;
}
.demo-mobile-only { display: none; }
@media (max-width: 759px) {
  .demo-screen iframe { display: none; }
  .demo-mobile { display: block; }
  .demo-live-only { display: none; }
  .demo-mobile-only { display: inline; }
}

@media (min-width: 1000px) {
  .duo { display: grid; --dock-scale: .56; --dock-w: 56%; }
  .duo-copy, .duo .demo-stage { grid-area: 1 / 1; }
  .duo-copy {
    align-self: center; position: relative; z-index: 1;
    width: calc(100% - var(--dock-w) - 40px);
    transition: opacity .32s ease, transform .55s cubic-bezier(.33, .7, .25, 1);
  }
  .duo.demo-left .duo-copy { margin-left: auto; }
  .hero .display { font-size: clamp(34px, 3.3vw, 43px); }
  .duo .demo-stage { margin-top: 0; position: relative; z-index: 2; }
  .duo .demo-frame {
    transform: scale(var(--dock-scale)); transform-origin: 100% 50%;
    /* Half the height the scale gave up, off each end. Without this the frame
       reserves its full size and the section floats in the leftover. */
    margin-block: calc((var(--dock-scale) - 1) * var(--frame-total) / 2);
    transition: transform .55s cubic-bezier(.33, .7, .25, 1),
                margin-block-start .55s cubic-bezier(.33, .7, .25, 1),
                margin-block-end .55s cubic-bezier(.33, .7, .25, 1);
    will-change: transform;
  }
  .duo.demo-left .demo-frame { transform-origin: 0% 50%; }
  .duo:not(.demo-open) .demo-stage:hover .demo-frame { transform: scale(calc(var(--dock-scale) + .018)); }
  .duo.demo-open .demo-frame { transform: scale(1); margin-block: 0; }
  .duo.demo-open .duo-copy { opacity: 0; transform: translateX(-18px); pointer-events: none; }
  .duo.demo-left.demo-open .duo-copy { transform: translateX(18px); }
  .demo-zoom {
    display: block; position: absolute; z-index: 3;
    inset: 0 0 auto calc(100% - var(--dock-w));
    height: calc(var(--frame-total) * var(--dock-scale));
    background: transparent; border: 0; padding: 0; cursor: zoom-in;
  }
  .duo.demo-left .demo-zoom { inset: 0 calc(100% - var(--dock-w)) auto 0; }
  .duo.demo-open .demo-zoom { display: none; }
  .duo.demo-open .app-titlebar { cursor: zoom-out; }
}
.demo-esc { display: none; }
.demo-open .demo-esc { display: inline; }
@media (max-width: 759px) {
  .band .duo .demo-stage { display: none; }
  .stage-wide .demo-mobile { display: none; }
}

/* ---------- act 3: the desk at full width, nothing beside it ---------- */
.stage-wide { margin-top: clamp(36px, 5vw, 60px); }
.stage-wide .demo-screen iframe { height: clamp(460px, 78vh, 720px); }

/* ---------- the window chrome ---------- */
.app-frame {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); overflow: hidden; box-shadow: var(--shadow);
}
.app-titlebar {
  display: flex; align-items: center; gap: 6px;
  height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line-soft);
}
.app-titlebar i { width: 10px; height: 10px; border-radius: 999px; background: var(--line); flex: none; }
.app-titlebar .mono { margin-left: 8px; color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-tag {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-3); background: var(--panel);
  border-radius: 999px; padding: 4px 11px; font-size: 11px; letter-spacing: .02em;
}
.only-light { display: block; }
.only-dark { display: none; }
:root[data-theme="dark"] .only-light { display: none; }
:root[data-theme="dark"] .only-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display: none; }
  :root:not([data-theme="light"]) .only-dark { display: block; }
}




/* ---------- final CTA ---------- */
.cta-final { padding-block: clamp(72px, 9vw, 128px); border-top: 1px solid var(--line-soft); text-align: center; }
.cta-final .lede { margin: 22px auto 0; }
.cta-final .cta-row { justify-content: center; }
/* Not a row of facts: the two links an Intel visitor actually needs to
   install, and to verify what they installed. */
.cta-sub { margin-top: 26px; color: var(--ink-3); font-size: 14px; }
.cta-sub a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.cta-sub a:hover { color: var(--ink); text-decoration-color: currentColor; }


/* ---------- footer ---------- */
footer { padding-block: clamp(52px, 6vw, 76px) 40px; border-top: 1px solid var(--line-soft); }
.foot-grid {
  display: grid; gap: clamp(32px, 4vw, 48px);
  grid-template-columns: 1fr;
}
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.foot-line { color: var(--ink-3); font-size: 14.5px; max-width: 34ch; }
.foot-social { display: flex; gap: 6px; margin-top: 2px; }
.foot-social { margin-left: -9px; }
.foot-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r);
  color: var(--ink-3);
  transition: color .16s ease, background-color .16s ease;
}
.foot-social a:hover { color: var(--ink); background: var(--panel); }


.foot-base {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  margin-top: clamp(40px, 5vw, 60px); padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-3); font-size: 13.5px;
}

/* ---------- motion, level 4 ---------- */
/* Hidden only once JavaScript has confirmed it can bring them back. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal].in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  /* A row that will not move should not pretend to run off the edge either:
     it drops the fade, keeps one group, and wraps. */
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: auto; }
  .marquee-group { flex-wrap: wrap; row-gap: 16px; padding-right: 0; }
  .marquee-group + .marquee-group { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-reveal].in { transition: none; }
  .duo .demo-frame, .duo-copy, .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
  html { scroll-behavior: auto; }
}