/* Direction A's marketing pages (SHL-176): docs/design/A/a.css's marketing rules, under .mk (the body's class on an
   A page) and on the tokens of tokens-a.css. Colours are tokens only; the mono face is only for code, .mono and the
   value cells of a .ref limits table (SHL-439).
   Weights are the shipped files' (aa2021cf): a.css's grotesk 500 is 600 here, 700 is 800, and its mono 600 is 500.
   base.css loads first, so a rule here repeats a.css's value where base.css's .lead, h1-h3 or pre differ. */

.mk { --column: 1360px; font-size: 17px; line-height: 1.5; background: var(--ground); }
.mk .wrap { max-width: var(--column); margin: 0 auto; padding: 0 40px; }
.mk .mono { font-family: var(--font-mono); } /* taste-skill-ignore: code only */
.mk .skip { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 8px 14px; background: var(--ink); color: var(--on-ink); font-weight: 600; text-decoration: none; }
.mk .skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.mk .btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--control); background: var(--card); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.mk .btn.primary { background: var(--mint-ink); border-color: var(--mint-ink); color: var(--on-mint); }
.mk .btn.txt { background: transparent; border-color: var(--ink); }
.mk .btn.xl { height: 52px; padding: 0 24px; font-size: 17px; font-weight: 800; }
.mk .pill:not([data-ui] *) { display: inline-block; padding: 0 6px; border: 1px solid var(--border); font-size: 11px; color: var(--muted); } /* a [data-ui] fragment keeps app.css's pill */
/* A pack's status on /packs (SHL-440); its label says it, the colour repeats it. Two classes, as .mk .pill's :not()
   ties them at (0,3,0): only coming after it lets these win. */
.mk .pill.pill--available { border-color: var(--mint-ink); background: var(--mint-wash); color: var(--mint-ink); }
.mk .pill.pill--in-development { border-color: var(--amber-ink); background: var(--amber-wash); color: var(--amber-ink); }

.mk .code { margin: 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 19px; counter-reset: ln; } /* taste-skill-ignore: code only */
/* The empty alternative text keeps screen readers from reading each line's number. Widths include the padding:
   base.css sizes ::before as border-box, where a.css's 44px + 14px was content-box. */
.mk .code .l::before { counter-increment: ln; content: counter(ln); content: counter(ln) / ""; display: inline-block; width: 58px; padding-right: 14px; text-align: right; color: var(--faint); user-select: none; }
.mk .k { font-weight: 500; color: var(--strong); }
.mk .s { color: var(--mint-ink); }
.mk .c { font-style: italic; color: var(--faint); }

