/* pokrok cloud - thin orange outlines, no rounding, restrained colour.
 *
 * The same visual language as the product, rebuilt rather than imported: the
 * app's stylesheet is three thousand lines tuned for a control-dense
 * workspace, and a landing page needs about a hundred of them. The tokens
 * below are the product's own values, so the two sit beside each other without
 * looking like different companies.
 *
 * Reading surfaces are set slightly larger and looser than the app - 15px/1.65
 * against 14px/1.5 - following the precedent the product's own documentation
 * site already set.
 */

:root {
  --bg: #ffffff;
  --bg-sunken: #f6f5f3;
  --bg-raised: #ffffff;
  --bg-hover: #f0eeea;
  --fg: #141414;
  --fg-muted: #4a4a4a;
  --fg-faint: #8a8a8a;
  --line: #d9d5cf;
  --line-strong: #b4afa7;
  --accent: #c2410c;
  --accent-hover: #9a3412;
  --accent-bg: #fff4ec;
  --accent-fg: #ffffff;
  --danger: #b42318;
  --warn: #b45309;
  --ok: #15803d;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --t-xs: 11px; --t-sm: 12.5px; --t-md: 15px; --t-lg: 18px; --t-xl: 24px; --t-2xl: 34px;
  --font: ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --page: 1100px;
  --read: 70ch;
}

/* Light is the default, whatever the operating system says.
 *
 * This is a product page: the screenshots and the recordings of the app on it
 * are all captured light, and a dark page wrapped around light footage looks
 * like two different products. The system preference is therefore deliberately
 * NOT honoured here - there is no prefers-color-scheme block - and these
 * values apply only when something explicitly asks for dark by setting
 * data-theme, which nothing on this site currently does. Kept because the
 * palette is correct and a toggle would need nothing more than to set it. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0d0d;
  --bg-sunken: #151515;
  --bg-raised: #151515;
  --bg-hover: #1e1e1e;
  --fg: #ededed;
  --fg-muted: #9c9c9c;
  --fg-faint: #6e6e6e;
  --line: #2c2c2c;
  --line-strong: #454545;
  --accent: #ff7a1a;
  --accent-hover: #ff9247;
  --accent-bg: #241505;
  --accent-fg: #0d0d0d;
  --danger: #f97066;
  --warn: #fdb022;
  --ok: #4ade80;
}

/* Square corners everywhere, enforced. This is the single strongest marker of
 * the product's identity; one rounded card and the page stops looking like it
 * belongs to the same thing. */
*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--t-md)/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  /* Hold the footer at the bottom on a short page. Without this the operator
     sign-in screen ends halfway down with bare ground beneath the footer,
     which reads as a page that failed to finish loading. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
.site-foot { flex-shrink: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; text-wrap: balance; }
h1 { font-size: var(--t-2xl); letter-spacing: -0.01em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
p { margin: 0 0 var(--s4); }
img { max-width: 100%; height: auto; }

.skip {
  position: absolute; left: -9999px;
  background: var(--bg-raised); border: 1px solid var(--accent);
  padding: var(--s2) var(--s3);
}
.skip:focus { left: var(--s4); top: var(--s4); z-index: 50; }

/* ---------------------------------------------------------------- chrome */

.site-head {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: inline-flex; align-items: center; gap: var(--s2); color: var(--fg); font-size: var(--t-lg); }
.brand:hover { text-decoration: none; color: var(--accent); }
.brand .mark { color: var(--accent); }
.site-nav { display: flex; align-items: center; gap: var(--s4); margin-left: auto; flex-wrap: wrap; }
.nav-item { color: var(--fg-muted); font-size: var(--t-sm); }
.nav-item:hover, .nav-item.active { color: var(--accent); text-decoration: none; }
.nav-item.cta {
  border: 1px solid var(--accent); color: var(--accent);
  padding: var(--s1) var(--s3); font-weight: 600;
}
.nav-item.cta:hover { background: var(--accent); color: var(--accent-fg); }

