@font-face {
  font-family: 'MonaspaceKrypton';
  src: url('/assets/fonts/MonaspaceKryptonVar.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Material Icons';
  src: url('/assets/fonts/MaterialIcons-Regular.otf') format('opentype');
  font-display: block;
}

:root {
  --bg: #0D0D0F;
  --bg1: #111113;
  --bg2: #181819;
  --rule: #1C1C1E;
  --b1: #252527;
  --accent: #D8344A;
  --ok: #62D49A;
  --warn: #E0B25A;
  /* _GridPainter blends the background 10% toward white at a 64px step. */
  --grid: #262628;
  --text: #EAF0F6;
  --text2: #8A8B8F;
  --text3: #4A4B4F;
  --mono: 'MonaspaceKrypton', ui-monospace, monospace;
  --bar-h-footer: 8px
}

* { box-sizing: border-box; }
/* Keep the layout width stable while the login drawer locks page scrolling. */
html { scrollbar-gutter: stable; }

/* Scrollbar matching _KeepAliveScrollBehavior + ScrollbarThemeData in the app:
   5px thumb, 2px radius, muted text at 35% brightening to 72% on hover, no
   track. Width cannot change on hover the way the app's does (a scrollbar
   pseudo-element resize mid-gesture is not honoured), so only the colour
   responds. The app hides it below 900px, where the native bar is returned. */
* { scrollbar-width: thin; scrollbar-color: rgba(154, 159, 169, 0.35) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(154, 159, 169, 0.35);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(154, 159, 169, 0.72); }
::-webkit-scrollbar-corner { background: transparent; }
/* No stepper arrows: the app's scrollbar is a bare thumb. */
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:vertical:increment,
::-webkit-scrollbar-button:vertical:decrement {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
@media (max-width: 899px) {
  * { scrollbar-width: auto; scrollbar-color: auto; }
  ::-webkit-scrollbar { width: auto; height: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* Matches the SliverAppBar in _Nav: 60px tall, bg1 at 96%, 1px bottom rule. */
.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 55px;
  padding: 0 clamp(16px, 5vw, 25px);
  border-bottom: 1px solid var(--b1);
  position: sticky;
  top: 0;
  background: rgba(17, 17, 19, 0.96);
  backdrop-filter: blur(8px);
  z-index: 10;
}
.nav .brand { display: flex; align-items: center; text-decoration: none; line-height: 1; }
.nav nav { display: flex; align-items: center; gap: 22px; margin-right: auto; }
.nav nav a {
  line-height: 1;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--text2);
  text-decoration: none;
}
.nav nav a:hover { color: var(--text); }
.nav .sign-in {
  padding: 10px 18px;
  border-color: #000;
  font-size: 12px;
  letter-spacing: 1.4px;
  font-weight: 700;
  /* Never break "SIGN IN >>" across two lines when the bar gets tight. */
  white-space: nowrap;
  flex: 0 0 auto;
}
.nav .brand { min-width: 0; }

/* Narrow-viewport nav menu. Hidden entirely on desktop, where the bar shows
   every link directly. The hamburger is drawn in CSS so the page does not have
   to pull another glyph out of the Material icon font. */
.nav-more { display: none; position: relative; }
.nav-more-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--b1);
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.nav-more-btn .bars {
  position: relative;
  width: 14px;
  height: 2px;
  background: var(--text2);
  box-shadow: 0 -5px 0 var(--text2), 0 5px 0 var(--text2);
}
.nav-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 186px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--bg2);
  border: 1px solid var(--b1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.nav-more-menu[hidden] { display: none; }
.nav-more-menu a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  color: var(--text);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
}
.nav-more-menu a:hover { background: var(--bg1); }
.nav-more-menu .sep { height: 1px; margin: 8px 0; background: var(--b1); }
.nav-more-menu .code { min-width: 26px; font-size: 11px; font-weight: 800; color: var(--text2); }
.nav-more-menu a[aria-current="true"] .code { color: var(--accent); }
.btn { font-family: var(--mono); cursor: pointer; }

