/* Design language for Apple Design OS (DesignOSApple)
 * Tokens conform to Apple HIG and EaseUI principles:
 * - Neutral zero-chroma grayscale with WCAG AA compliant text contrast
 * - Apple Blue system accent (#0071e3)
 * - Native Apple typography stack (-apple-system / SF Pro / SF Mono)
 * - 760px container measure, zero keyframes, zero Three.js
 */

:root {
  --c-accent: #0071e3;
  --c-accent-fg: #ffffff;
  --c-accent-text: #0066cc;
  --c-sky-600: #0077ed;
  --c-canvas: #ffffff;
  --c-gray-100: #fafafc;
  --c-gray-200: #f5f5f7;
  --c-gray-300: #e8e8ed;
  --c-gray-400: #d2d2d7;
  --c-gray-500: #c7c7cc;
  --c-gray-600: #aeaeb2;
  --c-gray-900: #55555a;
  --c-gray-1000: #3a3a3c;
  --c-gray-1100: #2c2c2e;
  --c-gray-1200: #1d1d1f;
  --c-preview-bg: #ffffff;
  --c-preview-border: #d2d2d7;

  /* Typography scale */
  --t-13: 13px;
  --t-14: 14px;
  --t-16: 16px;
  --t-18: 18px;
  --t-20: 20px;
  --t-24: 24px;
  --t-30: 30px;
  --t-36: 36px;
  --t-48: 48px;

  /* Spacing scale */
  --s-2: 4px;
  --s-3: 6px;
  --s-4: 8px;
  --s-5: 10px;
  --s-6: 12px;
  --s-8: 16px;
  --s-10: 20px;
  --s-12: 24px;
  --s-16: 32px;
  --s-24: 48px;
  --s-32: 64px;
  --s-40: 80px;
  --s-48: 96px;

  /* Radii */
  --r-3: 8px;
  --r-4: 12px;
  --r-5: 16px;
  --r-pill: 9999px;

  /* Touch & interactive heights */
  --ctl-28: 28px;
  --ctl-32: 32px;
  --ctl-44: 44px;
  --ctl-48: 48px;
  --tap-min: 44px;

  /* Font weights & line heights */
  --fw-body: 400;
  --fw-book: 450;
  --fw-medium: 500;
  --fw-display: 550;
  --fw-semibold: 600;
  --lh-text: 1.625;
  --lh-ui: 1.5;
  --lh-tight: 1.18;

  /* Tracking */
  --track-heading: -0.015em;
  --track-tight: -0.02em;
  --track-flat: 0;
  --track-wordmark: -0.015em;

  /* Container */
  --w-container: 760px;

  /* Transitions */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* Font stacks */
  --stack-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --stack-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Shadows */
  --shadow-ink-4: color-mix(in srgb, var(--c-gray-1200) 4%, transparent);
  --shadow-ink-6: color-mix(in srgb, var(--c-gray-1200) 6%, transparent);
  --shadow-ink-8: color-mix(in srgb, var(--c-gray-1200) 8%, transparent);
  --shadow-custom: 0 0 0 1px var(--shadow-ink-6), 0 1px 2px -1px var(--shadow-ink-6), 0 2px 4px 0 var(--shadow-ink-4);
  --shadow-custom-hover: 0 0 0 1px var(--shadow-ink-8), 0 1px 2px -1px var(--shadow-ink-8), 0 2px 4px 0 var(--shadow-ink-6);

  --icon-16: 16px;
  --icon-20: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-gray-100);
  color: var(--c-gray-1200);
  font-family: var(--stack-sans);
  font-size: var(--t-16);
  line-height: var(--lh-text);
  font-weight: var(--fw-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--c-accent); color: var(--c-accent-fg); }
:focus-visible { outline: 2px solid var(--c-sky-600); outline-offset: 2px; }

p {
  margin: 0 0 var(--s-8);
  max-width: 68ch;
}
p a, li a, dd a, td a {
  color: var(--c-accent-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-accent-text) 35%, transparent);
  text-underline-offset: 3px;
}

code {
  font-family: var(--stack-mono);
  font-size: 0.9em;
  font-weight: var(--fw-medium);
}
strong { font-weight: var(--fw-semibold); }

