/* ============================================================
   MapleKey — design system
   Evergreen + maple-crimson on snow. Dev-focused Canadian VPS.
   ============================================================ */

:root {
  /* Surfaces */
  --snow:    #FAFAF8;
  --paper:   #FFFFFF;
  --mist:    #EEF2EF;   /* faint green-tinted surface */
  --line:    #E5E7E0;
  --line-2:  #D5D9D1;

  /* Ink */
  --ink:     #16201B;   /* deep pine-black */
  --muted:   #5C6961;
  --faint:   #8A958D;

  /* Brand */
  --pine:    #0B3D2E;
  --pine-700:#0A3327;
  --pine-300:#3E6B5B;
  --maple:   #C8102E;
  --maple-600:#A60D26;

  /* Status */
  --run:     #1F8A52;
  --run-bg:  #E4F2EA;
  --stop:    #6B7280;
  --stop-bg: #ECEEEC;
  --prov:    #B06D00;
  --prov-bg: #FBF0DD;
  --err:     #C8102E;
  --err-bg:  #FBE6E9;

  /* Type */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'Inter', system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Geometry */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --shadow:    0 1px 2px rgba(16,32,24,.04), 0 8px 24px rgba(16,32,24,.05);
  --shadow-lg: 0 2px 6px rgba(16,32,24,.06), 0 18px 50px rgba(16,32,24,.10);
  --maxw: 1140px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--snow);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--pine); text-decoration: none; }
a:hover { color: var(--maple); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 .5em;
}

.mono { font-family: var(--mono); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Top navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250,250,248,.85);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -.02em; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__leaf { width: 22px; height: 22px; color: var(--maple); flex: none; }
.brand { color: var(--pine); }
.brand:hover { color: var(--pine-700); }
.brand__key { color: var(--maple); }
.nav__links { display: flex; gap: 22px; margin-left: 8px; }
.nav__links a { color: var(--muted); font-size: 14.5px; font-weight: 500; }
.nav__links a:hover { color: var(--ink); }
.nav__spacer { flex: 1; }
.nav__user { display: flex; align-items: center; gap: 14px; font-size: 14.5px; }
.nav__user a, .nav__user .who { white-space: nowrap; }
.nav__user .who { color: var(--muted); }
.nav__user .who b { color: var(--ink); font-weight: 600; }

@media (max-width: 480px) {
  .nav__inner { padding: 12px 16px; gap: 12px; }
  .nav__user { gap: 10px; font-size: 13.5px; }
  .nav__user .btn--sm { padding: 7px 11px; font-size: 12.5px; }
}

/* mobile menu */
.nav__burger {
  display: none; background: none; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 8px; cursor: pointer; color: var(--ink); align-items: center;
}
.nav__burger svg { width: 18px; height: 18px; }
.nav__sheet {
  display: none; border-top: 1px solid var(--line); background: var(--paper);
  padding: 10px 24px 16px;
}
.nav__sheet.open { display: block; }
.nav__sheet a { display: block; padding: 11px 2px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); font-size: 15px; }
.nav__sheet a:last-child { border-bottom: 0; }

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__user .who { display: none; }
  .nav__burger { display: inline-flex; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--body); font-size: 14.5px; font-weight: 600;
  padding: 10px 18px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--pine); color: #fff; }
.btn--primary:hover { background: var(--pine-700); color: #fff; }
.btn--maple { background: var(--maple); color: #fff; }
.btn--maple:hover { background: var(--maple-600); color: #fff; }
.btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--pine-300); color: var(--pine); }
.btn--sm { padding: 7px 13px; font-size: 13.5px; }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--pine-300); outline-offset: 2px; }
.btn svg { width: 16px; height: 16px; flex: none; }

/* busy state — applied by JS when a power action is submitted */
.btn.is-busy { opacity: .75; pointer-events: none; }
.btn.is-busy::after {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: btnspin .7s linear infinite;
}
@keyframes btnspin { to { transform: rotate(360deg); } }

/* ---------- Eyebrow / labels ---------- */
.eyebrow {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--maple);
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--maple); display: inline-block; }

/* ============================================================
   HERO  (signature: contour-line landscape + mono config line)
   ============================================================ */