/* Same 420px, #0F0F11 login drawer and black54 scrim as _LoginDrawer. */
.login-overlay { position: fixed; inset: 0; z-index: 100; }
.login-overlay[hidden] { display: none; }
.login-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .54); }
.login-drawer {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  width: min(420px, 100%);
  flex-direction: column;
  overflow: auto;
  background: #0F0F11;
  outline: 0;
}
.login-drawer-head {
  display: flex;
  align-items: center;
  padding: max(20px, env(safe-area-inset-top)) 20px 0 24px;
}
.login-drawer-head .logo { flex: 1; }
.login-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--b1);
  background: transparent;
  color: var(--text2);
  font: 300 24px/26px Arial, sans-serif;
  cursor: pointer;
}
.login-close:hover { border-color: var(--text3); color: var(--text); }
.login-drawer-body { padding: 36px 24px max(24px, env(safe-area-inset-bottom)); }
.login-drawer h2 {
  margin: 0;
  color: var(--text);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.8px;
}
.login-desc { margin: 14px 0 32px; color: var(--text2); font-size: 13px; line-height: 1.65; }
.login-label { margin: 0 0 12px; color: var(--text3); font-size: 10px; letter-spacing: 2px; }
.login-providers { display: grid; gap: 10px; }
.provider {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--b1);
  background: var(--bg2);
  color: var(--text2);
  font: 700 13.5px var(--mono);
  text-align: left;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.provider:hover { border-width: 1.5px; border-color: var(--text3); background: var(--b1); color: var(--text); }
.provider b { color: var(--text3); font-size: 15px; font-weight: 400; text-align: right; }
.provider:hover b { color: var(--text2); }
.provider-mark { display: block; width: 18px; height: 18px; fill: currentColor; }
.provider-mark.github { color: #E5E7EB; }
.provider-mark.microsoft { color: #60A5FA; }
.provider-mark.gitlab { color: #FB923C; }
.provider-mark.discord { color: #818CF8; }
.login-legal { margin: 20px 0 0; color: var(--text3); font-size: 11px; line-height: 1.6; }
.login-legal a { color: var(--text2); text-decoration: underline; }
.login-legal a:hover { color: var(--text); }
body.login-open { overflow: hidden; }
@media (max-width: 480px) {
  .login-drawer { width: 100%; }
  .login-drawer-head { padding-left: 18px; }
  .login-drawer-body { padding-left: 18px; padding-right: 18px; }
}


.lang { position: relative; }
.lang-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--b1);
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.lang-btn .ico { width: 14px; height: 14px; color: var(--text2); }
.lang-btn .caret { color: var(--text3); }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 186px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--bg2);
  border: 1px solid var(--b1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  color: var(--text);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
}
.lang-menu a:hover { background: var(--bg1); }
.lang-menu .code {
  width: 24px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--text3);
}
.lang-menu a[aria-current="true"] .code { color: var(--accent); }

.btn {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--b1);
  background: var(--bg1);
  color: var(--text) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.btn:hover { border-color: var(--text3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff !important; }
.btn.primary:hover { filter: brightness(1.08); }

/* Flutter's _hPad keeps the hero deliberately broad, while all following
   sections use a 40px desktop minimum and centre only beyond 1440px. */
section {
  padding: 96px 40px;
  border-top: 1px solid var(--b1);
  /* Clears the 60px sticky nav when an in-page link jumps to a section, so the
     heading is not hidden underneath it. */
  scroll-margin-top: 60px;
}
section.alt { background: var(--bg1); }
.wrap { max-width: 1440px; margin: 0 auto; }
@media (min-width: 1521px) {
  section { padding-left: calc((100vw - 1440px) / 2); padding-right: calc((100vw - 1440px) / 2); }
}
@media (max-width: 899px) {
  section { padding-left: 22px; padding-right: 22px; }
}

#hero {
  border-top: 0;
  /* _WideHero has its own 1560px content frame. Keep this distinct from
     _hPad, which the later sections use. */
  padding: 72px 40px;
  /* Fills the viewport under the 60px sticky nav, but grows with content. */
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  background-image:
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 64px);
}
#hero .wrap {
  width: 100%;
  max-width: 1560px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 540px;
  gap: 72px;
  align-items: center;
}
@media (min-width: 1641px) {
  #hero { padding-left: calc((100vw - 1560px) / 2); padding-right: calc((100vw - 1560px) / 2); }
}
@media (max-width: 899px) {
  #hero { padding-left: 22px; padding-right: 22px; }
}
.hero-copy > :last-child { margin-bottom: 0; }
.hero-board { min-width: 0; }
.hero-board .board { margin-bottom: 0; }

