/*
 * Groundrun cinematic design system.
 *
 * Published at /css/v5.<hash>.css, where the hash is of this file's contents.
 * Templates link {{ stylesheet.href }}; nothing links a fixed stylesheet URL.
 *
 * A full-bleed video hero (the site's single moving element), light-weight
 * Inter Tight typography at large sizes with tight tracking, generous negative
 * space, soft rounded pills, and an alternating rhythm of clean light sections
 * and background-picture bands. Ink-only monochrome palette: no accent colour
 * anywhere. Undimmed footage with soft legibility gradients carries the design,
 * not rules or decoration.
 *
 * Component vocabulary (reused across pages):
 *   .g-pill (--solid / --ghost / --dark / --ink)  soft rounded CTA
 *   .g-textlink                           quiet arrow "go deeper" link
 *   .g-hero                               cinematic full-bleed video hero (home)
 *   .g-band                               background-picture band (static photo)
 *   .g-light (--tint)                     clean light section
 *   .g-cta                                centred closing CTA
 *   .g-head / .g-foot                     minimal nav and footer
 */

/* Self-hosted Inter Tight (latin subset, static per-weight woff2 from
 * @fontsource/inter-tight 5.2.7). Replaces the render-blocking Google Fonts
 * link so first paint no longer waits on an external DNS+TLS+CSS chain.
 * font-display: swap keeps text visible during the font fetch. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-tight-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-tight-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-tight-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/inter-tight-latin-800.woff2') format('woff2');
}

:root {
  --bg: #FFFFFF;
  --ink: #101010;
  --ink-2: #3C3C3C;
  --ink-3: #767676;
  --hairline: #E2E2E0;
  --tint: #F6F6F4;
  --max: 1180px;
  /* System monospace for the small uppercase labels inside the platform-page
     artifacts (column headings, actor rails, part names, handoff lines). No
     webfont, no external request; body copy and headings stay Inter Tight. */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --pad: clamp(24px, 4vw, 60px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
main { display: block; }

/* ------------------------------------------------------------------ *
 * Pills — soft rounded CTAs.
 * ------------------------------------------------------------------ */
.g-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* On dark grounds (over video / on a dark section). */
.g-pill--solid { background: #fff; color: #101010; }
.g-pill--solid:hover { background: rgba(255,255,255,0.86); }
.g-pill--ghost { border-color: rgba(255,255,255,0.7); color: #fff; }
.g-pill--ghost:hover { background: rgba(255,255,255,0.12); }
/* On light grounds. */
.g-pill--dark { background: var(--ink); color: #fff; }
.g-pill--dark:hover { background: #000; }
.g-pill--ink { border-color: var(--ink); color: var(--ink); }
.g-pill--ink:hover { background: var(--ink); color: #fff; }

/* ------------------------------------------------------------------ *
 * Quiet arrow text link — the subordinate "go deeper" CTA.
 * ------------------------------------------------------------------ */
.g-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
}
.g-textlink::after { content: "\2192"; font-size: 19px; line-height: 1; }
.g-textlink:hover { color: var(--ink-3); }
/* On a dark band the link goes white. */
.g-band .g-textlink { color: #fff; }
.g-band .g-textlink:hover { color: rgba(255,255,255,0.78); }

.g-kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 26px;
}
.g-band .g-kicker { color: rgba(255,255,255,0.82); }

/* ------------------------------------------------------------------ *
 * Header — minimal nav. On the homepage it sits white over the hero
 * video (absolute, transparent). Inner-page (dark-on-light) treatment
 * is a Session B task.
 * ------------------------------------------------------------------ */
.g-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px var(--pad);
  color: #fff;
}
.g-brand {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: #fff;
}
.g-brand .g-dot { opacity: 0.7; }
.g-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
}
.g-nav > a:not(.g-head-cta) {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  opacity: 0.92;
}
.g-nav > a:not(.g-head-cta):hover { opacity: 1; }
.g-head-cta {
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  padding: 11px 22px;
  background: #fff;
  color: #101010;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.g-head-cta:hover { background: rgba(255,255,255,0.86); }

.g-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  z-index: 20;
}
.g-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Inner-page nav: dark-on-light. The homepage nav floats white over the
   hero video; every other page opens on a light ground, so the nav sits in
   normal flow with ink type and a dark CTA pill. Page-aware via the
   `g-head--light` modifier the header partial adds off the homepage. */
.g-head--light {
  position: static;
  color: var(--ink);
}
.g-head--light .g-brand { color: var(--ink); }
.g-head--light .g-brand .g-dot { color: var(--ink-3); }
.g-head--light .g-nav > a:not(.g-head-cta) { color: var(--ink); opacity: 0.72; }
.g-head--light .g-nav > a:not(.g-head-cta):hover { opacity: 1; }
.g-head--light .g-head-cta { background: var(--ink); color: #fff; }
.g-head--light .g-head-cta:hover { background: #000; }

/* ------------------------------------------------------------------ *
 * Cinematic full-bleed video hero (homepage).
 * ------------------------------------------------------------------ */
.g-hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #000;
  color: #fff;
}
.g-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Undimmed footage; only a soft darkening at top and bottom edges so the
   corner-hugging type stays legible. The centre of the video breathes. */
.g-hero-grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(8,10,12,0.34) 0%,
      rgba(8,10,12,0.0) 20%,
      rgba(8,10,12,0.0) 50%,
      rgba(8,10,12,0.64) 100%);
}
.g-hero-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding: clamp(32px, 5vw, 68px) var(--pad);
}
.g-hero-h1 {
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 100px);
  line-height: 0.99;
  letter-spacing: -0.03em;
  max-width: 15ch;
}
.g-hero-aside { max-width: 40ch; }
.g-hero-sub {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.42;
  opacity: 0.94;
  margin-bottom: 22px;
  font-weight: 400;
}
.g-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ *
 * Background-picture band — full-viewport static photo, centre-weighted
 * legibility scrim, centred light type.
 * ------------------------------------------------------------------ */
