/* The public pages.
 *
 * Loaded AFTER sahablabs.css and adding nothing to it: every colour, radius and
 * space here resolves to a token that file already defines, so both themes and
 * any tenant recolour reach these pages for free. What is here is only what a
 * marketing surface needs and an application does not — a display type scale, a
 * centred rhythm, and the section shapes the app has no equivalent of.
 *
 * The visual language follows the reference the client pointed at: a deep,
 * slightly blue canvas, one very large headline with a single accent phrase, a
 * small pill above each centred section heading, icon-tiled cards, alternating
 * bands, and a lot of vertical air. What it does NOT follow is the reference's
 * social proof — testimonials, star ratings, "106+ active" — because none of
 * that is measured here and inventing it is the fastest way to lose the
 * technical reader this page is written for.
 *
 * Every inline offset is a logical property, so the page mirrors in Arabic.
 * The terminal mock does not mirror: it is pinned dir="ltr" in the markup,
 * because the commands inside it do not mirror either.
 */

/* --------------------------------------------------------------- surface */
/* A touch bluer and deeper than the application's canvas, which is tuned to sit
   beside a terminal. Derived from the existing tokens rather than a new hex, so
   a tenant recolour still reaches it. */
.mk-page {
  --mk-canvas: color-mix(in srgb, var(--void) 78%, #0A1020);
  --mk-panel: color-mix(in srgb, var(--surface) 88%, var(--void));
  --mk-glow: color-mix(in srgb, var(--accent) 22%, transparent);
  background: var(--mk-canvas);
}
/* Light has to be written twice, for the same reason the token mapping in
   sahablabs.css is: an explicit choice is an attribute selector, the default is
   a media query, and CSS cannot merge the two into one selector list. Without
   the second copy a visitor whose OS prefers light and who never touched the
   toggle got the DARK canvas mixed from --void, which stays dark in both
   themes on purpose. */
:root[data-theme="light"] .mk-page {
  --mk-canvas: var(--raised);
  --mk-panel: var(--surface);
  --mk-glow: color-mix(in srgb, var(--accent) 12%, transparent);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .mk-page {
    --mk-canvas: var(--raised);
    --mk-panel: var(--surface);
    --mk-glow: color-mix(in srgb, var(--accent) 12%, transparent);
  }
}

/* ------------------------------------------------------------- skip link */
.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--s4);
  z-index: 50;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--brand-ink);
  font-weight: 600;
  transition: inset-block-start 120ms ease-out;
}
.skip-link:focus { inset-block-start: var(--s3); text-decoration: none; }

/* ------------------------------------------------------------ page shell */
.mk { margin: 0 auto; }
.mk-in { max-inline-size: 1120px; margin: 0 auto; padding-inline: var(--s5); }

/* The application's h1 is 20px, sized for a bar title. A landing headline is
   doing a different job at a different distance. */
.mk h1 { font-size: clamp(32px, 5.6vw, 58px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; }
.mk h2 { font-size: clamp(24px, 3.4vw, 36px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
.mk h3 { font-size: 16px; line-height: 1.35; font-weight: 600; }
/* Arabic has no descender-tight display faces here and needs the room. */

.mk-section { padding-block: clamp(56px, 8vw, 104px); }
/* Alternating bands, so a long page reads as chapters rather than as scroll. */
.mk-section.alt { background: var(--mk-panel); border-block: 1px solid var(--edge); }

/* The eyebrow above a section heading. */
.mk-eyebrow {
  display: inline-block;
  margin-block-end: var(--s3);
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Uppercase is Latin-only — Arabic has no case, so the hierarchy would vanish. */

.mk-head { text-align: center; max-inline-size: 62ch; margin-inline: auto; }
.mk-head p { margin-block: var(--s4) 0; color: var(--ink-muted); font-size: clamp(14.5px, 1.6vw, 16px); line-height: 1.6; }
.mk-head + * { margin-block-start: clamp(32px, 4vw, 56px); }

/* ------------------------------------------------------------------ hero */
.mk-hero { position: relative; padding-block: clamp(48px, 7vw, 88px) clamp(40px, 5vw, 64px); overflow: hidden; }
/* The glow. A single radial behind the headline — no image, no gradient mesh,
   about forty bytes of CSS. */
.mk-hero::before {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: min(1200px, 130%);
  block-size: 620px;
  background: radial-gradient(ellipse at center, var(--mk-glow), transparent 62%);
  pointer-events: none;
}
.mk-hero > * { position: relative; }
.mk-hero-copy { text-align: center; max-inline-size: 58ch; margin-inline: auto; }
.mk-accent { color: var(--accent); }
.mk-lede {
  margin-block: var(--s5) var(--s5);
  color: var(--ink-muted);
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.6;
}
.mk-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-block-end: var(--s3); }
.mk-actions .btn { min-block-size: 46px; padding-inline: 24px; font-size: 14.5px; border-radius: var(--r); }
.mk-note { font-size: 13px; }

/* ------------------------------------------------------------ hero mock */
.mk-mock {
  margin: clamp(40px, 5vw, 64px) 0 0;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 28px 70px -30px rgb(0 0 0 / 0.75);
  overflow: hidden;
}
.mk-mock-chrome {
  display: flex;
  gap: 6px;
  padding: 11px var(--s4);
  border-block-end: 1px solid var(--edge);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.mk-dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--edge); }
/* Full width under the copy, never beside it. Side by side the terminal column
   came out around 300px, which wrapped `kubectl get deploy` and dropped
   AVAILABLE off the right edge — and a clipped terminal is worse than none
   here, because the argument of this page is that the environment is real. */
.mk-mock-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.mk-mock-aside { padding: var(--s5); border-block-end: 1px solid var(--edge); font-size: 13.5px; }
.mk-mock-aside p { margin-block-end: var(--s3); }
.mk-mock-title { margin-block: 8px var(--s2); color: var(--ink); font-size: 16px; font-weight: 600; }
/* A span, not a button: it is a picture of a control, and a real one would be
   focusable and pressable and do nothing. */
.mk-fakebtn { display: inline-flex; cursor: default; pointer-events: none; }

.mk-verdict {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--pass) 45%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--pass) 10%, transparent);
  color: var(--pass);
  font-size: 12.5px;
  line-height: 1.45;
}
.mk-verdict svg { flex: 0 0 auto; margin-block-start: 2px; }
.mk-verdict .muted { color: color-mix(in srgb, var(--pass) 70%, var(--ink-muted)); }