.section-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: 2.2px;
  color: var(--accent);
}
.section-kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
}
/* The hero kicker is a bordered chip instead, so it drops the rule. */
.section-kicker.chip::before { display: none; }
.section-kicker.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  margin-bottom: 26px;
  color: var(--text2);
  padding: 6px 12px;
  background: var(--bg1);
  border: 1px solid var(--b1);
}
.section-kicker.chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}
h1 {
  margin: 0 0 22px;
  /* Floor matches what the hero uses on a phone. A lower floor made the title
     shrink as the viewport grew past the mobile breakpoint - a phone in
     landscape got a smaller headline than the same phone upright. */
  font-size: clamp(54px, 7vw, 76px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -1.5px;
  white-space: pre-line;
}
h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.8px;
}
h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.accent { color: var(--accent); }

.hero-sub { max-width: 62ch; font-size: 17px; color: var(--text2); margin: 0 0 28px; }
.hero-sub b { color: var(--text); font-weight: 500; }
.section-desc { max-width: 72ch; font-size: 14.5px; color: var(--text2); margin: 0 0 44px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 40px; }
.lbl-short { display: none; }

/* Closing CTA: centred over the accent glow, like the RadialGradient in
   _CtaSection. The .alt fill is replaced by the gradient. */
#start.alt {
  padding: 110px 40px;
  text-align: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(216, 52, 74, 0.10) 0%, var(--bg) 70%),
    var(--bg);
}
@media (min-width: 1521px) {
  #start.alt { padding-left: calc((100vw - 1440px) / 2); padding-right: calc((100vw - 1440px) / 2); }
}
@media (max-width: 899px) {
  #start.alt { padding-left: 22px; padding-right: 22px; }
}
#start h2 { font-size: clamp(32px, 5vw, 54px); letter-spacing: -1px; line-height: 1.0; }
#start .section-desc { margin-left: auto; margin-right: auto; max-width: 62ch; }
#start .cta-row { justify-content: center; margin-bottom: 0; }
#start .cta-row .btn { padding: 10px 28px; font-size: 14px; letter-spacing: 1.4px; font-weight: 700; }
#start .cta-row .btn.primary { border-color: #000; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  border: 1px solid var(--b1);
  background: var(--bg1);
}
.stats li { padding: 14px 16px; border-left: 1px solid var(--b1); }
.stats li:first-child { border-left: 0; }
.stats .value { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.2px; }
.stats li.accent .value { color: var(--accent); }
.stats .label { display: block; margin-top: 3px; font-size: 10px; letter-spacing: 1.2px; color: var(--text2); }

.chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 36px; }
.chips-label { font-size: 10px; letter-spacing: 1.8px; color: var(--text2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg2);
  border: 1px solid rgba(74, 75, 79, 0.4);
  font-size: 11.5px;
  color: var(--text2);
}
.chips .dot { width: 6px; height: 6px; background: var(--ok); }

.grid {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--b1);
  border-left: 1px solid var(--b1);
}
.cols-3 { grid-template-columns: repeat(3, 1fr); }
/* Tile example lines sit in their own boxed footer, pinned to the bottom so
   uneven description lengths still line up across a row. */
