@font-face {
  font-family: "DM Sans";
  src: url("/assets/dm-sans.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

/* JevCast on the page: a white sheet, one blue, a hairline border and a great
   deal of space. The product panel stays dark, because the product IS a dark
   panel that appears over whatever you were doing - drawing it light here would
   be drawing something we do not ship. */
:root {
  --bg: #fefefe;
  --raise: #f6f6f6;
  --sunken: #efefef;
  --edge: #d8d8d8;
  --edge-strong: #b5b5b5;
  --text: #1e1e1e;
  --dim: #545454;
  --faint: #6b6b6b;
  /* jev-use's rose, which is also the mascot's own colour. It is a field
     colour, not an ink: too light to carry text or fill a button. */
  --accent: #e58da4;
  --accent-strong: #d2748d;
  --accent-soft: #fbeaef;
  --accent-ink: #8e2446;
  --live: #16a34a;

  /* the product panel keeps its own dark scale */
  --panel: #15171e;
  --panel-edge: rgba(255, 255, 255, .13);
  --panel-text: #f3f5f9;
  --panel-dim: #98a3b8;
  --panel-faint: #6b7688;

  --sans: "DM Sans", Helvetica, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  --radius: 12px;
  --hair: 1.5px;
  --shadow-sm: 0 1px 2px hsl(220 45% 16% / .06), 0 1px 3px -1px hsl(220 45% 16% / .07);
  --shadow-md: 0 2px 8px -2px hsl(220 45% 16% / .12);
  --shadow-lg: 0 8px 24px -12px hsl(220 45% 16% / .2);
  --shadow-xl: 0 16px 36px -18px hsl(220 45% 16% / .24);
  --shadow-frame: 0 34px 80px hsl(220 45% 16% / .16), 0 1px 0 rgba(255, 255, 255, .45) inset;

  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

* { box-sizing: border-box; }
/* The clip has to sit on the root as well: with it on the body alone the
   scene is clipped visually but the document still reports the wider box, and
   the browser keeps a sideways scrollbar for space nothing occupies. */
html { overflow-x: clip; }
body {
  margin: 0;
  /* The hero scene is deliberately wider than the page - a full-bleed frame and
     a backdrop layer that overhangs both edges. `clip` contains them without
     the sideways scrollbar that would otherwise appear, and unlike `hidden` it
     leaves the sticky header sticky. */
  overflow-x: clip;
  background:
    radial-gradient(1200px 560px at 50% -12%, rgba(229, 141, 164, .16), transparent 70%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { line-height: 1.02; letter-spacing: -.045em; margin: 0; font-weight: 600; }
p { margin: 0; }

.wrap { width: min(1080px, 100% - 40px); margin-inline: auto; }
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--panel);
  padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 100;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid #8e2446; outline-offset: 5px; }
::selection { background: var(--accent); color: var(--text); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 28px;
  padding: 14px 0;
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.header.stuck { border-bottom-color: var(--edge); }
.brand-light { font-weight: 500; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 22px; font-weight: 700; letter-spacing: -1.1px; line-height: 1; white-space: nowrap; }
/* Jev, from the desktop pet's own atlas. The full sheet is 8 x 11 cells and
   1.8MB; a 28px logo only ever shows row 0, the idle blink, so only that row
   ships - 37KB for the same animation. The timings are the pet's own:
   280, 110, 110, 140, 140, 320ms, which is where the keyframe stops come from. */
.brand .jev-mark {
  flex: 0 0 auto;
  width: 26px; height: 28px;
  background: url("/assets/jev-idle.webp") 0 0 / 800% 100% no-repeat;
  animation: jev-blink 1.1s steps(1) infinite;
}
@keyframes jev-blink {
  0%      { background-position-x: 0%; }
  25.45%  { background-position-x: 14.2857%; }
  35.45%  { background-position-x: 28.5714%; }
  45.45%  { background-position-x: 42.8571%; }
  58.18%  { background-position-x: 57.1429%; }
  70.91%  { background-position-x: 71.4286%; }
}
@media (prefers-reduced-motion: reduce) {
  .brand .jev-mark { animation: none; background-position-x: 0%; }
}
.header nav { display: flex; gap: 24px; font-size: 14.5px; color: var(--dim); }
.header nav a:hover { color: var(--text); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14.5px; }
.header-actions .ghost { color: var(--dim); }
.header-actions .ghost:hover { color: var(--text); }

/* jev-use's button: square, ink, and a hard offset shadow the button moves
   into on hover rather than lifting out of. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 46px; padding: 10px 20px;
  border: 1px solid var(--text); border-radius: 0;
  background: var(--text); color: var(--bg); font-weight: 500; font-size: 14px;
  white-space: nowrap;
  box-shadow: 3px 3px 0 #a1a1a1;
  transition: transform .12s ease, box-shadow .12s ease;
}
.button:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #999; }
.button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #999; }
.button.small { min-height: 35px; font-size: 12px; padding: 7px 13px; box-shadow: 2px 2px 0 #aaa; }
.button.secondary { background: var(--bg); border: 1px solid var(--text); color: var(--text); box-shadow: 3px 3px 0 #d5d5d5; }
.button.secondary:hover { background: var(--bg); box-shadow: 1px 1px 0 #cfcfcf; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding: 108px 0 56px; text-align: center; }
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--edge); border-radius: 999px;
  padding: 6px 15px 6px 11px; font-size: 13px; color: var(--dim);
  background: #fff; box-shadow: var(--shadow-sm); margin-bottom: 26px;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.hero h1 { font-size: clamp(3.4rem, 7.7vw, 6.4rem); font-weight: 600; letter-spacing: -.055em; line-height: .96; }
.hero h1 .fade { color: var(--faint); }
.hero h1 .struck { color: var(--faint); text-decoration: line-through; text-decoration-thickness: .055em; }
.hero .lede {
  max-width: 620px; margin: 22px auto 0; color: var(--dim); font-size: 18.5px;
}
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.cta .button { padding: 13px 24px; font-size: 15.5px; }
.cta-note { margin-top: 14px; font-size: 13.5px; color: var(--faint); }
.cta-note a { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }

/* ── The panel ───────────────────────────────────────────────────────────
   Drawn to the macOS palette's own measurements, from JevCast.swift:
   width 680, corner 14, 18 above the field and below the list, a 14 gap
   between them and no rule, a 30 field at 22pt, 34 rows inset 20 and 18 with
   10 between their parts. macOS label colours in dark are white at 85, 55 and
   25 per cent. The window is a behind-window blur, so this is translucent
   rather than a flat fill and picks up whatever it is standing on. */
.panel {
  background: rgba(28, 28, 31, .72);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  box-shadow: 0 34px 80px hsl(220 45% 16% / .28), 0 2px 10px hsl(220 45% 16% / .14);
  overflow: hidden;
  text-align: left;
  color: rgba(255, 255, 255, .85);
  padding: 18px 0;
}
.panel-ask {
  display: flex; align-items: center; gap: 12px;
  height: 30px; padding: 0 18px 0 20px; margin-bottom: 14px;
}
.panel-ask .said {
  flex: 1; min-width: 0; font-size: 22px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.panel-ask .said.placeholder { color: rgba(255, 255, 255, .25); }
.panel-orb {
  position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%;
  /* accent at 95% falling to 35%, with a halo inset by -18% of the side - so
     1.36x the diameter - at 16%. */
  background: radial-gradient(circle at 50% 50%, rgba(229, 141, 164, .95), rgba(229, 141, 164, .35));
  animation: breathe 2.4s ease-in-out infinite;
}
.panel-orb::after {
  content: ""; position: absolute; inset: -18%; border-radius: 50%;
  background: rgba(229, 141, 164, .16);
}
@keyframes breathe { 50% { transform: scale(1.1); } }
/* The real palette has no line here: the field and the list are separated by
   14 points of nothing. */
.panel-rule { display: none; }
.panel-row {
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 18px 0 20px; font-size: 15px;
}
.panel-row .t {
  flex: 0 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.panel-row .s { flex: none; font-size: 12px; color: rgba(255, 255, 255, .55); }
/* A spacer absorbs the slack, so the stop glyph lands on the right edge
   instead of sitting against the subtitle. */
.panel-row .sp { flex: 1 1 auto; }
.panel-row .stop {
  flex: none; width: 16px; height: 16px; display: grid; place-items: center;
  font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, .25);
  background: none; border: 0; padding: 0;
}
.panel-row .stop:hover { color: rgba(255, 255, 255, .85); }
.panel-row.dim .t { font-size: 13px; color: rgba(255, 255, 255, .55); }
.panel-row.dim .s { color: rgba(255, 255, 255, .25); }
.panel-row.busy .t {
  background: linear-gradient(100deg, rgba(255,255,255,.35) 30%, #fff 50%, rgba(255,255,255,.35) 70%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sweep 1.7s linear infinite;
}
@keyframes sweep { to { background-position: -220% 0; } }

/* ── The same panel on a phone ───────────────────────────────────────────
   mobile/index.html is its own interface with its own measurements: a solid
   #1c1c1f at corner 18, a 17px field, a rule under it, rows at 11/18 and the
   subtitle against the right edge. */
.panel--phone {
  background: #1c1c1f;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(255, 255, 255, .09);
  border-radius: 18px;
  padding: 0 0 8px;
}
.panel--phone .panel-ask { height: auto; padding: 16px 16px 16px 18px; margin-bottom: 0; }
.panel--phone .panel-ask .said { font-size: 17px; }
.panel--phone .panel-orb { width: 20px; height: 20px; }
.panel--phone .panel-rule { display: block; height: 1px; background: rgba(255, 255, 255, .09); }
.panel--phone .panel-row { height: auto; padding: 11px 18px; }
.panel--phone .panel-row .t { flex: 1; }
.panel--phone .panel-row .s { font-size: 12.5px; color: #8e8e99; text-align: right; }

.hero-panel { width: min(680px, 100%); margin: 52px auto 0; }

/* ── Strip of facts ─────────────────────────────────────────────────────── */
.facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--edge); border: 1px solid var(--edge);
  border-radius: var(--radius); overflow: hidden; margin-top: 40px;
}
.fact { background: #fff; padding: 22px 20px; text-align: center; }
.fact b { display: block; font-size: 25px; letter-spacing: -.02em; }
.fact span { font-size: 13px; color: var(--faint); }

/* ── Sections ───────────────────────────────────────────────────────────── */
section { padding: 92px 0; }
.section-head { max-width: 640px; margin-bottom: 44px; }
/* jev-use sets the eyebrow in the mono face at 10px and lets it stay quiet,
   rather than colouring it and shouting in capitals. */
/* `.section-head p` is two classes deep and the eyebrow is a <p> inside it, so
   a bare `.eyebrow` loses and every eyebrow on the site has been quietly
   rendering at the body size. Named through the parent, it wins. */
.eyebrow,
.section-head .eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .3px;
  font-weight: 400; color: var(--dim); margin: 0 0 22px; text-transform: uppercase;
}
.section-head h2 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); font-weight: 600; }
.section-head p { margin-top: 15px; color: var(--dim); font-size: 17px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  background: #fff; border: var(--hair) solid var(--edge);
  border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card h3 { font-size: 17.5px; font-weight: 650; margin-bottom: 9px; }
.card p { color: var(--dim); font-size: 14.8px; }
.card .glyph {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 20px;
  background: #fff; border: var(--hair) solid var(--edge);
  box-shadow: var(--shadow-sm); display: grid; place-items: center;
  color: var(--accent-ink);
}
.card .glyph svg { width: 19px; height: 19px; }
.system .os svg { width: 19px; height: 19px; color: var(--dim); flex: none; }

/* ── Install ────────────────────────────────────────────────────────────── */
.systems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.system {
  background: #fff; border: var(--hair) solid var(--edge); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 26px 24px; display: flex; flex-direction: column;
}
.system.current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.system .os { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; }
.system .yours {
  margin-left: auto; font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--accent); font-weight: 600;
}
.system p { color: var(--dim); font-size: 14.5px; margin: 12px 0 18px; flex: 1; }
.system .button { width: 100%; }

pre, .code {
  background: var(--sunken); border: var(--hair) solid var(--edge); border-radius: 11px;
  padding: 15px 17px; overflow-x: auto; font-family: var(--mono);
  font-size: 13.2px; line-height: 1.75; color: #33383f; margin: 0;
}
.code .c { color: var(--faint); }
.code .p { color: var(--accent-ink); }
.copy-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; }
.copy-row .code { flex: 1; }
.copy {
  border: var(--hair) solid var(--edge-strong); background: #fff; color: var(--dim);
  border-radius: 11px; padding: 12px 18px; font-size: 13.5px; white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.copy:hover { color: var(--text); background: var(--sunken); }

/* ── Phone ──────────────────────────────────────────────────────────────── */
.phone-layout { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: center; }
.device {
  border: 10px solid #1a1d25; border-radius: 40px; background: #0b0d12;
  padding: 16px 12px; box-shadow: var(--shadow-xl);
  aspect-ratio: 9 / 17;
  display: flex; flex-direction: column;
}
.device .panel { flex: none; }
.device .hold-area { flex: 1; display: grid; place-items: center; min-height: 120px; }
.device .hold-orb {
  width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #f7d3dc, var(--accent) 54%, #a9556c);
  box-shadow: 0 0 48px rgba(229, 141, 164, .5), 0 0 0 10px rgba(229, 141, 164, .12);
  animation: breathe 2.4s ease-in-out infinite;
}
.device .hold { padding-bottom: 4px; }
.device .panel { border-radius: 14px; }
.device .hold {
  margin-top: 14px; text-align: center; font-size: 12px; color: var(--panel-faint);
}
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  position: relative; padding-left: 40px; margin-bottom: 22px; color: var(--dim); font-size: 15px;
}
.steps li b { color: var(--text); font-weight: 600; display: block; margin-bottom: 3px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 26px; height: 26px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
}

.note {
  border-left: 2px solid var(--accent); padding: 4px 0 4px 18px;
  color: var(--dim); font-size: 14.8px; margin-top: 30px;
}
.note b { color: var(--text); }

/* ── Pricing ────────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.plan {
  background: #fff; border: var(--hair) solid var(--edge);
  border-radius: 16px; padding: 30px 28px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.plan.featured { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.plan h3 { font-size: 16px; font-weight: 650; color: var(--dim); }
.plan .price { font-size: 40px; font-weight: 700; letter-spacing: -.035em; margin: 12px 0 4px; }
.plan .price small { font-size: 15px; font-weight: 400; color: var(--faint); letter-spacing: 0; }
.plan .tagline { color: var(--dim); font-size: 14.5px; min-height: 42px; }
.plan ul { list-style: none; margin: 22px 0; padding: 0; flex: 1; }
.plan li { position: relative; padding-left: 24px; margin-bottom: 11px; font-size: 14.8px; color: var(--dim); }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-size: 13px; }
.plan .button { width: 100%; }
.plan .button:disabled { background: var(--sunken); color: var(--faint); cursor: default; border: var(--hair) solid var(--edge); box-shadow: none; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
/* jev-use bleeds its footer full width with a shadow and a clip rather than
   breaking out of the wrapper. Same trick here. */
footer {
  margin-top: 96px;
  background: #1e1e1e;
  color: #f1f1f1;
  box-shadow: 0 0 0 100vmax #1e1e1e;
  clip-path: inset(0 -100vmax);
  padding-block: 30px 24px;
  border-top: 1px solid #5c5c5c;
  font-size: 12px;
}
.footer-inner { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.footer-inner nav { margin-left: auto; display: flex; gap: 25px; }
footer a:hover { text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 1040px) {
  .plans { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 900px) {
  .grid, .systems { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .phone-layout { grid-template-columns: 1fr; gap: 40px; }
  .device { max-width: 300px; margin-inline: auto; }
  .plans { grid-template-columns: 1fr; }
  /* Hiding the navigation outright left a phone with no way through the
     page at all. It wraps to its own row instead. */
  .header { flex-wrap: wrap; gap: 0 18px; }
  .header nav {
    order: 3; width: 100%; justify-content: center; gap: 20px;
    font-size: 14px; padding: 11px 0 3px; margin-top: 11px;
    border-top: var(--hair) solid var(--edge);
  }
  section { padding: 66px 0; }
  .hero { padding: 54px 0 40px; }
}
@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; }
  .footer-inner nav { margin-left: 0; }
}

/* Installation instructions differ enough per system that showing one set and
   hoping is wrong. The visitor's own system is selected on load. */
.tabs { display: flex; gap: 6px; margin-top: 26px; }
.tab {
  border: var(--hair) solid var(--edge); background: #fff; color: var(--dim);
  border-radius: 0; padding: 8px 16px; font-size: 13px;
}
.tab[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.tab:hover { color: var(--text); }
.after-install { margin-top: 14px; color: var(--dim); font-size: 14.5px; }
.after-install code {
  font-family: var(--mono); font-size: 13px; background: var(--sunken);
  border: var(--hair) solid var(--edge); border-radius: 0; padding: 1px 6px; color: var(--text);
}

/* ── The hero band ───────────────────────────────────────────────────────
   One gradient, full width, resolving to the page colour at both ends. It
   starts and finishes on white so nothing that follows it - the facts strip in
   particular - can end up sitting half on the rose and half off it. */
.hero-media {
  position: relative;
  margin-inline: calc(50% - 50vw);
  margin-top: 40px;
  padding: clamp(2.5rem, 4vw, 4rem) clamp(1.25rem, 2.6vw, 3.5rem) clamp(3.5rem, 5vw, 5rem);
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    #fbeaef 26%,
    #f6dae3 55%,
    #fbeaef 78%,
    var(--bg) 100%
  );
}
.hero-frame {
  position: relative;
  width: min(680px, 100%);
  margin-inline: auto;
}
.hero-frame .hero-panel { margin: 0; width: 100%; }

/* ── Watch the demo ─────────────────────────────────────────────────────── */
/* Below the panel, not hanging into it. At rest the palette is one row tall
   and a pill overlapping it read as clutter. */
.watch {
  display: flex;
  width: fit-content;
  margin: 22px auto 0;
  align-items: center;
  gap: 12px;
  padding: 11px 22px 11px 14px;
  border: 1px solid var(--text);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 3px 3px 0 #cfcfcf;
  transition: transform .12s ease, box-shadow .12s ease;
}
.watch[hidden] { display: none; }
.watch:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #c5c5c5; }
.watch .play {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--text);
  display: grid; place-items: center; font-size: 10px; padding-left: 2px;
}

/* ── The expanding view ─────────────────────────────────────────────────
   Clicking the picture opens it full size: the film if one has been set,
   otherwise the product itself. */
.video-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: hsl(220 45% 10% / .86);
  backdrop-filter: blur(8px);
  animation: overlay-in .16s ease both;
}
.video-overlay[hidden] { display: none; }
@keyframes overlay-in { from { opacity: 0; } }

/* It expands rather than simply appearing, growing into place from roughly
   the size it had on the page. */
@keyframes expand-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
.video-overlay video,
.demo-stage { animation: expand-in .22s cubic-bezier(.2, .7, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .video-overlay, .video-overlay video, .demo-stage { animation: none; }
}

.demo-stage { width: min(1180px, 100%); }
.demo-stage[hidden] { display: none; }
.demo-stage .panel { box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }
.demo-stage .panel-ask .said { font-size: clamp(18px, 2.4vw, 30px); }
.demo-stage .panel-row { padding: 16px 26px; font-size: clamp(15px, 1.6vw, 19px); }

.video-overlay video[hidden] { display: none; }
.video-overlay video {
  width: min(1180px, 100%);
  max-height: 84vh;
  border-radius: var(--radius);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
  background: #000;
}
.video-close {
  position: absolute; top: 20px; right: 22px;
  border: var(--hair) solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12); color: #fff;
  border-radius: 999px; padding: 9px 18px; font-size: 14px;
}
.video-close:hover { background: rgba(255, 255, 255, .22); }
.video-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
/* jev-use bleeds its footer full width with a shadow and a clip rather than
   breaking out of the wrapper. Same trick here. */
footer {
  margin-top: 96px;
  background: #1e1e1e;
  color: #f1f1f1;
  box-shadow: 0 0 0 100vmax #1e1e1e;
  clip-path: inset(0 -100vmax);
  padding-block: 30px 24px;
  border-top: 1px solid #5c5c5c;
  font-size: 12px;
}
.footer-inner { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.footer-inner nav { margin-left: auto; display: flex; gap: 25px; }
footer a:hover { text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 1040px) {
  .plans { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 900px) {
  .grid, .systems { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .phone-layout { grid-template-columns: 1fr; gap: 40px; }
  .device { max-width: 300px; margin-inline: auto; }
  .plans { grid-template-columns: 1fr; }
  /* Hiding the navigation outright left a phone with no way through the
     page at all. It wraps to its own row instead. */
  .header { flex-wrap: wrap; gap: 0 18px; }
  .header nav {
    order: 3; width: 100%; justify-content: center; gap: 20px;
    font-size: 14px; padding: 11px 0 3px; margin-top: 11px;
    border-top: var(--hair) solid var(--edge);
  }
  section { padding: 66px 0; }
  .hero { padding: 54px 0 40px; }
}
@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; }
  .footer-inner nav { margin-left: 0; }
}

/* Installation instructions differ enough per system that showing one set and
   hoping is wrong. The visitor's own system is selected on load. */
.tabs { display: flex; gap: 6px; margin-top: 26px; }
.tab {
  border: var(--hair) solid var(--edge); background: #fff; color: var(--dim);
  border-radius: 0; padding: 8px 16px; font-size: 13px;
}
.tab[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.tab:hover { color: var(--text); }
.after-install { margin-top: 14px; color: var(--dim); font-size: 14.5px; }
.after-install code {
  font-family: var(--mono); font-size: 13px; background: var(--sunken);
  border: var(--hair) solid var(--edge); border-radius: 0; padding: 1px 6px; color: var(--text);
}

/* ── The panel, working ─────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* The palette carries Jev at the head of the field - 18.5 x 20, a little under
   the orb's 22, from JevCast.swift. The phone interface has no mascot, so the
   phone mock does not grow one. */
.panel-mascot {
  flex: none; width: 18.5px; height: 20px; margin-right: -2px;
  background: url("/assets/jev-idle.webp") 0 0 / 800% 100% no-repeat;
  animation: jev-blink 1.1s steps(1) infinite;
}
.panel--phone .panel-mascot { display: none; }
@media (prefers-reduced-motion: reduce) {
  .panel-mascot { animation: none; background-position-x: 0%; }
}
.panel-ask input.said {
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; font-size: 22px; letter-spacing: -.01em;
}
.panel-ask input.said::placeholder { color: rgba(255, 255, 255, .25); }
.panel-ask input.said:focus { outline: none; }
.panel-ask:focus-within { outline: none; }
.hero-panel:focus-within { border-color: rgba(255, 255, 255, .22); }

#panel-rows { min-height: 34px; }
.panel-row.why {
  height: auto; padding-top: 6px; padding-bottom: 2px;
  font-size: 12px; color: rgba(255, 255, 255, .25);
}
.panel-row.why .s { color: rgba(255, 255, 255, .25); }
.panel-row.offer { height: auto; padding-top: 10px; padding-bottom: 10px; }
.panel-row.offer .t { white-space: normal; font-size: 13px; color: rgba(255, 255, 255, .55); }
.panel-download {
  flex: none; border-radius: 0; padding: 7px 14px; font-size: 13px;
  font-weight: 600; background: var(--bg); color: var(--text);
  box-shadow: 2px 2px 0 #7a7a7a;
}
.panel-download:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #7a7a7a; }
.panel-aside {
  position: relative; z-index: 15;
  max-width: 460px; margin: 18px auto 0;
  text-align: center; font-size: 12px; line-height: 1.6; color: var(--faint);
}

/* Every platform at once, for someone setting up a machine they are not sitting
   at. Hidden by default because the detected one is right almost always. */
.all-platforms { margin-top: 16px; }
.all-platforms button {
  background: none; border: 0; padding: 0; color: var(--dim);
  font-size: 14px; text-decoration: underline; text-underline-offset: 3px;
}
.all-platforms button:hover { color: var(--text); }
.every { margin-top: 26px; border-top: 1px solid var(--edge); padding-top: 22px; }
.every h3 {
  font-size: 14px; font-weight: 650; color: var(--accent);
  text-transform: uppercase; letter-spacing: .09em; margin: 26px 0 10px;
}
.every h3:first-child { margin-top: 0; }