.site-foot {
  border-top: 1px solid var(--line);
  margin-top: var(--s7);
  padding: var(--s6) var(--s5);
  background: var(--bg-sunken);
}
.foot-cols {
  max-width: var(--page); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s5);
}
.foot-cols a { display: block; color: var(--fg-muted); font-size: var(--t-sm); margin-bottom: var(--s1); }
.foot-cols a:hover { color: var(--accent); }
.foot-end { max-width: var(--page); margin: var(--s5) auto 0; }

/* ---------------------------------------------------------------- layout */

.wrap { max-width: var(--page); margin: 0 auto; padding: var(--s6) var(--s5); }
.read { max-width: var(--read); }
.small { font-size: var(--t-sm); }
.faint { color: var(--fg-faint); }
/* An instance close to its memory ceiling, on the instances list. Named for
   what it marks rather than reusing "warn", which this stylesheet defines only
   for badges. */
.usage-hot { color: var(--warn); }
.muted { color: var(--fg-muted); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.center { text-align: center; }

/* ---------------------------------------------------------------- hero */

.hero { max-width: var(--page); margin: 0 auto; padding: var(--s7) var(--s5) var(--s6); }
.hero h1 { max-width: 20ch; }
.hero .lead {
  font-size: var(--t-lg); color: var(--fg-muted);
  max-width: 62ch; margin-top: var(--s4);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
/* The line under the buttons used to be four words and could sit tight against
 * them. It now carries the whole offer, so without this it crowds the buttons
 * and reads as though it belongs to them. */
.hero-actions + p { margin-top: var(--s3); }

/* A heading with its paragraph welded to it. Most sections set the gap inline,
 * which means every new one has to remember to, and the pricing page shows what
 * happens when one does not. An inline margin still wins, so the sections that
 * already say so are unaffected, and in the documentation this collapses
 * against the bottom margin .prose already puts on a heading rather than
 * stacking with it.
 *
 * h2 only. The same rule on h3 would collapse against the var(--s2) that
 * .recipe h3 and .feature h3 set, quietly loosening every recipe and feature
 * card on the way past. */
.wrap h2 + p { margin-top: var(--s3); }


.eyebrow {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--fg-muted); margin-bottom: var(--s3);
}

/* ---------------------------------------------------------------- controls */

button, .btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: var(--t-sm);
  padding: var(--s2) var(--s3);
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line-strong);
  cursor: pointer; white-space: nowrap;
}
button:hover, .btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
button:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; }
.primary { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.primary:hover { background: var(--accent); color: var(--accent-fg); }
.danger { border-color: var(--danger); color: var(--danger); }
.danger:hover { background: var(--danger); color: var(--bg); }
.ghost { border-color: transparent; background: transparent; color: var(--fg-muted); }
.ghost:hover { border-color: var(--line); color: var(--accent); }
.big { padding: var(--s3) var(--s5); font-size: var(--t-md); }
.sm { padding: 2px var(--s2); font-size: var(--t-xs); }

input, select, textarea {
  font: inherit; font-size: var(--t-sm);
  padding: var(--s2);
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line);
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
textarea { resize: vertical; min-height: 72px; font-family: var(--font); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); }

label {
  display: block; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .06em; color: var(--fg-muted); margin-bottom: var(--s1);
}
.field { margin-bottom: var(--s4); }
.field .help { font-size: var(--t-xs); color: var(--fg-faint); margin-top: var(--s1); }
.field .err { font-size: var(--t-xs); color: var(--danger); margin-top: var(--s1); }
.field.bad input { border-color: var(--danger); }
.inline label { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); display: inline; }

/* A field whose value becomes a web address, shown as one so the customer can
 * see what they are choosing before they choose it. */
.addr { display: flex; align-items: stretch; border: 1px solid var(--line); }
.addr input { border: 0; }
.addr .suffix {
  display: flex; align-items: center; padding: 0 var(--s3);
  background: var(--bg-sunken); color: var(--fg-muted);
  font-family: var(--mono); font-size: var(--t-sm); white-space: nowrap;
  border-left: 1px solid var(--line);
}