.tile { display: flex; flex-direction: column; }
/* Icon chip + ordinal share the card's top row. */
.tile-top { display: flex; align-items: center; margin-bottom: 18px; }
.tile-top .idx { margin-left: auto; }
.tile-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(216, 52, 74, 0.35);
  background: rgba(216, 52, 74, 0.10);
  color: var(--accent);
}
.ico {
  width: 15px;
  height: 15px;
  display: block;
  font-family: 'Material Icons';
  font-size: 15px;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  text-rendering: optimizeLegibility;
}
.tile code {
  margin-top: auto;
  padding: 9px 11px;
  border: 1px solid var(--rule);
  background: var(--bg);
}
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.tile {
  padding: 24px;
  border-right: 1px solid var(--b1);
  border-bottom: 1px solid var(--b1);
}
.tile .idx { font-size: 11px; color: var(--text3); }
.tile .kicker { display: block; font-size: 10px; letter-spacing: 1.6px; color: var(--accent); margin-bottom: 8px; }
.tile p { margin: 0 0 12px; font-size: 13.5px; color: var(--text2); }
.tile code { font-size: 11.5px; color: var(--text3); word-break: break-word; }

.steps { list-style: none; margin: 0 0 32px; padding: 0; border: 1px solid var(--b1); background: var(--bg1); }
.steps li {
  display: grid;
  grid-template-columns: 32px minmax(140px, 1fr) 2fr auto;
  gap: 22px;
  align-items: baseline;
  padding: 22px 18px;
  border-top: 1px solid var(--b1);
  font-size: 13px;
}
.steps li:first-child { border-top: 0; }
.steps .no { color: var(--text3); }
.steps .call b { color: var(--accent); }
.steps .sub { color: var(--text2); }
.steps .result { color: var(--ok); white-space: nowrap; }

.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.points li { display: flex; gap: 12px; align-items: flex-start; }
.points h3 { margin: 0 0 4px 0; }
.points p { margin: 0; font-size: 13.5px; color: var(--text2); }
.point-ico { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }

/* minmax(0, ...) rather than a bare 1fr: the status table inside a panel has a
   ~330px min-content width, and a plain 1fr track inherits that as its floor -
   which widened the whole page instead of letting the table scroll. */
.panel-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.panel { margin: 0; border: 1px solid var(--b1); background: var(--bg1); }
.panel figcaption {
  padding: 10px 16px;
  border-bottom: 1px solid var(--b1);
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--text2);
}
.panel table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
/* The status column will not wrap, so the table has a ~330px min-content width
   and pushed the whole page wider on the narrowest phones. Let it scroll inside
   the panel instead of dragging the document with it. */
.panel .table-scroll { overflow-x: auto; }
.panel td { padding: 11px 16px; border-top: 1px solid var(--rule); color: var(--text2); }
.panel tr:first-child td { border-top: 0; }
.panel .st { text-align: right; color: var(--ok); }
.actions { list-style: none; margin: 0; padding: 0; }
.actions li { padding: 12px 16px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--text2); }
.actions li:first-child { border-top: 0; }
.actions .cond { color: var(--accent); margin-right: 6px; }
.actions .arrow { margin: 0 8px; color: var(--text3); }
.actions code { color: var(--text); }

/* One outer frame split by 1px rules, mirroring the IntrinsicHeight Row of
   _PriceCards; the featured plan is marked by its fill, not an accent border. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border: 1px solid var(--b1);
}
.plan { padding: 26px; background: var(--bg1); }
.plan + .plan { border-left: 1px solid var(--b1); }
.plan.featured { background: var(--bg2); }
.plan h3 { margin: 0; font-size: 13px; letter-spacing: 1.6px; color: var(--text2); }
.plan .price { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 20px; }
.plan .price span { font-size: 42px; font-weight: 700; letter-spacing: -0.8px; }
.plan .price small { font-size: 12px; color: var(--text3); }
.plan ul { list-style: none; margin: 0; padding: 0; min-height: 184px; }
.plan li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 0 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text2);
}
.plan li .chk { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; color: var(--ok); }
.footnote { font-size: 11px; color: var(--text3); margin: 0; }
.footnote a { color: var(--text2); }

.site-footer { padding: 48px clamp(16px, 5vw, 72px) 32px; background: #080808; border-top: 1px solid var(--b1); }
.site-footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h4 { margin: 0 0 14px; font-size: 11px; letter-spacing: 1.6px; color: var(--text2); font-weight: 600; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { font-size: 13px; color: var(--text2); text-decoration: none; }
/* These labels are whole sentences rather than one-word links, so they carry
   far more weight at the shared 13px than the columns beside them. */