/* Below 600px the Menu button discloses the nav; site.js flips its aria-expanded, which the rules below read. */
.mk .util { display: flex; align-items: center; gap: 6px; height: 56px; }
.mk .util nav { display: flex; gap: 6px; margin-left: 24px; }
.mk .util a.nl { padding: 8px 12px; font-size: 15px; font-weight: 600; color: var(--muted); white-space: nowrap; text-decoration: none; }
.mk .util a.nl[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
.mk .util a.keep { margin-left: auto; }
.mk .util .btn.primary { height: 38px; font-size: 15px; }
.mk .menu-btn { display: none; }

/* The background spans the window, but the contents sit in .wrap's column, the nav's, so the wordmark starts at the
   nav bar's edge at any width (SHL-422). Its inline padding is .wrap's 40px plus the margin .wrap centres itself by. */
.mk .band { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 40px; padding: 8px max(40px, (100% - var(--column)) / 2 + 40px) 14px; background: var(--raised); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mk .mark { margin-left: -8px; font-size: 184px; font-weight: 800; line-height: 0.86; letter-spacing: -0.055em; color: var(--mark); }
.mk .band h1 { max-width: 460px; padding-bottom: 10px; font-size: 30px; font-weight: 600; line-height: 1.16; letter-spacing: -0.01em; color: var(--ink); }

.mk .hero { display: grid; grid-template-columns: 5fr 6fr; gap: 40px; padding: 32px 0 28px; }
.mk .hero > * { min-width: 0; }
.mk .lead { max-width: 560px; font-size: 19px; line-height: 1.5; letter-spacing: normal; color: var(--ink); }
/* .mk .lead's width: base.css's 62ch ran the governance line past the lead, by 84px from 700 to 1023px (SHL-269). */
.mk .governance { max-width: 560px; }
.mk .ctas { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; }
/* The home's plan strip, in the hero: /pricing's plan cards are .plan too. */
.mk .hero .plan { display: grid; grid-template-columns: 1fr 1fr; max-width: 520px; border: 1px solid var(--border); background: var(--card); }
.mk .hero .plan > * { padding: 10px 14px; font-size: 14px; }
.mk .hero .plan > * + * { border-left: 1px solid var(--border); }
.mk .hero .plan b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.mk .codecard { align-self: start; background: var(--card); border: 1px solid var(--border); }
.mk .cbar { display: flex; align-items: center; min-height: 34px; border-bottom: 1px solid var(--border); font-size: 13px; }
.mk .cbar button, .mk .cbar .file { padding: 7px 12px; }
.mk .cbar [aria-pressed="true"] { background: var(--raised); font-weight: 600; }
.mk .cbar .lang { white-space: nowrap; }
.mk .cbar .file { margin-left: auto; color: var(--muted); }
.mk .codecard .code { padding: 10px 0; font-size: 13px; overflow-x: auto; }

.mk .sechead { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; }
.mk .sechead h2, .mk .doc__head h2 { font-size: 15px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.mk .packs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); background: var(--card); }
.mk .pack { padding: 18px 20px 20px; }
.mk .pack + .pack { border-left: 1px solid var(--border); }
.mk .pack.hl { box-shadow: inset 0 4px 0 var(--mint); }
.mk .pack .no { font-size: 12px; color: var(--muted); }
.mk .pack :is(h2, h3) { margin: 4px 0 6px; font-size: 24px; line-height: 1.15; letter-spacing: -0.015em; } /* /packs' card titles are h2, the home's h3 */
.mk .pack p { margin-bottom: 10px; font-size: 15px; color: var(--muted); }
/* /packs: the cards between the band and the footer, at the hero's top and .start's bottom. Block padding only: it sits
   on a .wrap, whose sides are .wrap's. The phone block sets both again: its .mk .wrap, the same specificity and later,
   zeroes them. */
.mk .catalog { padding-block: 32px 48px; }

.mk .how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 56px 0; }
.mk .how h3 { margin: 6px 0; font-size: 22px; }
.mk .how p { font-size: 16px; color: var(--muted); }
.mk .start { padding-bottom: 48px; }
.mk .start .ctas { margin: 0; }
.mk .start .note { margin-top: 10px; font-size: 14px; color: var(--muted); }
.mk .foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding: 24px 0 40px; border-top: 1px solid var(--border); font-size: 14px; color: var(--muted); }
.mk .foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.mk .theme-toggle { margin-left: auto; text-decoration: underline; }

/* Below 1100px the band stacks its <h1> under the wordmark: side by side, the 184px wordmark and the <h1> overflowed
   the band's padding by up to 21.7px to 1045px, to 1060px with a 17px scrollbar (SHL-425). The wordmark keeps its size.
   Below 1024px the hero stacks too, as its CTAs run under the code card below 930px, and the wordmark shrinks:
   "ShiftLabs" is 4.3 times its font size wide. The phone block below resets each of these, so the signed-off 390px
   render doesn't move. */