.ph {
  width: var(--icon-16);
  height: var(--icon-16);
  flex: none;
  vertical-align: -0.15em;
}
.ph[data-size="20"] { width: var(--icon-20); height: var(--icon-20); }

/* Accessibility skip link */
.ds-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ds-skip-link:focus {
  position: fixed;
  top: var(--s-8);
  left: var(--s-8);
  z-index: 100;
  width: auto;
  height: auto;
  padding: var(--s-4) var(--s-8);
  overflow: visible;
  clip-path: none;
  border-radius: var(--r-pill);
  background: var(--c-preview-bg);
  box-shadow: var(--shadow-custom);
  font-size: var(--t-14);
  font-weight: var(--fw-medium);
}

/* Page Shell & Layout */
.ds-shell {
  --ds-gutter: var(--s-10);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.ds-shell-nav, .ds-shell-main, .ds-shell-footer-inner {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}

/* Navigation Header */
.ds-shell-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--ctl-48);
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-8);
  padding-block: var(--s-3);
}

.wordmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--t-16);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wordmark);
}
.wordmark span {
  font: var(--fw-body) var(--t-13) var(--stack-mono);
  vertical-align: baseline;
  margin-left: var(--s-2);
  letter-spacing: 0;
}

.home-nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.ds-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap-min);
  padding-inline: var(--s-8);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-gray-1000);
  font-size: var(--t-14);
  font-weight: var(--fw-medium);
  transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.ds-tab:hover {
  background: var(--c-gray-200);
  color: var(--c-gray-1200);
}

/* Main Content */
.ds-shell-main {
  flex: 1;
  padding-block: var(--s-24);
}
.ds-shell-main > section {
  margin-top: var(--s-40);
  scroll-margin-top: var(--s-40);
}
.ds-shell-main > section:first-child {
  margin-top: var(--s-16);
}

@media (min-width: 640px) {
  .ds-shell { --ds-gutter: var(--s-12); }
  .ds-shell-main { padding-block: var(--s-32); }
  .ds-shell-main > section { margin-top: var(--s-48); }
}

/* Headings */
.ds-heading {
  margin: 0 0 var(--s-10);
  font-weight: var(--fw-display);
  text-wrap: balance;
}
.ds-heading[data-level="1"] {
  display: block;
  max-width: 24ch;
  font-size: clamp(var(--t-30), 4.6vw, var(--t-48));
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}
.ds-heading[data-level="2"] {
  font-size: var(--t-24);
  letter-spacing: var(--track-heading);
}

.lede {
  font-size: var(--t-18);
  color: var(--c-gray-1000);
  max-width: 58ch;
  margin-bottom: var(--s-12);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-16);
}
.badges img {
  display: block;
  height: 28px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6) var(--s-8);
  margin-top: var(--s-12);
}
.ds-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: var(--tap-min);
  padding-inline: var(--s-12);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-gray-1200);
  color: var(--c-canvas);
  font-size: var(--t-14);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out);
}
.ds-btn-pill:hover {
  background: #000000;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap-min);
  color: var(--c-accent-text);
  font-size: var(--t-14);
  font-weight: var(--fw-medium);
}

/* Card Surfaces (Strict Concentric Geometry: 16px radius with 16px padding) */
.ds-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-8);
  border: 1px solid var(--c-preview-border);
  border-radius: var(--r-5);
  background: var(--c-canvas);
  box-shadow: var(--shadow-custom);
  margin: 0 0 var(--s-16);
}

.specimen-link {
  display: block;
  width: 100%;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--c-gray-200);
  cursor: zoom-in;
}
.specimen-link img {
  display: block;
  width: 100%;
  height: auto;
  image-orientation: from-image;
  border-radius: inherit;
}

