/* The site's own rules beside the marketing design's kit (#447, D-309).
   The kit is css/design-site, the design's tokens.css and components.css
   copied as they are; every site page links this file after it. It holds
   four things and nothing else; the page without script has its own
   sheet, css/site/noscript.css:

   1. What the prototypes write as style attributes, which the content
      security policy refuses: the same values, as rules on the same
      markup.
   2. The openers of the Product panel and the phone sheet, which are the
      summaries of details elements here (layout/marketing.templ), so both
      open without script.
   3. The blueprint drawings. The design draws them on a canvas; the
      server draws them as SVG (page/marketing/blueprint.go), in the
      design's hairlines, on the field's own colour.
   4. The app's element rules, taken back off a page drawn in the kit
      (body.mk-ground). The site links the app's base.css for its faces;
      its rules on bare elements (no margins, no list markers, the app's
      heading sizes, links turning the accent colour on hover) were never
      part of the prototypes, which sit on the browser's own defaults. */

/* ---- 1. the prototypes' style attributes ---- */
/* The logo in the footer is the text's colour (shared:footer). */
.mk-footer .mk-logo { color: var(--text); }
/* #1068: System status in the footer's last line, with the badge our
   status page serves beside it. The badge keeps its drawn size. */
.mk-footer__status { display: inline-flex; align-items: center; gap: var(--s-3); }
.mk-footer__status img { display: block; max-width: 100%; height: auto; }
/* A rule's headline and split sit a step below it (the product pages,
   pricing, the questions). */
.mk-rule + .mk-duo, .mk-rule + .mk-split { margin-top: var(--s-6); }
.mk-rule + .mk-split { align-items: start; }
.mk-rule + .mk-display-l { margin-top: var(--s-6); }
.mk-duo .mk-display-l + .mk-lead { margin-top: var(--s-4); }
.mk-duo .mk-lead + .mk-rows { margin-top: var(--s-6); }
/* A close or a top-up beside its plate is centred on it. */
.mk-wrap.mk-duo { align-items: center; }
/* #965: a plate's body can be a screenshot of the product, the full width of the plate, its own height kept by the width and height on the image. */
.mk-shot { display: block; }
.mk-shot img { display: block; width: 100%; height: auto; border-radius: var(--r-code); border: 1px solid var(--line); }
/* #1186: a tall screen shown from its top. The box keeps the first part
   and the image fades out at its foot into the plate behind it, with a
   mask rather than a painted colour, so it fades into the plate whatever
   the plate and the screen's scheme are. The image keeps its own width,
   height and alt; only the box is cut. */
.mk-shot-crop { max-height: 22rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent); }
.mk-shot-crop--tall { max-height: 36rem; }
/* #1186: the explanations page's after the incident, three steps, each
   the product's screen in its plate above the step's number, title and
   words; one column on a narrow window. */
