/* Launch page components (Caxton 2.0 announcement, blog/caxton-2-0.html).
   Reusable for the next major release: copy the page, keep this file and
   assets/launch.js, swap the copy and the media. Loads after docs/docs.css
   and uses its tokens, plus --lx-band defined here.

   Scale: desktop 1068 px and wider, tablet 735 to 1067 px, phone under 735 px.
   The type and spacing steps live in the --t-* and --sec-pad tokens below.

   Components (see docs/launch-page-2.md for markup):
     .lx-wrap(.wide)     centered column at the site measure (--maxw), .wide
                         1320, .full 1440 (media only)
     .lx-band            a full-bleed section on the band tone (--lx-band);
                         alternate sections carry it for rhythm
     .lx-hero            title, lede, byline, actions, then the device
     .lx-device          our CSS drawing of a laptop (lid with bezel and
                         notch, screen image, aluminum base, shadow); with
                         .lx-window it settles into view as the page scrolls
     .lx-sec, .lx-h2     a section and its headline (one <em> clause)
     .lx-intro           centered headline, .lx-lede and .lx-intro-copy
     [data-reveal]       fades and rises into view (launch.js adds .is-in);
                         --reveal-delay staggers items inside one section
     [data-count]        a number launch.js counts up to when it is seen
     .stage              scroll stage: .stage-step rows of .stage-text and
                         .stage-media > figure.stage-pin (a .clip or a still).
                         launch.js adds .stage-pinned on large screens: the
                         texts scroll in one column while every step's media
                         stacks in one sticky stage and the active one shows.
                         Without it, each step shows its own media in place.
     .clip               a video with its play or pause button
     .bigline            the benchmark reveal lines (one figure per line)
     .lx-stats           a row of figures: .lx-stat-n (number, counts up) over
                         .lx-stat-l (label); four across, two on phones
     .bars, .mem         before/after bars of measured values; memory cards
     .lx-bento, .lx-tile 12-column tiles (.span-5, .span-7); .bleed lets the
                         still run out of the tile's edge, .wide-img crops a
                         wider still from the top left
     .theme-gallery      radiogroup of themes plus a file switch over one image
     .terminal           a command block with copy buttons and optional typing
     .lx-cards           two plan cards (.lx-card, .is-pro) with a .lx-prices list
     .lx-more            a section link with a trailing chevron
     .lx-article         the launch sections inside an <article> on a docs.css
                         page (a blog post): undoes the docs article rules
     .lx-crumbs          breadcrumb line above the hero
     .lx-byline          date and version line under the hero lede
     .lx-body            a block of running text in a 68ch measure
                         (.lead, .lx-center; optional .lx-h3)
   Every effect is gated on prefers-reduced-motion: no-preference, and the
   page reads complete with no motion and no JavaScript. */