@media (prefers-reduced-motion: no-preference) {
  /* One animation, once, and it is the thing being sold: the check resolving.
     No loop — a page that keeps moving while you read it is harder to read. */
  .mk-verdict { animation: mk-verdict-in 520ms cubic-bezier(0.16, 1, 0.3, 1) 900ms both; }
  @keyframes mk-verdict-in { from { opacity: 0; transform: translateY(6px); } }
  .mk-caret { animation: mk-blink 1.15s steps(1) infinite; }
  @keyframes mk-blink { 50% { opacity: 0; } }
}

.mk-term {
  margin: 0;
  padding: var(--s5);
  overflow-x: auto;
  background: var(--void);
  color: var(--void-ink);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre;
}
.mk-ps1 { color: var(--pass); }
.mk-cwd { color: var(--accent); }
.mk-caret { display: inline-block; inline-size: 8px; background: var(--void-ink); vertical-align: text-bottom; }
.mk-mock figcaption { padding: var(--s3) var(--s5); border-block-start: 1px solid var(--edge); color: var(--ink-muted); font-size: 12.5px; }

/* ------------------------------------------------------------ icon tiles */
.mk-tile {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  margin-block-end: var(--s3);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.mk-tile svg { inline-size: 19px; block-size: 19px; }

/* ----------------------------------------------------------------- cards */
.mk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.mk-card {
  padding: var(--s5);
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--surface);
}
.mk-card h3 { margin-block-end: var(--s2); }
.mk-card p { margin: 0; color: var(--ink-muted); font-size: 13.5px; line-height: 1.65; }
.mk-card.on { border-color: color-mix(in srgb, var(--accent) 50%, var(--edge)); }

/* ----------------------------------------------------------------- steps */
.mk-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s5); margin: 0; padding: 0; list-style: none; }
.mk-steps h3 { margin-block: var(--s3) var(--s2); }
.mk-steps p { margin: 0; color: var(--ink-muted); font-size: 13.5px; line-height: 1.65; }
.mk-num {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
}

/* ----------------------------------------------------------------- modes */
.mk-feature {
  padding: clamp(24px, 3.5vw, 40px);
  margin-block-end: var(--s4);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--edge));
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% -30%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 68%),
    var(--surface);
  text-align: center;
}
.mk-feature h3 { font-size: clamp(19px, 2.4vw, 24px); margin-block-end: var(--s3); }
.mk-feature > p { max-inline-size: 62ch; margin-inline: auto; color: var(--ink-muted); font-size: 14.5px; line-height: 1.65; }
.mk-feature .mk-tile { margin-inline: auto; }
/* The single most important sentence on the page. Weight and ink, not a colour
   block — it has to still read as prose. */
.mk-strong {
  max-inline-size: 54ch;
  margin: var(--s4) auto;
  color: var(--ink);
  font-size: clamp(17px, 2.3vw, 22px);
  font-weight: 600;
  line-height: 1.4;
}

/* ---------------------------------------------------------------- report */
.mk-report { padding: clamp(20px, 3vw, 36px); border: 1px solid var(--edge); border-radius: 16px; background: var(--surface); }
.mk-report-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-block-end: var(--s5); }
.mk-report-note { color: var(--ink-muted); font-size: 12.5px; }