@media (max-width: 1099px) {
  .mk .band { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 1023px) {
  .mk .util nav { margin-left: 12px; }
  .mk .util a.nl { padding-inline: 8px; }
  .mk .mark { font-size: min(184px, calc((100vw - 72px) / 4.4)); }
  .mk .hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
/* The bar's row needs 604px at 8px padding: at 601-603px Sign in wrapped onto two lines (SHL-434). Range syntax so a
   zoomed, fractional width between the phone block's 600px and 601px gets the 6px too. */
@media (600px < width < 640px) {
  .mk .util a.nl { padding-inline: 6px; }
}

@media (max-width: 600px) {
  .mk { font-size: 16px; }
  .mk .wrap { padding: 0 18px; }
  .mk .util { flex-wrap: wrap; height: auto; min-height: 52px; }
  .mk .util a.nl { padding-inline: 12px; }
  .mk .util nav, .mk .util .hide-m { display: none; }
  .mk .menu-btn { display: inline-flex; order: 1; }
  .mk .util:has(.menu-btn[aria-expanded="true"]) nav { display: flex; flex-direction: column; order: 2; flex-basis: 100%; margin: 0 0 8px; }
  /* Start free, the bar's one .hide-m, is the open Menu's last row (SHL-421): another .hide-m in the bar would show there too. */
  .mk .util:has(.menu-btn[aria-expanded="true"]) .hide-m { display: flex; order: 3; flex-basis: 100%; justify-content: center; margin: 0 0 8px; }
  .mk .band { grid-template-columns: 1fr; gap: 10px; padding: 10px 18px 16px; }
  .mk .mark { margin-left: -4px; font-size: min(78px, calc((100vw - 32px) / 4.4)); }
  .mk .band h1 { padding: 0; font-size: 24px; }
  .mk .hero { grid-template-columns: 1fr; gap: 24px; padding: 22px 0; }
  .mk .lead { font-size: 17px; }
  .mk .ctas { flex-direction: column; align-items: stretch; }
  .mk .ctas .btn { justify-content: center; }
  .mk .hero .plan { grid-template-columns: 1fr; max-width: none; }
  .mk .hero .plan > * + * { border-left: 0; border-top: 1px solid var(--border); }
  .mk .codecard .code { font-size: 11.5px; }
  .mk .codecard .code .l::before { width: 36px; padding-right: 8px; }
  .mk .packs { grid-template-columns: 1fr; }
  .mk .pack + .pack { border-left: 0; border-top: 1px solid var(--border); }
  .mk .catalog { padding-block: 22px 48px; }
  .mk .how { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .mk .foot { gap: 12px; }
}
/* The language tabs and the file name share the bar's one row from a 377 px viewport up, and the tabs are the card's
   controls, so below 384 px the file name leaves the view; it stays in the figure's caption for screen readers. */
@media (max-width: 383px) {
  .mk .cbar .file { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Without script the Menu button can't open, so the links and Start free show under the bar instead. */
@media (max-width: 600px) and (scripting: none) {
  .mk .menu-btn { display: none; }
  .mk .util nav { display: flex; flex-wrap: wrap; order: 2; flex-basis: 100%; margin: 0 0 8px; }
  .mk .util .hide-m { display: flex; order: 3; flex-basis: 100%; justify-content: center; margin: 0 0 8px; }
}

/* /pricing and /security (SHL-439): A sections from the home's parts. Those pages load app.css for their [data-ui]
   fragments, and not site.css or base.js. From 1200px a section's fragments and pictures sit in a 5fr column beside its
   prose; generator/picture.ts's aSide sizes is that column, and test/media.test.ts checks one against the other. */

/* The page head: the band, then the hero, the lead beside the photo, then the contents row under both. */
.mk .page-head .photo { aspect-ratio: 3 / 2; }
.mk .page-head .photo img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.mk .page-head__photo--wac img { object-position: 30% 30%; }
.mk .page-index { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* The links are in the preloaded 400: in the 600, which loads later, /security's nine rewrapped from four lines to five
   on a 412px phone and moved the page under them, a layout shift of 0.036 in Lighthouse. */
.mk .page-index a { padding: 4px 0; font-size: 15px; text-decoration-color: var(--control); text-underline-offset: 4px; }

/* Photographs and clips: greyscale, the caption a card-coloured block over the bottom left. */
.mk .photo, .mk .film { position: relative; overflow: clip; border: 1px solid var(--border); background: var(--raised); }
.mk .photo img, .mk .film video { width: 100%; filter: grayscale(1) contrast(1.05); background: var(--raised); }
.mk .photo figcaption, .mk .film figcaption { position: absolute; left: 0; bottom: 0; max-width: calc(100% - 32px); padding: 6px 10px; background: var(--card); color: var(--muted); font-size: 13px; line-height: 1.35; }
.mk .film__control { position: absolute; top: 8px; right: 8px; min-width: 24px; min-height: 24px; padding: 4px 10px; border: 1px solid var(--control); background: var(--card); color: var(--ink); font-size: 13px; font-weight: 600; }
.mk .arrow { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }

/* A section: its .sechead, then its prose on the A column and its fragments and pictures, then any full-width table.
   From 1200px the side spans two rows, so a second prose block follows the first directly instead of below the side:
   /security's Outbound requests keeps its fragment before its rows, the order test/a-pages.test.ts's text check holds. */
.mk .sec { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 48px; align-items: start; padding-top: 56px; }
.mk .sec > .sechead, .mk .sec > .card, .mk .sec > .ref-scroll { grid-column: 1 / -1; }
.mk .sec__main { max-width: 68ch; }
.mk .sec__main--wide { max-width: none; }
.mk .sec__main p, .mk .card p { max-width: 68ch; }
.mk .sec__main code { overflow-wrap: anywhere; }
.mk .sec__intro { margin-bottom: 20px; font-size: 19px; line-height: 1.45; }
.mk .sec__side { display: grid; gap: 16px; margin-top: 28px; }
.mk .sec__side + .sec__main { margin-top: 28px; }
.mk .sec__side > figure { max-width: 640px; }
@media (min-width: 1200px) {
  .mk .sec { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; }
  .mk .sec__main { grid-column: 1; }
  .mk .sec__side { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; }
  .mk .sec__side + .sec__main { margin-top: 0; }
  .mk .sec__side > figure { max-width: none; }
}
.mk .rows { border-top: 1px solid var(--border); }
.mk .rows > li { padding: 14px 0 16px; border-bottom: 1px solid var(--border); }
.mk .rows b { display: block; margin-bottom: 2px; font-weight: 600; }
@media (min-width: 1024px) {
  .mk .rows.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
.mk .faq > li { padding: 0; }
.mk .faq summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; font-weight: 600; list-style: none; cursor: pointer; }
.mk .faq summary::-webkit-details-marker { display: none; }
.mk .faq summary::after { content: "+"; content: "+" / ""; flex: none; color: var(--muted); font-weight: 400; }
.mk .faq [open] > summary::after { content: "−"; content: "−" / ""; }
.mk .faq details > p { padding-bottom: 16px; }
.mk .card { padding: 20px 24px 24px; border: 1px solid var(--border); background: var(--card); }
.mk .sec .ctas { margin: 24px 0 0; }
.mk .sec .ctas .btn { height: auto; min-height: 52px; white-space: normal; text-align: center; }

/* The limits: four columns that keep their widths and scroll sideways in their region below 1024px. 942px is the
   region's inside at 1024, after .wrap's 40px padding and its own 1px edges. The scroll cue (front-end lead 8a3e0d35),
   on these and on /security's two scrolling fragments: a shadow at an edge with more table past it, the fixed (scroll)
   shadows hidden at an end the table has reached by card-coloured covers that move with it (local). */
.mk .ref-scroll, .mk .frag__scroll { overflow-x: auto; background: linear-gradient(to right, var(--card) 30%, transparent) left / 40px 100% no-repeat local, linear-gradient(to left, var(--card) 30%, transparent) right / 40px 100% no-repeat local, linear-gradient(to right, color-mix(in srgb, var(--ink) 18%, transparent), transparent) left / 12px 100% no-repeat scroll, linear-gradient(to left, color-mix(in srgb, var(--ink) 18%, transparent), transparent) right / 12px 100% no-repeat scroll, var(--card); }
.mk .ref-scroll { margin-top: 28px; border: 1px solid var(--border); }
.mk .ref { width: 100%; min-width: 942px; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.45; }
.mk .ref caption { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; text-align: left; }
.mk .ref th { padding: 10px 16px 8px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.mk .ref td { padding: 12px 16px; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.mk .ref tr:last-child td { border-bottom: 0; }
.mk .ref td:first-child { font-weight: 600; }
.mk .ref td:not(:first-child, :last-child) { font-family: var(--font-mono); font-size: 14px; } /* taste-skill-ignore: the values */
.mk .ref__note { display: block; color: var(--muted); font-size: 14px; font-weight: 400; }
/* From 768px the label column stays put while the values scroll. Narrower, it would leave them too little room: at 390px
   146px beside its 206px, where Pro's and When you reach it's lines are 283-400px wide. A sticky cell's own border moves
   with it only under border-collapse: separate. */
@media (min-width: 768px) and (max-width: 1023px) {
  .mk .ref th:first-child, .mk .ref td:first-child { position: sticky; left: 0; background: var(--card); box-shadow: inset -1px 0 0 var(--border); }
}

/* The fragments: app.css draws what [data-ui] holds; the card and its bar are the home's. */
.mk .codecard[data-ui] { container-type: inline-size; }
.mk .codecard[data-ui] .cbar { flex-wrap: wrap; }
.mk .cbar .ui-title { padding: 7px 12px; font-size: 13px; font-weight: 600; line-height: 20px; }
.mk .cbar .f { margin-left: auto; padding: 7px 12px; font-size: 13px; white-space: nowrap; }
.mk .codecard[data-ui] td { white-space: normal; }
.mk .codecard[data-ui] td.num { white-space: nowrap; }
.mk .codecard .frag__note { max-width: none; padding: 10px 12px; border-top: 1px solid var(--rule); }
.mk .codecard .usage__rows { padding: 12px; }
.mk .usage__rows { display: grid; gap: 12px; }
.mk .usage__rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
.mk .usage__rows dt { color: var(--muted); }
.mk .usage__rows dd { text-align: right; }
.mk .usage__rows .meter { grid-column: 1 / -1; }
.mk [data-ui] .p63 { width: 63%; }
.mk [data-ui] .p41 { width: 41.2%; }
.mk [data-ui] .p40 { width: 40%; }
.mk [data-ui] .p93 { width: 92.6%; }
.mk [data-ui] .p100 { width: 100%; }
/* /security's five-column Audit log and Approvals tables need 36rem: in a narrower card, as beside the prose from
   1200px (447-513px), they scroll sideways in their labelled region with their <th> headers (18cebbd0; stacking their
   rows below 36rem hid every header above 1199px, found in PR 746's review). In a phone-wide card their rows stack, as
   the board's did; the egress fragment lets a host break, and the members list leaves out how each signs in. */
.mk .frag__audit { min-width: 36rem; }
@container (max-width: 26rem) {
  .mk .frag__audit thead { display: none; }
  .mk .frag__audit, .mk .frag__audit tbody { display: block; min-width: 0; }
  .mk .frag__audit tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 9px 12px; border-bottom: 1px solid var(--rule); }
  .mk .frag__audit tr:last-child { border-bottom: 0; }
  .mk .frag__audit td { padding: 0; border: 0; }
  .mk .frag__audit td:last-child { grid-column: 1 / -1; }
  .mk [data-ui] .col-wide { display: none; }
}
.mk .frag__egress .req { overflow-wrap: break-word; }
.mk .frag__egress .req .host { display: inline-block; max-width: 100%; }
/* The auto layout gave Request 95px of content at 390, under the 97-135px hosts; 10rem holds the widest from 390 up. */
.mk .frag__egress th:first-child { width: 10rem; }

/* The plans: as many columns as fit cards at least 22rem wide, so two to five cards need no CSS of their own (SHL-178
   AC5). A card lays itself out by its own width, a container query. Its edges are shadows into the 1px gaps, so a short
   last row leaves an empty cell the card's colour, not a block of the edge's. */
.mk .pricing { display: grid; gap: 1px; margin-top: 32px; border: 1px solid var(--border); background: var(--card); }
.mk .pricing { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.mk .pricing > .plan { display: grid; container-type: inline-size; padding: 18px 20px 20px; background: var(--card); box-shadow: -1px 0 0 var(--border), 0 -1px 0 var(--border), -1px -1px 0 var(--border); }
.mk .pricing > .plan.hl { box-shadow: inset 0 4px 0 var(--mint), -1px 0 0 var(--border), 0 -1px 0 var(--border), -1px -1px 0 var(--border); }
.mk .plan__body { display: flex; flex-direction: column; gap: 20px; overflow-wrap: break-word; }
.mk .plan__head { display: grid; align-content: start; gap: 20px; }
.mk .plan__name { font-size: clamp(1.75rem, 8cqi, 2.5rem); line-height: 1; letter-spacing: -0.03em; }
.mk .plan .price { font-size: clamp(3rem, 14cqi, 5.5rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.85; font-variant-numeric: tabular-nums; }
.mk .plan .price__cur { margin-right: 0.04em; font-size: 0.4em; vertical-align: 1.1em; }
.mk .plan .price__per { margin-left: 0.5em; font-size: 17px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.mk .plan__lede { max-width: 52ch; color: var(--muted); font-size: 15px; }
.mk .price__lines { display: grid; align-content: start; gap: 6px; font-weight: 600; line-height: 1.3; }
.mk .plan .usage { display: grid; gap: 10px; padding: 14px 16px; }
.mk .plan__action { margin-top: auto; align-self: flex-start; }
.mk .plan__soon b { display: block; font-size: 20px; letter-spacing: -0.015em; }
@container (max-width: 20rem) {
  .mk .plan .usage__rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mk .plan .usage__rows dd { text-align: left; }
}
@container (min-width: 34rem) {
  .mk .plan__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); grid-template-rows: auto auto 1fr auto; grid-template-areas: "head usage" "lede lede" "lines lines" "action action"; gap: 24px; }
  .mk .plan__head { grid-area: head; }
  .mk .plan__lede { grid-area: lede; }
  .mk .price__lines { grid-area: lines; }
  .mk .plan .usage { grid-area: usage; align-self: start; }
  .mk .plan__action { grid-area: action; align-self: end; justify-self: start; }
}

.mk .credits { padding: 56px 0 24px; color: var(--muted); font-size: 14px; }
.mk .credits ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 8px 24px; margin-top: 8px; padding: 0; list-style: none; }

@media (max-width: 600px) {
  .mk .sec { padding-top: 40px; }
  .mk .sec__intro { font-size: 17px; }
  .mk .card { padding: 18px 18px 20px; }
}