/* The product page and the purchase page, in Duvitech's look (duvitech-web, src/index.css): Inter,
   white and slate surfaces, Duvitech blue for what you press, navy for the footer and the privacy band,
   green for what is available and orange for what is coming. Inter is named, not fetched: a visitor's
   address goes to no font host, and a machine without Inter shows Segoe UI or its own system face. */
:root {
  --bg: #ffffff;
  --card: #ffffff;
  --surface: #f6f8fb;
  --surface-alt: #eef2f7;
  --line: #e2e8f0;
  --ink: #1e293b;
  --heading: #0f172a;
  --muted: #64748b;
  --primary: #2563eb; /* links */
  --primary-dark: #1d4ed8;
  --primary-light: #dbeafe;
  --button: #2563eb; /* white text on it: 5.2:1 */
  --button-hover: #1d4ed8;
  --accent-soft: #fff7ed;
  --accent-ink: #c2410c;
  --ok: #15803d;
  --ok-soft: #dcfce7;
  --dark: #0b1220;
  --glow: rgba(37, 99, 235, 0.12);
  --radius-sm: 8px;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Duvitech's navy, from its hero and footer. */
    --bg: #0b1220;
    --card: #111a2e;
    --surface: #111a2e;
    --surface-alt: #16213a;
    --line: #1e293b;
    --ink: #cbd5e1;
    --heading: #f8fafc;
    --muted: #94a3b8;
    --primary: #60a5fa;
    --primary-dark: #93c5fd;
    --primary-light: rgba(59, 130, 246, 0.16);
    --accent-soft: rgba(249, 115, 22, 0.14);
    --accent-ink: #fdba74;
    --ok: #4ade80;
    --ok-soft: rgba(34, 197, 94, 0.14);
    --dark: #070c16;
    --glow: rgba(59, 130, 246, 0.16);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* Header, content, footer: the content takes what is left, so a short page -- a purchase we cannot find,
     a support page with nothing wrong -- still ends with the footer at the bottom of the window. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: radial-gradient(1200px 520px at 80% -8%, var(--glow), transparent 60%) no-repeat, var(--bg);
  font: 16px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body > main { flex: 1 0 auto; }
h1, h2, h3 { color: var(--heading); line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; }
a { color: var(--primary); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--primary-dark); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
section[id] { scroll-margin-top: 76px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header: sticky and frosted, as Duvitech's is. */
header.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 68px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--heading); }
.brand:hover { color: var(--heading); }
/* The app icon itself (icon.svg: the glyph on its Duvitech-blue tile). */
.brand .mark { width: 32px; height: 32px; display: block; flex-shrink: 0; border-radius: 7px; box-shadow: var(--shadow-sm); }
nav { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
nav a { color: var(--ink); font-weight: 500; font-size: 15px; padding: 8px 12px; border-radius: var(--radius-sm); }
nav a:hover { color: var(--primary); background: var(--primary-light); }
nav a.nav-cta { background: var(--button); color: #ffffff; margin-left: 6px; }
nav a.nav-cta:hover { background: var(--button-hover); color: #ffffff; }
nav a[aria-current="page"] { color: var(--primary-dark); background: var(--primary-light); }
/* The way back to the landing page, first in the nav of every page that is not it, and kept apart from the
   links that only move about within the page. */
nav a.nav-home { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
nav a.nav-home svg { width: 15px; height: 15px; flex-shrink: 0; }
nav a.nav-home:hover { color: var(--primary); }
nav .nav-rule { width: 1px; height: 18px; background: var(--line); margin: 0 8px 0 4px; flex-shrink: 0; }

/* Sections are full-width bands; their content sits in a .wrap inside. */
section { padding: 80px 0; border-top: 1px solid var(--line); }
.section-head { max-width: 760px; margin-bottom: 40px; }
.kicker { display: block; color: var(--primary); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 12px; letter-spacing: -0.02em; }
.sub { color: var(--muted); margin: 0; font-size: 18px; max-width: 760px; }

/* Hero */
section.hero { border-top: 0; padding: 64px 0 56px; }
.hero-grid { display: grid; gap: 56px; grid-template-columns: 1fr 1fr; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
  background: var(--primary-light); color: var(--primary-dark); font-weight: 600; font-size: 13px;
}
.hero h1 { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.06; margin: 0 0 20px; letter-spacing: -0.03em; font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--primary); }
.hero p.lead { font-size: 19px; color: var(--muted); margin: 0 0 30px; max-width: 560px; }

/* Buttons */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0 8px 8px 0;
  padding: 13px 24px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: var(--button); color: #ffffff; font-weight: 600; font-size: 15.5px; box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cta:hover { background: var(--button-hover); color: #ffffff; transform: translateY(-1px); }
.cta svg { width: 18px; height: 18px; }
.cta.secondary { background: transparent; color: var(--heading); border-color: var(--line); box-shadow: none; }
.cta.secondary:hover { background: transparent; border-color: var(--primary); color: var(--primary); }
.cta[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }
button.cta { font: inherit; font-weight: 600; cursor: pointer; }
button.cta:disabled { opacity: 0.6; cursor: default; transform: none; }

.fine { font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.fine a { color: var(--muted); text-decoration: underline; }
.fine a:hover { color: var(--primary); }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }

/* The app, drawn: a window with the sidebar and a chat answer. An illustration, not a screenshot. */
.window { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.window-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.window-bar .dots { display: flex; gap: 6px; }
.window-bar .dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.window-bar .title { font-weight: 600; color: var(--heading); display: flex; align-items: center; gap: 6px; }
.window-bar .title img { width: 16px; height: 16px; border-radius: 4px; }
.window-bar .lib { margin-left: auto; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.window-body { display: grid; grid-template-columns: 150px 1fr; }
.window-side { background: var(--surface); border-right: 1px solid var(--line); padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.window-side span { padding: 7px 10px; border-radius: 7px; color: var(--muted); }
.window-side span.on { background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }
.window-side .queue { margin-top: auto; padding-top: 16px; font-size: 11.5px; line-height: 1.5; }
.window-main { padding: 18px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; min-width: 0; }
.bubble { align-self: flex-end; max-width: 88%; background: var(--button); color: #ffffff; padding: 10px 14px; border-radius: 14px 14px 4px 14px; line-height: 1.5; }
.answer { color: var(--ink); line-height: 1.65; margin: 0; }
.chip { display: inline-block; font: 700 11px/1 var(--font); padding: 3px 6px; border-radius: 6px; background: var(--primary-light); color: var(--primary-dark); vertical-align: 1px; }
.sources { display: grid; gap: 8px; }
.source { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; min-width: 0; }
.source b { color: var(--heading); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source .page { margin-left: auto; color: var(--primary); font-weight: 600; white-space: nowrap; }
.local { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.dot-ok { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); flex-shrink: 0; }
.caption { display: grid; font-size: 13px; line-height: 1.5; min-height: 3em; color: var(--muted); margin: 12px 4px 0; text-align: center; }
.caption-line { grid-area: 1 / 1; }

/* The examples the drawn window plays: typed, worked on, answered. Drawn in HTML, not recorded, so they are
   sharp at any size and follow the theme. */
.demo .window-main { min-height: 430px; }
/* Every example is drawn finished and hidden in the same grid cell as the one playing, so the window is always as
   tall as the tallest of them and the page never moves as an example types, answers or changes. */
.demo-stage { display: grid; flex: 1; min-width: 0; }
.demo-view { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.spacer { visibility: hidden; pointer-events: none; }
.demo-log { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.composer {
  display: flex; align-items: center; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); color: var(--heading); font-size: 13.5px; line-height: 1.4;
}
.composer.idle::before { content: attr(data-placeholder); color: var(--muted); }
.caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; background: var(--primary); animation: kf-blink 1s steps(1) infinite; }
.stream-cursor { display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--primary); animation: kf-blink 1s steps(1) infinite; }
@keyframes kf-blink { 50% { opacity: 0; } }
.working { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); }
.working span { margin-right: 4px; }
.working i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: kf-hop 1s ease-in-out infinite; }
.working i:nth-of-type(2) { animation-delay: 0.15s; }
.working i:nth-of-type(3) { animation-delay: 0.3s; }
@keyframes kf-hop { 0%, 70%, 100% { transform: translateY(0); opacity: 0.45; } 35% { transform: translateY(-4px); opacity: 1; } }
.in { animation: kf-rise 0.35s ease both; }
@keyframes kf-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.search-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.searchbox {
  flex: 1; min-width: 170px; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--heading); font-size: 13.5px;
}
.searchbox svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.toggle b { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: var(--button); color: #ffffff; font-size: 10px; }
.hit { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; }
.hit-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.hit-head b { color: var(--heading); font-weight: 600; }
.hit .cat { padding: 2px 8px; border-radius: 999px; background: var(--primary-light); color: var(--primary-dark); font-size: 11px; font-weight: 600; white-space: nowrap; }
.hit .page { margin-left: auto; color: var(--primary); font-weight: 600; white-space: nowrap; }
.hit p { margin: 0; color: var(--muted); line-height: 1.5; }
.hit mark { padding: 0 2px; border-radius: 3px; background: var(--accent-soft); color: var(--heading); }
.demo-note { font-size: 12px; color: var(--muted); }
.demo-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.demo-tabs button {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted);
  font: 600 13px/1 var(--font); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.demo-tabs button:hover { color: var(--primary); border-color: var(--primary); }
.demo-tabs button[aria-pressed="true"] { color: var(--primary-dark); border-color: var(--primary); background: var(--primary-light); }
.demo-tabs button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Short facts under the hero */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.fact { display: flex; gap: 12px; align-items: flex-start; }
.fact strong { display: block; color: var(--heading); font-size: 15px; }
.fact span { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Icons: 24-unit line drawings in a tinted tile. */
.icon { width: 44px; height: 44px; border-radius: 11px; background: var(--primary-light); color: var(--primary-dark); display: grid; place-items: center; flex-shrink: 0; margin-bottom: 16px; }
.icon svg { width: 22px; height: 22px; }
.icon.sm { width: 36px; height: 36px; border-radius: 9px; margin: 0; }
.icon.sm svg { width: 18px; height: 18px; }

/* Feature cards */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--primary-light); }
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }

/* How it works */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); counter-reset: step; }
.steps li { position: relative; padding-top: 72px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 24px; left: 24px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--button); color: #ffffff; font-weight: 700; font-size: 15px;
}
.steps h3 { margin: 0 0 8px; font-size: 18px; }
.steps p { margin: 0; color: var(--muted); font-size: 15px; }