/* The ring and the domain rows below it are .rep-ring / .rep-dom-row — the
   real report page's own components, defined once in sahablabs.css and
   reused here rather than rebuilt. What is here is only what this page adds
   on top: the hero layout that sits the ring beside the verdict line, and a
   margin/list reset for the two places that component gets a <dl> instead of
   the app's plain <div> — this page keeps the bars readable as a definition
   list with JS off (see the comment beside the markup), which the app's own
   report page does not need to. */
.mk-report-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s6);
  align-items: center;
  margin-block-end: var(--s5);
}
.mk-report-verdict { margin: 0; color: var(--ink-muted); font-size: 13.5px; line-height: 1.65; }
.mk-report-verdict b { color: var(--fail); }
.mk-report .rep-dom { margin: 0; }
.mk-report .rep-dom-row dt, .mk-report .rep-dom-row dd { margin: 0; }
@media (max-width: 640px) {
  .mk-report-hero { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--s4); }
}

/* --------------------------------------------------------------- catalog */
.mk-sub-h { margin-block: var(--s5) var(--s3); color: var(--ink-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; text-align: center; }
.mk-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.mk-cat li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 12px var(--s3);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 13.5px;
}
.mk-cat .badge { flex: 0 0 auto; }
.mk-cat-all { margin-block-start: var(--s5); text-align: center; }

/* --------------------------------------------------------------- pricing */
.mk-price { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: var(--s4); align-items: stretch; }
.mk-price .mk-card { display: flex; flex-direction: column; }
.mk-amount { margin-block: var(--s3) var(--s1); color: var(--ink); font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.mk-was { margin-inline-start: var(--s2); color: var(--ink-muted); font-size: 16px; font-weight: 400; }
.mk-price .mk-card > p:last-child { margin-block-start: auto; }
.mk-fineprint { max-inline-size: 78ch; margin: var(--s5) auto 0; color: var(--ink-muted); font-size: 12.5px; line-height: 1.65; text-align: center; }

/* ------------------------------------------------------------------- faq */
.mk-faq { max-inline-size: 780px; margin-inline: auto; display: grid; gap: var(--s2); }
.mk-faq details { border: 1px solid var(--edge); border-radius: var(--r); background: var(--surface); }
.mk-faq summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  list-style: none;
}
.mk-faq summary::-webkit-details-marker { display: none; }
/* Drawn, not inherited: the default triangle sits on the wrong side in RTL and
   cannot be moved. This one is a flex sibling, so it mirrors with the row. */
.mk-faq summary::after {
  content: "+";
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  flex: 0 0 auto;
  border: 1px solid var(--edge);
  border-radius: 50%;
  color: var(--accent);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}
.mk-faq details[open] summary::after { content: "−"; }
.mk-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r); }
.mk-faq details p { margin-block: 0 var(--s3); padding-inline: var(--s5); color: var(--ink-muted); font-size: 13.5px; line-height: 1.7; }
.mk-faq details p:last-child { margin-block-end: var(--s5); }

/* ------------------------------------------------------------- final cta */
.mk-final { text-align: center; }