.mk-after { margin: var(--s-6) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.mk-after__step { display: grid; align-content: start; gap: var(--s-2); min-width: 0; }
.mk-after__step .mk-plate { margin-bottom: var(--s-4); padding: 1rem; }
.mk-after__num { color: var(--text-3); font-size: var(--t-mono); }
.mk-after__step h3 { margin: 0; font-family: var(--font-display); font-size: var(--t-title); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance; }
.mk-after__step p { margin: 0; font-size: var(--t-body); color: var(--text-2); max-width: 36ch; }
.mk-after__close { margin: var(--s-6) 0 0; color: var(--text-2); max-width: 60ch; }
@media (max-width: 48em) {
  .mk-after { grid-template-columns: minmax(0, 1fr); }
}
/* The small line under a detail's plate, on its dark field. */
.mk-act__aside > .mk-small { margin: 0; color: rgba(255, 255, 255, .85); }
/* Pricing: the cards follow the solo hero straight on, and the note
   under them is the second text colour at a reading width. */
.mk-hero--solo + #plans { padding-top: 0; }
.mk-plans + .mk-small { margin-top: var(--s-5); color: var(--text-2); max-width: 60ch; }
/* #982: the founding offer band above the plan cards, on home and
   pricing. Its box is a plan card's (the ink border, the large card
   radius, the card padding) on the field's own cream, and it sits one
   card gap above the cards. On a wide screen the words take the left,
   the code and its Copy button the right, and the meter is the row
   under both. The meter is the long day strip's bars, one per use, the
   uses left in cobalt and the used ones in the strong line. Each bar
   keeps the strip's thin width on a wide screen and the bars share the
   row on a phone, so all of them fit at 390. */
.mk-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy code" "meter meter"; gap: var(--s-5) var(--s-6); border: 2px solid var(--ink); border-radius: var(--r-card-l); padding: 1.75rem; color: var(--text); }
.mk-offer + .mk-plans { margin-top: var(--s-4); }
.mk-offer__copy { grid-area: copy; display: grid; gap: var(--s-3); min-width: 0; }
.mk-offer__copy p, .mk-offer__copy h3 { margin: 0; }
.mk-offer__copy .mk-display-m { max-width: none; }
.mk-offer__sub { color: var(--text-2); font-size: var(--t-body); max-width: 60ch; }
.mk-offer__code { grid-area: code; display: flex; align-items: center; gap: var(--s-3); align-self: start; }
.mk-offer__chip { display: inline-flex; align-items: center; justify-content: center; height: var(--control-s); padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); letter-spacing: .08em; color: var(--text); }
.mk-offer__meter { grid-area: meter; display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.mk-offer__meter .mk-mono { flex: none; color: var(--text-2); }
.mk-offer__bars { flex: 0 1 auto; min-width: 0; display: flex; gap: 3px; height: 2.25rem; align-items: stretch; }
.mk-offer__bars i { flex: 0 1 0.375rem; min-width: 2px; border-radius: 1px; background: var(--line-strong); }
.mk-offer__bars i.is-left { background: var(--cobalt); }
@media (max-width: 56.25em) {
  .mk-offer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "code" "meter"; padding: 1.5rem; }
  .mk-offer + .mk-plans { margin-top: var(--s-5); }
  .mk-offer__chip { flex: 1; height: var(--tap); }
  .mk-offer__meter { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .mk-offer__bars { gap: 2px; }
  .mk-offer__bars i { flex: 1 1 0; }
}
/* A plan strip's note: the uptime page's Free caveat. */
.mk-planstrip__foot + .mk-small { margin: var(--s-3) 0 0; color: var(--text-2); max-width: 60ch; }

/* The second half of the site (#451, signed off in D-329). A reading
   page's hero is one column over the contents rail and the text
   (privacy.html, terms.html, guide-crontab.html), and the text's field
   starts straight under it. */
.mk-hero:has(.mk-read__meta) { padding-bottom: var(--s-7); }
.mk-hero:has(.mk-read__meta) .mk-wrap { grid-template-columns: minmax(0, 1fr); }
.mk-hero:has(.mk-read__meta) .mk-display-l { max-width: 18ch; }
.mk-hero:has(.mk-read__meta) .mk-lead { max-width: 52ch; }
.mk-field:has(> .mk-read) { padding-top: 0; }
/* A guide: the settings as rows, the Copy row over the line, the missed
   alert, the other guides in one column, and Start free. */
.mk-read__body .mk-rows, .mk-read__body .mk-guides ul { padding-left: 0; gap: 0; max-width: 34rem; }
.mk-read__body .mk-rows .mk-mono { color: var(--text); }
.mk-read__body .mk-rows .mk-small { display: block; margin-top: 0.25rem; color: var(--text-2); }
.mk-read__body > .mk-read__meta { justify-content: space-between; align-items: center; margin-bottom: var(--s-2); }
.mk-read__body > .mk-plate { margin: 0 0 var(--s-4); max-width: 35rem; }
.mk-read__body > .mk-guides { grid-template-columns: minmax(0, 1fr); }
.mk-read__body > .mk-cta { margin-top: var(--s-6); }
/* #1256: a legal heading links to itself, drawn as the heading; the
   earlier versions sit under the last section, quieter than the text. */
.mk-read__anchor { color: inherit; text-decoration: none; }
.mk-read__anchor:hover, .mk-read__anchor:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.mk-read__past { margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--text-2); }
/* The docs index and the page for a guide that is not there: the search
   or the code under the solo hero's words, the guides close under it,
   and the line for a platform with no guide under them. The search is a
   form, so it works without script. */