.g-band {
  position: relative;
  min-height: 88vh;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(80px, 12vh, 160px) 0;
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
}
.g-band-grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Centre-weighted darkening so the centred light type stays legible over
     bright photos, while the photo still reads at the edges. */
  background:
    radial-gradient(ellipse 74% 64% at 50% 50%, rgba(8,10,12,0.62) 0%, rgba(8,10,12,0.18) 78%),
    linear-gradient(to bottom, rgba(8,10,12,0.42) 0%, rgba(8,10,12,0.34) 50%, rgba(8,10,12,0.52) 100%);
}
.g-band-inner {
  position: relative;
  z-index: 2;
  padding: 0 var(--pad);
  max-width: 1000px;
}
.g-band-h2 {
  font-weight: 400;
  font-size: clamp(34px, 5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin: 0 auto 22px;
}
.g-band-line {
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.45;
  opacity: 0.92;
  max-width: 44ch;
  margin: 0 auto 30px;
}

/* ------------------------------------------------------------------ *
 * Clean light section (white / subtle-tint ground, for rhythm).
 * ------------------------------------------------------------------ */
.g-light {
  background: var(--bg);
  color: var(--ink);
  padding: clamp(96px, 17vh, 220px) var(--pad);
}
.g-light--tint { background: var(--tint); }
.g-light-inner { max-width: var(--max); margin: 0 auto; }
.g-light-h2 {
  font-weight: 400;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 17ch;
  margin-bottom: clamp(22px, 3vw, 36px);
}
.g-light-line {
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 44ch;
  margin-bottom: clamp(30px, 4vw, 46px);
}

/* Centred closing CTA. */
.g-cta { text-align: center; }
.g-cta .g-light-inner { max-width: 820px; margin: 0 auto; }
.g-cta .g-light-h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.g-cta .g-light-line { max-width: 48ch; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ *
 * Inner pages (platform, about). These carry the site's depth, so they
 * keep the cinematic language — light-weight large type, ink-only, lots
 * of air — but at a readable prose scale rather than the homepage's poster
 * sizes. A calm light hero opens the page (no media; video is the
 * homepage's alone), then clean sections carry the content.
 * ------------------------------------------------------------------ */
.g-hero-inner {
  background: var(--bg);
  color: var(--ink);
  padding: clamp(56px, 11vh, 120px) var(--pad) clamp(64px, 12vh, 132px);
}
.g-hero-inner-wrap { max-width: var(--max); margin: 0 auto; }
.g-hero-inner h1 {
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin-bottom: clamp(24px, 3vw, 38px);
}
.g-hero-inner-lede {
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 50ch;
}

/* A product capture opening an inner page. It sits under the hero lede inside
   the same white band, so the page opens with one statement rather than a
   headline and then a separate picture. Captured at --max, so it renders at its
   own size on a desktop and takes the hairline frame from the site. */
.g-hero-inner--figure { padding-bottom: clamp(48px, 8vh, 92px); }
.g-figure { margin-top: clamp(34px, 5vh, 60px); }
.g-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

/* Content section on inner pages. Reuses .g-light for the ground + padding
   (with --tint for alternation); .g-prose carries the readable body scale. */
.g-prose { max-width: var(--max); margin: 0 auto; }
.g-prose > .g-kicker { margin-bottom: 24px; }
.g-prose h2 {
  font-weight: 400;
  font-size: clamp(30px, 3.8vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 22ch;
  margin-bottom: clamp(22px, 2.6vw, 36px);
}
.g-prose .g-lede {
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 52ch;
  margin-bottom: 1.3em;
}
.g-prose p {
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 64ch;
  margin-bottom: 1.1em;
}
.g-prose p:last-child { margin-bottom: 0; }
.g-prose p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
.g-prose p a:hover { text-decoration-color: var(--ink); }

/* Ruled item rows — the platform "pieces" and the about FAQ. Hairline
   separators give quiet structure without cards. */
.g-rows { display: grid; gap: clamp(26px, 3.4vw, 46px); margin-top: clamp(30px, 4vw, 56px); }
.g-row { border-top: 1px solid var(--hairline); padding-top: clamp(24px, 3vw, 40px); }
.g-row h2, .g-row h3 {
  font-weight: 500;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 34ch;
  margin-bottom: 12px;
}
.g-row p {
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
}

/* Two columns: prose + a quiet "what you get" sidenote (platform growth). */
.g-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  margin-top: clamp(30px, 4vw, 52px);
}
.g-cols-text p {
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 58ch;
  margin-bottom: 1.1em;
}
.g-cols-text p:last-child { margin-bottom: 0; }
.g-sidenote h3 {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.g-sidenote ul { list-style: none; display: grid; gap: 0; }
.g-sidenote li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid var(--hairline);
  padding: 16px 0;
  font-size: 17px;
  color: var(--ink);
}
.g-sidenote li:last-child { border-bottom: 1px solid var(--hairline); }
.g-list-value { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }

/* ------------------------------------------------------------------ *
 * Demo form (closing CTA section). Light fields on a light ground so
 * browser autofill paints cleanly; ink focus ring (ink-only palette).
 * ------------------------------------------------------------------ */
.g-form {
  max-width: 520px;
  margin: clamp(36px, 5vw, 52px) auto 0;
  text-align: left;
  display: grid;
  gap: 16px;
}
.g-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}
.g-form input,
.g-form select,
.g-form textarea {
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.g-form textarea { resize: vertical; }
.g-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.g-form input:focus,
.g-form select:focus,
.g-form textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(16,16,16,0.12);
}
/* Keep autofilled fields white with dark text (matches Chrome's autofill paint). */
.g-form input:-webkit-autofill,
.g-form input:-webkit-autofill:hover,
.g-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px #fff inset;
}
.g-form .g-btn {
  justify-self: start;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 100px;
  padding: 14px 30px;
  background: var(--ink);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}
.g-form .g-btn:hover { background: #000; }
.g-form .g-btn[disabled] { opacity: 0.7; cursor: default; }
.g-btn-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: g-spin 0.7s linear infinite;
}
@keyframes g-spin { to { transform: rotate(360deg); } }
/* Success / error banners — neutral ink treatment (no accent colour). */
.g-form-success,
.g-form-error {
  grid-column: 1 / -1;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.45;
}
.g-form-success {
  background: var(--tint);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ink);
}
.g-form-error {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.cf-turnstile { margin-top: 2px; }

/* ------------------------------------------------------------------ *
 * Minimal footer.
 * ------------------------------------------------------------------ */
.g-foot {
  background: var(--bg);
  color: var(--ink);
  padding: clamp(56px, 8vh, 96px) var(--pad) clamp(40px, 6vh, 64px);
  border-top: 1px solid var(--hairline);
}
.g-foot-links {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  flex-wrap: wrap;
}
.g-foot-links a {
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
}
.g-foot-links a:hover { color: var(--ink-3); }
.g-foot-meta {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink-3);
}
.g-brand-small { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.g-brand-small .g-dot { color: var(--ink-3); }

/* ------------------------------------------------------------------ *
 * Blog index — an editorial post list in the cinematic language. A calm
 * light hero (.g-hero-inner), then ruled post cards with a thumbnail.
 * ------------------------------------------------------------------ */
.g-blog { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(80px, 12vh, 140px); }
.g-postlist { display: grid; gap: 0; }
.g-postcard {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  border-top: 1px solid var(--hairline);
  padding: clamp(28px, 4vw, 48px) 0;
}
.g-postcard--text { grid-template-columns: 1fr; }
.g-postcard-thumb { display: block; border-radius: 14px; overflow: hidden; background: var(--tint); }
.g-postcard-thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.g-postcard-date { display: block; font-size: 14px; color: var(--ink-3); margin-bottom: 12px; }
.g-postcard h2 {
  font-weight: 500;
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  max-width: 30ch;
}
.g-postcard h2 a { text-decoration: none; color: var(--ink); }
.g-postcard h2 a:hover { color: var(--ink-3); }
.g-postcard p { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 58ch; }

/* Neutral "Product Update" chip (ink-only). */
.g-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  padding: 3px 10px;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.g-postcard-date + .g-tag { margin-left: 0; margin-bottom: 12px; }

/* ------------------------------------------------------------------ *
 * Blog post — a centred reading column with a light-weight headline.
 * ------------------------------------------------------------------ */
.g-article {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 9vh, 100px) var(--pad) clamp(72px, 11vh, 130px);
}
.g-article-head { margin-bottom: clamp(28px, 4vw, 44px); }
.g-article-head .g-date { display: block; font-size: 14px; color: var(--ink-3); margin-bottom: 16px; }
.g-article-head .g-tag { margin-left: 10px; }
.g-article-head h1 {
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.g-article-img { width: 100%; border-radius: 16px; margin-bottom: clamp(32px, 5vw, 52px); }

.g-article-body { font-size: 19px; line-height: 1.68; color: var(--ink-2); }
.g-article-body > h2 {
  font-weight: 400;
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 1.7em 0 0.5em;
}
.g-article-body > h3 {
  font-weight: 600;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.25;
  color: var(--ink);
  margin: 1.5em 0 0.4em;
}
.g-article-body p { margin-bottom: 1.15em; }
.g-article-body ul, .g-article-body ol { margin: 0 0 1.15em 1.2em; }
.g-article-body li { margin-bottom: 0.5em; padding-left: 0.2em; }
.g-article-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
.g-article-body a:hover { text-decoration-color: var(--ink); }
.g-article-body strong { font-weight: 600; color: var(--ink); }
.g-article-body blockquote {
  margin: 1.6em 0;
  padding-left: 24px;
  border-left: 2px solid var(--ink);
  font-size: 1.06em;
  line-height: 1.5;
  color: var(--ink);
}
.g-article-body hr { border: none; border-top: 1px solid var(--hairline); margin: 2.4em 0; }
.g-article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  background: var(--tint);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 1px 6px;
}
.g-article-body pre {
  background: var(--tint);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 18px 20px;
  overflow-x: auto;
  margin: 1.4em 0;
}
.g-article-body pre code { background: none; border: none; padding: 0; font-size: 15px; }