/* ---------------------------------------------------------------- footer */
.mk-foot { border-block-start: 1px solid var(--edge); background: var(--mk-panel); }
.mk-foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); max-inline-size: 1120px; margin: 0 auto; padding: var(--s5); font-size: 13px; }
.mk-foot-in > p { margin: 0; flex: 1 1 260px; color: var(--ink-muted); }
.mk-foot-nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
.mk-foot-lang { display: flex; gap: var(--s3); }
.mk-foot-lang a { color: var(--ink-muted); }
.mk-foot-lang a[aria-current="true"] { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------ wide/mobile */
@media (min-width: 860px) {
  .mk-mock-body { grid-template-columns: minmax(280px, 5fr) minmax(0, 8fr); }
  .mk-mock-aside { border-block-end: 0; border-inline-end: 1px solid var(--edge); }
}
@media (max-width: 640px) {
  .mk-in { padding-inline: var(--s4); }
  .mk-term { font-size: 11.5px; padding: var(--s4); }
  .mk-actions .btn { flex: 1 1 100%; justify-content: center; }
  .mk-foot-in { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════ the live layer ══
 *
 * Everything below turns the rendered page into something that behaves like a
 * running platform. It is all additive: with JS off none of it engages, the
 * reveals sit at full opacity, and the page is the same page.
 */

/* ------------------------------------------------------------- particles */
/* The node field. Fixed behind everything, pointer-transparent, and painted
   by canvas rather than by 70 transformed elements — which would cost the
   compositor far more than one 2d context. */
.mk-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  opacity: 0.55;
}
/* The mesh: three slow radial washes over the field, plus a grid that fades
   out with distance so the page has a floor rather than a backdrop. */
.mk-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 34rem at 18% -8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(48rem 30rem at 88% 6%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 60%),
    radial-gradient(52rem 32rem at 50% 108%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 64%);
}
.mk-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size: 62px 62px;
  /* Masked so the grid is strongest at the top and gone by mid-page — a grid
     that runs edge to edge reads as graph paper, not as depth. */
  -webkit-mask-image: radial-gradient(90% 60% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(90% 60% at 50% 0%, #000 20%, transparent 78%);
}
/* The CONTENT is lifted above the background layers — named elements, not
   `.mk-page > *`. The wildcard also matched the mesh, the grid and the canvas
   and overrode their `position: fixed` back to relative, which put the canvas
   in the flow at its intrinsic height and pushed the header 883px down. */
.mk-page > header,
.mk-page > main,
.mk-page > footer { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- cursor */
/* ADDITIVE. The native cursor is never hidden — replacing it looks impressive
   for four seconds and then costs people every affordance their OS spent
   thirty years teaching them: the I-beam, the resize arrows, the grab hand. */
.mk-cursor {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 60;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 46%, transparent), transparent 68%);
  transition: opacity 200ms ease-out, inline-size 180ms cubic-bezier(0.16,1,0.3,1),
              block-size 180ms cubic-bezier(0.16,1,0.3,1);
}
.mk-cursor.on { opacity: 1; }
.mk-cursor.big { inline-size: 52px; block-size: 52px; }
.mk-cursor.down { inline-size: 18px; block-size: 18px; }

/* --------------------------------------------------------------- reveals */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(0.16,1,0.3,1), transform 620ms cubic-bezier(0.16,1,0.3,1);
}
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}
/* No JS, no observer, no reveal — so the content must not be hidden at all. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* -------------------------------------------------------- premium button */
.btn.mk-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 22%, transparent) inset,
    0 10px 30px -10px color-mix(in srgb, var(--accent) 70%, transparent),
    0 2px 10px -4px rgb(0 0 0 / 0.5);
  transition: transform 160ms cubic-bezier(0.16,1,0.3,1), box-shadow 200ms ease-out;
}
.btn.mk-cta:hover:not(:disabled) {
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 28%, transparent) inset,
    0 16px 44px -12px color-mix(in srgb, var(--accent) 85%, transparent),
    0 3px 14px -4px rgb(0 0 0 / 0.55);
}
.btn.mk-cta:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
/* The shimmer: one band that crosses on hover. Transform-only, so it stays on
   the compositor and never triggers layout. */
.btn.mk-cta::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  inline-size: 45%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.28), transparent);
  transform: translateX(-30%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .btn.mk-cta:hover::after { opacity: 1; animation: mk-shimmer 900ms ease-out; }
  @keyframes mk-shimmer { to { transform: translateX(420%); } }
}
/* The ghost CTA gets a hairline that lights up rather than a fill. */
.btn.mk-ghost { border-color: color-mix(in srgb, var(--accent) 38%, var(--edge)); }
.btn.mk-ghost:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
              0 10px 30px -14px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* --------------------------------------------------------- immersive hero */
/* Full-height, but the terminal has to be IN that height. The first version
   sized the headline for the whole viewport and pushed the shell below the
   fold — which cost the page its entire argument, and quietly broke the
   terminal upgrade too, since its observer never saw it. The type is sized so
   copy and shell share one screen. */
.mk-hero.full {
  display: grid;
  align-content: start;
  min-block-size: calc(100svh - 56px);
  padding-block: clamp(24px, 4vh, 48px) clamp(24px, 4vh, 44px);
}
.mk-hero.full h1 { font-size: clamp(30px, 5vw, 54px); line-height: 1.05; letter-spacing: -0.03em; }
.mk-hero.full .mk-lede { margin-block: var(--s4) var(--s4); font-size: clamp(14.5px, 1.5vw, 16.5px); }
.mk-hero.full .mk-mock { margin-block-start: clamp(24px, 3vh, 40px); }
.mk-hero.full h1 .mk-accent {
  display: block;
  background: linear-gradient(96deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--ink)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------- glass terminal */
.mk-mock.glass {
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset,
    0 40px 90px -40px rgb(0 0 0 / 0.85),
    0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
  transition: transform 260ms cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
/* The provisioning chip and its light. */
.mk-mock-chrome { align-items: center; gap: var(--s3); }
.mk-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-inline-start: auto;
  padding: 3px 10px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 11.5px;
}
.mk-led {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent);
}
.mk-led.ok { background: var(--pass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pass) 22%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .mk-led:not(.ok) { animation: mk-pulse 1.1s ease-in-out infinite; }
  @keyframes mk-pulse { 50% { opacity: 0.35; } }
}
#mk-boot.ready { color: var(--pass); }
.mk-demo-tag {
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}
/* The live terminal replaces the static <pre> in place, so the host has to
   already be the right size — otherwise the swap jumps the page. */