/* ---------------------------------------------------------------- blocks */

.card {
  border: 1px solid var(--line);
  background: var(--bg-raised);
  padding: var(--s4);
  margin-bottom: var(--s3);
}
.card-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.card-head h3 { flex: 1; min-width: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s3); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s5); }

.badge {
  display: inline-block; font-size: var(--t-xs);
  padding: 1px var(--s2); border: 1px solid var(--line-strong);
  color: var(--fg-muted); white-space: nowrap;
}
.badge.ok { color: var(--ok); border-color: var(--ok); }
.badge.err { color: var(--danger); border-color: var(--danger); }
.badge.warn { color: var(--warn); border-color: var(--warn); }
.badge.accent { color: var(--accent); border-color: var(--accent); }

.notice {
  border: 1px solid var(--warn); color: var(--warn);
  padding: var(--s2) var(--s3); font-size: var(--t-sm); margin-bottom: var(--s3);
}
.notice.err { border-color: var(--danger); color: var(--danger); }
.notice.info { border-color: var(--accent); color: var(--accent); }
.notice.ok { border-color: var(--ok); color: var(--ok); }

.empty {
  border: 1px dashed var(--line-strong);
  padding: var(--s6) var(--s4); text-align: center; color: var(--fg-muted);
}

table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
th {
  text-align: left; font-weight: 400; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted);
  padding: var(--s2); border-bottom: 1px solid var(--line);
}
td { padding: var(--s2); border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.scroll-x { overflow-x: auto; }

code, pre {
  font-family: var(--mono); font-size: 13px;
  background: var(--bg-sunken); border: 1px solid var(--line);
}
code { padding: 1px 5px; }
pre { padding: var(--s3); overflow-x: auto; }
pre code { border: 0; padding: 0; background: none; }

/* ---------------------------------------------------------------- feature grid */

.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s5); }
.feature h3 { margin-bottom: var(--s2); }
.feature p { color: var(--fg-muted); margin: 0; }
.feature .k {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); margin-bottom: var(--s1);
}

/* Numbers that are worth stating plainly, set in tabular figures so a column
 * of them lines up. */
.proof { display: flex; flex-wrap: wrap; gap: var(--s6); margin: var(--s5) 0; }
.proof .n { font-size: var(--t-xl); font-variant-numeric: tabular-nums; }
.proof .l { font-size: var(--t-sm); color: var(--fg-muted); max-width: 22ch; }

/* ---------------------------------------------------------------- pricing */

.price { font-size: 44px; font-weight: 600; font-variant-numeric: tabular-nums; }
.price .per { font-size: var(--t-md); color: var(--fg-muted); font-weight: 400; }
.tick { list-style: none; padding: 0; margin: var(--s4) 0; }
.tick li { padding-left: 22px; position: relative; margin-bottom: var(--s2); color: var(--fg-muted); }
.tick li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); }

/* ---------------------------------------------------------------- shots */

figure { margin: var(--s5) 0; }
figure img { border: 1px solid var(--line); display: block; width: 100%; }
figcaption { font-size: var(--t-sm); color: var(--fg-faint); margin-top: var(--s2); }

/* ---------------------------------------------------------------- docs */

.docs { display: grid; grid-template-columns: 220px 1fr; gap: var(--s6); align-items: start; }
.docs-rail { position: sticky; top: 80px; }
.docs-rail a {
  display: block; padding: var(--s1) var(--s3); color: var(--fg-muted);
  font-size: var(--t-sm); border-left: 2px solid transparent;
}
.docs-rail a:hover { color: var(--accent); text-decoration: none; }
.docs-rail a.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-bg); }
.prose { max-width: var(--read); }
.prose h2 { margin: var(--s6) 0 var(--s3); }
.prose h3 { margin: var(--s5) 0 var(--s2); }
.prose ul, .prose ol { padding-left: var(--s5); margin: 0 0 var(--s4); }
.prose li { margin-bottom: var(--s1); }
.prose blockquote {
  margin: 0 0 var(--s4); padding-left: var(--s4);
  border-left: 2px solid var(--accent); color: var(--fg-muted);
}