:root {
  --lx-band: #0D1012;
  --lx-device-shadow: rgba(0,0,0,0.75);
  --t-hero: 96px; --t-hero-lede: 28px;
  --t-h2: 64px; --t-lede: 24px; --t-h3: 36px; --t-tile: 28px;
  --t-body: 19px; --t-big: 120px;
  --sec-pad: 160px;
  --gut: 28px;
}
@media (prefers-color-scheme: light) {
  :root { --lx-band: #F4F1E9; --lx-device-shadow: rgba(70,55,30,0.38); }
}
@media (max-width: 1067.98px) {
  :root {
    --t-hero: 72px; --t-hero-lede: 24px;
    --t-h2: 48px; --t-lede: 21px; --t-h3: 30px; --t-tile: 26px;
    --t-body: 18px; --t-big: 80px;
    --sec-pad: 120px;
  }
}
@media (max-width: 734.98px) {
  :root {
    --t-hero: 44px; --t-hero-lede: 20px;
    --t-h2: 34px; --t-lede: 18px; --t-h3: 26px; --t-tile: 24px;
    --t-body: 17px; --t-big: 56px;
    --sec-pad: 88px;
    --gut: 16px;
  }
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--accent); color: #fff; font-family: var(--mono); font-size: 13px;
  font-weight: 600; padding: 8px 14px; border-radius: 6px; text-decoration: none;
}
.skip:focus { top: 12px; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.lx main { display: block; overflow-x: clip; }
.lx-wrap { max-width: calc(var(--maxw) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.lx-wrap.wide { max-width: calc(1320px + 2 * var(--gut)); }
.lx-wrap.full { max-width: calc(1440px + 2 * var(--gut)); }
.lx-band { background: var(--lx-band); }

/* ---------------- Type ---------------- */
.lx-h2 {
  font-family: var(--sans); font-weight: 600; color: var(--ink);
  font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.025em;
  margin: 0 auto 24px; text-wrap: balance; max-width: 18em;
}
.lx-h2 em, .lx-hero h1 em { font-style: normal; color: var(--accent-hi); }
.lx-lede {
  font-size: var(--t-lede); line-height: 1.4; color: var(--ink-dim);
  margin: 0 auto 16px; max-width: 1000px; text-wrap: pretty;
}
.lx-sec p { margin-top: 0; margin-bottom: 16px; }
.lx-sec a:not(.btn) { color: var(--accent-hi); }
.lx-cap {
  font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink-dim);
  max-width: 1000px; margin: 16px auto 0 !important;
}
code, kbd { font-family: var(--mono); font-size: 0.9em; color: var(--ink); }
kbd { white-space: nowrap; }

/* Section link with a chevron. */
.lx-more { font-family: var(--sans); font-size: 17px; text-align: center; margin: 48px 0 0 !important; }
.lx-more a { text-decoration: none; color: var(--accent-hi); }
.lx-more a::after { content: "\203A" / ""; display: inline-block; margin-left: 6px; transition: transform 200ms ease; }
.lx-more a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------------- Buttons ---------------- */
.btn {
  font-family: var(--sans); font-size: 17px; font-weight: 500; line-height: 1.2;
  text-decoration: none; padding: 14px 28px; border-radius: 980px;
  display: inline-block; border: 1px solid transparent;
}
.btn-fill { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-fill:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn-line { border-color: var(--rule-bright); color: var(--ink); }
.btn-line:hover { border-color: var(--accent); color: var(--accent-hi); }
.lx-actions { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; }

/* ---------------- Hero ---------------- */
.lx-hero { padding: 24px 0 72px; text-align: center; }
.lx-hero h1 {
  font-family: var(--sans); font-weight: 600; color: var(--ink);
  font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.03em;
  margin: 0 0 32px; text-wrap: balance;
}
.lx-hero h1 em { display: block; }
.lx-hero .lx-lede { font-size: var(--t-hero-lede); line-height: 1.35; margin: 0 auto 20px; max-width: 880px; color: var(--ink-soft); }
.lx-hero .lx-actions { justify-content: center; }

/* ---------------- Device (a laptop drawn in CSS) ---------------- */
/* Sizes are in cqw of the device's content width: the lid is 1/1.1 of the
   base, the bezel 2.4% of the lid, the corner 2% of the lid. */
.lx-device {
  margin: 56px auto 0; max-width: calc(1440px + 2 * var(--gut)); padding: 0 var(--gut);
  container-type: inline-size;
}
.lx-device-body { position: relative; transform-origin: 50% 20%; }
.lx-device-body::after {
  content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; bottom: -2.4cqw; height: 4cqw;
  background: radial-gradient(50% 50% at 50% 50%, var(--lx-device-shadow), transparent 100%);
  filter: blur(12px);
}
.lx-device-lid {
  position: relative; width: 90.91%; margin: 0 auto;
  padding: 2.18cqw 2.18cqw 2.4cqw;
  background: #0A0A0B; border-radius: 18px 18px 6px 6px;
  border-radius: 1.82cqw 1.82cqw 0.5cqw 0.5cqw;
  box-shadow: 0 0 0 1px #3A3D41, 0 0 0 2px #1A1B1D, 0 60px 120px -40px var(--lx-device-shadow);
}
.lx-device-screen { position: relative; overflow: hidden; border-radius: 0.4cqw; background: #000; }
.lx-device-screen img { display: block; width: 100%; height: auto; }
.lx-device-notch {
  position: absolute; left: 50%; top: 2.1cqw; width: 6.4cqw; height: 1.55cqw;
  transform: translateX(-50%); background: #0A0A0B;
  border-radius: 0 0 0.7cqw 0.7cqw;
}
.lx-device-notch::after {
  content: ""; position: absolute; left: 50%; top: 32%; width: 0.5cqw; height: 0.5cqw;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #2C3846 0%, #10151B 60%, #050607 100%);
}
.lx-device-base {
  position: relative; height: 1.9cqw; margin-top: -1px;
  background: linear-gradient(to bottom, #E4E5E7 0%, #CDCFD2 22%, #B0B3B7 60%, #85888D 92%, #6C6F73 100%);
  border-radius: 0.2cqw 0.2cqw 3cqw 3cqw / 0.2cqw 0.2cqw 1.5cqw 1.5cqw;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.lx-device-base span {
  position: absolute; left: 50%; top: 0; width: 13%; height: 46%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, #F3F4F5, #D6D8DB);
  border-radius: 0 0 0.9cqw 0.9cqw;
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0.12);
}

/* ---------------- Sections ---------------- */
.lx-sec { padding: var(--sec-pad) 0; }
.lx-intro { text-align: center; margin: 0 auto 88px; }
.lx-intro .lx-cap { text-align: center; }
.lx-intro-copy p:not(.lx-lede) {
  font-size: var(--t-body); line-height: 1.5; color: var(--ink-dim);
  max-width: 1000px; margin: 0 auto 16px;
}

/* ---------------- Running text ---------------- */
.lx-body { font-size: var(--t-body); max-width: 68ch; margin: 0 auto; }
.lx-body p { font-size: var(--t-body); line-height: 1.5; }
.lx-body.lead p:first-child { font-size: var(--t-lede); line-height: 1.4; color: var(--ink); }
.lx-center, .lx-body.lx-center { text-align: center; }
.lx-body.lx-center { max-width: 1000px; }
.lx-body + .lx-body, .lx-cap + .lx-body, .mem + .lx-body { margin-top: 32px; }
.lx-h3 {
  font-family: var(--sans); font-weight: 600; color: var(--ink);
  font-size: var(--t-tile); line-height: 1.15; letter-spacing: -0.015em; margin: 40px 0 14px;
}

/* ---------------- Stage ---------------- */
.stage { list-style: none; margin: 0 auto; }
.stage-step { padding: 0 0 88px; }
.stage-step:last-child { padding-bottom: 0; }
.stage-n { font-family: var(--mono); font-size: 13px; color: var(--accent-hi); margin: 0 0 14px !important; }
.stage-text h3 {
  font-family: var(--sans); font-weight: 600; color: var(--ink);
  font-size: var(--t-h3); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 20px; text-wrap: balance;
}
.stage-text p:not(.stage-n):not(.stage-meta) { font-size: 17px; line-height: 1.55; }
.stage-meta {
  font-family: var(--mono); font-size: 13px; color: var(--ink-dim); line-height: 1.7;
  border-left: 2px solid var(--accent); padding-left: 14px; margin-top: 22px !important;
}
.stage-media { margin: 28px 0 0; }
.stage-pin { margin: 0; }
.stage-pin > img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--rule); box-shadow: var(--win-shadow); margin: 0; }
.stage-pin figcaption { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); margin-top: 14px; text-align: center; }
/* Large screens without the pinned mode (no script, reduced motion): each
   step is a row of its text beside its own media. */
@media (min-width: 900px) {
  .stage-step {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px;
    align-items: center; padding: 56px 0;
  }
  .stage-media { margin: 0; }
}
/* Pinned: one sticky stage holds every step's media; launch.js sets
   .stage-pinned and .is-active only when the conditions hold. */
@media (min-width: 1000px) and (min-height: 640px) {
  .stage.stage-pinned { --text-frac: 0.44; position: relative; }
  .stage-pinned .stage-step {
    display: block; width: calc(var(--text-frac) * 100%); min-height: 100vh; padding: 0;
  }
  .stage-pinned .stage-text {
    min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
    padding: 64px 64px 64px 0; opacity: 0.35; transition: opacity 400ms ease;
  }
  .stage-pinned .stage-step.is-active .stage-text { opacity: 1; }
  .stage-pinned .stage-media {
    position: absolute; top: 0; bottom: 0; right: var(--gut); margin: 0;
    width: calc((100% - 2 * var(--gut)) * (1 - var(--text-frac)));
    opacity: 0; pointer-events: none; transition: opacity 400ms ease;
  }
  .stage-pinned .stage-step.is-active .stage-media { opacity: 1; pointer-events: auto; z-index: 1; }
  .stage-pinned .stage-pin {
    position: sticky; top: 80px; height: calc(100vh - 160px);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transform: scale(1.02); transition: transform 400ms ease;
  }
  .stage-pinned .stage-step.is-active .stage-pin { transform: none; }
  .stage-pinned .stage-pin > .clip { width: min(100%, calc((100vh - 210px) * 16 / 9)); }
  .stage-pinned .stage-pin > img { width: min(100%, calc((100vh - 210px) * 1.6)); }
  .stage-pinned .stage-step,
  .lx-io .stage-pinned .stage-step[data-reveal] { opacity: 1; transform: none; transition: none; animation: none; }
}
@media (min-width: 1200px) and (min-height: 640px) {
  .stage.stage-pinned { --text-frac: 0.38; }
}

/* ---------------- Clip (video + play control) ---------------- */
.clip { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule); box-shadow: var(--win-shadow); background: #1C1C1C; }
.clip video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #1C1C1C; }
.clip-toggle {
  position: absolute; right: 14px; bottom: 14px;
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(18,21,23,0.78); border: 1px solid rgba(255,255,255,0.18); border-radius: 980px;
  padding: 7px 14px; cursor: pointer; backdrop-filter: blur(6px);
}
.clip-toggle:hover { border-color: var(--accent); }
.clip-toggle[hidden] { display: none; }
/* Reduced motion or save-data: the poster with a large play control. */
.clip.manual .clip-toggle[data-state="paused"] {
  right: 50%; bottom: 50%; transform: translate(50%, 50%);
  font-size: 17px; padding: 14px 28px; background: var(--accent); border-color: var(--accent);
}

/* ---------------- Benchmark reveal ---------------- */
.lx-bench { text-align: center; }
/* ---------------- Stat row ---------------- */
.lx-stats {
  list-style: none; margin: 56px auto 48px; padding: 0; max-width: 1320px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; text-align: center;
}
.lx-stat-n {
  display: block; font-family: var(--sans); font-weight: 600; color: var(--ink);
  font-size: clamp(40px, 4.6vw, 66px); line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lx-stat-u { font-size: 0.5em; font-weight: 500; margin-left: 0.18em; color: var(--ink-soft); letter-spacing: -0.01em; }
.lx-stat-n [data-count] { color: var(--accent-hi); }
.lx-stat-l { display: block; margin-top: 14px; font-size: var(--t-body); line-height: 1.4; color: var(--ink-dim); }
@media (max-width: 1067px) { .lx-stats { gap: 24px; } }
@media (max-width: 734px) {
  .lx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin: 40px auto 32px; }
  .lx-stat-n { font-size: clamp(32px, 9vw, 40px); }
}

.bigline {
  font-family: var(--sans); font-weight: 600; color: var(--ink);
  font-size: var(--t-big); line-height: 1.04; letter-spacing: -0.035em;
  margin: 0 auto 0.18em !important; text-wrap: balance;
}
.bigline .n, [data-count] { color: var(--accent-hi); font-variant-numeric: tabular-nums; }
[data-count] { display: inline-block; text-align: right; }
.bignote {
  font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink-dim);
  max-width: 760px; margin: 56px auto 40px !important;
}

/* ---------------- Bento tiles ---------------- */
.lx-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.lx-tile {
  grid-column: span 12; min-width: 0; overflow: hidden;
  background: var(--win); border-radius: 24px; padding: 40px;
  display: flex; flex-direction: column;
}
.lx-tile h3, .lx-tile .lx-h3 {
  font-family: var(--sans); font-weight: 600; color: var(--ink);
  font-size: var(--t-tile); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 14px;
}
.lx-tile p { font-size: 17px; line-height: 1.55; }
.lx-tile-media { margin: auto calc(-1 * 40px) calc(-1 * 40px) 0; padding-top: 32px; }
.lx-tile-media .shot {
  margin: 0; border-radius: 12px 0 0 0; border-right: 0; border-bottom: 0;
  box-shadow: 0 0 40px -12px rgba(0,0,0,0.35);
}
.lx-tile.wide-img .lx-tile-media { flex: 1 1 auto; position: relative; min-height: 360px; padding: 0; margin-top: 32px; overflow: hidden; }
.lx-tile.wide-img .lx-tile-media .shot { position: absolute; top: 0; left: 0; width: 135%; max-width: none; }
.lx-tile-copy .lx-h3 { margin-top: 40px; }
.lx-tile-copy > div:first-child .lx-h3 { margin-top: 0; }
@media (min-width: 900px) {
  .lx-tile.span-7 { grid-column: span 7; }
  .lx-tile.span-5 { grid-column: span 5; }
  .lx-tile.wide-img { min-height: 620px; }
}

/* ---------------- Theme gallery ---------------- */
.tg-controls { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 40px; }
.tg-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tg-themes { max-width: 1000px; }
.tg-group button {
  font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink-soft);
  background: var(--win); border: 1px solid var(--rule); border-radius: 980px;
  padding: 7px 16px 7px 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
}
.tg-group button:hover { border-color: var(--rule-bright); color: var(--ink); }
.tg-group button[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--ink); }
.tg-group button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tg-sw { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(128,128,128,0.5); flex: none; }
.tg-files { background: var(--win); border: 1px solid var(--rule); border-radius: 980px; padding: 4px; gap: 4px; }
.tg-files button { font-family: var(--mono); font-size: 13px; border-color: transparent; padding: 7px 20px; background: transparent; }
.tg-files button[aria-checked="true"] { background: var(--accent-soft); box-shadow: none; border-color: var(--accent); }
.tg-frame {
  position: relative; aspect-ratio: 1600 / 1000; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--rule); box-shadow: 0 40px 100px -40px var(--lx-device-shadow); background: var(--win);
}
.tg-frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tg-frame img.incoming { opacity: 0; }
.tg-view { margin: 0; }
.tg-view figcaption { margin: 24px auto 0; max-width: 760px; text-align: center; font-family: var(--mono); font-size: 13px; line-height: 1.6; }
.tg-name { font-weight: 600; color: var(--ink); }
.tg-note { color: var(--ink-dim); }
.theme-gallery > .lx-cap { text-align: center; margin-top: 8px !important; }