/* Live: xterm owns the box completely. Leaving the <pre> typography in place
   cascaded white-space, font-family and line-height into xterm's internal rows
   and painted artifacts across the top of the buffer. */
#mk-term.is-live {
  white-space: normal;
  padding: var(--s3);
  font-family: inherit;
  line-height: normal;
  overflow: hidden;
}
#mk-term.is-live .xterm { block-size: 100%; }
#mk-term { min-block-size: 264px; padding: var(--s4); background: var(--void); }
#mk-term .xterm { block-size: 100%; }
.mk-verdict.fail {
  border-color: color-mix(in srgb, var(--fail) 45%, transparent);
  background: color-mix(in srgb, var(--fail) 10%, transparent);
  color: var(--fail);
}
.mk-verdict.busy { border-color: var(--edge); background: transparent; color: var(--ink-muted); }
.mk-verdict.fail .muted, .mk-verdict.busy .muted { color: var(--ink-muted); }

/* ------------------------------------------------------------- tech rail */
/* Horizontal, and scrollable by wheel, trackpad, keyboard and drag. Snap, so
   it lands on a panel rather than between two. */
.mk-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 268px);
  gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--s4);
  /* full-bleed inside the centred column, so panels run to the page edge */
  margin-inline: calc(var(--s5) * -1);
  padding-inline: var(--s5);
  scrollbar-width: thin;
  cursor: grab;
}
.mk-rail.drag { cursor: grabbing; scroll-snap-type: none; }
.mk-panel {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-block-size: 210px;
  padding: var(--s5);
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), var(--surface));
  transition: transform 280ms cubic-bezier(0.16,1,0.3,1), border-color 280ms ease-out,
              box-shadow 280ms ease-out;
}
@media (prefers-reduced-motion: no-preference) {
  .mk-rail:not(.drag) .mk-panel:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--edge));
    box-shadow: 0 24px 50px -26px color-mix(in srgb, var(--accent) 60%, transparent);
  }
}
.mk-panel h3 { font-size: 16px; }
.mk-panel p { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 1.55; }
.mk-panel .mk-count { margin-block-start: auto; color: var(--accent); font-size: 12px; font-weight: 600; }
.mk-panel-mark { color: var(--accent); }
.mk-panel-mark svg { inline-size: 26px; block-size: 26px; }

/* ------------------------------------------------------------ small print */
@media (max-width: 640px) {
  .mk-hero.full { min-block-size: auto; }
  .mk-rail { grid-auto-columns: minmax(215px, 235px); margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4); }
  .mk-stage { grid-template-columns: auto minmax(0, 1fr); padding: var(--s4); }
  .mk-cursor { display: none; }
}

/* The incident's SLO line. Small, and the value takes the failure colour —
   it is the number that makes a P1 feel like a P1. */
.mk-slo { display: flex; align-items: baseline; gap: var(--s2); font-size: 12.5px; }
.mk-slo-v { color: var(--fail); font-weight: 600; }


/* ---- the header's two states ----
 *
 * The marketing pages are reached from inside the application now (/home is
 * where the product header's Home link goes), so they can no longer assume
 * their reader is a stranger. `data-auth="in"` is stamped on <html> by
 * marketing_page() before paint, so the right header is the first one drawn
 * rather than one that flickers into the other. */
.mk-auth { display: none; }
:root[data-auth="in"] .mk-anon { display: none; }
:root[data-auth="in"] .mk-auth { display: inline-flex; }

/* =========================================================================
 * The pricing page (/pricing).
 *
 * Its own prefix rather than more .mk-* rules, because the shape is different
 * from the rest of the marketing surface: the landing page is a centred
 * single column of alternating bands, and this is a two-column hero over a
 * four-up comparison grid where the CARDS are the content and everything else
 * is framing. Sharing the .mk-card rules would have meant overriding most of
 * them.
 *
 * Nothing here introduces a colour. Every value resolves to a token
 * sahablabs.css already defines, so both themes and a tenant recolour reach
 * this page for free — and the one thing that does NOT follow the theme, the
 * navy header slab, is not styled here at all: it comes from `catalogue` on
 * <body>, which is the same class the application's own header wears.
 *
 * Every inline offset is a logical property, so the page mirrors under
 * dir="rtl". The terminal in the hero panel does not mirror: it is pinned
 * dir="ltr" in the markup, because the commands inside it do not either.
 * ------------------------------------------------------------------------- */

/* The bar is a fixed slab, and on this page it sits over a light canvas in
   both themes. The search box inside it is drawn for a page-coloured surface
   by the global sheet, so it gets the slab's ink here the same way the buttons
   next to it already do. */
