/* Minium — marketing site
   The palette is the app icon, sampled: the deep teal-navy plate the box sits
   on, the near-black rim around that, the periwinkle bevel along its lit edge,
   and the amber-to-gold ramp of the box itself. Cool surfaces, warm objects —
   which is the whole composition of the icon. */

:root {
  --rim: #020f16;          /* the icon's outermost edge */
  --panel: #102533;        /* the plate — the single most common color in it */
  --bg: #0a1b26;           /* the step between those two, for the page ground */
  --raised: #16303f;
  --line: #1b3242;
  --line-strong: #2d4356;  /* the bevel inside the plate's edge */
  --bevel: #565f86;        /* the periwinkle highlight along the top-left */

  /* The neutrals carry the plate's hue up to text weight rather than going
     grey, so a paragraph belongs to the same family as the panel behind it. */
  --ink: #e8eef4;
  --body: #b6c7d3;
  --dim: #93a9ba;

  --accent: #eda943;       /* the lit face of the box */
  --accent-hi: #fcca52;    /* the gold of the M on its lid */
  --accent-deep: #c25d18;  /* the face turned away from the light */
  --on-accent: #2a1509;

  --sans: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Bitmap faces for the headings and the small labels. Jersey holds up at
     display sizes; Silkscreen is drawn for 8-12px, which is where the
     eyebrows and captions live. Body copy stays Archivo — pixel type is not
     something you want to read a paragraph of. */
  --display: "Jersey 15", "Courier New", monospace;
  --pixel: Silkscreen, "Courier New", monospace;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --col: 1240px;
  --pad: 24px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

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

h1, h2, h3 { text-wrap: pretty; }

code { font-family: var(--mono); font-size: .82em; color: var(--accent); }

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

.wrap {
  max-width: var(--col);
  margin: 0 auto;
  padding-inline: var(--pad);
}

/* Anchor targets clear the sticky header. */
section[id], div[id] { scroll-margin-top: 84px; }

.stack-2,
.stack-3 {
  display: grid;
  gap: 40px;
  align-items: start;
}
.stack-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.stack-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 44px; }

/* ---------- type --------------------------------------------------------- */

.eyebrow {
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
  /* A bitmap face already carries its own sidebearings; the serif's negative
     tracking would jam the stems together. */
  letter-spacing: .01em;
  margin: 0;
}

h2.display { line-height: 1.04; }

.lede {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--body);
  max-width: 640px;
}

.prose { color: var(--body); margin: 16px 0 0; }
.prose + .prose { margin-top: 14px; }

.num {
  font-family: var(--pixel);
  font-size: 13px;
  color: var(--accent);
}

/* ---------- header ------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 27, 38, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.masthead > .wrap {
  padding-block: 14px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: .02em;
}
.brand:hover { color: var(--ink); }
.brand img { width: 30px; height: 30px; border-radius: 7px; display: block; }

.masthead nav {
  margin-left: auto;
  display: flex;
  gap: 22px;
  font-size: 14px;
}
.masthead nav a { color: var(--dim); }
.masthead nav a:hover { color: var(--ink); }

/* ---------- the cart in the masthead -------------------------------------- */

/* Hidden until there is something in it — see js/minium-buy.js. An empty cart
   on every page of a site that sells one thing is furniture, not navigation.
   [hidden] needs saying because the flex display below would otherwise win. */
.cart-link[hidden] { display: none; }

.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  color: var(--accent);
}
.cart-link:hover {
  border-color: var(--accent);
  color: var(--accent-hi);
}
.cart-link svg { display: block; }

/* Screen-reader-only, for the word the count belongs to. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- buttons ------------------------------------------------------ */

.btn {
  display: inline-block;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  padding: 14px 26px;
  font-size: 16px;
}
.btn-primary:hover { background: var(--accent-hi); color: var(--on-accent); }

.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-weight: 500;
  padding: 13px 24px;
  font-size: 16px;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--ink); }

.btn-sm { padding: 9px 18px; font-size: 14px; border-radius: 7px; }

.btn-lg { padding: 16px 32px; font-size: 17px; border-radius: 9px; text-align: center; }