.hero { position: relative; overflow: hidden; background: var(--pine); color: #fff; }
.hero__contours { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; pointer-events: none; }
.hero__inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 92px 24px 104px; }
.hero .eyebrow { color: #FFC9D0; }
.hero .eyebrow::before { background: #FFC9D0; }
.hero h1 { color: #fff; font-size: clamp(38px, 6vw, 66px); max-width: 13ch; margin-top: 18px; }
.hero h1 .accent { color: #FF9FAC; }
.hero__sub { color: #C9D8D1; font-size: clamp(17px, 2vw, 20px); max-width: 46ch; margin: 22px 0 0; }
.hero__cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__config {
  margin-top: 40px; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13.5px; color: #BFE0D2;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-sm); padding: 11px 16px;
}
.hero__config .prompt { color: #FF9FAC; }
.hero__config .blink { width: 8px; height: 15px; background: #BFE0D2; display: inline-block; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* trust strip */
.trust { background: var(--pine-700); color: #9FBDB0; border-top: 1px solid rgba(255,255,255,.07); }
.trust__inner { max-width: var(--maxw); margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; gap: 14px 34px; font-size: 13.5px; font-family: var(--mono); }
.trust__item { display: flex; align-items: center; gap: 9px; }
.trust__item svg { width: 15px; height: 15px; color: #FF9FAC; flex: none; }

/* ---------- Section scaffolding ---------- */
.band { padding: 84px 0; }
.band--mist { background: var(--mist); }
.band__head { max-width: 56ch; margin-bottom: 44px; }
.band__head h2 { font-size: clamp(28px, 3.5vw, 40px); margin-top: 14px; }
.band__head p { color: var(--muted); font-size: 17px; margin: 0; }

/* ---------- Pricing / plan grid ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.plan {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 24px 24px; display: flex; flex-direction: column;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--pine-300); }
.plan__name { font-family: var(--display); font-weight: 600; font-size: 19px; }
.plan__desc { color: var(--muted); font-size: 14px; min-height: 2.6em; margin: 6px 0 18px; }
.plan__price { display: flex; align-items: baseline; gap: 6px; }
.plan__price .amt { font-family: var(--display); font-weight: 600; font-size: 40px; letter-spacing: -.03em; }
.plan__price .cur { font-family: var(--mono); font-size: 13px; color: var(--maple); align-self: flex-start; margin-top: 6px; }
.plan__price .per { color: var(--faint); font-size: 14px; }
.plan__specs { list-style: none; margin: 22px 0; padding: 18px 0 0; border-top: 1px dashed var(--line-2); display: grid; gap: 11px; }
.plan__specs li { display: flex; align-items: center; gap: 11px; font-family: var(--mono); font-size: 13.5px; color: var(--ink); }
.plan__specs li svg { width: 15px; height: 15px; color: var(--pine-300); flex: none; }
.plan__specs li .k { color: var(--faint); }
.plan__cta { margin-top: auto; }
.plan__tag { position: absolute; top: -11px; right: 20px; background: var(--maple); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.plan--featured { border-color: var(--pine); box-shadow: var(--shadow); }

/* ---------- Feature row ---------- */
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.feat__ic { width: 40px; height: 40px; border-radius: 10px; background: var(--mist); color: var(--pine); display: grid; place-items: center; margin-bottom: 14px; }
.feat__ic svg { width: 21px; height: 21px; }
.feat h3 { font-size: 18px; }
.feat p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ============================================================
   APP CONSOLE  (dashboard)
   ============================================================ */
.console { padding: 40px 0 80px; }
.console__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.console__head h1 { font-size: 30px; margin: 0; }
.console__head p { color: var(--muted); margin: 6px 0 0; font-size: 14.5px; }

.vm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }

.vm {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 0; overflow: hidden; box-shadow: var(--shadow);
}
.vm__top { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px 14px; border-bottom: 1px solid var(--line); }
.vm__id { display: flex; align-items: center; gap: 11px; }
.vm__id .dot { width: 32px; height: 32px; border-radius: 8px; background: var(--mist); color: var(--pine); display: grid; place-items: center; flex: none; }
.vm__id .dot svg { width: 17px; height: 17px; }
.vm__name { font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.2; }
.vm__sub { font-family: var(--mono); font-size: 12px; color: var(--faint); }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  padding: 5px 11px; border-radius: 999px; text-transform: capitalize;
}
.pill .led { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pill--running  { color: var(--run);  background: var(--run-bg); }
.pill--running .led { background: var(--run); box-shadow: 0 0 0 0 rgba(31,138,82,.5); animation: pulse 1.8s infinite; }
.pill--stopped  { color: var(--stop); background: var(--stop-bg); }
.pill--stopped .led { background: var(--stop); }
.pill--provisioning { color: var(--prov); background: var(--prov-bg); }
.pill--provisioning .led { background: var(--prov); animation: pulse 1.4s infinite; }
.pill--error { color: var(--err); background: var(--err-bg); }
.pill--error .led { background: var(--err); }
.pill--deleting { color: var(--err); background: var(--err-bg); }
.pill--deleting .led { background: var(--err); animation: pulse 1.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31,138,82,.5); } 70% { box-shadow: 0 0 0 6px rgba(31,138,82,0); } 100% { box-shadow: 0 0 0 0 rgba(31,138,82,0); } }

.vm__specs { padding: 16px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; }
.vm__spec .k { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.vm__spec .v { font-family: var(--mono); font-size: 13.5px; color: var(--ink); }
.vm__actions { display: flex; gap: 9px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--snow); }

/* empty state */
.empty { text-align: center; padding: 70px 24px; background: var(--paper); border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.empty__ic { width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 14px; background: var(--mist); color: var(--pine); display: grid; place-items: center; }
.empty__ic svg { width: 26px; height: 26px; }
.empty h3 { font-size: 21px; }
.empty p { color: var(--muted); margin: 0 auto 22px; max-width: 42ch; }

/* ---------- Generic card / centered panels ---------- */
.center { min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 48px 24px; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 38px 34px; width: 100%; max-width: 440px;
}
.card--narrow { max-width: 400px; }
.card h1 { font-size: 26px; }
.card .lede { color: var(--muted); margin: 0 0 26px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.field input {
  width: 100%; font-family: var(--body); font-size: 15px; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--paper); transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus { outline: none; border-color: var(--pine); box-shadow: 0 0 0 3px rgba(11,61,46,.12); }
.field .help { font-size: 12.5px; color: var(--faint); margin-top: 5px; line-height: 1.45; }
.field .err { font-size: 12.5px; color: var(--maple); margin-top: 5px; }
.form-foot { margin-top: 22px; font-size: 14px; color: var(--muted); text-align: center; }

/* ---------- Provisioning wait ---------- */
.prov-stage { text-align: center; max-width: 480px; }
.prov-ring { width: 132px; height: 132px; margin: 0 auto 22px; position: relative; }
.prov-ring > svg:first-child { width: 100%; height: 100%; transform: rotate(-160deg); }
.prov-ring__track { stroke: var(--line); stroke-linecap: round; stroke-dasharray: 107.5 276.5; }
.prov-ring__spin { stroke: var(--maple); stroke-linecap: round; stroke-dasharray: 64 200; animation: ringspin 1.1s linear infinite; transform-origin: center; }
@keyframes ringspin { to { transform: rotate(360deg); } }
.prov-ring__leaf { position: absolute; inset: 0; display: grid; place-items: center; color: var(--pine); }
.prov-ring__leaf svg { width: 34px; height: 34px; transform: none; animation: none; }
.prov-log { margin-top: 26px; text-align: left; background: #0C1A14; border-radius: var(--r); padding: 16px 18px; font-family: var(--mono); font-size: 12.5px; color: #9FBDB0; line-height: 1.9; min-height: 120px; }
.prov-log .ln::before { content: "› "; color: var(--maple); }
.prov-log .ok::before { content: "✓ "; color: var(--run); }
.prov-done { color: var(--run); }

/* ---------- Status banner ---------- */
.banner { border-radius: var(--r); padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; }
.banner svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.banner--ok { background: var(--run-bg); color: #155f3a; }
.banner--ok svg { color: var(--run); }
.banner--warn { background: var(--prov-bg); color: #7a4b00; }
.banner--warn svg { color: var(--prov); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #9AA69F; padding: 52px 0 30px; margin-top: 0; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.footer__cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer .brand { color: #CFE0D8; margin-bottom: 12px; }
.footer__blurb { font-size: 14px; max-width: 32ch; }
.footer__col h4 { color: #fff; font-size: 13px; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.footer__col a { display: block; color: #9AA69F; font-size: 14px; margin-bottom: 9px; }
.footer__col a:hover { color: #fff; }
/* Partner strip: who MapleKey belongs to, and who runs on it. Mirrors the
   attribution strip on cardupkeep.ca. Text-only for now — drop logos in and
   add an <img> per item when the assets exist. */
.footer__partners { display: flex; flex-wrap: wrap; gap: 14px 40px; padding-top: 22px; }
.footer__partners a { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #9AA69F; font-size: 13px; text-align: center; }
/* Both source logos are JPEGs with light backgrounds, which would sit as bright
   rectangles on the dark footer. The rounded white plate makes that deliberate
   rather than accidental, and keeps them legible. */
.footer__partners .partner-logo { height: 44px; width: auto; border-radius: 6px; background: #fff; padding: 4px; }
.footer__partners a:hover { color: #fff; }
.footer__base a { color: #CFE0D8; text-decoration: underline; }
.footer__base a:hover { color: #fff; }
.footer__base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 22px; font-size: 13px; }
.footer__base .mono { color: #707D76; }
@media (max-width: 760px) { .footer__cols { grid-template-columns: 1fr 1fr; } }

/* ---------- Utilities ---------- */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 820px) { .split-2 { grid-template-columns: 1fr; gap: 32px; } }
.stack-sm > * + * { margin-top: 10px; }
.muted { color: var(--muted); }
.txt-mono { font-family: var(--mono); }
.hide { display: none !important; }

/* order-status pill variants (account page) */
.pill--paid, .pill--provisioned { color: var(--run); background: var(--run-bg); }
.pill--paid .led, .pill--provisioned .led { background: var(--run); }
.pill--pending { color: var(--prov); background: var(--prov-bg); }
.pill--pending .led { background: var(--prov); }
.pill--failed { color: var(--err); background: var(--err-bg); }
.pill--failed .led { background: var(--err); }
.pill--cancelled { color: var(--stop); background: var(--stop-bg); }
.pill--cancelled .led { background: var(--stop); }

/* nav account link hides on small screens (burger sheet covers it) */
@media (max-width: 560px) { .nav__acct { display: none; } }



/* concept D: samara-needle gauge (clock-driven, snaps to 100% on ready) */
.prov-ring__meter { stroke: var(--maple); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.prov-ring .prov-needle {
  position: absolute; left: 50%; bottom: 50%;
  width: 24px; height: 44px; margin-left: -12px;
  transform-origin: 50% 100%; transform: rotate(-70deg);
  transition: transform .25s linear;
  z-index: 2;
}
.prov-ring .prov-needle svg {
  display: block; width: 24px !important; height: 44px !important; transform: none;
}
.prov-ring .prov-gauge-pct {
  position: absolute; left: 0; right: 0; bottom: 8px;
  text-align: center; font-family: var(--mono);
  font-size: 16px; font-weight: 500; color: var(--pine); line-height: 1;
  z-index: 1;
}

/* --- contact form ------------------------------------------------------- */
/* The honeypot must be genuinely invisible but still submitted, so it is
   positioned off-canvas rather than display:none — some bots skip hidden
   fields, and all of them fill this one. */
.hp-wrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.field textarea {
  width: 100%; padding: 11px 13px; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  resize: vertical;
}
.field textarea:focus { outline: none; border-color: var(--pine); box-shadow: 0 0 0 3px rgba(11,61,46,.12); }

.dept-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
@media (max-width: 620px) { .dept-picker { grid-template-columns: 1fr; } }
.dept-option { display: flex; gap: 10px; align-items: flex-start; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; cursor: pointer; }
.dept-option:hover { border-color: var(--pine); }
/* :has() lets the whole card show selection, not just the radio dot. */
.dept-option:has(input:checked) { border-color: var(--pine); box-shadow: 0 0 0 3px rgba(11,61,46,.12); }
.dept-option input { margin-top: 3px; accent-color: var(--pine); }
.dept-body { display: flex; flex-direction: column; gap: 3px; }
.dept-name { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.dept-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.notice { padding: 14px 16px; border-radius: var(--r-sm); margin-bottom: 22px; font-size: 14.5px; }
.notice--ok { background: rgba(11,61,46,.06); border: 1px solid rgba(11,61,46,.2); color: var(--ink); }

/* mk14: credentials callout (console page).
   The app admin login used to sit in the muted spec grid next to VM ID and
   Region, in --faint on --paper, and customers walked straight past it. It is
   the one thing on the page they cannot recover if they miss it, so it gets
   the maple rule, ink-on-mist monospace, and a green ready pill. */
.creds {
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--maple);
  border-radius: 10px;
  background: #fff;
  padding: 16px 18px;
  margin: 18px 0 2px;
}
.creds__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.creds__eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--maple);
}
.creds__pill {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--run); background: var(--run-bg); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.creds__grid { display: grid; gap: 10px; }
.creds__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.creds__k {
  flex: 0 0 88px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.creds__v { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; }
.creds__v code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px; font-weight: 600; color: var(--ink);
  background: var(--mist); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 10px; word-break: break-all;
}
.creds__copy {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--maple); background: none; border: 1px solid var(--line-2);
  border-radius: 6px; padding: 5px 9px; flex: none;
}
.creds__copy:hover { background: var(--maple); color: #fff; border-color: var(--maple); }
.creds__copy.is-done { background: var(--run); color: #fff; border-color: var(--run); }
.creds__note { margin: 13px 0 0; font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------------------
   Docs — reference pages, not marketing. Long-form reading is the whole job
   here, so the measure is capped and the type is a step larger than the rest
   of the site.
   --------------------------------------------------------------------------- */
.docs { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 44px; align-items: start; }
@media (max-width: 900px) { .docs { grid-template-columns: 1fr; gap: 28px; } }

.docs__side { position: sticky; top: 88px; font-size: 14.5px; }
@media (max-width: 900px) { .docs__side { position: static; } }
.docs__side h4 {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); font-weight: 700;
}
.docs__side + .docs__side, .docs__sidegroup + .docs__sidegroup { margin-top: 26px; }
.docs__side a {
  display: block; padding: 6px 10px; margin: 0 0 2px -10px; border-radius: 7px;
  color: var(--muted); text-decoration: none; font-weight: 500;
}
.docs__side a:hover { background: var(--mist); color: var(--ink); }
.docs__side a.is-current { background: var(--mist); color: var(--pine); font-weight: 600; }

.docs__body { max-width: 720px; }
.docs__body h1 { font-size: 34px; line-height: 1.2; margin: 0 0 10px; }
.docs__body h2 {
  font-size: 21px; margin: 40px 0 12px; padding-top: 20px; border-top: 1px solid var(--line);
}
.docs__body h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 28px; }
.docs__body h3 { font-size: 16.5px; margin: 26px 0 6px; }
.docs__body p { line-height: 1.72; color: var(--ink); margin: 0 0 14px; font-size: 16px; }
.docs__lede { font-size: 18px; color: var(--muted); line-height: 1.6; margin: 0 0 8px; }
.docs__body ul, .docs__body ol { margin: 0 0 16px; padding-left: 22px; }
.docs__body li { line-height: 1.68; margin-bottom: 7px; }
.docs__body a { color: var(--pine); }

.docs__note {
  border-left: 3px solid var(--pine-300); background: var(--mist);
  padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 0 0 18px;
}
.docs__note p { margin: 0; font-size: 15px; color: var(--muted); }

/* A gotcha is a support ticket we have already had. Given more visual weight
   than body copy because skipping one is what causes the ticket. */
.docs__gotcha { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.docs__gotcha h3 { margin: 0 0 5px; font-size: 15.5px; color: var(--ink); }
.docs__gotcha p { margin: 0; font-size: 15px; color: var(--muted); }

.docs__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.docs__fact {
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
  font-size: 13px; color: var(--muted); background: var(--paper);
}
.docs__fact b { color: var(--ink); font-weight: 600; }

.docs__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; margin: 0 0 30px; }
.docs__card {
  display: block; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
  text-decoration: none; background: var(--paper); transition: border-color .15s, transform .15s;
}
.docs__card:hover { border-color: var(--pine-300); transform: translateY(-1px); }
.docs__card b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.docs__card span { display: block; color: var(--muted); font-size: 14px; line-height: 1.55; }

/* ---------------------------------------------------------------------------
   Live resource meters on the console page.
   --------------------------------------------------------------------------- */
.meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 700px) { .meters { grid-template-columns: 1fr; gap: 14px; } }

.meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.meter__k { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.meter__pct { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15px; color: var(--ink); font-weight: 500; }
.meter__bar { height: 7px; border-radius: 999px; background: var(--mist); overflow: hidden; }
.meter__fill { height: 100%; width: 0; border-radius: 999px; background: var(--run); transition: width .5s ease, background-color .3s; }
.meter__fill.is-warn { background: var(--prov); }
.meter__fill.is-hot  { background: var(--err); }
.meter__sub { margin-top: 6px; font-size: 12.5px; color: var(--muted); }

/* An hour of history behind each meter. A number alone cannot distinguish
   "briefly busy" from "pinned since yesterday". */
.meter__spark { display: block; width: 100%; height: 26px; margin-top: 8px; overflow: visible; }
.meter__spark path { fill: none; stroke: var(--pine-300); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.meter__spark .area { fill: var(--mist); stroke: none; }

.meters__foot {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}

/* Compact usage meters on the dashboard cards. */
.vm__usage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 4px; }
@media (max-width: 420px) { .vm__usage { grid-template-columns: 1fr; gap: 10px; } }
.vm__meter-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; color: var(--faint); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 5px;
}
.vm__meter-top span:last-child {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 500;
}