/* ---------------------------------------------------------------- admin */

/* A short, narrow page - sign in, claim - sits in the middle of what is left
 * rather than clinging to the top. Pinning the footer down stopped the bare
 * ground beneath it, but left the form high with a hole under it; this closes
 * the hole from both sides instead of one.
 *
 * The centring needs main to be a flex column, and main is a plain block
 * everywhere else. Scoped with :has rather than applied globally: making every
 * page's main a flex container would turn every section into a flex item,
 * which changes margin collapsing and is a much broader edit than one narrow
 * page is worth. */
main:has(> .slim) {
  display: flex;
  flex-direction: column;
}

/* The footer's margin sits outside main, so on a centred short page it becomes
 * dead ground that main cannot centre into: the form ends up level with the
 * middle of main while reading as high on the screen. The footer separates
 * itself perfectly well here with its own top border, sunken background and
 * top padding, so on these pages the margin is only doing harm. Scoped to
 * pages that centre, because on a long page the extra gap is wanted. */
main:has(> .slim) + .site-foot {
  margin-top: 0;
}

.slim {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 460px;
  margin: 0 auto;
  padding: var(--s6) var(--s4);
  width: 100%;
}

.admin-head {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line);
}
.admin-nav { display: flex; gap: var(--s4); margin-left: auto; }
.stat { border: 1px solid var(--line); padding: var(--s3); background: var(--bg-raised); }
.stat .k {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted);
}
.stat .v { font-size: var(--t-xl); font-variant-numeric: tabular-nums; }
.row { display: flex; gap: var(--s3); align-items: center; }
.row > * { flex: 1; min-width: 0; }
.row > button, .row > .btn, .row > .badge { flex: 0 0 auto; }
.logs {
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  background: var(--bg-sunken); border: 1px solid var(--line);
  padding: var(--s3); max-height: 60vh; overflow: auto; white-space: pre-wrap;
}

/* ---------------------------------------------------------------- phone */

@media (max-width: 860px) {
  .docs { grid-template-columns: 1fr; }
  .docs-rail { position: static; border-bottom: 1px solid var(--line); padding-bottom: var(--s3); }
  .site-head { padding: var(--s3) var(--s4); gap: var(--s3); }
  .site-nav { gap: var(--s3); }
  .wrap, .hero { padding-left: var(--s4); padding-right: var(--s4); }
  h1 { font-size: 26px; }
}

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


/* ---------------------------------------------------------------- showreel */

/* Video, not an animated GIF. The same seconds of interface are about a tenth
 * the size as H.264, at more frames and better colour, and muted+loop+inline
 * behaves exactly the way a GIF does. */