/* A <button> does not inherit type from the page the way an <a> does. */
button.btn { font-family: inherit; border: 0; }

/* The download is not live yet. Disabled rather than hidden: the price and
   the requirements are still what people came to this box to read. */
.btn:disabled,
.btn:disabled:hover {
  /* A grey fill alone vanishes here — the buy card gradient is already this
     dark — so the border is what keeps the button a button. */
  background: var(--line-strong);
  border: 1px solid var(--bevel);
  color: var(--body);
  cursor: not-allowed;
}

.soon {
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
}

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

.hero { padding-top: 88px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero h1 {
  font-size: clamp(44px, 6.4vw, 88px);
  margin: 26px 0 0;
  max-width: 900px;
}

.hero .lede { margin: 22px 0 0; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 34px;
}

/* Deliberately not the pixel face: at 12px its digits are ambiguous enough
   that a 0 can read as an 8, and the price is the one number on this page
   nobody should have to squint at. */
.fineprint {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--dim);
}

/* ---------- editor screenshots ------------------------------------------- */

/* The window is drawn at its real 1520x860 and scaled into the column, so the
   editor chrome never reflows. The height is set by script to match. */
.shot {
  overflow: hidden;
  background: var(--rim);
  /* A ring rather than a border: the frame inside is scaled to clientWidth,
     and a real border would take two pixels out of that measurement. */
  box-shadow: 0 0 0 1px var(--line-strong);
  border-radius: 10px;
  height: 0;
}

.shot-frame {
  width: 1520px;
  transform-origin: top left;
}

.shot-caption {
  font-family: var(--pixel);
  font-size: 11px;
  line-height: 1.8;
  color: var(--dim);
  margin-top: 12px;
}

/* ---------- cell grids --------------------------------------------------- */

/* Hairline rules come from the gap showing the container's background. */
.cells {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.cells-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cells-3 > * { background: var(--panel); padding: 26px; }

.cells-extras { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 40px; }
.cells-extras > * { background: var(--bg); padding: 22px 24px; }

.cell-num {
  font-family: var(--pixel);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: .06em;
}

.cell-title { font-family: var(--display); font-size: 24px; font-weight: 400; line-height: 1.1; margin-top: 10px; }
.cell-body { font-size: 14px; color: var(--dim); margin: 8px 0 0; }

.extra-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.extra-body { font-size: 14px; line-height: 1.5; color: var(--dim); margin: 7px 0 0; }

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

.feature-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.feature-head h3 {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .01em;
  margin: 0;
}

.export-list {
  margin-top: 20px;
  padding: 16px 18px;
  border-left: 2px solid var(--accent-deep);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--dim);
}