body.catalogue .bar .cert-find input {
  background: color-mix(in srgb, var(--dk-ink) 8%, transparent);
  border-color: var(--nav-edge);
  color: var(--nav-ink);
}
body.catalogue .bar .cert-find input::placeholder { color: var(--nav-muted); }
body.catalogue .bar .cert-find svg { color: var(--nav-muted); }
.pr-lang { margin-inline-start: var(--s2); }
body.catalogue .bar .pr-lang a { border-color: var(--nav-edge); color: var(--nav-muted); }
body.catalogue .bar .pr-lang a.on { color: var(--nav-ink); border-color: var(--nav-muted); }
/* .mk-auth is declared inline-flex for the buttons it was written for. The
   account menu is a <details> and cannot be one. */
details.mk-auth { display: none; }
:root[data-auth="in"] details.mk-auth { display: block; }

/* ------------------------------------------------------------------ hero */
.pr-hero { padding-block: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 48px); }
/* Two columns on a desktop, one on a phone. The copy leads, so it is first in
   the source and stays first when the columns collapse. */
.pr-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
/* The landing hero centres its copy. This one does not: it is half of a
   two-column block, and a centred column beside a left-aligned panel reads as
   a mistake. */
.pr-hero-copy { text-align: start; max-inline-size: none; }
.pr-hero-copy h1 { font-size: clamp(30px, 4.4vw, 50px); }
.pr-hero-copy .mk-lede { max-inline-size: 56ch; margin-block: var(--s4) var(--s5); }

/* ---- the three value propositions ---- */
.pr-vp {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pr-vp li { display: flex; align-items: start; gap: var(--s3); min-inline-size: 0; }
.pr-vp li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.pr-vp b { font-size: 14px; font-weight: 600; }
.pr-vp .muted { font-size: 12.5px; line-height: 1.4; }
.pr-vp-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--accent);
}
.pr-vp-ico svg { inline-size: 19px; block-size: 19px; }

/* ---- the panel ---- */
.pr-panel {
  position: relative;
  padding: var(--s5);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--edge));
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.pr-panel-eyebrow { margin: 0 0 var(--s2); color: var(--ink-muted); font-size: 12.5px; }
.pr-panel-h { margin: 0 0 var(--s4); font-size: clamp(17px, 2.1vw, 21px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.pr-panel-h span { color: var(--accent); }

/* The terminal. --void, not --surface: it is the one surface that stays dark
   in the light theme (see the token notes in sahablabs.css), which is what
   makes a shell look like a shell on a white page. Everything drawn inside it
   therefore takes its ink from --void-ink rather than --ink, or it would go
   black-on-black the moment somebody picks light. */
.pr-term {
  border: 1px solid var(--void-edge);
  border-radius: 12px;
  background: var(--void);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(5, 7, 10, 0.24);
}
.pr-term-chrome {
  display: flex;
  gap: 6px;
  padding: 9px var(--s3);
  border-block-end: 1px solid var(--void-edge);
}
.pr-term-chrome .mk-dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--void-muted); opacity: 0.55; }
.pr-term-body {
  margin: 0;
  padding: var(--s3) var(--s4) var(--s4);
  color: var(--void-ink);
  font: 400 12px/1.7 var(--mono);
  white-space: pre;
  overflow-x: auto;
}
.pr-p { color: var(--dk-accent); }
.pr-ok { color: var(--dk-pass); }

/* The Kubernetes mark, floating off the panel's top corner. Blue: it is a
   technical accent naming somebody else's project, and the green on this page
   is reserved for our own actions and for free. */
.pr-k8s {
  position: absolute;
  inset-block-start: -16px;
  inset-inline-end: 22px;
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, #3B82F6 40%, transparent);
  background: color-mix(in srgb, #3B82F6 14%, var(--raised));
  color: #3B82F6;
}
.pr-k8s svg { inline-size: 22px; block-size: 22px; }

/* The progress chip, overlapping the terminal's bottom edge — the one piece of
   depth on the page, and it is doing a job: it says the session is measured,
   which is the whole argument for paying for one. */
.pr-chip {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-end: 16px;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 9px var(--s3);
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--raised);
  box-shadow: var(--shadow);
}
.pr-chip svg { inline-size: 17px; block-size: 17px; color: var(--accent); }
.pr-chip > span { display: flex; flex-direction: column; gap: 1px; }
.pr-chip b { font-size: 12px; font-weight: 600; }
.pr-chip .muted { font-size: 11px; }

/* ----------------------------------------------------------------- plans */
.pr-plans { padding-block: clamp(8px, 2vw, 24px) clamp(48px, 6vw, 80px); }

/* Four across on a desktop, two on a tablet, one on a phone. An explicit
   column count rather than auto-fit: these four are a comparison, and auto-fit
   would silently reflow them to three-plus-one at some width, which reads as
   three products and an afterthought. */