.solutions-col a { font-size: 11.5px; line-height: 1.5; }
.solutions-col li { margin-bottom: 12px; }
.site-footer a:hover { color: var(--text); }
.site-footer .brand { margin: 0 0 14px; }
.site-footer .tagline { font-size: 13px; color: var(--text2); margin: 0; max-width: 40ch; }
.legal { display: flex; align-items: center; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 11px; color: var(--text3); }
.legal .ok { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--ok); }
.legal .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

@media (max-width: 1100px) {
  #hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  #hero { min-height: 0; }
}
@media (max-width: 900px) {
  section { padding: 64px clamp(16px, 5vw, 72px); }
  .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats li:nth-child(odd) { border-left: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid var(--b1); }
  .plans { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--b1); }
  .panel-row { grid-template-columns: minmax(0, 1fr); }
  /* Plain 1fr keeps a min-content floor, and the brand column's tagline is
     wide - which squeezed the link columns to ~54px and wrapped every label
     onto two lines. minmax(0, ...) lets the tracks actually share the row. */
  .site-footer .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 24px; }
  .steps li { grid-template-columns: 24px 1fr; }
  .steps .sub, .steps .result { grid-column: 2; }
}
/* The nav is a single non-wrapping flex row, so its content width is a hard
   floor on the page width: once brand + links + language + sign-in stop
   fitting, the whole document gains a horizontal scrollbar and every section
   below renders cut off. Tighten it well before that point. */
@media (max-width: 900px) {
  .nav { gap: 16px; padding: 0 14px; }
  .nav nav { gap: 14px; min-width: 0; }
  .nav nav a { font-size: 10.5px; letter-spacing: 1px; }
  .nav .sign-in { padding: 9px 12px; font-size: 11px; letter-spacing: 1px; }
  .lang-btn { padding: 0 7px; }
}
@media (max-width: 560px) {
  .cols-3, .cols-4 { grid-template-columns: 1fr; }
  /* The hero's two buttons only share a row at the shorter label. */
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
  /* The nav is already a 55px band above this; the hero does not need to
     restate that separation with desktop-sized padding. */
  #hero { padding-top: 28px; padding-bottom: 40px; }
  .site-footer .cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .site-footer .tagline { max-width: none; }
  /* Four columns of nowrap text: at desktop padding the table is wider than a
     phone and has to scroll. Tighten the cells so it fits instead - the
     .table-scroll wrapper stays as the fallback for narrower still. */
  .panel table { font-size: 11px; }
  .panel td { padding: 9px 7px; }
  .panel td:first-child { padding-left: 12px; }
  .panel .st { padding-right: 12px; }
  /* Below this the four items cannot share the bar at a legible size, so the
     links - and the language chip, on pages that have one - move into the menu
     rather than disappearing. Its button carries the current locale code, so
     language is still visible in the bar. */
  .nav nav, .lang { display: none; }
  .nav-more { display: block; }
  /* The links carry the margin-right: auto that pushes everything after them
     to the right. Hiding them takes that with it, so the brand takes it over
     and the menu + sign-in stay on the right edge. */
  .nav .brand { margin-right: auto; }
}
.board {
  border: 1px solid var(--b1);
  background: var(--bg1);
  margin-bottom: 28px;
}
.board.compact { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
/* The standalone Explore board runs two columns; the hero one stays single. */
.board:not(.compact) .brd-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.board:not(.compact) .brd-row:nth-child(even) { border-left: 1px solid var(--rule); }
.explore-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.explore-foot .count { font-size: 12px; color: var(--text3); }
.explore-foot .btn { margin-left: auto; }

.flow-row { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; align-items: start; }
.flow-row .steps { margin-bottom: 0; }
.brd-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--b1);
  font-size: 11px;
  letter-spacing: 1.8px;
  font-weight: 700;
}
.brd-head .live { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 1.5px; color: var(--ok); font-weight: 400; }
.brd-head .live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.brd-head .note { margin-left: auto; font-size: 10.5px; color: var(--text3); letter-spacing: 0; font-weight: 400; }
.brd-foot {
  padding: 11px 16px;
  background: var(--bg2);
  border-top: 1px solid var(--b1);
  font-size: 11px;
  color: var(--text3);
  min-height: 39px;
}