.mk-hero--solo:has(.mk-search), .mk-hero--solo:has(.mk-error__code) { padding-bottom: var(--s-7); }
.mk-hero--solo .mk-error__code { margin: 0; }
.mk-hero__copy > form[role="search"] { display: flex; justify-content: center; width: 100%; }
.mk-hero--solo + #guides { padding-top: var(--s-5); }
#guides .mk-guides + .mk-lead { margin-top: var(--s-7); max-width: 44ch; font-size: var(--t-body); color: var(--text-2); }
/* Contact: one column (#544). The words, then the four addresses side by
   side across the column, as many as fit (one to a row on a phone), then
   the form the column's full width with nothing beside it, then the one
   quiet line. The form is a grid on its white plate, name and email side
   by side, the retention line beside Send. */
.mk-hero .mk-wrap:has(> .mk-form) { grid-template-columns: minmax(0, 1fr); align-items: start; }
.mk-hero__copy > .mk-routes { width: 100%; margin-top: var(--s-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); column-gap: var(--s-6); }
.mk-hero .mk-wrap > .mk-form { max-width: none; }
.mk-hero .mk-wrap > .mk-planstrip__foot { margin-top: 0; }
.mk-plate.mk-form { display: grid; gap: var(--s-5); padding: 2rem; }
.mk-form > .mk-plate__head { margin: 0; }
.mk-form > div:not([class]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-5) var(--s-4); }
.mk-form [data-add-workspace] { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.mk-label .mk-hint { font-family: var(--font-text); font-weight: 400; }
/* The line beside Send takes the rest of the row (#543). */
.mk-form .mk-cta > .mk-small { flex: 1 1 18rem; }
/* Trust and why no password: the links in the words on ink, and the
   code on the sign-in plate. */
.mk-field--ink .mk-lead a.mk-link, .mk-act__aside > .mk-small a.mk-link { color: inherit; }
.mk-act__aside > .mk-small a.mk-with-icon { color: var(--text-on-dark); }
/* The error pages: the request's reference under the calls. */
.mk-hero__copy > p.mk-read__meta { margin: 0; }

/* ---- 2. the openers ---- */
summary.mk-nav__trigger, summary.mk-burger { list-style: none; }
summary.mk-nav__trigger::-webkit-details-marker, summary.mk-burger::-webkit-details-marker { display: none; }
.mk-nav__menu[open] > .mk-nav__trigger { opacity: 1; }
.mk-nav__menu[open] > .mk-nav__trigger .mk-icon { transform: rotate(180deg); }
/* Each panel is the nav's sibling, so its own open details element shows
   it from the page, and only it (#1156). */
body:has(.mk-nav__menu[open] > [aria-controls="features-panel"]) #features-panel,
body:has(.mk-nav__menu[open] > [aria-controls="developers-panel"]) #developers-panel,
body:has(.mk-nav__menu[open] > [aria-controls="resources-panel"]) #resources-panel { display: grid; }

/* The three menus (#1156, the approved header of 2026-10-22). The kit's
   panel is one wide two-column card on the right; here each menu's panel
   is one column under its own trigger. site.js sets --mk-panel-x to the
   trigger's place; without script the panel keeps the kit's right edge. */
.mk-nav__panel { width: min(27.5rem, calc(100vw - 2 * var(--gutter))); grid-template-columns: minmax(0, 1fr); --mk-panel-x: auto; left: var(--mk-panel-x); }
.mk-nav__panel-foot { flex-wrap: wrap; align-items: center; row-gap: var(--s-3); column-gap: var(--s-5); padding-bottom: 0.5rem; }
.mk-nav__panel-key { flex-basis: 100%; margin-bottom: calc(var(--s-1) - var(--s-3)); font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-variant-ligatures: none; }
.mk-nav__soon { font-style: normal; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: .04em; color: var(--violet); background: var(--violet-ground); border-radius: var(--r-pill); padding: 0.125rem 0.5rem; margin-left: 0.375rem; vertical-align: 0.15em; font-variant-ligatures: none; }
.mk-nav__item--soon { cursor: default; }
.mk-nav__item--soon:hover { background: none; }
/* The menu that holds the page, and Pricing on its own page, carry a
   line under the word. */
.mk-nav__trigger.is-current, .mk-nav__links > a[aria-current="page"] { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
/* In the phone sheet the rows are a name with a small tile. */
.mk-sheet .mk-nav__item { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem; padding: 0.375rem 0; }
.mk-sheet .mk-nav__item .mk-icon { width: 2rem; height: 2rem; padding: 0.45rem; }
.mk-sheet .mk-nav__item b { font-size: var(--t-body); }
.mk-sheet .mk-sheet__links { margin-top: var(--s-4); }
/* The burger's details element takes no room of its own. */
@media (min-width: 56.26em) { .mk-nav__phone { display: none; } }
/* The sheet holds the page still behind it. */
html:has(> body.has-sheet) { overflow: hidden; }

/* ---- 3. the blueprint drawings ---- */
.mk-field--ink, .mk-field--cobalt, .mk-field--violet { --bp-ink: var(--cream); }
svg.bp { display: block; width: 100%; height: 100%; overflow: visible; --bp-line: var(--bp-ink, var(--cobalt)); }
svg.bp polygon, svg.bp polyline { stroke: var(--bp-line); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
svg.bp polygon { fill: var(--field, var(--cream)); }
svg.bp polyline { fill: none; }
svg.bp .bp-faint polygon, svg.bp polyline.bp-faint { stroke-opacity: .35; }
svg.bp .bp-red polygon, svg.bp polyline.bp-red { fill: var(--down); stroke: var(--down); }
svg.bp polyline.bp-red { fill: none; }
svg.bp .bp-amber polygon { fill: #C98A1E; stroke: #C98A1E; }
svg.bp .bp-violet polygon { fill: var(--violet); stroke: var(--violet); }
svg.bp .bp-cobalt polygon { fill: var(--cobalt); stroke: var(--cobalt); }
svg.bp .bp-cream polygon { fill: var(--cream); }
svg.bp polygon.bp-flat { stroke: none; fill-opacity: .45; }
svg.bp polygon.bp-flat.bp-amber { fill: #C98A1E; }
svg.bp .bp-dot { fill: var(--bp-line); }
svg.bp .is-off { display: none; }

/* ---- 3a. places and channels (#1014) ---- */
/* A check location's flag before its city, the size the status page's
   chart legend draws it (pub-flag), with a hairline so white stripes
   stay visible on a cream plate. */
.mk-place { display: inline-flex; align-items: baseline; gap: 0.5rem; }
.mk-flag { flex: none; align-self: center; width: 1rem; height: 0.75rem; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
/* An alert channel's mark before its name: the vendor's logo file, or a
   site icon, at one size. */
.mk-channel-logo { flex: none; align-self: center; width: 1rem; height: 1rem; }
/* ---- 4. the app's element rules, taken back ---- */
/* :where() keeps these at the weight of a bare element, so they win over
   base.css, which comes first, and every class of the kit wins over them. */
:where(.mk-ground) :is(h1, h2, h3, h4, p, ul, ol, figure) { margin: revert; }
:where(.mk-ground) :is(ul, ol) { padding: revert; list-style: revert; }
:where(.mk-ground) :is(h1, h2, h3, h4) { font: revert; letter-spacing: revert; }
:where(.mk-ground) :is(code, kbd, pre) { font-size: revert; }
:where(.mk-ground) :is(img, svg) { display: revert; max-width: revert; }
/* base.css turns every link the accent colour and underlines it on
   hover. The design keeps a link as it is, and changes only what its own
   hover rules say, so each keeps its colour here. */
.mk-ground a:hover { color: inherit; text-decoration: none; }
.mk-ground a.mk-link:hover { color: var(--cobalt); text-decoration: underline; }
.mk-ground .mk-btn--primary:hover { color: #fff; }
.mk-ground .mk-btn--ink:hover { color: var(--cream); }
.mk-ground .mk-btn--cream:hover { color: var(--ink); }
.mk-ground .mk-nav__item:hover, .mk-ground .mk-sheet__links a:hover, .mk-ground a.mk-plate:hover { color: var(--text); }
.mk-ground .mk-sheet__links a[aria-current="page"]:hover { color: var(--cobalt); }
.mk-ground .mk-footer__col a:hover { color: var(--text-2); }
.mk-ground .mk-nav__panel-foot a:hover, .mk-ground .mk-crumb a:hover, .mk-ground .mk-rail a:hover { color: var(--text); }
.mk-ground .mk-rail a[aria-current="true"]:hover { color: var(--cobalt); }