/* DeskCapsule is a dark instrument that lives at the edge of a screen, so the page
     commits to one visual world rather than following the reader's theme. Every colour
     is painted explicitly, including the body ground, so the page holds wherever it is
     embedded instead of borrowing a host background. */
  :root {
    --ground: #0e1016;
    --panel: #171a22;
    --panel-high: #1e2230;
    --line: #272c3a;
    --ink: #f5f7fa;
    --ink-muted: #8e96a4;
    --ink-dim: #5d6472;
    --accent: #7c5cfc;
    --accent-soft: rgba(124, 92, 252, 0.14);
    --accent-line: rgba(124, 92, 252, 0.42);
    --warn: #e8b44a;
    --warn-soft: rgba(232, 180, 74, 0.12);

    --display: "Archivo", "Segoe UI", system-ui, sans-serif;
    --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

    --measure: 66ch;
    --gutter: clamp(20px, 5vw, 64px);
  }

  *, *::before, *::after { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  a { color: inherit; }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
  }

  .wrap {
    width: min(1120px, 100% - var(--gutter) * 2);
    margin-inline: auto;
  }

  /* ---------- top bar ---------- */
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0 8px;
  }

  .wordmark {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
  }

  .wordmark .glyph {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: linear-gradient(160deg, var(--accent), #4b34c9);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  }

  .lang {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    font-family: var(--mono);
    font-size: 12px;
  }

  .lang button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    padding: 6px 12px;
    cursor: pointer;
    font: inherit;
    letter-spacing: 0.06em;
  }

  .lang button[aria-pressed="true"] {
    background: var(--accent-soft);
    color: var(--ink);
  }

  /* ---------- hero ---------- */
  .hero { padding: clamp(30px, 6vw, 66px) 0 clamp(24px, 4vw, 46px); text-align: center; }

  h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(30px, 5.4vw, 54px);
    line-height: 1.06;
    letter-spacing: -0.025em;
    margin: 0 0 18px;
    text-wrap: balance;
  }

  .lede {
    margin: 0 auto;
    max-width: 58ch;
    color: var(--ink-muted);
    font-size: clamp(15px, 1.5vw, 18px);
  }

  kbd {
    font-family: var(--mono);
    font-size: 0.86em;
    background: var(--panel-high);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 1px 6px;
    color: var(--ink);
    white-space: nowrap;
  }

  .cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--panel-high);
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: border-color 140ms ease, transform 140ms ease;
  }

  .btn:hover { border-color: var(--accent-line); transform: translateY(-1px); }

  .btn.primary {
    background: linear-gradient(170deg, #8a6dff, #6b45f0);
    border-color: transparent;
    color: #fff;
  }

  .btn .sub {
    font-family: var(--mono);
    font-weight: 400;
    font-size: 11px;
    opacity: 0.72;
  }

  /* ---------- interactive showcase ---------- */
  /* The screen edge the capsule hangs from, drawn rather than photographed so it stays
     sharp at any width. What sits inside it is a real render of the shipping window. */
  .stage {
    position: relative;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    background:
      radial-gradient(120% 120% at 50% -30%, rgba(124, 92, 252, 0.15), transparent 60%),
      linear-gradient(180deg, #12141c, #0b0d12);
    padding: 0 clamp(10px, 2vw, 26px) clamp(18px, 3vw, 30px);
    overflow: hidden;
  }

  .shot-frame {
    position: relative;
    margin: 0 auto;
    max-width: 1000px;
    animation: drop 760ms cubic-bezier(0.16, 0.9, 0.28, 1) both;
  }

  @keyframes drop {
    from { transform: translateY(-24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .shot-frame { animation: none; }
    .shot { transition: none !important; }
  }

  .shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0 0 14px 14px;
    transition: opacity 180ms ease;
  }

  .shot.swapping { opacity: 0; }

  .switcher {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: clamp(18px, 3vw, 28px) auto 0;
    max-width: 900px;
  }

  .switcher button {
    appearance: none;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    color: var(--ink-muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
  }

  .switcher button:hover { color: var(--ink); border-color: var(--accent-line); }

  .switcher button[aria-selected="true"] {
    color: var(--ink);
    background: var(--accent-soft);
    border-color: var(--accent-line);
  }

  .switcher .pro {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.09em;
    padding: 1px 4px;
    border: 1px solid var(--accent-line);
    border-radius: 4px;
    color: #c3b2ff;
  }

  .stage-note {
    margin: 14px auto 0;
    max-width: 62ch;
    text-align: center;
    color: var(--ink-muted);
    font-size: 14px;
    min-height: 2.8em;
  }

  /* ---------- spec rows ---------- */
  section { padding: clamp(48px, 7vw, 92px) 0; border-top: 1px solid var(--line); }

  .row {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: clamp(16px, 4vw, 56px);
    align-items: start;
  }

  @media (max-width: 720px) {
    .row { grid-template-columns: 1fr; gap: 14px; }
  }

  .rowlabel {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-dim);
    padding-top: 6px;
  }

  h2 {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(22px, 3vw, 32px);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 14px;
    text-wrap: balance;
  }

  p { max-width: var(--measure); }
  .muted { color: var(--ink-muted); }

  /* ---------- feature list ---------- */
  .features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 26px;
  }

  .feature { background: var(--panel); padding: 20px; }

  .feature h3 {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 7px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .feature p { font-size: 14px; color: var(--ink-muted); margin: 0; }

  .chip {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.09em;
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
    color: #c3b2ff;
  }

  .chip.soon {
    border-color: rgba(232, 180, 74, 0.4);
    background: var(--warn-soft);
    color: var(--warn);
  }

  /* ---------- download ---------- */
  .downloads {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 26px;
  }

  .dl {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .dl h3 { font-family: var(--display); font-size: 17px; margin: 0; font-weight: 600; }
  .dl .why { font-size: 14px; color: var(--ink-muted); margin: 0; flex: 1; }

  .meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-dim);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
  }

  .notice {
    margin-top: 24px;
    border: 1px solid rgba(232, 180, 74, 0.3);
    background: var(--warn-soft);
    border-radius: 10px;
    padding: 16px 18px;
    font-size: 14px;
  }

  .notice strong { color: var(--warn); }

  /* ---------- limits table ---------- */
  .scroller { overflow-x: auto; margin-top: 24px; }

  table {
    border-collapse: collapse;
    width: 100%;
    min-width: 480px;
    font-size: 14px;
  }

  th, td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
  }

  thead th {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
    font-weight: 500;
  }

  td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
  tbody tr:last-child td { border-bottom: 0; }

  /* ---------- faq ---------- */
  details { border-bottom: 1px solid var(--line); padding: 16px 0; }

  summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
  }

  summary::-webkit-details-marker { display: none; }

  summary::after {
    content: "+";
    font-family: var(--mono);
    color: var(--ink-dim);
    flex: none;
  }

  details[open] summary::after { content: "\2212"; }
  details p { margin: 12px 0 0; color: var(--ink-muted); font-size: 15px; }

  /* ---------- footer ---------- */
  footer {
    border-top: 1px solid var(--line);
    padding: 34px 0 46px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--ink-muted);
  }

  footer nav { display: flex; flex-wrap: wrap; gap: 10px 20px; }
  footer a { text-decoration: none; }
  footer a:hover { color: var(--ink); }

  .tg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 15px;
    text-decoration: none;
    transition: border-color 140ms ease;
  }

  .tg:hover { border-color: var(--accent-line); color: var(--ink); }
  .tg svg { width: 15px; height: 15px; flex: none; }

  /* ---------- multi-page chrome ----------
     The site grew from one scrolling page into five per language, so the header gained
     real navigation and the language switch became links to the twin URL rather than a
     control that rewrites the page in place. Search engines can only index a language
     that has an address of its own. */

  .skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent);
    color: #fff;
    padding: 10px 16px;
    z-index: 10;
  }

  .skip:focus { left: 0; }

  a.wordmark { text-decoration: none; }

  .sitenav {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 2vw, 22px);
    font-size: 14px;
  }

  .sitenav a {
    color: var(--ink-muted);
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
  }

  .sitenav a:hover { color: var(--ink); }

  .sitenav a[aria-current="page"] {
    color: var(--ink);
    border-bottom-color: var(--accent);
  }

  .lang a {
    color: var(--ink-muted);
    text-decoration: none;
    padding: 6px 12px;
    font: inherit;
    font-size: 13px;
    letter-spacing: 0.06em;
  }

  .lang a[aria-current="true"] {
    background: var(--accent-soft);
    color: var(--ink);
  }

  .hero.compact { text-align: left; padding-bottom: clamp(16px, 3vw, 30px); }
  .hero.compact .lede { margin-left: 0; }

  /* ---------- hero gallery ----------
     Without JavaScript every screenshot renders in place with its caption, which is also
     what a crawler reads. The script folds that stack into one frame. */

  .shotitem { margin: 0; }
  .shotitem + .shotitem { margin-top: 26px; }

  .shotitem img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0 0 14px 14px;
    transition: opacity 180ms ease;
  }

  .shotitem figcaption {
    color: var(--ink-muted);
    font-size: 14px;
    margin-top: 12px;
    text-align: center;
  }

  .js .shotitem + .shotitem { margin-top: 0; }
  .js .shotitem[hidden] { display: none; }
  .js .shotitem figcaption { display: none; }
  .js .shotitem.swapping img { opacity: 0; }

  @media (prefers-reduced-motion: reduce) {
    .shotitem img { transition: none; }
  }

  /* ---------- cards that are links ---------- */

  a.linkcard { text-decoration: none; display: block; }
  a.linkcard:hover { background: var(--panel-high); }
  a.linkcard h3 { color: var(--accent); }

  /* ---------- question and answer ----------
     Written out rather than folded into a disclosure widget: an answer engine quotes
     what it can read, and a reader looking for one fact should not have to open six
     things to find it. */

  .qa { margin: 0 0 30px; max-width: var(--measure); }

  .qa h2 {
    font-size: clamp(18px, 2.4vw, 22px);
    margin: 0 0 8px;
  }

  .qa p { margin: 0; color: var(--ink-muted); }

  footer .seller {
    display: block;
    color: var(--ink-dim);
    font-size: 12px;
    margin-top: 6px;
    max-width: 42ch;
  }

  /* The wordmark carries the application's own icon rather than a coloured square, so
     the tab, the taskbar and the header all show one thing. */
  .wordmark img.glyph {
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  /* The checksum sits under its own button rather than in a footnote: it is only useful
     at the moment somebody is deciding whether to trust an unsigned download. */
  .dl .sum {
    margin: 12px 0 0;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.5;
    color: var(--ink-dim);
    word-break: break-all;
  }

  .dl .sum code { font: inherit; color: inherit; }