.showreel { max-width: var(--page); margin: 0 auto; padding: 0 var(--s5) var(--s7); }
.reel { border: 1px solid var(--line); background: var(--bg-sunken); line-height: 0; }
.reel video { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------- problems */

/* The ache on the left, the product doing something about it on the right.
 * Alternating, so the eye is not running down a single column of video. */
.problems { display: flex; flex-direction: column; gap: var(--s7); margin-top: var(--s6); }
.problem {
  display: grid; gap: var(--s5); align-items: center;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.problem:nth-child(even) .problem-say { order: 2; }
.problem h3 { font-size: var(--t-xl); margin-bottom: var(--s3); max-width: 24ch; }
.problem p { max-width: 54ch; }
.problem-show { border: 1px solid var(--line); background: var(--bg-sunken); line-height: 0; }
.problem-show video { width: 100%; height: auto; display: block; }

/* At column width you can see that something is happening in these clips but
 * not what. Hovering one lifts it to about the size it was recorded at, over
 * the top of the text beside it, which is the only way to actually read the
 * interface without leaving the page.
 *
 * It grows from whichever edge it already sits against, so it expands across
 * the page rather than off it. Pointer devices and wide screens only: there is
 * no hover to speak of on a phone, and a clip scaled there would simply run off
 * the side. */
.problem-show { position: relative; }
@media (hover: hover) and (min-width: 1000px) {
  .problem-show { transition: transform .22s ease, box-shadow .22s ease; }
  .problem-show:hover {
    transform: scale(1.72);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    z-index: 40;
  }
  .problem:nth-child(odd) .problem-show:hover { transform-origin: right center; }
  .problem:nth-child(even) .problem-show:hover { transform-origin: left center; }
}
@media (prefers-reduced-motion: reduce) {
  .problem-show { transition: none; }
}

@media (max-width: 900px) {
  .problem { grid-template-columns: 1fr; }
  .problem:nth-child(even) .problem-say { order: 0; }
}

/* ---------------------------------------------------------------- cookbook */

.recipes {
  display: grid; gap: var(--s4); margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.recipe {
  border: 1px solid var(--line); background: var(--bg-raised);
  padding: var(--s4); display: flex; flex-direction: column;
}
.recipe h3 { font-size: var(--t-lg); margin-bottom: var(--s2); }
.recipe > p { margin-bottom: var(--s3); }
.recipe-made { font-family: var(--mono); font-size: var(--t-xs); color: var(--fg-muted); }
/* The ask sits at the bottom of every card however long the text above it runs,
 * so a reader scanning a column finds the words to copy in the same place. */
.recipe-ask {
  margin-top: auto; background: var(--accent-bg);
  border-left: 2px solid var(--accent); padding: var(--s3);
}
.recipe-ask-label { text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--s1); }
.recipe-ask-text { margin: 0; font-size: var(--t-sm); }


/* ---------------------------------------------------------------- stat strip */

/* This replaced a grey panel beside the headline. It was a box of four numbers
 * with the captions wrapping into the border, two of which said things nobody
 * buying this cares about. Three numbers, on a line, under the film they are
 * about: a rule in the accent colour instead of a fill, room to breathe, and a
 * caption that is allowed to be a sentence. */
.statbar {
  max-width: var(--page); margin: 0 auto; padding: 0 var(--s5) var(--s7);
  display: grid; gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.statbar .item { border-top: 2px solid var(--accent); padding-top: var(--s3); }
/* This band used to hold three big numbers, and the numbers counted our own
 * features: how many kinds of step exist, how many ways work can arrive. That
 * tells a reader nothing about their own week. It holds three moments of one
 * instead, so the slot is a short label rather than a figure - which is why
 * there is no tabular-nums here any more, and why it is set at reading size. */
.statbar .n {
  font-size: var(--t-lg); line-height: 1.25;
  color: var(--accent); font-weight: 600;
}
.statbar .l { font-size: var(--t-sm); color: var(--fg-muted); margin-top: var(--s2); }

.hero h1 { max-width: 26ch; }


/* ---------------------------------------------------------------- ground */

/* The page was a solid white sheet, which made the thin orange outlines the
 * product is built from look like they had been dropped onto nothing.
 *
 * Two soft swoops and a set of hairlines, all in the accent colour at a few
 * per cent. Drawn with gradients rather than an image so it costs nothing to
 * load and stays sharp at any size, and fixed so it does not slide about as
 * the page scrolls. It sits behind everything and takes no pointer events.
 *
 * The header and the footer both paint a solid background of their own, so the
 * lines stop cleanly at the chrome instead of running under it. */
:root {
  --ground-line: rgba(194, 65, 12, 0.14);
  --ground-wash: rgba(194, 65, 12, 0.10);
  --ground-wash-2: rgba(194, 65, 12, 0.065);
}
:root[data-theme="dark"] {
  --ground-line: rgba(255, 122, 26, 0.13);
  --ground-wash: rgba(255, 122, 26, 0.12);
  --ground-wash-2: rgba(255, 122, 26, 0.075);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Curves, not stripes. CSS gradients can only draw straight edges, so the
   * waves come from an SVG of eighteen drifting contour lines; the two washes
   * sit over it and give the field somewhere to start and finish. */
  background:
    radial-gradient(1150px 520px at 88% -14%, var(--ground-wash), transparent 62%),
    radial-gradient(880px 420px at -12% 22%, var(--ground-wash-2), transparent 64%),
    url("/ground.svg") center center / cover no-repeat;
}

/* On a phone the lines crowd a narrow column, so widen the gaps and drop the
 * second wash rather than carrying a busy background onto a small screen. */
@media (max-width: 700px) {
  body::before {
    background:
      radial-gradient(700px 380px at 92% -10%, var(--ground-wash), transparent 64%),
      url("/ground.svg") center center / cover no-repeat;
  }
}



/* ---------------------------------------------------------------- feature cards */

/* A picture, a line, and the reason it matters - the last of which stays shut
 * until the card is pointed at or focused.
 *
 * The article is always in the document, never built on demand: it has to be
 * readable by a search engine and by anybody who arrives without a mouse. So
 * this hides it visually and nothing more, and where there is no hover at all -
 * a phone - it simply stays open, which is the right answer on a touch screen
 * rather than a thing that can never be reached. */
.features {
  display: grid; gap: var(--s5); margin-top: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.feature {
  border: 1px solid var(--line);
  background: var(--bg-raised);
  display: flex; flex-direction: column;
  transition: border-color .18s ease, box-shadow .18s ease;
  /* Padding belongs on the card itself, because the landing page puts its
   * heading and text straight inside one. The features page wraps its text in
   * .feature-body so that the screenshot above it can run to the edges - so
   * that card takes its padding off again and lets the body carry it. */
  padding: var(--s4);
}
.feature:has(.feature-shot) { padding: 0; }
.feature:hover, .feature:focus-within {
  border-color: var(--accent);
  box-shadow: 0 1px 0 var(--accent);
}
.feature:focus { outline: none; }
.feature:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.feature-shot {
  display: block; width: 100%; height: auto;
  border-bottom: 1px solid var(--line);
  /* the captures are wide; show the top of the interface rather than letterbox */
  aspect-ratio: 720 / 399; object-fit: cover; object-position: top left;
  background: var(--bg-sunken);
}
.feature-body { padding: var(--s4); display: flex; flex-direction: column; flex: 1 0 auto; }
.feature-body h3 { font-size: var(--t-lg); margin-bottom: var(--s2); }
.feature-body > p { margin-bottom: 0; }

.feature-more {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .28s ease, opacity .22s ease, margin-top .28s ease;
  margin-top: 0;
}
.feature:hover .feature-more,
.feature:focus-within .feature-more {
  max-height: 34em; opacity: 1; margin-top: var(--s3);
}
.feature-more p {
  font-size: var(--t-sm); color: var(--fg-muted);
  border-top: 1px solid var(--line); padding-top: var(--s3); margin-bottom: var(--s2);
}
.feature-link { font-size: var(--t-sm); font-weight: 600; }

/* No hover to give: leave it open rather than unreachable. */
@media (hover: none) {
  .feature-more { max-height: none; opacity: 1; margin-top: var(--s3); }
}
@media (prefers-reduced-motion: reduce) {
  .feature, .feature-more { transition: none; }
}


/* ---------------------------------------------------------------- comparison */

/* A table, because a comparison is a grid of facts and pretending otherwise
 * makes it harder to read. It scrolls sideways in its own box on a narrow
 * screen rather than forcing the whole page to. */
.cmp-wrap { overflow-x: auto; margin-top: var(--s5); }
.cmp { width: 100%; border-collapse: collapse; min-width: 720px; }
.cmp th, .cmp td {
  text-align: left; vertical-align: top;
  padding: var(--s4); border: 1px solid var(--line);
  font-size: var(--t-sm); line-height: 1.6;
}
.cmp th {
  background: var(--bg-sunken); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted);
}
.cmp td:first-child { width: 24%; }
.cmp-is { display: block; margin-top: var(--s2); color: var(--fg-muted); }
.cmp tbody tr:hover { background: var(--bg-hover); }