.case-plate-caption {
  margin-top: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0;
}
.case-plate-caption p {
  margin: 0;
  color: var(--c-gray-1200);
  font-size: var(--t-14);
  font-weight: var(--fw-medium);
  max-width: none;
}
.case-plate-caption cite {
  color: var(--c-gray-900);
  font-family: var(--stack-mono);
  font-size: var(--t-13);
  font-style: normal;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Showcase Grid */
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-16);
  margin-top: var(--s-16);
}
@media (min-width: 768px) {
  .showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.showcase-grid .ds-card[data-featured="true"] {
  grid-column: 1 / -1;
}

/* Code Blocks */
.ds-code-block {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-4);
  padding: var(--s-8);
  margin: 0 0 var(--s-12);
  background: var(--c-gray-200);
  border: 1px solid var(--c-preview-border);
}
.ds-code-block pre {
  margin: 0;
}
.ds-code-block code {
  display: block;
  white-space: pre;
  word-break: normal;
  font-family: var(--stack-mono);
  font-size: var(--t-13);
  line-height: var(--lh-ui);
  color: var(--c-gray-1200);
}

/* Fact Matrix & Tables */
.fact-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--s-12) 0 var(--s-16);
}
.fact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-14);
  line-height: var(--lh-ui);
  text-align: left;
  border-top: 1px solid var(--c-preview-border);
  border-bottom: 1px solid var(--c-preview-border);
}
.fact-table th, .fact-table td {
  padding: var(--s-6) var(--s-8);
  border-bottom: 1px solid var(--c-gray-300);
  vertical-align: top;
}
.fact-table th {
  background: var(--c-gray-200);
  font-weight: var(--fw-semibold);
  color: var(--c-gray-1200);
  white-space: nowrap;
}
.fact-table tr:last-child td {
  border-bottom: 0;
}
.fact-table td:first-child {
  font-family: var(--stack-mono);
  font-size: var(--t-13);
  white-space: nowrap;
}

/* Callout / Aside */
.ds-aside {
  padding: var(--s-8);
  border-radius: var(--r-4);
  background: var(--c-gray-200);
  border: 1px solid var(--c-preview-border);
  margin: var(--s-12) 0 var(--s-16);
}
.ds-aside p {
  margin: 0 0 var(--s-4);
  font-size: var(--t-14);
}
.ds-aside p:last-child {
  margin-bottom: 0;
}

/* FAQ Details */
.faq {
  margin-top: var(--s-12);
}
.faq details {
  border-top: 1px solid var(--c-gray-300);
  padding: var(--s-4) 0;
}
.faq details:last-of-type {
  border-bottom: 1px solid var(--c-gray-300);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: var(--tap-min);
  cursor: pointer;
  font-weight: var(--fw-medium);
  font-size: var(--t-16);
  color: var(--c-gray-1200);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ph {
  color: var(--c-gray-900);
}
.faq details[open] summary .ph {
  transform: rotate(180deg);
}
.faq details p {
  margin: var(--s-4) 0 var(--s-4);
  color: var(--c-gray-1000);
  font-size: var(--t-14);
  line-height: var(--lh-text);
  padding-inline: var(--s-2);
}

/* Icon Row List (Ecosystem & Docs) */
.ds-icon-row-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-preview-border);
  border-bottom: 1px solid var(--c-preview-border);
  border-radius: 0;
  margin-top: var(--s-12);
}
.ds-icon-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-1) var(--s-6);
  min-height: var(--tap-min);
  padding: var(--s-6) var(--s-4);
  border-bottom: 1px solid var(--c-gray-300);
  background: transparent;
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.ds-icon-row-title {
  grid-column: 1;
  color: var(--c-gray-1200);
  font-size: var(--t-16);
  font-weight: var(--fw-medium);
  white-space: normal;
  overflow-wrap: anywhere;
}
.ds-icon-row-meta {
  grid-column: 1;
  color: var(--c-gray-900);
  font-family: var(--stack-mono);
  font-size: var(--t-13);
  white-space: normal;
  overflow-wrap: anywhere;
}
.ds-icon-row .ph {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--c-gray-900);
}
.ds-icon-row:last-child {
  border-bottom: 0;
}
.ds-icon-row:hover {
  background: var(--c-gray-200);
}

/* Footer */
.ds-shell-footer {
  margin-top: var(--s-32);
  padding-block: var(--s-16) var(--s-32);
  border-top: 1px solid var(--c-gray-300);
}
.ds-shell-footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.footer-links-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8);
}
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--c-accent-text);
  font-size: var(--t-14);
  font-weight: var(--fw-medium);
}
.footer-copy {
  margin: 0;
  color: var(--c-gray-900);
  font-size: var(--t-13);
  line-height: var(--lh-ui);
}