.brd-rows { list-style: none; margin: 0; padding: 0; }
.brd-row { border-bottom: 1px solid var(--rule); }
.brd-row:last-child { border-bottom: 0; }
.brd-row > *, .brd-link {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto 56px;
  gap: 12px;
  align-items: center;
  padding: 11px 16px;
  text-decoration: none;
  color: inherit;
}
.brd-link:hover { background: rgba(37, 37, 39, 0.5); }
/* Brutalist chip: solid fill, hard black border and 2px offset shadow. */
.brd-row .badge {
  justify-self: start;
  padding: 3px 7px;
  background: var(--ok);
  border: 1.5px solid #000;
  box-shadow: 2px 2px 0 #000;
  color: #000;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.brd-row.down .badge { background: var(--accent); }
.brd-row.waf .badge { background: var(--warn); }
.brd-row .meta { display: block; min-width: 0; padding: 0; }
.brd-row .name { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brd-row .sub { display: block; margin-top: 2px; font-size: 10.5px; color: var(--text3); }
.brd-row .spark { display: flex; align-items: flex-end; gap: 2px; height: 22px; padding: 0; }
.brd-row .spark i { width: 3px; min-height: 2px; background: var(--ok); opacity: 0.75; }
.brd-row .spark i.fail { background: var(--accent); opacity: 1; }
.brd-row.down .spark i { background: var(--accent); }
.brd-row.waf .spark i { background: var(--warn); }
.brd-row .num { display: block; text-align: right; padding: 0; }
.brd-row .rt { display: block; font-size: 11.5px; color: var(--text2); }
.brd-row .up { display: block; margin-top: 2px; font-size: 9px; letter-spacing: 0.3px; color: var(--ok); }
.brd-row .up.warn { color: var(--warn, #E0B25A); }

/* Skeleton rows hold the board's height so hydration is a content swap. */
.brd-row.skeleton .ln { display: block; height: 8px; background: var(--b1); border-radius: 1px; }
.brd-row.skeleton .ln + .ln { margin-top: 6px; }
.brd-row.skeleton .w35 { width: 35%; }
.brd-row.skeleton .w50 { width: 50%; margin-left: auto; }
.brd-row.skeleton .w60 { width: 60%; }
.brd-row.skeleton .w80 { width: 80%; margin-left: auto; }
.brd-row.skeleton .badge {
  height: 19px;
  background: var(--b1);
  border-color: var(--b1);
  box-shadow: none;
}
.brd-row.skeleton .spark { width: 60px; background: var(--b1); height: 10px; align-self: center; }
.board .brd-rows { transition: opacity 0.25s ease; }
.board.ready .brd-rows { opacity: 1; }

.embeds { margin-bottom: 44px; }
.embeds .tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.embeds .tabs:not(:empty) { margin-bottom: 18px; }
.embeds .tab {
  padding: 10px 14px;
  border: 1px solid var(--b1);
  background: var(--bg);
  color: var(--text2);
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
}
.embeds .tab[aria-selected="true"] { background: var(--text); color: var(--bg); }
.embed-row { display: grid; grid-template-columns: 10fr 9fr; gap: 24px; align-items: start; }
.embed-col { display: grid; gap: 24px; }
.embed-panel { padding: 18px; border: 1px solid var(--b1); background: var(--bg); }
.embed-panel h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  font-size: 14px;
  letter-spacing: 0.3px;
}
.embed-panel h3 .ico { color: var(--accent); }
/* Opens the real page the preview beside it is an embed of. */
.panel-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--b1);
  color: var(--text2);
}
.panel-open .ico { width: 14px; height: 14px; color: var(--text2); }
.panel-open:hover { border-color: var(--accent); color: var(--text); }
.panel-open:hover .ico { color: var(--accent); }
.embed-panel > p { margin: 0 0 14px; font-size: 11.5px; line-height: 1.5; color: var(--text2); }
.embed-panel pre { margin: 0; padding: 14px; border: 1px solid var(--b1); background: var(--bg1); overflow-x: auto; }
.embed-panel code { font-size: 12px; color: var(--text2); white-space: pre-wrap; word-break: break-all; }
.embed-panel .placeholder { font-size: 12px; color: var(--text3); word-break: break-all; }
.badge-live { margin: 0 0 14px; }
.badge-live img { display: block; height: 28px; }
.card-wrap { margin-bottom: 14px; }
.card-wrap iframe { border: 0; display: block; max-width: 100%; }
/* Height is a starting point only: the embed posts its rendered height and
   landing.js grows the iframe to fit, so the preview never scrolls internally. */
.frame-wrap { border: 1px solid var(--b1); background: var(--bg); }
.frame-wrap iframe { width: 100%; height: 400px; border: 0; display: block; }

.cur-toggle { display: flex; margin: 0 0 44px; border: 1px solid var(--b1); width: max-content; }
.cur-toggle[hidden] { display: none; }
.cur {
  padding: 9px 16px;
  border: 0;
  border-left: 1px solid var(--b1);
  background: var(--bg1);
  color: var(--text2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  cursor: pointer;
}
.cur:first-child { border-left: 0; }
.cur[aria-pressed="true"] { background: var(--accent); color: var(--text); }
.plan .price .was { margin-right: 10px; font-size: 22px; color: var(--text3); }
.plan .price .was[hidden] { display: none; }
.plan .anchor { margin: -16px 0 20px; font-size: 12px; color: var(--accent); }
.plan .anchor[hidden] { display: none; }

@media (max-width: 900px) {
  .embed-row { grid-template-columns: 1fr; }
  .frame-wrap iframe { height: 340px; }
  .board:not(.compact) .brd-rows { grid-template-columns: 1fr; }
  .board:not(.compact) .brd-row:nth-child(even) { border-left: 0; }
  .flow-row { grid-template-columns: 1fr; gap: 28px; }
  /* The status chip is a full "[ OK ]" pill, not an icon: a fixed 28px track
     is narrower than the chip, so it spilled over the name beside it. */
  .brd-row > *, .brd-link { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 11px 12px; }
  .brd-row .spark { display: none; }
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  --bar-h: 4px;
}
.logo-bars { display: flex; flex-direction: column; gap: 3px; }
.logo-bars i { display: block; height: var(--bar-h); }
.logo-bars .b1 { width: calc(var(--bar-h) * 5.5); background: var(--ok, #62D49A); }
.logo-bars .b2 {
  width: calc(var(--bar-h) * 3.5);
  margin-left: calc(var(--bar-h) * 2);
  background: var(--accent);
}
.logo-bars .b3 {
  width: calc(var(--bar-h) * 4.5);
  margin-left: var(--bar-h);
  background: var(--warn, #E0B25A);
}
/* Footer mark: same ratios laid out in a row, scaled up 1.5x. */
.footer-logo { --bar-h: 8px; }
.logo-bars.row { flex-direction: row; align-items: center; gap: 4px; margin-right: 3px; }
.logo-bars.row i { margin-left: 0; }
.logo .word {
  line-height: 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text);
  user-select: none;
}
.logo .word em { font-style: normal; color: var(--accent); }