/* Related posts (nested inside .g-article, so no extra width/side padding). */
.g-related { margin-top: clamp(48px, 7vh, 80px); padding-top: clamp(36px, 5vh, 56px); border-top: 1px solid var(--hairline); }
.g-related h2 {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 22px;
}
.g-related ul { list-style: none; display: grid; gap: 14px; }
.g-related a { font-size: 19px; font-weight: 500; text-decoration: none; color: var(--ink); }
.g-related a:hover { color: var(--ink-3); }

/* ------------------------------------------------------------------ *
 * In-post components (re-inked, ink-only).
 * ------------------------------------------------------------------ */
.post-inline-img { margin: clamp(28px, 4vw, 44px) 0; }
.post-inline-img img { width: 100%; border-radius: 14px; cursor: zoom-in; }
.post-inline-img video { width: 100%; border-radius: 14px; }
.post-inline-img svg { cursor: zoom-in; }
.post-inline-img figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-3); text-align: center; }

/* A tall phone screenshot displayed at phone width instead of stretched to
   the full article column -- the image itself stays uncropped, this only
   caps its display size. */
.post-inline-img--phone img { width: 100%; max-width: 280px; margin: 0 auto; display: block; }

/* Lightbox: click any blog inline screenshot to view it full size. One
   shared overlay per page, built by src/assets/lightbox.js. */