.pr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
@media (max-width: 1080px) { .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .pr-grid { grid-template-columns: minmax(0, 1fr); } }

.pr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s5);
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--raised);
  box-shadow: var(--shadow);
}
/* The paid card is emphasised, not enlarged: a card that is physically bigger
   than the ones beside it stops being comparable to them, which is the one job
   this row has. A green hairline, a tinted wash and the flag are enough. */
.pr-card.on {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--edge));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 220px),
    var(--raised);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 14%, transparent);
}
.pr-flag {
  position: absolute;
  inset-block-start: -11px;
  inset-inline-start: var(--s5);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* One icon container, four colourways, identical size and weight in all four —
   so the row reads as one family rather than four stickers. */
.pr-ico {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  margin-block-end: var(--s4);
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}
.pr-ico svg { inline-size: 21px; block-size: 21px; }
.pr-ico.sm { inline-size: 32px; block-size: 32px; margin-block-end: 0; border-radius: 10px; }
.pr-ico.sm svg { inline-size: 17px; block-size: 17px; }
.pr-ico.book  { color: #7C5CE0; background: color-mix(in srgb, #7C5CE0 13%, transparent); border-color: color-mix(in srgb, #7C5CE0 26%, transparent); }
.pr-ico.flask { color: #C2439E; background: color-mix(in srgb, #C2439E 13%, transparent); border-color: color-mix(in srgb, #C2439E 26%, transparent); }
.pr-ico.flag  { color: #E0731F; background: color-mix(in srgb, #E0731F 13%, transparent); border-color: color-mix(in srgb, #E0731F 26%, transparent); }
.pr-ico.blue  { color: #2F73D8; background: color-mix(in srgb, #2F73D8 13%, transparent); border-color: color-mix(in srgb, #2F73D8 26%, transparent); }
.pr-ico.ok    { color: var(--pass); background: color-mix(in srgb, var(--pass) 13%, transparent); border-color: color-mix(in srgb, var(--pass) 26%, transparent); }

.pr-card h2 { min-block-size: 2.6em; font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
/* The subtitle is given a fixed minimum so the four price rows land on the
   same baseline whether the line above them wrapped or not. Cards of wildly
   different internal rhythm are unreadable as a comparison. */
.pr-sub { margin-block: 6px 0; min-block-size: 3em; color: var(--ink-muted); font-size: 12.5px; line-height: 1.5; }

/* ---- the price ---- */
/* Reading order in the markup is list, then current, then badge, so a screen
   reader hears "$30, $10, 67% off". The eye gets the opposite emphasis: the
   current figure is the only thing here at display size. */
.pr-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-block: var(--s4) var(--s4);
  padding-block-end: var(--s4);
  border-block-end: 1px solid var(--edge);
}
.pr-was { color: var(--ink-muted); font-size: 19px; font-weight: 500; }
.pr-now { color: var(--ink); font-size: 34px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.pr-now.free { color: var(--accent); font-size: 30px; letter-spacing: 0; }
/* Soft red on a pink wash — the one place on this page that is not green,
   because a discount is not a success state and colouring it like one makes
   the free badges below mean less. */
.pr-off {
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fail) 13%, transparent);
  color: var(--fail);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* No promotion running: the struck-out figure and the badge would both be
   lies, so they are not drawn at all rather than drawn as a nil discount. */
.pr-price.pr-no-sale .pr-was,
.pr-price.pr-no-sale .pr-off { display: none; }

/* ---- the feature list ---- */
.pr-feat { display: grid; gap: 9px; margin: 0 0 var(--s5); padding: 0; list-style: none; }
.pr-feat li {
  position: relative;
  padding-inline-start: 24px;
  color: var(--ink-muted);
  font-size: 12.8px;
  line-height: 1.45;
}
/* The tick is drawn from a background image rather than a character, so it is
   the same weight and the same green in every row and cannot be read out by a
   screen reader as punctuation. */
.pr-feat li::before {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 0;
  inline-size: 15px;
  block-size: 15px;
  background: var(--accent);
  -webkit-mask: var(--pr-tick) center / 13px no-repeat;
  mask: var(--pr-tick) center / 13px no-repeat;
}
.pr-page {
  --pr-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}

/* ---- the action ---- */
/* margin-block-start:auto on the action, so every card's button sits on the
   same line however long the feature list above it ran. This is the whole
   reason .pr-card is a flex column. */
.pr-act { margin-block: auto 0; padding-block-start: var(--s2); }
.pr-act .btn { block-size: 42px; border-radius: var(--r); }
/* The free tiers get an outlined green button, not a filled one. Four solid
   green CTAs in a row would make the paid card indistinguishable from the
   things that cost nothing, which is the one distinction this page exists to
   draw. */
.pr-ghost {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--accent);
}
.pr-ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: var(--accent);
}
.pr-arrow { display: inline-block; transition: translate var(--ease); }
.pr-act .btn:hover .pr-arrow { translate: 3px 0; }
/* The arrow is the one glyph on the page that must mirror: it means "onward",
   and onward is leftward in Arabic. */
[dir="rtl"] .pr-arrow { scale: -1 1; }
[dir="rtl"] .pr-act .btn:hover .pr-arrow { translate: -3px 0; }
.pr-note { margin-block: var(--s3) 0; color: var(--ink-muted); font-size: 11.5px; text-align: center; }

.pr-catalog { max-inline-size: 78ch; margin: clamp(32px, 4vw, 48px) auto 0; color: var(--ink-muted); font-size: 13px; line-height: 1.7; text-align: center; }
.pr-catalog a { white-space: nowrap; }

/* --------------------------------------------------------------- why us */
/* The benefits row and the quote share a band, stacked rather than side by
   side. Side by side was the first attempt and it cost the row a third of its
   width: five items in ~730px is 146px each, which wrapped every label to two
   lines and every caption to four, and a benefits row nobody can scan is not a
   benefit. The quote is a footnote to the row either way, so it goes under it
   and keeps the right-hand alignment that put it beside the row before. */
.pr-why-in { display: grid; gap: clamp(24px, 4vw, 40px); }
.pr-why h2 { font-size: clamp(20px, 2.4vw, 26px); }
.pr-why-lede { margin-block: var(--s2) clamp(20px, 3vw, 32px); color: var(--ink-muted); font-size: 13.5px; }
.pr-why-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1000px) { .pr-why-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .pr-why-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr-why-row li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px var(--s2); align-items: start; min-inline-size: 0; }
.pr-why-row .pr-ico { grid-row: 1 / 3; }
.pr-why-row b { align-self: end; font-size: 12.4px; font-weight: 600; line-height: 1.3; }
.pr-why-row .muted { align-self: start; font-size: 11.2px; line-height: 1.4; }

.pr-quote {
  position: relative;
  /* Centred and well short of full width: a quote set as wide as the row
     above it reads as a second argument rather than as an aside, and pinned to
     one end it leaves half a band of empty floor beside it. */
  max-inline-size: 620px;
  margin-inline: auto;
  padding: var(--s5);
  border: 1px solid var(--edge);
  border-inline-start: 3px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 14px;
  background: var(--raised);
}
.pr-quote-mark { inline-size: 22px; block-size: 22px; margin-block-end: var(--s3); color: color-mix(in srgb, var(--accent) 45%, transparent); }
.pr-quote blockquote { margin: 0; font-size: 14px; line-height: 1.65; font-style: italic; }
.pr-quote figcaption { margin-block-start: var(--s3); color: var(--ink-muted); font-size: 12px; }

/* ------------------------------------------------------------------- faq */
.pr-faq-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3); max-inline-size: 780px; margin-inline: auto; margin-block-end: clamp(20px, 3vw, 32px); }
.pr-faq-head h2 { font-size: clamp(20px, 2.6vw, 28px); }
.pr-faq-head a { font-size: 13px; }
.pr-faq { max-inline-size: 780px; }

