/* FlexoPrep site. The look of the FlexoPrep film ("Light Table"): true black
   ground, the product's own blue for what to press, the process inks only
   where the subject is ink. Fonts are the systems' own (Bahnschrift on
   Windows, DIN Alternate on the Mac), nothing loaded from elsewhere. */

:root {
  --ground: #000;
  --surface: #0f1011;
  --raised: #17181a;
  --line: #26282b;
  --text: #f0f0f0;
  --muted: #a6a9ad;
  --link: #2d8cff;
  --button: #1f6fe0;
  --button-hover: #2a7bf0;
  --cyan: #00aeef;
  --magenta: #ec008c;
  --yellow: #ffde00;
  --black: #231f20;
  --pantone: #cb333b;
  --head: "Bahnschrift", "DIN Alternate", "DIN Next", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1200px;
  --gutter: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 17px/1.6 var(--body);
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
/* the sticky header must not cover what a link scrolls to */
[id] { scroll-margin-top: 80px; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 10;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: inline-flex; flex-direction: column; gap: 4px; color: var(--text); font: 600 22px/1 var(--head); letter-spacing: 0.01em; }
.brand:hover { text-decoration: none; }
/* C M Y K in one white outline: the K is black, as on a sheet, and shows on the black ground */
.inks { display: flex; box-sizing: content-box; height: 3px; width: calc(100% - 2px); border: 1px solid #fff; }
.inks i { flex: 1; }
.inks i:nth-child(1) { background: var(--cyan); }
.inks i:nth-child(2) { background: var(--magenta); }
.inks i:nth-child(3) { background: var(--yellow); }
.inks i:nth-child(4) { background: #000; }
.nav { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.nav a { color: var(--muted); font-size: 15px; padding: 10px 12px; border-radius: 8px; }
.nav a:hover { color: var(--text); background: var(--raised); text-decoration: none; }
/* The languages behind a globe: a click opens them, each by its own name */
.langs { position: relative; }
.langs summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; color: var(--muted); cursor: pointer; list-style: none; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary:hover, .langs[open] summary { color: var(--text); background: var(--raised); }
.langs-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px; padding: 4px; display: grid; gap: 2px; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.nav .langs-menu a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 0 12px; color: var(--text); }
.nav .langs-menu a:hover { background: #26282c; }
.langs-menu a[aria-current]::after { content: "✓"; color: var(--muted); }

/* The two programs as tabs: a page each, the open one lit */
.apps { display: flex; gap: 4px; padding: 4px; margin-left: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.apps a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 8px; color: var(--muted); font: 600 15px/1 var(--body); }
.apps a:hover { color: var(--text); text-decoration: none; }
.apps a[aria-current="page"] { color: var(--text); background: #26282c; }
@media (max-width: 760px) {
  /* Pricing stays in sight: the hero has no button of its own for it (3.11.2026). */
  .nav > a { padding: 10px 8px; min-height: 48px; display: inline-flex; align-items: center; }
  .langs summary { width: 48px; height: 48px; }
  .nav .langs-menu a { min-height: 48px; }
  .top .wrap { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; row-gap: 12px; }
  .apps { order: 3; width: 100%; margin-left: 0; }
  .apps a { flex: 1; justify-content: center; }
  [id] { scroll-margin-top: 136px; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 10px;
  font: 600 16px/1 var(--body); color: #fff; background: var(--button);
  border: 1px solid transparent; transition: background 0.15s ease, transform 0.12s ease-out;
}
.btn:hover { background: var(--button-hover); text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { background: var(--raised); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Type */
h1, h2, h3 { font-family: var(--head); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.08; }
.hero h1 { font-size: clamp(34px, 4.2vw, 54px); }
.hero h1 .blue { display: block; }
h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; }
h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 62ch; margin: 16px 0 0; }
.eyebrow { font: 600 13px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.blue { color: var(--link); }

/* Hero */
.hero { padding: 96px 0 64px; border-bottom: 1px solid var(--line); }
/* The programs under their heading (the owner, 3.11.2026): raster, then vector. */
.hero .programs { margin: 64px 0 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; }
.programs + .products { margin-top: 24px; }
.product {
  display: flex; flex-direction: column; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  transition: border-color 0.15s ease;
}
.product:hover { border-color: #3a3d42; text-decoration: none; }
.product .shot > img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: #000; }
.product .head { padding: 24px 24px 16px; display: grid; gap: 8px; }
.product .meta { padding: 24px; display: grid; gap: 8px; }
.product .app { font: 600 13px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.product .name { font: 600 28px/1.1 var(--head); }
.product .desc { color: var(--muted); }
.product .more { color: var(--link); font-weight: 600; margin-top: 8px; }
@media (max-width: 820px) { .products { grid-template-columns: 1fr; } }

/* Sections */
.section { padding: 112px 0; border-bottom: 1px solid var(--line); }
.section-head { max-width: 760px; }

/* The film */
.film { margin-top: 48px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #000; }
.film video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.caption { color: var(--muted); font-size: 14px; margin-top: 12px; }

/* Features: a picture and its words */
.features { display: grid; gap: 96px; margin-top: 96px; }
.features.first { margin-top: 0; }
.feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.feature:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.feature:nth-child(even) > :first-child { order: 2; }
.feature .pic { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #000; cursor: zoom-in; transition: border-color 0.15s ease; }
.feature .pic:hover { border-color: #3a3d42; }
.feature .pic img { width: 100%; }
.feature .words p { color: var(--muted); margin: 16px 0 0; }
.feature .words .h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
.tag { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
@media (max-width: 900px) {
  .features { gap: 64px; margin-top: 64px; }
  .features.first { margin-top: 0; }
  .feature, .feature:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }
  .feature:nth-child(even) > :first-child { order: 0; }
}

/* Requirements */
.needs { margin-top: 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.need { border-top: 1px solid var(--line); padding-top: 16px; }
.need b { display: block; font: 600 16px/1.3 var(--head); margin-bottom: 8px; }
.need span { color: var(--muted); font-size: 15px; }

/* FlexoSplit: the inks before and after */
.viewer { margin-top: 56px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
  font: 600 15px/1 var(--body); color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); background: var(--raised); border-color: #4a4e54; }
.tab .chip { width: 14px; height: 14px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.chip.print { background: conic-gradient(var(--cyan) 0 25%, var(--magenta) 0 50%, var(--yellow) 0 75%, #8a8a8a 0); }
.chip.c { background: var(--cyan); } .chip.m { background: var(--magenta); } .chip.y { background: var(--yellow); }
.chip.k { background: #000; } .chip.p { background: var(--pantone); } .chip.s { background: #000; outline: 2px dotted #888; outline-offset: -5px; }
.chip.p403 { background: #8a857c; }
.chip.sm { background: var(--magenta); outline: 2px dotted #888; outline-offset: -5px; }
.chip.sc { background: var(--cyan); outline: 2px dotted #888; outline-offset: -5px; }
/* the photo over the channels: plain words, the one on show underlined */
.photos { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 16px; }
.photo {
  min-height: 44px; padding: 8px 0; font: 600 17px/1.2 var(--head); color: var(--muted);
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.photo:hover { color: var(--text); }
.photo[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--link); }
.photo:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.tabs[hidden], .claim [hidden] { display: none; }

.stage { position: relative; margin-top: 16px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; user-select: none; touch-action: pan-y; }
.stage img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.stage .before { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.stage .split { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--link); pointer-events: none; }
.stage .split::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; background: var(--link); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.stage .split::before {
  content: "\2039\00a0\203a"; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -54%);
  color: #fff; font: 600 20px/1 var(--body); white-space: nowrap;
}
.stage input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.stage .side { position: absolute; top: 16px; padding: 6px 12px; border-radius: 8px; font: 600 14px/1.2 var(--body); background: rgba(0, 0, 0, 0.72); color: #fff; pointer-events: none; }
.stage .side.l { left: 16px; } .stage .side.r { right: 16px; }
.stage:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 3px; }
.reading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 16px; }
.reading .what { color: var(--muted); font-size: 15px; }
.reading .figures { font: 600 17px/1.4 var(--head); font-variant-numeric: tabular-nums; }

.points { margin-top: 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px 48px; }
.point h3 { font-size: 22px; }
.point p { color: var(--muted); margin: 12px 0 0; }

/* Licence and contact */
.licence { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.licence h2 { margin-bottom: 32px; }
.terms { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.terms li { border-top: 1px solid var(--line); padding-top: 16px; }
.terms b { display: block; font: 600 19px/1.3 var(--head); }
.terms span { color: var(--muted); }
.ask { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 32px; }
.ask h3 { margin-bottom: 12px; }
.ask p { color: var(--muted); margin: 0 0 24px; }
.ask .mail { display: block; margin-top: 16px; font-size: 15px; word-break: break-all; }
@media (max-width: 900px) { .licence { grid-template-columns: 1fr; gap: 48px; } }

/* Footer */
.check:empty { display: none; }
.foot { padding: 48px 0 64px; color: var(--muted); font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); }

/* A plain page (the privacy policy) */
.page { padding: 80px 0 96px; }
.page .wrap { max-width: 760px; }
.page h1 { font-size: clamp(32px, 4vw, 44px); max-width: none; }
.page h2 { font-size: 22px; margin-top: 40px; }
.page p, .page li { color: #d6d8db; }
.page ul { padding-left: 24px; }
.page li + li { margin-top: 8px; }
.page .updated { color: var(--muted); font-size: 14px; }

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .hero { padding: 64px 0 48px; }
  .section { padding: 80px 0; }
  .stage .side { top: 8px; font-size: 13px; }
  .stage .side.l { left: 8px; } .stage .side.r { right: 8px; }
  .ask { padding: 24px; }
  .phero { padding: 56px 0 48px; }
}

/* ---- The tools as they sit in the programs ---------------------------------- */

/* Illustrator's toolbar and FlexoSplit's tool buttons: a dark strip, the
   plug-ins' own icons. On the home cards it stands at the right of the
   picture; on a program's page beside the title, with the tools' names. */
.strip { display: flex; flex-direction: column; gap: 2px; padding: 6px; background: #2b2b2b; border: 1px solid #3d3d3d; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.strip::before { content: ""; display: block; width: 18px; height: 3px; margin: 2px auto 6px; border-top: 1px solid #5a5a5a; border-bottom: 1px solid #5a5a5a; }
.strip .t { display: flex; align-items: center; justify-content: center; width: 40px; height: 34px; border-radius: 4px; }
.strip .t img { display: block; width: 33px; height: 27px; }
.strip.ps .t img { width: 18px; height: 18px; }
.product .shot { position: relative; }
.product .shot .strip { position: absolute; top: 12px; right: 12px; }
@media (max-width: 420px) {
  .product .shot .strip { top: 8px; right: 8px; padding: 4px; }
  .product .shot .strip .t { width: 32px; height: 26px; }
  .product .shot .strip .t img { width: 26px; height: 21px; }
  .product .shot .strip.ps .t img { width: 15px; height: 15px; }
}

/* A program's page: its title at the left, its tools at the right */
.phero { padding: 80px 0 72px; border-bottom: 1px solid var(--line); }
.phero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.phero h1 { font-size: clamp(44px, 6vw, 72px); }
.toolset { justify-self: end; width: 100%; max-width: 400px; }
.toolset h2 { font: 600 13px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.toolset ul { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; background: #2b2b2b; border: 1px solid #3d3d3d; border-radius: 12px; }
.toolset li a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px 6px 6px; border-radius: 8px; color: #e8e8e8; font-size: 16px; line-height: 1.3; }
.toolset li a:hover { background: #3a3a3a; text-decoration: none; }
.toolset li a .t { display: flex; align-items: center; justify-content: center; width: 44px; height: 36px; flex: none; }
.toolset li a .t img { width: 38px; height: 31px; }
.toolset.ps li a .t img { width: 20px; height: 20px; }
.toolset li a small { display: block; color: #a8a8a8; font-size: 13px; }
@media (max-width: 900px) {
  .phero .wrap { grid-template-columns: 1fr; }
  .toolset { justify-self: stretch; max-width: none; }
}

/* What a feature is in the program: a tool of the toolbar, a panel */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip-tool, .chip-panel { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px 4px 4px; border-radius: 8px; font-size: 14px; color: #e8e8e8; }
.chip-tool { background: #2b2b2b; border: 1px solid #3d3d3d; }
.chip-tool img { width: 30px; height: 24px; }
.chip-tool.ps img { width: 18px; height: 18px; margin: 0 6px; }
.chip-panel { padding-left: 12px; border: 1px solid var(--line); color: var(--muted); }

/* A tool at work: a still frame that plays under the mouse or on a click, its button says which */
.demo { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; aspect-ratio: 8 / 5; }
.demo[data-demo] { cursor: pointer; }
.demo > svg { display: block; width: 100%; height: 100%; }
.demo-toggle {
  position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.62); cursor: pointer; opacity: 0.75; transition: opacity 0.15s ease;
}
.demo-toggle.left { right: auto; left: 10px; }
.demo-toggle:hover, .demo-toggle:focus-visible { opacity: 1; }
.demo-toggle::before, .demo-toggle::after { content: ""; position: absolute; top: 12px; height: 12px; background: #fff; }
.demo-toggle[data-state="pause"]::before { left: 13px; width: 3px; }
.demo-toggle[data-state="pause"]::after { left: 20px; width: 3px; }
.demo-toggle[data-state="play"]::before { left: 14px; top: 11px; width: 0; height: 0; background: none; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.demo-toggle[data-state="play"]::after { display: none; }

/* The panel beside a tool: a smaller picture that opens in full */
.panel-pic { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 24px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 15px; line-height: 1.4; }
.panel-pic:hover { border-color: #3a3d42; text-decoration: none; color: var(--text); }
.panel-pic img { width: 112px; height: 70px; object-fit: cover; object-position: right center; border-radius: 6px; background: #000; }
.panel-pic b { display: block; color: var(--text); font-weight: 600; }

/* ---- FlexoSplit --------------------------------------------------------------- */

.claim { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.claim p { color: var(--muted); margin: 0 0 16px; }
.claim p.strong { color: var(--text); font-size: 19px; }
@media (max-width: 900px) { .claim { grid-template-columns: 1fr; gap: 16px; } }

.selections { background: #fff; }
.selections .ants { fill: none; stroke: #000; stroke-width: 2.4; stroke-dasharray: 7 6; }
.selections .halo { fill: none; stroke: #fff; stroke-width: 2.4; }
.selections .tag { font: 600 26px var(--body); fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, 0.75); stroke-width: 6px; stroke-linejoin: round; }

.volume { background: #000; aspect-ratio: 4 / 3; }
.volume img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.volume .v-100, .volume .v-200, .volume .v-300 { opacity: 0; }
.vpanel { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: rgba(50, 50, 50, 0.94); border: 1px solid #4a4a4a; border-radius: 8px; color: #e6e6e6; font-size: 14px; }
.vpanel .track { position: relative; height: 4px; border-radius: 2px; background: #5a5a5a; }
.vpanel .v-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 20%; border-radius: 2px; background: #e6e6e6; }
.vpanel .v-knob { position: absolute; top: 50%; left: 20%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #323232; }
.vpanel output { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.demo.volume .demo-toggle { top: 10px; bottom: auto; }

.seam { background: #000; aspect-ratio: 720 / 448; }
.seam img { width: 100%; height: 100%; object-fit: cover; }
/* The join as a scene: the pictures one over another, the ink's name, the word on the mini trap */
.seam.live img { position: absolute; inset: 0; opacity: 0; }
.seam.live .s-print { opacity: 1; }
.s-name { position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: 8px; font: 600 14px/1.2 var(--body); color: #fff; background: rgba(0, 0, 0, 0.72); opacity: 0; }
.s-name:first-of-type { opacity: 1; }
.s-callout { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.s-callout svg { display: block; width: 100%; height: 100%; }
.s-callout path { fill: none; stroke: #000; stroke-width: 2; }
.s-callout span { position: absolute; right: 12px; top: 12%; padding: 6px 12px; border-radius: 8px; font: 600 14px/1.2 var(--body); color: #fff; background: rgba(0, 0, 0, 0.72); }

.keyset { display: grid; gap: 24px; align-content: center; min-height: 240px; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.keys { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 15px; }
kbd { display: inline-block; min-width: 28px; padding: 4px 8px; border: 1px solid #4a4e54; border-bottom-width: 2px; border-radius: 6px; background: #26282c; color: var(--text); font: 600 14px/1.2 var(--body); text-align: center; }

/* ---- Contact form --------------------------------------------------------------- */

.form { display: grid; gap: 16px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.form input, .form select, .form textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #34373c; border-radius: 10px;
  background: #0b0c0d; color: var(--text); font: 400 16px/1.4 var(--body);
}
.form textarea { min-height: 132px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; border-color: transparent; }
.form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; }
.form .btn[disabled] { opacity: 0.6; cursor: progress; }
.form .status { min-height: 24px; margin: 0; font-size: 15px; color: var(--muted); }
.form .status.ok { color: #6fdc8c; }
.form .status.bad { color: #ff8a80; }
@media (max-width: 560px) { .form .row2 { grid-template-columns: 1fr; } }

/* Prices: a card each, cheapest first, its Buy the one blue thing in it;
   the FlexoPrep modules beneath as a list. */
/* the cards share their rows (subgrid): a name on two lines moves no price */
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin-top: 32px; }
.price { grid-row: span 6; display: grid; grid-template-rows: subgrid; row-gap: 8px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.price .for { margin: 0; color: var(--muted); font-size: 14px; }
.price .sum { margin: 8px 0 0; font: 600 40px/1.1 var(--head); font-variant-numeric: tabular-nums; }
.price .per { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.price .what { margin: 0 0 16px; font-size: 15px; line-height: 1.5; }
.price .btn { justify-self: start; }
.tax { margin: 16px 0 0; max-width: 760px; color: var(--muted); font-size: 14px; }
.modules { margin-top: 48px; }
.modules h3 { margin-bottom: 16px; }
.modules ul { margin: 0; padding: 0; list-style: none; }
.modules li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 24px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.modules li:last-child { border-bottom: 1px solid var(--line); }
.modules .m b { display: block; font: 600 17px/1.3 var(--head); }
.modules .m small { color: var(--muted); font-size: 14px; }
.modules .sum { font: 600 19px/1.2 var(--head); font-variant-numeric: tabular-nums; }
.modules .buy { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 600; }
.wrap + .wrap.licence { margin-top: 64px; }
/* On a program's page: its own price and both together; the other program below in a line */
.prices.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modules .m b a { color: var(--text); }
@media (max-width: 900px) {
  .prices, .prices.two { grid-template-columns: 1fr; gap: 16px; }
  .price { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 560px) { .modules li { gap: 8px 16px; } }