/* Editions */
.editions { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: stretch; }
.edition { display: flex; flex-direction: column; gap: 14px; }
.edition.featured { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow); }
/* The name, then its state on a line of its own: beside the name, "Home-Lab Server" pushed the pill onto a second
   line on some cards and not others, and the cards' prices no longer lined up. */
.edition h3 { margin: 0; font-size: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.edition h3 .pill { font-size: 11.5px; }
/* Two tags on one line -- the state, and an early-adopter price -- never wrapping, so the price under them
   sits level with the other cards' whatever the card's width. */
.edition h3 .pills { display: flex; flex-wrap: nowrap; gap: 6px; max-width: 100%; }
.edition .price { font-size: 34px; font-weight: 800; color: var(--heading); letter-spacing: -0.02em; line-height: 1; }
/* What the amount buys, under it: "once, for 2 computers" reads badly wrapped mid-phrase beside it. */
.edition .price small { display: block; font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 6px; }
.edition .price.soon { font-size: 20px; font-weight: 700; color: var(--muted); line-height: 1.3; }
.edition p { margin: 0; color: var(--muted); font-size: 15px; }
.edition .cta { margin: 0; width: 100%; }
/* The foot of every card, held at the bottom: a primary button, a one-line caption under it, and a second
   slot the same height as a button (Buy, or Notify me, or nothing). The three rows have fixed heights, so
   the primary buttons sit on one line across the cards and the second buttons on another, however long the
   lists above them are. Whatever a card's state, the slots stay; only what is in them changes. */
.edition-act { margin-top: auto; padding-top: 8px; display: grid; gap: 8px; align-content: end; }
.edition-act > .cta { min-height: 54px; }
.edition-act .fine { margin: 0; min-height: 20px; font-size: 13px; line-height: 20px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edition-act .second { min-height: 54px; display: grid; gap: 8px; align-content: start; }
.edition-act .second > .cta { min-height: 54px; }
.edition-act .second:empty { visibility: hidden; }
.edition-act [data-said]:empty { display: none; }
/* Adding desktops to a key someone has: one row under the tiles, shown once the price is set. */
.add-clients { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.add-clients > div { flex: 1 1 320px; display: grid; gap: 2px; }
.add-clients .cta { width: auto; margin: 0; }
.add-clients .notify { flex: 1 1 360px; }
.add-clients .notify input[name="key"] { flex: 2 1 220px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; }
.add-clients .notify input[type="number"] { flex: 0 0 72px; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px; }
.add-clients .fine { margin: 0; }
.add-clients [data-clients-said]:empty { display: none; }
/* Leaving an address: the field and its button on one line, wrapping when the card is narrow. */
.notify { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.notify input[type="email"], .notify input[name="key"] {
  flex: 1 1 150px; min-width: 0; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px;
}
.notify input[type="email"]:focus, .notify input[name="key"]:focus, .notify input[type="number"]:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }
.notify .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
ul.check { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 14.5px; }
ul.check li { position: relative; padding-left: 26px; line-height: 1.5; }
ul.check li::before { content: "✓"; position: absolute; left: 2px; top: 0; color: var(--ok); font-weight: 800; }
ul.check.planned li::before { content: "→"; color: var(--accent-ink); font-weight: 700; }
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  text-transform: none; letter-spacing: 0; background: var(--primary-light); color: var(--primary-dark); white-space: nowrap;
}
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.beta { background: var(--accent-soft); color: var(--accent-ink); }
.pill.muted { background: var(--surface-alt); color: var(--muted); }
.note { margin-top: 20px; font-size: 14px; color: var(--muted); }

/* Buying, shown only when the license service sells online */
.buy { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.buy h3 { margin: 0 0 6px; font-size: 20px; }
.buy p { margin: 0; color: var(--muted); font-size: 15px; max-width: 640px; }
.buy .price { color: var(--primary); margin-left: 10px; }

/* The privacy band: Duvitech's navy in both themes. */
section.band { background: var(--dark); color: rgba(255, 255, 255, 0.78); border-top: 0; }
section.band h2, section.band h3 { color: #ffffff; }
section.band .kicker { color: #93c5fd; }
section.band .sub { color: rgba(255, 255, 255, 0.72); }
section.band a { color: #93c5fd; text-decoration: underline; }
section.band a:hover { color: #ffffff; }
.band-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tile { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); padding: 24px; background: rgba(255, 255, 255, 0.03); }
.tile h3 { margin: 0 0 8px; font-size: 17px; }
.tile p { margin: 0; font-size: 15px; line-height: 1.6; }
.band .icon { background: rgba(96, 165, 250, 0.16); color: #93c5fd; }
.band .fine { color: rgba(255, 255, 255, 0.6); margin-top: 28px; }
.band .fine a { color: rgba(255, 255, 255, 0.85); }

/* Requirements */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 0; }
.specs > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.specs dt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.specs dd { margin: 6px 0 0; color: var(--heading); font-weight: 500; font-size: 15px; line-height: 1.5; }
.specs dd span { display: block; color: var(--muted); font-weight: 400; font-size: 14px; margin-top: 2px; }

/* Questions */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 20px; transition: border-color 0.15s ease; }
.faq details[open] { border-color: var(--primary-light); box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; list-style: none; padding: 17px 32px 17px 0; font-weight: 600; color: var(--heading); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--muted); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 18px; color: var(--muted); font-size: 15.5px; }

/* The download */
.download-card {
  text-align: center; padding: 56px 24px; border-radius: 22px; border: 1px solid var(--line);
  background: radial-gradient(640px 260px at 50% 0%, var(--glow), transparent 70%), var(--surface);
}
.download-card h2 { margin-bottom: 12px; }
.download-card .sub { margin: 0 auto 28px; }
.download-card .cta { font-size: 16.5px; padding: 15px 28px; margin: 0; }
.download-card .fine { max-width: 640px; margin: 16px auto 0; }
.trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 14px; color: var(--muted); }
.trust span { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { width: 16px; height: 16px; color: var(--ok); }

/* The pages that are not the landing page -- support, the purchase page -- open the way one of its sections
   opens: the same kicker, the same measure, the same left edge as the brand above and the footer below. Their
   content is one column, because a form and a list read badly the full width of the page. */
section.page-head { border-top: 0; padding: 56px 0 0; }
section.page-head h1 { font-size: clamp(30px, 4.2vw, 42px); margin: 0 0 14px; letter-spacing: -0.025em; }
section.page-body { border-top: 0; padding: 28px 0 72px; }
.column { max-width: 800px; }
/* A section within a page is a block of its content, not a band of the site -- unless it is a panel, which
   brings its own. */
.page-body section:not(.panel) { padding: 0; border-top: 0; }
.page-body .column > * + * { margin-top: 20px; }
.page-body h2 { font-size: 20px; margin: 0 0 8px; }
.page-body .panel p { margin: 0 0 12px; color: var(--muted); }
.page-body .panel .cta { margin: 0; }
.page-body ol { padding-left: 20px; margin: 0; color: var(--muted); }
.page-body ol li { margin: 6px 0; }
.page-body ol strong { color: var(--heading); }
/* The parts of a page, as the pills the landing page picks its examples with. */
.page-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.page-nav a {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  font-weight: 600; font-size: 14px; color: var(--ink);
}
.page-nav a:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }

/* The purchase page */
.label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 8px; }
.key-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.key-row .cta { margin: 0; }
.key {
  font: 600 clamp(16px, 3.4vw, 22px)/1.3 var(--mono); color: var(--heading); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; letter-spacing: 0.04em;
  overflow-wrap: anywhere; user-select: all;
}

/* The support page: the forum, the known issues and the bug report form */
.form { display: grid; gap: 14px; }
/* A label, then its field under it: block, not grid, so "optional" stays on the label's own line. */
.form label { display: block; font-weight: 600; font-size: 14px; color: var(--heading); }
.form label > input, .form label > textarea { margin-top: 6px; }
.form .opt { font-weight: 400; color: var(--muted); font-size: 13px; }
.form input, .form textarea {
  width: 100%; font: inherit; font-size: 15px; font-weight: 400; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px;
}
.form textarea { resize: vertical; min-height: 64px; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }
.form .row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.form .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .cta { justify-self: start; }
/* Known issues: one ruled list, not a stack of cards inside a card. The number leads a column of its own, so
   the titles line up and a long one wraps under itself instead of breaking the row apart; when the issue last
   changed ends the title's first line. */
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.panel-head .count { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
ul.issues { list-style: none; padding: 0; margin: 4px 0 0; }
ul.issues li {
  display: grid; grid-template-columns: 3rem 1fr auto; gap: 2px 14px; align-items: baseline;
  padding: 13px 0; border-top: 1px solid var(--line);
}
ul.issues .ref { font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
ul.issues .title { font-size: 15px; line-height: 1.5; color: var(--heading); }
ul.issues .when { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) {
  /* Narrow: when it changed goes under its title rather than squeezing it. */
  ul.issues li { grid-template-columns: 2.75rem 1fr; }
  ul.issues .when { grid-column: 2; }
}
@media (max-width: 760px) {
  .form .row { grid-template-columns: 1fr; }
}

/* Footer: Duvitech's navy band. */
.site-footer { background: var(--dark); color: rgba(255, 255, 255, 0.72); margin-top: 80px; }
.footer-inner { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-block: 32px 40px; font-size: 14px; }
.site-footer a { color: rgba(255, 255, 255, 0.85); }
.site-footer a:hover { color: #ffffff; }
.site-footer strong { color: #ffffff; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
  section { padding: 56px 0; }
  section.hero { padding-top: 36px; }
  .wrap { padding: 0 16px; }
  /* One row that scrolls sideways, so the sticky header stays one line tall on a phone. */
  .top-inner { flex-wrap: nowrap; min-height: 60px; gap: 12px; }
  .brand { flex-shrink: 0; font-size: 16px; }
  nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  nav::-webkit-scrollbar { display: none; }
  nav a { padding: 6px 8px; font-size: 14px; white-space: nowrap; }
  .hero p.lead { font-size: 17px; }
  .facts { margin-top: 40px; }
}
@media (max-width: 520px) {
  /* The drawn window loses its sidebar before its answer gets cramped. */
  .window-body { grid-template-columns: 1fr; }
  .window-side { display: none; }
  .window-bar .lib { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html { scroll-behavior: auto; }
  .caret, .stream-cursor, .working i, .in { animation: none !important; }
}

/* Who it is for: the heading beside the list, not above it. */
.who { padding: 56px 0; }
.who-grid { display: grid; gap: 32px 56px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.who h2 { font-size: clamp(22px, 2.6vw, 30px); }
.who-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.who-list li { padding-left: 18px; border-left: 3px solid var(--primary-light); color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.who-list strong { color: var(--heading); }

/* The feature cards in two groups: what every copy has, and what Pro adds. */
.group-head { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 15px; font-weight: 700; color: var(--heading); text-transform: uppercase; letter-spacing: 0.06em; }
.group-head + .grid { margin-bottom: 44px; }
.group-head + .grid:last-child { margin-bottom: 0; }
.card h3 .pill { margin-left: 8px; vertical-align: 2px; }

/* The Research Assistant: the case for the integrity check beside a drawn Integrity tab. */
.research-grid { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.research-list { margin-top: 26px; font-size: 15px; }
.research-list strong { color: var(--heading); }
.research-foot { margin: 26px 0 0; color: var(--muted); font-size: 15px; }
.integrity { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.integrity-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.integrity-head b { display: block; color: var(--heading); font-size: 14.5px; }
.integrity-head span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.integrity-head .score { text-align: right; }
.integrity-head .score b { font-size: 26px; font-weight: 800; color: var(--ok); letter-spacing: -0.02em; }
.claims { list-style: none; margin: 0; padding: 10px 14px; display: grid; gap: 8px; }
.claims li { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13.5px; }
.claims p { margin: 0; color: var(--heading); line-height: 1.5; }
.claims small { grid-column: 2; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.claims .verdict { display: inline-block; margin-top: 2px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--surface-alt); color: var(--muted); }
.claims li.ok .verdict { background: var(--ok-soft); color: var(--ok); }
.claims li.bad .verdict { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.claims li.warn .verdict { background: var(--accent-soft); color: var(--accent-ink); }
.claims li.bad { border-color: rgba(220, 38, 38, 0.35); }
.claims li.warn { border-color: rgba(194, 65, 12, 0.35); }
@media (prefers-color-scheme: dark) { .claims li.bad .verdict { background: rgba(248, 113, 113, 0.16); color: #fca5a5; } }
.integrity figcaption { padding: 12px 18px 16px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); }
.demo-claims { padding: 0; }
.demo-claims li { padding: 8px 10px; font-size: 13px; }

/* The comparison table under the edition cards. Narrow, it scrolls sideways rather than squeezing. */
.compare-wrap { margin-top: 36px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; }
.compare caption { text-align: left; padding: 16px 20px 8px; font-weight: 700; color: var(--heading); font-size: 15px; }
.compare th, .compare td { padding: 11px 16px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { border-top: 0; background: var(--surface); color: var(--heading); font-weight: 700; }
.compare thead th:not(:first-child) { text-align: center; }
.compare tbody th { font-weight: 500; color: var(--ink); width: 40%; }
.compare td { text-align: center; color: var(--muted); }
.compare td.y { color: var(--ok); font-weight: 700; }
.compare td.n { color: var(--muted); opacity: 0.55; }
.compare tbody tr:first-child td { font-weight: 700; color: var(--heading); }

/* The server section's foot: the installer, or where to be told about it. */
.server-foot { margin-top: 28px; text-align: center; }

/* The press kit: facts in a two-column list, the icon and screenshots as downloadable assets, and the
   description with a Copy button, in the one-column page layout the support page uses. */
.press-facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; font-size: 15px; }
.press-facts dt { color: var(--muted); font-weight: 500; }
.press-facts dd { margin: 0; color: var(--heading); }
.press-facts dd .fine { display: inline; margin: 0 0 0 6px; }
.press-quote { margin: 0 0 12px; padding: 16px 18px; border-left: 3px solid var(--primary); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--heading); font-size: 16px; line-height: 1.6; }
.press-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.press-actions .cta { margin: 0; }
.press-actions [role="status"]:empty { display: none; }
.assets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; }
.asset { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-align: center; }
.asset img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 10px; }
.asset .icon-preview { width: 96px; height: 96px; }
.asset b { color: var(--heading); font-size: 14px; }
.asset span { color: var(--muted); font-size: 13px; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.shot { display: grid; gap: 8px; }
.shot a { display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.phrases { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.phrases li { padding-left: 18px; border-left: 3px solid var(--primary-light); color: var(--heading); font-size: 15px; }
.phrases li.no { border-left-color: var(--accent-soft); color: var(--muted); }
@media (max-width: 560px) { .press-facts { grid-template-columns: 1fr; gap: 2px 0; } .press-facts dd { margin-bottom: 8px; } }

/* The sell sheet: one page to read on screen, and one sheet when printed to PDF. */
.sheet h1 { font-size: clamp(28px, 4vw, 38px); margin: 0 0 6px; letter-spacing: -0.025em; }
.sheet .tagline { font-size: 19px; color: var(--primary-dark); font-weight: 600; margin: 0 0 18px; }
.sheet h2 { font-size: 20px; margin: 28px 0 8px; }
.sheet p, .sheet li { color: var(--ink); font-size: 15px; line-height: 1.6; }
.sheet ul { padding-left: 20px; margin: 0; }
.sheet li { margin: 5px 0; }
.sheet li strong, .sheet p strong { color: var(--heading); }
.sheet table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 8px; }
.sheet th, .sheet td { text-align: left; vertical-align: top; padding: 9px 12px; border-top: 1px solid var(--line); }
.sheet thead th { border-top: 0; background: var(--surface); color: var(--heading); }
.sheet tbody th { color: var(--heading); font-weight: 600; white-space: nowrap; width: 28%; }
.sheet .sheet-foot { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
@media print {
  header.top, footer.site-footer, .no-print { display: none !important; }
  body { background: #ffffff; color: #1e293b; font-size: 11.5pt; }
  section.page-head, section.page-body { padding: 0; }
  .column { max-width: none; }
  .sheet h2 { break-after: avoid; }
  .sheet table, .sheet li { break-inside: avoid; }
  a { color: inherit; }
  @page { margin: 16mm; }
}

@media (max-width: 900px) {
  .who-grid, .research-grid { grid-template-columns: 1fr; }
}