/* Buy Me A Coffee Widget Overrides to Guarantee Zero Radius Crowding */
#bmc-wbtn {
  border-radius: var(--r-pill) !important;
}
#bmc-wbtn img {
  border-radius: 50% !important;
}

/* Reduced Motion Guard */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Marketing surface, 2026-10. Inherits the site's Apple typography and neutral
   palette; no product runtime tokens or managed design files are changed. */
.marketing { --w-marketing: 1184px; --r-stage: 32px; background:var(--c-canvas); color:var(--c-gray-1200); font-family:var(--stack-sans); font-size:16px; line-height:1.55; }
.marketing .wrap { width:min(var(--w-marketing), calc(100% - 80px)); margin-inline:auto; }
.marketing a { color:inherit; text-underline-offset:4px; }
.marketing a:hover { color:var(--c-accent-text); }
.marketing a:focus-visible, .marketing summary:focus-visible { outline:3px solid var(--c-accent); outline-offset:5px; border-radius:6px; }
.marketing ::selection { background:var(--c-gray-1200); color:var(--c-canvas); }
.marketing h1, .marketing h2, .marketing h3, .marketing p, .marketing figure { margin:0; }
.marketing h1, .marketing h2, .marketing h3 { text-wrap:balance; }
.marketing .eyebrow { font-size:13px; font-weight:600; letter-spacing:.045em; color:var(--c-gray-900); text-transform:uppercase; }
.marketing .marketing-nav { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--c-gray-300); }
.marketing .brand { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font-size:23px; font-weight:650; letter-spacing:-1px; white-space:nowrap; }
.marketing .brand>span:first-child { font-weight:400; }
.marketing .brand-platform { font-size:17px; font-weight:400; color:var(--c-gray-900); margin-left:12px; letter-spacing:-.4px; }
.marketing .marketing-nav nav, .marketing-footer nav { display:flex; flex-wrap:wrap; align-items:center; }
.marketing .marketing-nav nav a, .marketing-footer nav a { display:inline-flex; align-items:center; min-height:44px; padding:10px 14px; font-size:14px; text-decoration:none; }
.marketing .hero { padding-top:48px; }
.marketing .hero-topline { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:26px; }
.marketing .release-note { font-size:13px; min-height:44px; display:inline-flex; align-items:center; gap:12px; }
.marketing h1 { font-size:clamp(52px,6.6vw,94px); font-weight:560; line-height:1.015; letter-spacing:-.062em; }
.marketing h1 span { color:var(--c-gray-900); }
.marketing .hero-bottom { margin-top:32px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.marketing .hero-lede { font-size:21px; line-height:1.5; letter-spacing:-.02em; }
.marketing .hero-actions { margin-top:0; display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.marketing .pill { display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:14px 24px; min-height:52px; border-radius:var(--r-pill); font-weight:550; text-decoration:none; font-size:15px; transition:background-color 150ms ease,color 150ms ease; }
.marketing .pill.primary { color:var(--c-canvas); background:var(--c-gray-1200); }
.marketing .pill.primary:hover { background:var(--c-gray-1000); }
.marketing .pill.primary:active { background:var(--c-gray-900); }
.marketing .pill.secondary { background:var(--c-gray-200); color:var(--c-gray-1200); }
.marketing .pill.secondary:hover { background:var(--c-gray-300); }
.marketing .pill.secondary:active { background:var(--c-gray-400); }
.marketing .hero-proof { margin-top:40px; }
.marketing .hero-proof img { display:block; width:100%; height:auto; border-radius:var(--r-stage); background:var(--c-gray-200); }
.marketing .hero-proof figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding:18px 0; font-size:12px; color:var(--c-gray-900); }
.marketing .facts-strip { margin-top:28px; padding-block:28px; border-block:1px solid var(--c-gray-300); }
.marketing .facts-strip dl { display:grid; grid-template-columns:1fr 1.6fr 1fr .8fr; gap:24px; margin:0; }
.marketing .facts-strip dt { color:var(--c-gray-900); font-size:12px; margin-bottom:6px; }
.marketing .facts-strip dd { margin:0; font-size:14px; font-weight:550; }
.marketing .chapter { padding-block:112px; scroll-margin-top:24px; }
.marketing .section-heading { max-width:700px; margin-bottom:48px; }
.marketing h2 { font-size:clamp(34px,4vw,56px); line-height:1.1; letter-spacing:-.045em; font-weight:560; }
.marketing .eyebrow+h2 { margin-top:16px; }
.marketing .section-heading>p:last-child { font-size:19px; max-width:620px; margin-top:22px; color:var(--c-gray-900); }
.marketing .principles { display:grid; grid-template-columns:repeat(3,1fr); gap:44px; }
.marketing .principle-label { display:block; padding-top:18px; border-top:1px solid var(--c-gray-400); color:var(--c-gray-900); font-size:12px; margin-bottom:24px; }
.marketing h3 { font-size:24px; line-height:1.25; letter-spacing:-.025em; font-weight:560; }
.marketing .principles p { color:var(--c-gray-900); font-size:15px; margin-top:20px; }
.marketing .principles a { display:inline-flex; align-items:center; min-height:44px; margin-top:16px; font-size:13px; }
.marketing .honest-note { margin-top:40px; background:var(--c-gray-200); padding:24px 28px; border-radius:20px; font-size:14px; color:var(--c-gray-900); }
.marketing .honest-note strong { color:var(--c-gray-1200); }
.marketing .install-section { background:var(--c-gray-100); }
.marketing .install-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; }
.marketing .install-grid h2+p { margin-top:24px; color:var(--c-gray-900); }
.marketing .install-grid .pill { margin-top:28px; }
.marketing .small { font-size:13px; line-height:1.65; color:var(--c-gray-900); }
.marketing .install-grid .small { margin-top:20px; }
.marketing .code-caption a { display:inline-flex; align-items:center; min-height:44px; }
.marketing .code-caption { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:16px; font-size:12px; color:var(--c-gray-900); }
.marketing pre { margin:0; max-width:100%; padding:28px; background:var(--c-gray-1200); color:var(--c-gray-200); border-radius:20px; font-family:var(--stack-mono); font-size:12px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; }
.marketing pre code { font:inherit; color:inherit; background:none; padding:0; }
.marketing .layer-stack { list-style:none; padding:0; margin:0; }
.marketing .layer-stack li { display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:20px; padding:25px 0; border-top:1px solid var(--c-gray-300); }
.marketing .layer-stack li:last-child { border-bottom:1px solid var(--c-gray-300); }
.marketing .layer-index { font-size:13px; color:var(--c-gray-900); font-variant-numeric:tabular-nums; }
.marketing .layer-stack h3 { font-size:22px; }
.marketing .layer-stack p { color:var(--c-gray-900); font-size:14px; margin-top:4px; }
.marketing .layer-count { font-size:13px; color:var(--c-gray-900); }
.marketing .layer-stack+.small { margin-top:20px; }
.marketing .adoption-loop { display:grid; grid-template-columns:1fr 1.6fr; gap:48px; margin-top:64px; }
.marketing .adoption-loop ol { margin:0; padding-left:20px; }
.marketing .adoption-loop li { padding:0 0 16px 10px; color:var(--c-gray-900); font-size:15px; }
.marketing .adoption-loop strong { color:var(--c-gray-1200); }
.marketing .quickstart-detail { margin-top:32px; border-block:1px solid var(--c-gray-300); }
.marketing summary { cursor:pointer; min-height:60px; padding:18px 0; font-size:16px; font-weight:550; }
.marketing .quickstart-detail p { margin:8px 0 24px; font-size:14px; color:var(--c-gray-900); }
.marketing .quickstart-detail pre { margin-bottom:24px; }
.marketing .gallery-section { background:var(--c-gray-100); }
.marketing .gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.marketing .image-link { display:block; background:var(--c-gray-200); border-radius:24px; padding:24px; }
.marketing .image-link img { display:block; width:100%; height:auto; border-radius:0; outline:1px solid rgba(0,0,0,.06); }
.marketing .gallery-grid figcaption { padding:24px 0 0; }
.marketing .gallery-grid h3 { font-size:21px; }
.marketing .gallery-grid p { margin-top:8px; font-size:14px; color:var(--c-gray-900); }
.marketing .wide-proof { margin-top:64px; }
.marketing .wide-proof>img { display:block; width:100%; height:auto; border-radius:24px; }
.marketing .wide-proof figcaption { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:28px; }
.marketing .wide-proof p { color:var(--c-gray-900); font-size:15px; }
.marketing .platform-pair { display:grid; grid-template-columns: .85fr 1.15fr; gap:32px; align-items:center; background:var(--c-gray-200); padding:40px; border-radius:var(--r-stage); }
.marketing .platform-pair img { width:100%; height:auto; display:block; border-radius:0; }
.marketing .family-list { margin-top:64px; border-top:1px solid var(--c-gray-300); padding-top:32px; }
.marketing .family-list h3 { font-size:19px; }
.marketing .family-list p { color:var(--c-gray-900); line-height:2; margin-top:16px; font-size:15px; }
.marketing .family-list a { display:inline-flex; min-height:44px; align-items:center; font-size:14px; margin-top:16px; }
.marketing .evidence-register { display:grid; grid-template-columns:1fr 1fr; gap:32px 64px; }
.marketing .evidence-register>div { border-top:1px solid var(--c-gray-300); padding-top:24px; }
.marketing .evidence-register h3 { font-size:19px; }
.marketing .evidence-register p { margin-top:14px; font-size:15px; color:var(--c-gray-900); }
.marketing .evidence-register strong { color:var(--c-gray-1200); font-weight:600; }
.marketing .evidence-section>.pill { margin-top:24px; }
.marketing .faq-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; padding-top:32px; }
.marketing .faq-section h2 { font-size:38px; }
.marketing .faq-list details { border-bottom:1px solid var(--c-gray-300); }
.marketing .faq-list details:first-child { border-top:1px solid var(--c-gray-300); }
.marketing .faq-list p { font-size:15px; color:var(--c-gray-900); padding-bottom:24px; }
.marketing .ecosystem-section { border-top:1px solid var(--c-gray-300); padding-top:64px; }
.marketing .ecosystem-section h2 { font-size:38px; }
.marketing .ecosystem-section>p:not(.eyebrow) { margin-top:20px; color:var(--c-gray-900); }
.marketing .ecosystem-links { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:32px; }
.marketing .ecosystem-links a { border-bottom:1px solid var(--c-gray-400); display:flex; flex-direction:column; gap:8px; padding:16px 0; text-decoration:none; }
.marketing .ecosystem-links span { color:var(--c-gray-900); font-size:13px; }
.marketing .read-next { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding-top:24px; }
.marketing .read-next p:not(.eyebrow) { color:var(--c-gray-900); margin-top:20px; }
.marketing .read-next .pill { margin-top:28px; }
.marketing .read-next nav a { display:flex; justify-content:space-between; gap:24px; align-items:center; min-height:56px; border-bottom:1px solid var(--c-gray-300); text-decoration:none; font-size:15px; }
.marketing .marketing-footer { display:flex; justify-content:space-between; gap:32px; align-items:center; border-top:1px solid var(--c-gray-300); padding-block:32px; }
.marketing .marketing-footer p { color:var(--c-gray-900); font-size:12px; margin-top:8px; }
@supports (corner-shape: squircle) { .marketing .hero-proof img, .marketing .image-link, .marketing .platform-pair, .marketing .honest-note { corner-shape:squircle; } }
@media(max-width:1024px) {
 .marketing .wrap { width:calc(100% - 48px); }
 .marketing .chapter { padding-block:80px; }
 .marketing .hero-topline { margin-bottom:24px; }
 .marketing .hero-bottom { align-items:flex-start; }
 .marketing .hero-lede { font-size:18px; }
 .marketing .principles { gap:24px; }
 .marketing .install-grid { gap:40px; }
 .marketing .gallery-grid { gap:20px; }
 .marketing .image-link { padding:14px; border-radius:14px; }
 .marketing .faq-section { gap:40px; }
 .marketing .read-next { gap:48px; }
}
@media(max-width:700px) {
 .marketing .wrap { width:calc(100% - 40px); }
 .marketing .marketing-nav { align-items:flex-start; flex-direction:column; gap:0; padding:16px 0 8px; }
 .marketing .marketing-nav nav { width:100%; justify-content:space-between; }
 .marketing .marketing-nav nav a { padding:10px 0; font-size:13px; }
 .marketing .hero { padding-top:24px; }
 .marketing .hero-topline { align-items:flex-start; flex-direction:column; gap:0; margin-bottom:16px; }
 .marketing .hero-topline .eyebrow { font-size:11px; }
 .marketing .release-note { font-size:12px; }
 .marketing h1 { font-size:clamp(44px,10.5vw,68px); letter-spacing:-.055em; }
 .marketing .hero-bottom { flex-direction:column; gap:24px; margin-top:24px; }
 .marketing .hero-actions { gap:8px; }
 .marketing .pill { padding:13px 20px; font-size:14px; min-height:48px; }
 .marketing .hero-proof { margin-top:28px; }
 .marketing .hero-proof img { border-radius:20px; }
 .marketing .hero-proof figcaption { font-size:11px; }
 .marketing .facts-strip { margin-top:16px; }
 .marketing .facts-strip dl { grid-template-columns:1fr 1fr; gap:24px 16px; }
 .marketing .facts-strip dd { font-size:13px; }
 .marketing .chapter { padding-block:64px; }
 .marketing .section-heading { margin-bottom:32px; }
 .marketing .section-heading>p:last-child { font-size:17px; }
 .marketing h2 { font-size:36px; }
 .marketing .principles, .marketing .install-grid, .marketing .evidence-register, .marketing .faq-section, .marketing .ecosystem-links, .marketing .read-next { grid-template-columns:1fr; gap:32px; }
 .marketing .principles h3 br { display:none; }
 .marketing .principle-label { margin-bottom:16px; }
 .marketing .principles p { margin-top:12px; }
 .marketing .principles a { margin-top:8px; }
 .marketing .honest-note { margin-top:28px; padding:22px; }
 .marketing pre { padding:20px; font-size:11px; }
 .marketing .layer-stack li { grid-template-columns:28px 1fr; gap:10px; }
 .marketing .layer-count { grid-column:2; margin-top:2px; }
 .marketing .layer-stack h3 { font-size:21px; }
 .marketing .adoption-loop { grid-template-columns:1fr; gap:24px; margin-top:40px; }
 .marketing .gallery-grid { grid-template-columns:1fr; gap:36px; }
 .marketing .image-link { padding:24px; border-radius:24px; max-width:360px; margin-inline:auto; }
 .marketing .gallery-grid figcaption { padding-top:20px; }
 .marketing .gallery-grid img { max-height:650px; object-fit:contain; }
 .marketing .wide-proof { margin-top:48px; }
 .marketing .platform-pair { grid-template-columns:1fr; padding:24px; border-radius:24px; gap:24px; }
 .marketing .wide-proof figcaption { grid-template-columns:1fr; gap:16px; }
 .marketing .family-list { margin-top:40px; }
 .marketing .faq-section h2, .marketing .ecosystem-section h2 { font-size:34px; }
 .marketing .ecosystem-links { gap:12px; }
 .marketing .marketing-footer { align-items:flex-start; flex-direction:column; gap:16px; }
 .marketing .marketing-footer nav a { padding-left:0; padding-right:24px; }
}
@media(prefers-reduced-motion:reduce) { .marketing *, .marketing *::before, .marketing *::after { scroll-behavior:auto !important; transition:none !important; } }

/* Template-derived prose rhythm for the neutral architecture guide. */
.architecture .prose { max-width:76ch; padding-block:var(--s-24) var(--s-32); }
.architecture .prose h1 { font-size:clamp(32px,5vw,48px); line-height:1.15; }
.architecture .prose h2 { font-size:var(--t-24); margin-top:var(--s-24); }
.architecture .prose h3 { font-size:var(--t-20); margin-top:var(--s-16); }
.architecture .prose p, .architecture .prose ul, .architecture .prose ol { margin-top:var(--s-8); }
.architecture .prose li { margin-top:var(--s-4); }
.architecture .prose a, .architecture .prose code { overflow-wrap:anywhere; }
@media (max-width:650px) { .architecture .marketing-nav { flex-wrap:wrap; } }