.g-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 60px);
  background: rgba(16, 16, 16, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  cursor: zoom-out;
}
.g-lightbox.g-lightbox-open { opacity: 1; visibility: visible; }
.g-lightbox-content { display: flex; max-width: 92vw; max-height: 92vh; }
.g-lightbox-media.g-lightbox-media {
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
}
.g-lightbox-content img.g-lightbox-media {
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.g-lightbox-content svg.g-lightbox-media {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.g-lightbox-close {
  position: absolute;
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.g-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
body.g-lightbox-locked { overflow: hidden; }

/* Two inline images shown side by side (e.g. a before/after or a pair of
   flow-builder captures), each keeping its own figure/figcaption. */
.post-inline-img-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 28px);
  margin: clamp(28px, 4vw, 44px) 0;
}
.post-inline-img-row .post-inline-img { margin: 0; }

/* Three phone screenshots in one row (a sequence of app screens). Stays
   three across on a phone too: stacked, three tall screens would fill
   several screen heights, and each opens full size in the lightbox. */
.post-inline-img-row--three { grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2vw, 24px); }
.post-inline-img-row--three img { border-radius: 10px; }

.post-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: clamp(30px, 4vw, 48px) 0;
  padding: clamp(26px, 3vw, 38px) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.post-stat-num {
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 50px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 12px;
}
.post-stat-label { font-size: 15px; line-height: 1.4; color: var(--ink-3); }