/* ------------------------------------------------------------ responsive */

/* The bar is a fixed 56px slab built for a row that fits. Below ~1000px the
   five nav links no longer do, so they wrap to a second line — and a fixed
   block-size turns a wrap into an overflow. Here it is allowed to grow, and
   the links get a line of their own rather than being squeezed against the
   controls. */
@media (max-width: 1000px) {
  .pr-page .bar { block-size: auto; flex-wrap: wrap; padding-block: var(--s2); }
  .pr-page .bar-id { flex-wrap: wrap; }
  .pr-page .cert-nav {
    order: 3;
    inline-size: 100%;
    margin-inline-start: 0;
    margin-block-start: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pr-page .cert-nav::-webkit-scrollbar { display: none; }
  /* The active link's underline is drawn 11px below the link, which is off the
     bottom of the bar once the row is its own line. */
  .pr-page .cert-nav a.on::after { inset-block-end: -4px; }
}

@media (max-width: 900px) {
  .pr-hero-in { grid-template-columns: minmax(0, 1fr); }
  /* The panel is decoration and the copy is the argument, so on a phone the
     argument keeps the fold. */
  .pr-panel { order: 2; }
}
@media (max-width: 620px) {
  /* One card per row: there is nothing beside a card to line its price up
     with any more, so the reserved second title line and the reserved subtitle
     lines are pure empty space. */
  .pr-card h2 { min-block-size: 0; }
  .pr-sub { min-block-size: 0; }
}
@media (max-width: 560px) {
  .pr-vp { grid-template-columns: minmax(0, 1fr); }
  /* Overlapping the terminal needs room the phone layout does not have. */
  .pr-chip { position: static; margin-block-start: var(--s4); }
}