.defs {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.defs > div {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.defs dt,
.def-term {
  font-family: var(--pixel);
  font-size: 12px;
  color: var(--accent);
  white-space: nowrap;
}

.def-body { font-size: 14px; color: var(--dim); }

/* ---------- workflow band ------------------------------------------------ */

.band {
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 110px;
}

.band > .wrap { padding-block: 88px; }

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 44px;
}

.step {
  flex: 1 1 190px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
}

.step-num { font-family: var(--pixel); font-size: 11px; letter-spacing: .06em; color: var(--accent); }
.step-title { font-family: var(--display); font-size: 22px; font-weight: 400; line-height: 1.1; margin-top: 10px; }
.step-body { font-size: 14px; color: var(--dim); margin: 8px 0 0; }

/* ---------- FAQ ---------------------------------------------------------- */

.reqs {
  margin-top: 30px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.reqs-label {
  font-family: var(--pixel);
  font-size: 11px;
  color: var(--dim);
  letter-spacing: .06em;
}

.reqs-list {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 2;
  color: var(--ink);
  margin-top: 8px;
}

.qa { display: flex; flex-direction: column; }

.qa > div {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.qa dt, .qa-q { font-size: 17px; font-weight: 600; }
.qa dd, .qa-a { color: var(--dim); margin: 8px 0 0; font-size: 15px; }

/* ---------- download ----------------------------------------------------- */

.buy {
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--raised) 0%, var(--panel) 100%);
  /* The lit top edge the icon has, one pixel of it. */
  box-shadow: inset 0 1px 0 rgba(86, 95, 134, .5);
  padding: clamp(32px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.buy img { width: 104px; height: 104px; border-radius: 24px; display: block; }

/* The box art is a photographic render rather than the app icon, so it keeps
   its own proportions and no rounded corners — the render already has them. */
.buy img.buy-box {
  width: clamp(160px, 22vw, 220px);
  height: auto;
  border-radius: 0;
}
.buy-copy { flex: 1; min-width: 280px; }
.buy-actions { display: flex; flex-direction: column; gap: 12px; }

/* ---------- the store ----------------------------------------------------
   Reflow's toolkit ships its own stylesheet, built on a Bootstrap-shaped set
   of `--ref-*` tokens that all fall back to light-theme defaults. Rather than
   fight its rules one by one, redefine the tokens — the widgets then draw
   themselves in the page's palette.

   These are scoped to the containers rather than to :root on purpose. A
   custom property resolves from the nearest ancestor that sets it, so a
   container wins over Reflow's own :root no matter which stylesheet loaded
   last — and on index.html the toolkit CSS is injected at runtime, so it
   loads after this file. The :root:root rule below is the safety net for
   anything Reflow renders at body level, where a container cannot reach it. */

[data-mn-buy],
.store-panel,
:root:root {
  --ref-body-bg: var(--panel);
  --ref-body-color: var(--body);
  --ref-primary: var(--accent);
  --ref-black: var(--ink);
  --ref-white: var(--rim);

  --ref-secondary-bg: var(--raised);
  --ref-tertiary-bg: var(--raised);
  --ref-input-bg: var(--raised);
  --ref-list-bg: var(--raised);
  --ref-dropdown-bg: var(--panel);
  --ref-message-bg: var(--raised);

  --ref-secondary-color: var(--dim);
  --ref-tertiary-color: var(--dim);
  --ref-gray-100: var(--raised);
  --ref-gray-300: var(--line-strong);
  --ref-gray-600: var(--dim);
  --ref-gray-700: var(--body);
  --ref-gray: var(--dim);
  --ref-darkgray: var(--line-strong);

  --ref-border-radius: 10px;
  --ref-btn-border-radius: 9px;
}

/* The panel the cart sits in, so it reads as part of the page rather than as
   a widget dropped onto it. */
.store-panel {
  margin-top: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--raised) 0%, var(--panel) 100%);
  box-shadow: inset 0 1px 0 rgba(86, 95, 134, .5);
  padding: clamp(20px, 3vw, 36px);
}

/* Reflow renders its own controls as <a class="ref-button">, and they are not
   ours to put a class on — so .btn/.btn-primary/.btn-lg are restated here for
   the ones inside the cart. Keep this in step with the button rules above: it
   is meant to be indistinguishable from the page's own primary button, not a
   near miss. */
.store-panel .ref-button {
  /* .btn */
  font-family: var(--sans);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  /* .btn-primary */
  background: var(--accent);
  color: var(--on-accent);
  /* .btn-lg */
  padding: 16px 32px;
  font-size: 17px;
  border-radius: 9px;
  text-align: center;
  /* It arrives as a link: underlined, inline, and coloured by the `a` rule at
     the top of this file. */
  display: block;
  text-decoration: none;
  border: 0;
  box-sizing: border-box;
  cursor: pointer;
}
.store-panel .ref-button:hover {
  background: var(--accent-hi);
  color: var(--on-accent);
}

/* Body copy inside the widgets, which would otherwise arrive at Bootstrap's
   default face. */
.reflow-shopping-cart { font-family: var(--sans); }

/* ---------- contact form -------------------------------------------------- */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
  max-width: 520px;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field-label {
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.field-note { font-size: 13px; color: var(--dim); }

.field {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--rim);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
  /* A textarea is the one control that should grow, and only downwards. */
  resize: vertical;
}
.field:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--bevel);
}
.field::placeholder { color: var(--dim); }

/* :user-invalid rather than :invalid — the plain one matches an empty
   required field the instant the page loads, so every field would be outlined
   in red before anybody typed a thing. This one waits until the field has
   actually been filled in and left. */
.field:user-invalid { border-color: var(--accent-deep); }