/* A self-contained part of a post set apart as a card (first use: the
   certification section of the Matter post). Same surface as .post-sequence. */
.post-card {
  margin: clamp(30px, 4vw, 48px) 0;
  padding: clamp(24px, 3vw, 34px);
  background: var(--tint);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}
.post-card > h3 {
  font-weight: 600;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.6em;
}
.post-card > p:last-child { margin-bottom: 0; }

.post-sequence {
  margin: clamp(30px, 4vw, 48px) 0;
  padding: clamp(24px, 3vw, 34px);
  background: var(--tint);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}
.post-sequence-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.post-sequence ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.post-sequence li { display: flex; align-items: baseline; gap: 14px; font-size: 16px; line-height: 1.4; }
.seq-pass, .seq-fail {
  flex: none;
  min-width: 52px;
  text-align: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
/* Ink-only: PASS is a filled ink chip, FAIL an outlined one — meaning by
   fill, not colour. */
.seq-pass { background: var(--ink); color: #fff; }
.seq-fail { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); }
.seq-step { color: var(--ink-2); }
.seq-num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 100px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.post-sequence ol.steps li { align-items: flex-start; }
.post-sequence ol.steps .seq-step { line-height: 1.5; }
.post-sequence ol.steps .seq-step strong { color: var(--ink); }

/* A timed sequence of events: elapsed time, who acted, what happened.
   Ink-only like .post-sequence: the actor chip is told apart by fill
   (device filled, agents outlined, us tinted, cloud dashed), not by colour. */
.post-timeline {
  margin: clamp(30px, 4vw, 48px) 0;
  padding: clamp(24px, 3vw, 34px);
  background: var(--tint);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}
.post-timeline-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.post-timeline-entry {
  display: grid;
  grid-template-columns: 88px 72px 1fr;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  font-size: 16px;
  line-height: 1.45;
}
.post-timeline-label + .post-timeline-entry { border-top: none; padding-top: 0; }
.tl-time { font-family: var(--mono); font-size: 14px; color: var(--ink); white-space: nowrap; }
.tl-actor {
  justify-self: start;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tl-device { background: var(--ink); color: #fff; border: 1.5px solid var(--ink); }
.tl-ops { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); }
.tl-app { background: var(--hairline); color: var(--ink); border: 1.5px solid var(--hairline); }
.tl-cloud { background: #fff; color: var(--ink); border: 1.5px dashed var(--ink); }
.tl-desc { color: var(--ink-2); }

.post-compare { margin: clamp(30px, 4vw, 48px) 0; overflow-x: auto; }
.post-compare table { width: 100%; border-collapse: collapse; font-size: 15px; }
.post-compare th, .post-compare td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  line-height: 1.4;
}
.post-compare thead th { font-weight: 600; color: var(--ink); border-bottom: 1.5px solid var(--ink); }
.post-compare tbody td:first-child { font-weight: 500; color: var(--ink); }
.post-compare tbody td { color: var(--ink-2); }

/* ------------------------------------------------------------------ *
 * Responsive.
 * ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .g-postcard { grid-template-columns: 1fr; gap: 18px; }
  .post-inline-img-row { grid-template-columns: 1fr; }
  .post-sequence li { flex-wrap: wrap; gap: 8px; }
  .post-inline-img-row--three { grid-template-columns: repeat(3, 1fr); }
  .post-timeline-entry { grid-template-columns: auto 1fr; gap: 6px 12px; }
  .post-timeline-entry .tl-desc { grid-column: 1 / -1; }
  .g-hero-bottom { flex-direction: column; align-items: flex-start; gap: 24px; }
  .g-hero-aside { max-width: none; }
  .g-cols { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); }

  /* Hamburger menu: the nav links collapse into a full-width dropdown
     panel toggled by .g-nav-toggle (site/src/assets/nav-toggle.js adds
     .g-nav-open to .g-head). CTA moves into the panel with the links. */
  .g-nav-toggle { display: flex; }
  .g-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    padding: 88px var(--pad) 32px;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0.25s;
  }
  .g-head.g-nav-open .g-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .g-head .g-nav > a:not(.g-head-cta) {
    display: block;
    color: #fff;
    opacity: 0.92;
    font-size: 19px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.14);
  }
  .g-nav .g-head-cta { align-self: flex-start; margin-top: 24px; }

  .g-head.g-nav-open .g-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .g-head.g-nav-open .g-nav-toggle span:nth-child(2) { opacity: 0; }
  .g-head.g-nav-open .g-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ------------------------------------------------------------------ *
 * Platform-page artifacts. Ink and hairlines only, in the page's own
 * type, so they read as engineering documentation rather than as an
 * imported asset. Small uppercase labels use --mono.
 * ------------------------------------------------------------------ */