/* ---------------- Bars and memory cards ---------------- */
.bars { margin: 0; border-radius: 24px; background: var(--win); padding: 40px 40px 36px; }
.bars > figcaption { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); margin-bottom: 28px; }
.bar-group + .bar-group { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--rule); }
.bar-label { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 12px !important; }
.bar-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) 150px; gap: 20px; align-items: center; margin: 6px 0; }
.bar-k { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }
.bar-track { height: 18px; background: var(--rule-soft); border-radius: 980px; overflow: hidden; }
.bar { display: block; height: 100%; width: calc(var(--v) / var(--max) * 100%); min-width: 4px; background: var(--ink-faint); border-radius: 980px; transform-origin: 0 50%; }
.bar-row.is-new .bar { background: var(--accent); }
.bar-v {
  font-family: var(--sans); font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink-dim); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.bar-row.is-new .bar-v { color: var(--accent-hi); }
.mem { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.mem > div { border-radius: 24px; background: var(--win); padding: 40px; min-width: 0; }
.mem .big {
  font-family: var(--sans); font-weight: 600; font-size: 72px; letter-spacing: -0.03em;
  color: var(--accent-hi); line-height: 1.02; margin: 0 0 14px !important; font-variant-numeric: tabular-nums;
}
.mem p { color: var(--ink-dim); font-size: 17px; line-height: 1.5; margin: 0 !important; }

/* ---------------- Terminal ---------------- */
.terminal-pair { max-width: 900px; margin: 0 auto; }
.terminal-pair .lx-body { margin-top: 40px; max-width: none; text-align: center; }
.terminal-pair .lx-body .terminal { margin-top: 32px; text-align: left; }
.terminal {
  border: 1px solid #30363A; border-radius: 16px; overflow: hidden;
  background: #16191B; box-shadow: 0 40px 100px -40px var(--lx-device-shadow); margin: 0; color: #E6E9ED;
}
.terminal-bar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; background: #212629; border-bottom: 1px solid #30363A; }
.terminal-bar i { width: 12px; height: 12px; border-radius: 50%; background: #3C434A; display: block; }
.terminal-title { font-family: var(--mono); font-size: 13px; color: #8D959E; margin-left: 8px; }
.terminal-lines { list-style: none; margin: 0; padding: 20px 0; }
.terminal-line { display: flex; align-items: center; gap: 12px; padding: 6px 20px 6px 24px; min-height: 48px; min-width: 0; }
.terminal-line code { font-family: var(--mono); font-size: 16px; color: #F0F2F5; white-space: pre; overflow-x: auto; min-width: 0; flex: 0 0 auto; }
.terminal-prompt { font-family: var(--mono); font-size: 16px; color: #F26A3C; flex: none; }
.terminal-note { font-family: var(--mono); font-size: 13px; color: #8D959E; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 12px; }
.terminal .copy {
  margin-left: auto; flex: none; font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: #CDD3DB; background: #262B2F; border: 1px solid #3C434A; border-radius: 980px;
  padding: 6px 14px; cursor: pointer;
}
.terminal .copy:hover { border-color: #D84818; color: #fff; }
.terminal .copy:focus-visible { outline: 2px solid #F26A3C; outline-offset: 2px; }
.terminal .caret { display: inline-block; width: 0.55em; height: 1.1em; background: #F26A3C; vertical-align: -0.2em; margin-left: 1px; transform: none; border: 0; }

/* ---------------- Plan cards ---------------- */
.lx-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin: 0 0 48px; }
.lx-card {
  border-radius: 24px; background: var(--win); padding: 48px;
  min-width: 0; display: flex; flex-direction: column; border-top: 2px solid transparent;
}
.lx-card.is-pro { border-top-color: var(--accent); }
.lx-card h3 {
  font-family: var(--sans); font-weight: 600; color: var(--ink);
  font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 20px;
}
.lx-card p { color: var(--ink-soft); font-size: 17px; line-height: 1.55; }
.lx-prices { list-style: none; margin: 12px 0 20px !important; padding: 0; border-top: 1px solid var(--rule); }
.lx-prices li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin: 0 !important; padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.lx-prices .k { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }
.lx-prices .v { font-family: var(--sans); font-size: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.lx-card .lx-card-fine { font-size: 15px; color: var(--ink-dim); margin-top: auto !important; padding-top: 6px; }

/* ---------------- Closing ---------------- */
.lx-close { text-align: center; }
.lx-close .lx-h2 { margin-bottom: 32px; }
.lx-close .lx-actions { justify-content: center; margin: 48px 0 40px; }
.lx-close .lx-fine { font-size: 15px; line-height: 1.6; color: var(--ink-dim); max-width: 1000px; margin: 0 auto 8px; }
.lx-close .rform { max-width: 620px; margin: 56px auto 0; text-align: left; }

/* ---------------- Article host (docs.css article rules undone) ---------------- */
.lx-article h2, .lx-article h3 { border-top: 0; padding-top: 0; }
.lx-article .terminal code { background: none; border: 0; border-radius: 0; padding: 0; }
.lx-article .terminal-line { margin: 0; }
.lx-article .stage-step { margin: 0; }
.lx-crumbs { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); padding-top: 28px; }
.lx-crumbs a { color: var(--ink-dim); text-decoration: none; }
.lx-crumbs a:hover { color: var(--accent-hi); }
.lx-byline { font-family: var(--mono); font-size: 13px; color: var(--ink-faint); margin: 0 0 32px; }

/* ---------------- Tablet and phone ---------------- */
@media (max-width: 899.98px) {
  .mem { grid-template-columns: 1fr; }
  .lx-cards { grid-template-columns: 1fr; }
}
@media (max-width: 734.98px) {
  .lx-hero { padding: 48px 0 88px; }
  .lx-hero h1 { margin-bottom: 24px; }
  .lx-device { margin-top: 64px; }
  .lx-intro { margin-bottom: 56px; }
  .lx-tile, .bars, .mem > div { padding: 28px; border-radius: 20px; }
  .lx-tile-media { margin: auto -28px -28px 0; padding-top: 24px; }
  .lx-tile.wide-img .lx-tile-media { min-height: 220px; margin-top: 24px; }
  .lx-card { padding: 32px 28px; border-radius: 20px; }
  .lx-card h3 { font-size: 28px; }
  .lx-prices .v { font-size: 26px; }
  .mem .big { font-size: 48px; }
  .bar-row { grid-template-columns: 64px minmax(0, 1fr) 92px; gap: 12px; }
  .bar-v { font-size: 26px; }
  .tg-group button { font-size: 14px; padding: 5px 13px 5px 5px; gap: 8px; }
  .tg-sw { width: 22px; height: 22px; }
  .tg-files button { padding: 6px 16px; }
  .stage-step { padding-bottom: 72px; }
  .lx-more { margin-top: 36px !important; }
  .lx-close .lx-actions { margin: 36px 0 32px; }
  .lx-close .lx-actions .btn { flex: 1 1 100%; max-width: 360px; }
}
@media (max-width: 480px) {
  .terminal-note { display: none; }
  .terminal-line { padding-left: 16px; padding-right: 14px; flex-wrap: wrap; row-gap: 6px; }
  .terminal-line code, .terminal-prompt { font-size: 14px; }
  .terminal .copy { margin-left: auto; }
}

/* ---------------- Motion (only when the visitor allows it) ---------------- */
@media (prefers-reduced-motion: no-preference) {
  /* The device settles into view as the page scrolls. */
  @supports (animation-timeline: view()) {
    .lx-window .lx-device-body {
      animation: lx-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
  /* Without scroll timelines launch.js adds .lx-io-win and .is-in instead. */
  .lx-io-win .lx-window .lx-device-body { transition: transform 900ms cubic-bezier(.2,.7,.2,1); }
  .lx-io-win .lx-window:not(.is-in) .lx-device-body { transform: translateY(48px) scale(0.94); }

  /* Reveals: launch.js adds .lx-io to <html> and .is-in to each element. */
  .lx-io [data-reveal] {
    transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .lx-io [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .lx-io :is(.lx-tile, .bars, .mem, .theme-gallery, .terminal-pair, .lx-cards, .stage-step)[data-reveal]:not(.is-in) {
    transform: translateY(24px) scale(0.97);
  }

  .lx-ready .bars:not(.is-in) .bar { transform: scaleX(0); }
  .lx-ready .bars .bar { transition: transform 1100ms cubic-bezier(.2,.7,.2,1) 200ms; }
  .lx-ready .bars .bar-row.is-new .bar { transition-delay: 450ms; }

  .tg-frame img { transition: opacity 220ms ease; }
  .lx-more a:hover::after { transform: translateX(3px); }
}
@keyframes lx-settle {
  from { transform: translateY(48px) scale(0.94); }
  to { transform: none; }
}