.contact-form .btn { align-self: flex-start; }

/* The honeypot. Clipped rather than display:none — some bots skip what is not
   rendered at all, and none of them read this. aria-hidden and a negative
   tabindex keep it away from anybody real.

   Clipped in place rather than parked at left:-9999px, because an element
   sitting that far outside the page is a horizontal scrollbar waiting to
   happen. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-status {
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 24px;
  font-size: 15px;
  border: 1px solid var(--line-strong);
  background: var(--raised);
  color: var(--body);
}
.form-status-good { border-color: var(--accent); color: var(--ink); }
.form-status-bad  { border-color: var(--accent-deep); color: var(--ink); }

/* ---------- legal page ---------------------------------------------------- */

/* Narrower than the grid the rest of the site uses. Legal text is read a line
   at a time rather than scanned, and a 1240px measure is punishing. */
.legal { max-width: 760px; }
.legal .prose { max-width: none; }

.legal-date {
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 26px;
}

.legal-h {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  color: var(--ink);
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.legal .prose strong { color: var(--ink); }
.legal .defs { margin-top: 18px; }

.legal-foot {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--dim);
}

/* ---------- footer ------------------------------------------------------- */

.colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  border-top: 1px solid var(--line);
  margin-top: 80px;
  padding-block: 64px 56px;
}

.colophon-brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.colophon-brand img { width: 22px; height: 22px; border-radius: 5px; display: block; }
.colophon-brand span { font-size: 14px; color: var(--dim); }

/* Quiet, and on its own line below the wordmark rather than beside it. The
   store trades under a different name from the one on the terms, and a buyer
   who cannot connect the receipt to the site is a chargeback. */
.colophon-trading {
  flex-basis: 100%;
  font-size: 12px !important;
  color: var(--line-strong) !important;
  padding-left: 32px;
}
@media (max-width: 720px) { .colophon-trading { padding-left: 0; } }

.colophon nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; }
.colophon nav a { color: var(--dim); }
.colophon nav a:hover { color: var(--ink); }

/* ---------- rhythm ------------------------------------------------------- */

.s-shot { padding-top: 56px; }
.s-tight { padding-top: 44px; }
.s-section { padding-top: 110px; }
.s-features { padding-top: 64px; }
.s-buy { padding-top: 120px; }
.s-band-shot { padding-top: 88px; }

/* ---------- narrow ------------------------------------------------------- */

@media (max-width: 720px) {
  :root { --pad: 18px; }

  /* The section links collapse; the wordmark, the cart and the download button
     carry navigation on a phone. */
  .masthead nav { display: none; }
  .masthead > .wrap { gap: 10px; }
  /* Whichever comes first takes the auto margin, so the pair stays on the
     right whether or not the cart is showing. [hidden] has to be spelled out:
     display:none removes an element from the layout but not from ~, so an
     empty cart would otherwise hand the margin to nobody and leave the
     download button stranded mid-header. */
  .masthead .cart-link:not([hidden]) { margin-left: auto; }
  .masthead .cart-link:not([hidden]) ~ .btn { margin-left: 0; }
  .masthead .cart-link[hidden] ~ .btn { margin-left: auto; }
  .cart-link { padding: 7px 10px; }

  .hero { padding-top: 56px; }
  .s-section { padding-top: 72px; }
  .band { margin-top: 72px; }
  .band > .wrap { padding-block: 60px; }
  .s-buy { padding-top: 80px; }

  .cta-row .btn { flex: 1 1 100%; text-align: center; }
  .buy-actions { width: 100%; }
  .colophon nav { margin-left: 0; }
}

/* ---------- who makes it ------------------------------------------------- */

.bio {
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
  padding: clamp(28px, 4vw, 52px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 44px);
  align-items: flex-start;
}

/* Drop a portrait in and it sits to the left; without one the copy just
   takes the full width. */
.bio-portrait {
  width: 132px;
  height: 132px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}

.bio-copy { flex: 1 1 340px; }
.bio-copy .prose { max-width: 62ch; }

.bio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 26px;
}

@media (max-width: 720px) {
  .bio-actions .btn { flex: 1 1 100%; text-align: center; }
}