/* Two-part rows: the claim on the left, what makes it true on the right. */
.g-reach { border-top: 1px solid var(--ink); margin-top: clamp(30px, 4vw, 52px); }
.g-reach-head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  border-bottom: 1px solid var(--hairline);
  padding: 10px 0 12px;
}
.g-reach-head span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.g-reach-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  border-bottom: 1px solid var(--hairline);
  padding: 22px 0;
}
.g-reach-work { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }
.g-reach-why { font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* The loop: the agent's turn. */
.g-loop { border-top: 1px solid var(--ink); margin-top: clamp(30px, 4vw, 52px); }
.g-loop-step {
  display: grid;
  grid-template-columns: 3.5em 1fr;
  gap: clamp(18px, 2vw, 32px);
  border-bottom: 1px solid var(--hairline);
  padding: 18px 0;
  align-items: baseline;
}
.g-loop-mark { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); }
.g-loop-text { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.4; color: var(--ink); }
.g-loop-cta { margin-top: clamp(24px, 3vw, 34px); }
.g-loop-close { padding-top: 18px; font-size: 16px; color: var(--ink-2); max-width: 62ch; }

/* Flows and what each one validates. */
.g-flows { border-top: 1px solid var(--ink); margin-top: clamp(30px, 4vw, 52px); }
.g-flows-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  border-bottom: 1px solid var(--hairline);
  padding: 10px 0 12px;
}
.g-flows-head span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.g-flow-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  border-bottom: 1px solid var(--hairline);
  padding: 16px 0;
  align-items: baseline;
}
.g-flow-name { font-size: 18px; color: var(--ink); }
.g-flow-conds { font-size: 17px; line-height: 1.5; color: var(--ink-2); }

/* A flow running: acting domain in a rail, the step beside it. */
.g-seq { border-top: 1px solid var(--ink); margin-top: clamp(26px, 3vw, 40px); }
.g-seq-step {
  display: grid;
  grid-template-columns: 8em 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  border-bottom: 1px solid var(--hairline);
  padding: 15px 0;
  align-items: baseline;
}
.g-seq-actor { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.g-seq-do { font-size: 17px; line-height: 1.45; color: var(--ink); }
.g-seq-check { font-size: 15px; line-height: 1.45; color: var(--ink-3); }

/* The system: parts along one band, role and handoff, no arrows. */
.g-chain {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
  margin-top: clamp(30px, 4vw, 52px);
}
.g-chain-part {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--hairline);
  padding: 18px clamp(16px, 2vw, 28px) 22px 0;
}
.g-chain-part:last-child { border-right: 0; }
.g-chain-part h3 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.g-chain-part p { font-size: 16px; line-height: 1.5; color: var(--ink-2); margin-bottom: 14px; }
.g-chain-out {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
}

.g-figcap { margin-top: 16px; font-size: 14px; color: var(--ink-3); max-width: 62ch; }
.g-prose .g-statement { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.2; letter-spacing: -0.03em; color: var(--ink); max-width: 26ch; margin-top: clamp(20px, 3vw, 34px); }

@media (max-width: 900px) {
  .g-chain { grid-template-columns: 1fr; }
  .g-chain-part { border-right: 0; border-bottom: 1px solid var(--hairline); padding-right: 0; }
  .g-seq-step, .g-flow-row, .g-reach-row { grid-template-columns: 1fr; gap: 8px; }
}

/* Platform page: line drawings of the setup, placed inside prose sections. */
.g-drawing { margin: clamp(28px, 4vw, 48px) 0; }
.g-drawing img { width: 100%; height: auto; display: block; }
.g-drawing--hero { max-width: 900px; margin-top: clamp(34px, 5vh, 60px); }
/* The platform hero centres its text and drawing on one axis. */
.g-hero-inner--centered { text-align: center; }
.g-hero-inner--centered h1,
.g-hero-inner--centered .g-hero-inner-lede,
.g-hero-inner--centered .g-drawing--hero { margin-left: auto; margin-right: auto; }
/* Desk and lab rig, stacked on one centre line at the same drawing scale:
   the lab drawing is 1487 units wide and the desk one 1121, so the desk
   figure takes 1121/1487 of the lab figure's width. */
.g-rigs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 6vw, 72px);
  margin: clamp(36px, 5vw, 64px) 0;
}
.g-rigs figure { width: min(100%, 860px); text-align: center; }
.g-rigs figure:first-child img { width: calc(100% * 1121 / 1487); }
.g-rigs figure img { width: 100%; height: auto; display: block; margin: 0 auto; }
.g-rigs figcaption { margin: 16px auto 0; font-size: 15px; line-height: 1.5; color: var(--ink-3); max-width: 52ch; }
.g-rigs figcaption strong { color: var(--ink); font-weight: 500; }
@media (max-width: 600px) {
  .g-rigs figure:first-child img { width: 100%; }
}

/* A drawing and a photo side by side under one caption, wider than the reading
   column (the strongly-worded-letter post's rig drawing beside the desk photo).
   Stacks at the column's own width below 900px. */
.post-wide-pair {
  width: min(1120px, calc(100vw - 2 * var(--pad)));
  margin-left: 50%;
  transform: translateX(-50%);
}
.post-wide-pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
.post-wide-pair-grid svg { display: block; }
@media (max-width: 900px) {
  .post-wide-pair { width: auto; margin-left: 0; transform: none; }
  .post-wide-pair-grid { grid-template-columns: 1fr; }
}

/* A step list and its figure side by side, wider than the reading column
   (the Matter post's lock flow beside its sequence diagram). Falls back to
   one column, at the column's own width, below 900px. */
.post-wide-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  width: min(1120px, calc(100vw - 2 * var(--pad)));
  margin: clamp(30px, 4vw, 48px) 0 clamp(30px, 4vw, 48px) 50%;
  transform: translateX(-50%);
}
.post-wide-row > .post-sequence,
.post-wide-row > .post-inline-img { margin: 0; }
@media (max-width: 900px) {
  .post-wide-row { grid-template-columns: 1fr; width: auto; margin-left: 0; transform: none; }
}
.post-wide-row .post-inline-img svg {
  box-sizing: border-box;
  border: 1px solid var(--ink-3);
  border-radius: 14px;
  padding: 10px 8px;
}