@cogenta/theme-docs 0.3.2 → 0.5.3

package/src/styles/blocks.css

@@ -1,1238 +1,980 @@
 /*
- * The seventeen vocabulary blocks.
- *
- * One section per block, in the contract-B order. Nothing here declares a
- * colour, a size, a radius or a duration of its own: a block composes the
- * design system from `tokens.css` and nothing else, which is what keeps a
- * skin swap a whole-theme change rather than a per-block one.
+ * The seventeen blocks of contract B, in the register of a documentation
+ * site: left-aligned on twelve columns, drawn with hairlines and space, one
+ * teal for links. Inside a documentation page the same blocks are laid out
+ * in the reading column instead (`docs.css`).
  */
 
-/* --- hero ------------------------------------------------------------------
-   Copy-first, information-dense: no full-bleed media wash. A small optional
-   illustration sits in its own panel to the right; the decorative,
-   non-interactive search prompt sits under the actions, matching the "search
-   is the first thing you do on a docs site" convention without pretending a
-   real control exists where this zero-JS theme has none.
-   ------------------------------------------------------------------------- */
+/* --------------------------------------------------------------------------
+   hero: a statement and the search
+   -------------------------------------------------------------------------- */
 
-.cg-hero {
-  display: grid;
-  gap: var(--cg-gap-loose);
-  align-items: center;
-  margin-block-start: var(--cg-s8);
-}
-
-@media (min-width: 60rem) {
-  .cg-hero {
-    grid-template-columns: 1fr minmax(14rem, 22rem);
-    gap: var(--cg-s12);
-  }
+.cd-hero {
+  padding-block: calc(var(--cd-section) * 0.6) calc(var(--cd-section) * 0.5);
+  border-block-end: var(--cd-rule) solid var(--cd-line);
 }
 
-.cg-hero__eyebrow {
-  display: inline-block;
-  margin: 0 0 var(--cg-s4);
-  padding: var(--cg-s1) var(--cg-s3);
-  background: var(--cg-accent-soft);
-  color: var(--cg-accent-soft-fg);
-  border-radius: var(--cg-radius-pill);
-  box-shadow: var(--cg-ring-accent);
-  font-size: var(--cg-text-xs);
-  font-weight: var(--cg-weight-semibold);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
-}
-
-.cg-hero__title {
-  margin: 0;
-  font-size: var(--cg-text-3xl);
-  line-height: var(--cg-leading-tight);
-  letter-spacing: var(--cg-tracking-tight);
-  font-weight: var(--cg-weight-bold);
-  text-wrap: balance;
-}
-
-@media (min-width: 60rem) {
-  .cg-hero__title {
-    font-size: calc(var(--cg-text-3xl) * 1.2);
-  }
+.cd-hero__inner {
+  row-gap: var(--cd-s10);
+  align-items: center;
 }
 
-.cg-hero__subtitle {
-  margin: var(--cg-s4) 0 0;
-  max-inline-size: var(--cg-measure-narrow);
-  font-size: var(--cg-text-lg);
-  line-height: var(--cg-leading-relaxed);
-  color: var(--cg-ink-muted);
-  text-wrap: pretty;
+.cd-hero__copy {
+  display: grid;
+  justify-items: start;
+  gap: var(--cd-s5);
 }
 
-.cg-hero__search {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--cg-s3);
-  margin-block-start: var(--cg-s6);
-  padding: var(--cg-s3) var(--cg-s4);
-  max-inline-size: 22rem;
-  background: var(--cg-surface);
-  border-radius: var(--cg-radius-md);
-  box-shadow: var(--cg-ring);
-  color: var(--cg-ink-subtle);
-}
-
-.cg-hero__search-icon {
-  inline-size: 1.05rem;
-  block-size: 1.05rem;
-  flex: none;
+.cd-hero__eyebrow {
+  margin: 0;
+  color: var(--cd-ink-muted);
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-label);
+  line-height: var(--cd-leading-ui);
 }
 
-.cg-hero__search-text {
-  flex: 1;
-  font-size: var(--cg-text-sm);
+.cd-hero__title {
+  max-inline-size: 18ch;
+  font-size: var(--cd-size-display);
+  font-weight: var(--cd-weight-semibold);
+  line-height: var(--cd-leading-display);
+  letter-spacing: var(--cd-tracking-display);
 }
 
-.cg-hero__search-key {
+.cd-hero__subtitle {
   margin: 0;
+  max-inline-size: 58ch;
+  color: var(--cd-ink-muted);
+  font-size: var(--cd-size-lead);
+  line-height: var(--cd-leading-lead);
 }
 
-.cg-hero__panel {
-  border-radius: var(--cg-radius-lg);
-  overflow: hidden;
-  box-shadow: var(--cg-elevation-2), var(--cg-ring);
+.cd-hero__search {
+  inline-size: 100%;
+  max-inline-size: 38rem;
+  margin-block-start: var(--cd-s3);
 }
 
-.cg-hero__media {
-  inline-size: 100%;
-  display: block;
+.cd-hero__media {
+  aspect-ratio: 16 / 10;
 }
 
-/* --- prose ------------------------------------------------------------------
-   Reference-doc reading column, plus real code blocks: a rich-text paragraph
-   whose only content is a single `code`-marked span is promoted to
-   `<pre><code>` by `blocks/prose.ts` before it ever reaches this stylesheet.
-   ------------------------------------------------------------------------- */
+@media (min-width: 64rem) {
+  .cd-hero__copy {
+    grid-column: 1 / span 8;
+  }
 
-.cg-prose {
-  max-inline-size: var(--cg-measure);
-  margin-inline: auto;
-  line-height: var(--cg-leading-relaxed);
-}
+  .cd-hero[data-media="true"] .cd-hero__copy {
+    grid-column: 1 / span 6;
+  }
 
-.cg-prose > :first-child {
-  margin-block-start: 0;
+  .cd-hero__media {
+    grid-column: 8 / -1;
+  }
 }
 
-.cg-prose > :last-child {
-  margin-block-end: 0;
-}
+/* --------------------------------------------------------------------------
+   featureGrid: short entries hanging from hairlines
+   -------------------------------------------------------------------------- */
 
-.cg-prose h2,
-.cg-prose h3,
-.cg-prose h4 {
-  letter-spacing: var(--cg-tracking-snug);
-  line-height: var(--cg-leading-snug);
-  font-weight: var(--cg-weight-bold);
-  text-wrap: balance;
-  scroll-margin-block-start: calc(var(--cg-header-height) + var(--cg-s4));
+.cd-features__items {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--cd-s8) var(--cd-col-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.cg-prose h2 {
-  margin-block: var(--cg-s10) var(--cg-s4);
-  font-size: var(--cg-text-xl);
-  letter-spacing: var(--cg-tracking-tight);
-  padding-block-end: var(--cg-s2);
-  border-block-end: 1px solid var(--cg-line-soft);
+.cd-features__item {
+  display: grid;
+  align-content: start;
+  gap: var(--cd-s2);
+  padding-block-start: var(--cd-s5);
+  border-block-start: var(--cd-rule) solid var(--cd-line);
 }
 
-.cg-prose h3 {
-  margin-block: var(--cg-s8) var(--cg-s3);
-  font-size: var(--cg-text-lg);
+.cd-features__title {
+  font-size: var(--cd-text-lg);
+  font-weight: var(--cd-weight-semibold);
+  line-height: var(--cd-leading-heading);
 }
 
-.cg-prose h4 {
-  margin-block: var(--cg-s6) var(--cg-s2);
-  font-size: var(--cg-text-md);
+.cd-features__icon {
+  display: inline-block;
+  margin-inline-end: var(--cd-s2);
+  vertical-align: -0.15em;
+  color: var(--cd-ink-muted);
 }
 
-.cg-prose p {
-  margin-block: var(--cg-s4);
-  text-wrap: pretty;
+.cd-features__text {
+  margin: 0;
+  max-inline-size: 44ch;
+  color: var(--cd-ink-muted);
+  font-size: var(--cd-text-ui);
+  line-height: var(--cd-leading-lead);
 }
 
-.cg-prose ul,
-.cg-prose ol {
-  margin-block: var(--cg-s4);
-  padding-inline-start: var(--cg-s6);
-}
+@media (min-width: 40rem) {
+  .cd-features__items {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 
-.cg-prose li {
-  margin-block: var(--cg-s2);
-  padding-inline-start: var(--cg-s1);
+  .cd-features[data-count="1"] .cd-features__items {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
 
-.cg-prose li::marker {
-  color: var(--cg-accent);
-}
+@media (min-width: 64rem) {
+  .cd-features[data-count="3"] .cd-features__items {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 
-.cg-prose strong {
-  font-weight: var(--cg-weight-semibold);
-  color: var(--cg-ink);
+  .cd-features[data-count="4"] .cd-features__items {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 }
 
-.cg-prose blockquote {
-  margin-block: var(--cg-s6);
-  margin-inline: 0;
-  padding: var(--cg-s4) var(--cg-s5);
-  border-inline-start: 3px solid var(--cg-accent);
-  border-start-end-radius: var(--cg-radius-md);
-  border-end-end-radius: var(--cg-radius-md);
-  background: var(--cg-surface-tinted);
-  color: var(--cg-ink-muted);
-  font-size: var(--cg-text-md);
-  line-height: var(--cg-leading-normal);
-}
+/* --------------------------------------------------------------------------
+   collectionList
+   -------------------------------------------------------------------------- */
 
-.cg-prose blockquote > :first-child {
-  margin-block-start: 0;
-}
+/* --- the documentation, by section ------------------------------------------ */
 
-.cg-prose blockquote > :last-child {
-  margin-block-end: 0;
+.cd-browse {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--cd-s10) var(--cd-col-gap);
 }
 
-.cg-prose code {
-  font-family: var(--cogenta-font-mono);
-  font-size: 0.875em;
-  background: var(--cg-surface-sunken);
-  border-radius: var(--cg-radius-sm);
-  box-shadow: var(--cg-ring);
-  padding: 0.15em 0.4em;
+.cd-browse__group {
+  padding-block-start: var(--cd-s5);
+  border-block-start: var(--cd-rule) solid var(--cd-line-ink);
 }
 
-/* The real code block — a `<pre>` promoted from a code-marked paragraph
-   (`blocks/prose.ts`). `overflow-x: auto` rather than wrapping: a wrapped
-   shell command or a long import line is harder to read and to copy than a
-   horizontally scrollable one. */
-.cg-prose__code {
-  margin-block: var(--cg-s6);
-  padding: var(--cg-s5);
-  overflow-x: auto;
-  background: var(--cg-surface-sunken);
-  border-radius: var(--cg-radius-md);
-  box-shadow: var(--cg-ring);
-  tab-size: 2;
+.cd-browse__heading {
+  margin: 0 0 var(--cd-s3);
+  color: var(--cd-ink);
+  font-size: var(--cd-text-md);
+  font-weight: var(--cd-weight-semibold);
 }
 
-.cg-prose__code code {
-  display: block;
+.cd-browse__links {
+  display: grid;
+  margin: 0;
   padding: 0;
-  background: none;
-  box-shadow: none;
-  font-size: var(--cg-text-sm);
-  line-height: var(--cg-leading-normal);
-  color: var(--cg-ink);
-  white-space: pre;
+  list-style: none;
 }
 
-.cg-prose__figure {
-  margin-block: var(--cg-s6);
-  margin-inline: 0;
+.cd-browse__link {
+  display: inline-block;
+  padding-block: var(--cd-s1);
+  color: var(--cd-link);
+  font-size: var(--cd-text-ui);
+  line-height: var(--cd-leading-ui);
+  text-decoration-line: none;
 }
 
-.cg-prose__figure img {
-  inline-size: 100%;
-  border-radius: var(--cg-radius-lg);
-  box-shadow: var(--cg-elevation-2);
+.cd-browse__link:hover {
+  color: var(--cd-accent-hover);
+  text-decoration-line: underline;
 }
 
-.cg-prose__figure figcaption {
-  margin-block-start: var(--cg-s3);
-  color: var(--cg-ink-subtle);
-  font-size: var(--cg-text-sm);
-  line-height: var(--cg-leading-normal);
+@media (min-width: 40rem) {
+  .cd-browse {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
-/* --- mediaFigure ------------------------------------------------------------ */
-
-.cg-figure {
-  margin-inline: auto;
-}
+@media (min-width: 64rem) {
+  .cd-browse[data-count="3"] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 
-.cg-figure[data-align="start"],
-.cg-figure[data-align="end"] {
-  max-inline-size: calc(var(--cg-measure) / 2);
+  .cd-browse[data-count="4"] {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 }
 
-.cg-figure[data-align="start"] {
-  float: inline-start;
-  margin-inline-end: var(--cg-s6);
-}
+/* --- an index of entries ------------------------------------------------------- */
 
-.cg-figure[data-align="end"] {
-  float: inline-end;
-  margin-inline-start: var(--cg-s6);
+.cd-index {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-block-start: var(--cd-rule) solid var(--cd-line);
 }
 
-.cg-figure[data-align="full"] {
-  max-inline-size: none;
-  padding-inline: 0;
+.cd-index__item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--cd-s1) var(--cd-s8);
+  padding-block: var(--cd-s5);
+  border-block-end: var(--cd-rule) solid var(--cd-line);
 }
 
-.cg-figure__media {
-  inline-size: 100%;
-  aspect-ratio: var(--cg-ratio, auto);
-  border-radius: var(--cg-radius-lg);
-  box-shadow: var(--cg-elevation-2), var(--cg-ring);
+.cd-index__title {
+  font-size: var(--cd-text-lg);
+  font-weight: var(--cd-weight-medium);
 }
 
-.cg-figure[data-align="full"] .cg-figure__media {
-  border-radius: 0;
+.cd-index__link,
+.cd-cards__link {
+  color: var(--cd-ink);
+  text-decoration-line: none;
 }
 
-.cg-figure__caption {
-  margin-block-start: var(--cg-s4);
-  padding-inline-start: var(--cg-s4);
-  border-inline-start: 2px solid var(--cg-line-strong);
-  color: var(--cg-ink-subtle);
-  font-size: var(--cg-text-sm);
-  line-height: var(--cg-leading-normal);
-  text-wrap: pretty;
+.cd-index__link:hover,
+.cd-cards__link:hover {
+  color: var(--cd-link);
+  text-decoration-line: underline;
 }
 
-.cg-figure[data-align="full"] .cg-figure__caption {
-  max-inline-size: var(--cg-measure);
-  margin-inline: auto;
-  padding-inline: var(--cg-gutter);
-  border-inline-start: 0;
+.cd-index__text {
+  margin: var(--cd-s1) 0 0;
+  max-inline-size: 64ch;
+  color: var(--cd-ink-muted);
+  font-size: var(--cd-text-ui);
+  line-height: var(--cd-leading-lead);
 }
 
-.cg-figure__credit {
-  color: var(--cg-ink-subtle);
+.cd-index__date,
+.cd-cards__date {
+  color: var(--cd-ink-muted);
+  font-size: var(--cd-text-label);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 
-.cg-figure__credit::before {
-  content: " — ";
+@media (min-width: 40rem) {
+  .cd-index__item {
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: baseline;
+  }
 }
 
-/* --- featureGrid ------------------------------------------------------------ */
+/* --- cards and carousel ---------------------------------------------------------- */
 
-.cg-features__items {
+.cd-cards {
   display: grid;
-  gap: var(--cg-gap);
-  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--cd-s10) var(--cd-col-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.cg-feature {
-  position: relative;
-  padding: var(--cg-s5);
-  background: var(--cg-surface-raised);
-  border-radius: var(--cg-radius-md);
-  box-shadow: var(--cg-ring);
-  transition:
-    box-shadow var(--cg-duration) var(--cg-ease),
-    transform var(--cg-duration) var(--cg-ease);
+.cd-cards__item {
+  display: grid;
+  align-content: start;
+  gap: var(--cd-s2);
 }
 
-.cg-feature:hover {
-  box-shadow: var(--cg-elevation-2), var(--cg-ring-accent);
-  transform: translateY(-2px);
+.cd-cards__media {
+  aspect-ratio: 16 / 10;
+  margin-block-end: var(--cd-s2);
 }
 
-.cg-feature__link {
-  color: inherit;
-  text-decoration: none;
+.cd-cards__title {
+  font-size: var(--cd-text-lg);
+  font-weight: var(--cd-weight-medium);
 }
 
-.cg-feature__link::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-}
-
-.cg-feature:hover .cg-feature__link {
-  color: var(--cg-accent);
+.cd-cards__text {
+  margin: 0;
+  color: var(--cd-ink-muted);
+  font-size: var(--cd-text-ui);
+  line-height: var(--cd-leading-lead);
 }
 
-.cg-feature__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--cg-s8);
-  block-size: var(--cg-s8);
-  margin-block-end: var(--cg-s4);
-  background: var(--cg-accent-soft);
-  border-radius: var(--cg-radius-sm);
-  box-shadow: var(--cg-ring-accent);
-  color: var(--cg-accent);
+.cd-cards[data-carousel="true"] {
+  grid-template-columns: none;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(15rem, 80%);
+  overflow-x: auto;
+  padding-block-end: var(--cd-s4);
+  scroll-snap-type: x mandatory;
 }
 
-.cg-feature__icon svg {
-  inline-size: var(--cg-s5);
-  block-size: var(--cg-s5);
+.cd-cards[data-carousel="true"] > .cd-cards__item {
+  scroll-snap-align: start;
 }
 
-.cg-feature__title {
-  margin: 0 0 var(--cg-s2);
-  font-size: var(--cg-text-md);
-  font-weight: var(--cg-weight-semibold);
-  line-height: var(--cg-leading-snug);
-  letter-spacing: var(--cg-tracking-snug);
-  text-wrap: balance;
-}
+@media (min-width: 40rem) {
+  .cd-cards:not([data-carousel="true"]) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 
-.cg-feature__text {
-  margin: 0;
-  color: var(--cg-ink-muted);
-  font-size: var(--cg-text-sm);
-  line-height: var(--cg-leading-relaxed);
-  text-wrap: pretty;
+  .cd-cards[data-carousel="true"] {
+    grid-auto-columns: minmax(16rem, 40%);
+  }
 }
 
-/* --- cta --------------------------------------------------------------------- */
+@media (min-width: 64rem) {
+  .cd-cards:not([data-carousel="true"]) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 
-.cg-cta {
-  padding: var(--cg-s12) var(--cg-s8);
-  background: var(--cg-surface-tinted);
-  border-radius: var(--cg-radius-lg);
-  box-shadow: var(--cg-ring-accent);
-  text-align: center;
+  .cd-cards[data-carousel="true"] {
+    grid-auto-columns: minmax(16rem, calc((100% - var(--cd-col-gap) * 2) / 3));
+  }
 }
 
-.cg-cta__title {
-  margin: 0;
-  font-size: var(--cg-text-2xl);
-  line-height: var(--cg-leading-snug);
-  letter-spacing: var(--cg-tracking-tight);
-  font-weight: var(--cg-weight-bold);
-  text-wrap: balance;
-}
+/* --------------------------------------------------------------------------
+   prose, outside an article: on the reading measure from the first column
+   -------------------------------------------------------------------------- */
 
-.cg-cta__text {
-  margin: var(--cg-s3) auto 0;
-  max-inline-size: var(--cg-measure-narrow);
-  color: var(--cg-ink-muted);
-  font-size: var(--cg-text-lg);
-  line-height: var(--cg-leading-relaxed);
-  text-wrap: pretty;
+.cd-prose__body {
+  max-inline-size: var(--cd-article);
 }
 
-.cg-cta .cg-actions {
-  justify-content: center;
+@media (min-width: 64rem) {
+  .cd-main .cd-prose__body {
+    grid-column: 1 / span 8;
+  }
 }
 
-/* --- gallery ------------------------------------------------------------------ */
+/* --------------------------------------------------------------------------
+   mediaFigure
+   -------------------------------------------------------------------------- */
 
-.cg-gallery__items {
-  display: grid;
-  gap: var(--cg-gap-tight);
-  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+.cd-figure__inner {
+  row-gap: var(--cd-s3);
+  margin-block: 0;
 }
 
-.cg-gallery__item {
-  overflow: hidden;
-  border-radius: var(--cg-radius-md);
-  box-shadow: var(--cg-ring);
-}
-
-.cg-gallery__item img {
+.cd-figure__image {
   inline-size: 100%;
-  block-size: 100%;
-  transition: transform var(--cg-duration-slow) var(--cg-ease);
 }
 
-.cg-gallery__item:hover img {
-  transform: scale(1.03);
-}
-
-.cg-gallery:not([data-layout="masonry"]) .cg-gallery__item img {
-  aspect-ratio: 4 / 3;
+.cd-figure__media[data-ratio="fixed"] .cd-figure__image {
+  block-size: 100%;
+  object-position: top center;
 }
 
-.cg-gallery[data-layout="masonry"] .cg-gallery__items {
-  display: block;
-  columns: 3 13rem;
-  column-gap: var(--cg-gap-tight);
+.cd-figure__caption {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cd-s1) var(--cd-s4);
+  color: var(--cd-ink-muted);
+  font-size: var(--cd-text-label);
+  line-height: var(--cd-leading-ui);
 }
 
-.cg-gallery[data-layout="masonry"] .cg-gallery__item {
-  break-inside: avoid;
-  margin-block-end: var(--cg-gap-tight);
+.cd-figure__credit {
+  color: var(--cd-ink-muted);
 }
 
-.cg-gallery[data-layout="carousel"] .cg-gallery__items {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(15rem, 40%);
+.cd-figure[data-align="full"] .cd-figure__inner {
+  max-inline-size: none;
+  padding-inline: 0;
 }
 
-.cg-gallery[data-layout="carousel"] .cg-gallery__item {
-  scroll-snap-align: start;
+.cd-figure[data-align="full"] .cd-figure__caption {
+  padding-inline: var(--cd-gutter);
 }
 
-/* --- quote ---------------------------------------------------------------------- */
+@media (min-width: 64rem) {
+  :where(.cd-figure[data-align="center"]) .cd-figure__inner > * {
+    grid-column: 3 / span 8;
+  }
 
-.cg-quote {
-  max-inline-size: var(--cg-page-narrow);
-  margin-inline: auto;
-  text-align: center;
-}
+  :where(.cd-figure[data-align="start"]) .cd-figure__inner > * {
+    grid-column: 1 / span 8;
+  }
 
-.cg-quote::before {
-  content: "\201C" / "";
-  display: block;
-  margin-block-end: calc(var(--cg-s4) * -1);
-  color: var(--cg-accent-soft);
-  font-size: calc(var(--cg-text-3xl) * 1.8);
-  line-height: 1;
+  :where(.cd-figure[data-align="end"]) .cd-figure__inner > * {
+    grid-column: 5 / span 8;
+  }
 }
 
-.cg-quote__text {
-  margin: 0;
-  font-size: var(--cg-text-2xl);
-  line-height: var(--cg-leading-snug);
-  letter-spacing: var(--cg-tracking-snug);
-  text-wrap: balance;
-}
+/* --------------------------------------------------------------------------
+   cta: between two hairlines, on the page's own ground
+   -------------------------------------------------------------------------- */
 
-.cg-quote__attribution {
-  display: flex;
+.cd-cta__panel {
+  display: grid;
+  gap: var(--cd-s6) var(--cd-col-gap);
   align-items: center;
-  justify-content: center;
-  gap: var(--cg-s3);
-  margin-block-start: var(--cg-s6);
-  color: var(--cg-ink-subtle);
-  font-size: var(--cg-text-sm);
+  padding-block: var(--cd-s10);
+  border-block: var(--cd-rule) solid var(--cd-line);
 }
 
-.cg-quote__avatar {
-  inline-size: var(--cg-s10);
-  block-size: var(--cg-s10);
-  border-radius: var(--cg-radius-pill);
-  box-shadow: var(--cg-ring);
+.cd-cta__words {
+  display: grid;
+  gap: var(--cd-s2);
 }
 
-.cg-quote__author {
-  font-weight: var(--cg-weight-semibold);
-  color: var(--cg-ink);
+.cd-cta__title {
+  font-size: var(--cd-size-h2);
+  font-weight: var(--cd-weight-semibold);
+  letter-spacing: var(--cd-tracking-heading);
 }
 
-.cg-quote__role::before {
-  content: "";
-  display: inline-block;
-  inline-size: var(--cg-s3);
-  border-block-start: 1px solid var(--cg-line-strong);
-  vertical-align: middle;
-  margin-inline-end: var(--cg-s3);
+.cd-cta__text {
+  margin: 0;
+  max-inline-size: 60ch;
+  color: var(--cd-ink-muted);
+  line-height: var(--cd-leading-lead);
 }
 
-/* --- faq --------------------------------------------------------------------------- */
+@media (min-width: 64rem) {
+  .cd-cta__panel {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
+  .cd-cta__words {
+    grid-column: 1 / span 7;
+  }
 
-.cg-faq {
-  max-inline-size: var(--cg-page-narrow);
-  margin-inline: auto;
-}
+  .cd-cta__actions {
+    grid-column: 8 / -1;
+    justify-self: end;
+  }
 
-.cg-faq__items {
-  background: var(--cg-surface-raised);
-  border-radius: var(--cg-radius-md);
-  box-shadow: var(--cg-ring);
-  overflow: hidden;
-}
+  .cd-doc__body .cd-cta__panel {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
 
-.cg-faq__item + .cg-faq__item {
-  border-block-start: 1px solid var(--cg-line-soft);
+  .cd-doc__body .cd-cta__words,
+  .cd-doc__body .cd-cta__actions {
+    grid-column: auto;
+  }
 }
 
-.cg-faq__question {
-  display: flex;
-  align-items: center;
-  gap: var(--cg-s4);
-  padding: var(--cg-s4) var(--cg-s5);
-  font-weight: var(--cg-weight-semibold);
-  cursor: pointer;
+/* --------------------------------------------------------------------------
+   gallery
+   -------------------------------------------------------------------------- */
+
+.cd-gallery__items {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--cd-col-gap);
+  margin: 0;
+  padding: 0;
   list-style: none;
-  transition: background-color var(--cg-duration) var(--cg-ease);
 }
 
-.cg-faq__question::-webkit-details-marker {
-  display: none;
+.cd-gallery[data-layout="grid"] .cd-gallery__item,
+.cd-gallery[data-layout="carousel"] .cd-gallery__item {
+  aspect-ratio: 16 / 10;
 }
 
-.cg-faq__question:hover {
-  background: var(--cg-accent-soft);
-  color: var(--cg-accent-soft-fg);
+.cd-gallery[data-layout="masonry"] .cd-gallery__items {
+  display: block;
+  columns: 1;
+  column-gap: var(--cd-col-gap);
 }
 
-.cg-faq__question::after {
-  content: "";
-  flex: none;
-  margin-inline-start: auto;
-  inline-size: 0.5em;
-  block-size: 0.5em;
-  border-inline-end: 2px solid currentColor;
-  border-block-end: 2px solid currentColor;
-  transform: translateY(-0.15em) rotate(45deg);
-  transition: transform var(--cg-duration) var(--cg-ease);
+.cd-gallery[data-layout="masonry"] .cd-gallery__item {
+  margin-block-end: var(--cd-col-gap);
+  break-inside: avoid;
 }
 
-.cg-faq__details[open] .cg-faq__question::after {
-  transform: translateY(0.1em) rotate(-135deg);
+.cd-gallery[data-layout="carousel"] .cd-gallery__items {
+  grid-template-columns: none;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(15rem, 80%);
+  overflow-x: auto;
+  padding-block-end: var(--cd-s4);
+  scroll-snap-type: x mandatory;
 }
 
-.cg-faq__details[open] .cg-faq__question {
-  color: var(--cg-accent);
+.cd-gallery[data-layout="carousel"] .cd-gallery__item {
+  scroll-snap-align: start;
 }
 
-.cg-faq__answer {
-  padding: 0 var(--cg-s5) var(--cg-s5);
-  color: var(--cg-ink-muted);
-  line-height: var(--cg-leading-relaxed);
-}
+@media (min-width: 40rem) {
+  .cd-gallery[data-layout="grid"] .cd-gallery__items {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 
-.cg-faq__answer > :first-child {
-  margin-block-start: 0;
-}
+  .cd-gallery[data-layout="masonry"] .cd-gallery__items {
+    columns: 2;
+  }
 
-.cg-faq__answer > :last-child {
-  margin-block-end: 0;
+  .cd-gallery[data-layout="carousel"] .cd-gallery__items {
+    grid-auto-columns: minmax(16rem, 44%);
+  }
 }
 
-/* --- stats --------------------------------------------------------------------- */
+@media (min-width: 64rem) {
+  .cd-gallery[data-layout="grid"]:not([data-count="2"], [data-count="4"]) .cd-gallery__items {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 
-.cg-stats__items {
-  display: grid;
-  gap: var(--cg-gap);
-  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  margin: 0;
+  .cd-gallery[data-layout="masonry"] .cd-gallery__items {
+    columns: 3;
+  }
 }
 
-.cg-stat {
-  display: flex;
-  flex-direction: column-reverse;
-  gap: var(--cg-s2);
-  padding: var(--cg-s5);
-  background: var(--cg-surface-sunken);
-  border-radius: var(--cg-radius-md);
-  box-shadow: var(--cg-ring);
+/* --------------------------------------------------------------------------
+   quote and testimonial: a rule in ink, real quotation marks
+   -------------------------------------------------------------------------- */
+
+.cd-quote__inner,
+.cd-testimonial__inner {
+  row-gap: var(--cd-s5);
+  margin-block: 0;
 }
 
-.cg-stat__value {
-  display: flex;
-  align-items: baseline;
-  gap: var(--cg-s1);
+.cd-quote__body,
+.cd-testimonial__quote {
   margin: 0;
-  color: var(--cg-accent);
-  font-size: var(--cg-text-3xl);
-  font-weight: var(--cg-weight-bold);
-  line-height: var(--cg-leading-tight);
-  letter-spacing: var(--cg-tracking-tight);
-  font-variant-numeric: tabular-nums;
+  max-inline-size: 50rem;
+  padding-inline-start: var(--cd-s6);
+  border-inline-start: var(--cd-rule-strong) solid var(--cd-line-ink);
 }
 
-.cg-stat__unit {
-  font-size: var(--cg-text-lg);
-  font-weight: var(--cg-weight-medium);
-  color: var(--cg-ink-muted);
+.cd-quote__text,
+.cd-testimonial__quote > p:first-child {
+  margin: 0;
+  font-size: var(--cd-size-quote);
+  font-weight: var(--cd-weight-regular);
+  line-height: 1.42;
+  letter-spacing: var(--cd-tracking-heading);
+  quotes: "\201C" "\201D";
 }
 
-.cg-stat__label {
-  color: var(--cg-ink-muted);
-  font-size: var(--cg-text-xs);
-  font-weight: var(--cg-weight-semibold);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
+.cd-quote__text::before,
+.cd-testimonial__quote > p:first-child::before {
+  content: open-quote;
 }
 
-/* --- logos ------------------------------------------------------------------------ */
+.cd-quote__text::after,
+.cd-testimonial__quote > p:first-child::after {
+  content: close-quote;
+}
 
-.cg-logos__items {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
-  gap: var(--cg-gap);
-  align-items: center;
+.cd-testimonial__quote > p + p {
+  margin-block: var(--cd-s4) 0;
+  color: var(--cd-ink-soft);
 }
 
-.cg-logo {
+.cd-person {
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: var(--cg-s3);
+  gap: var(--cd-s3);
+  padding-inline-start: calc(var(--cd-s6) + var(--cd-rule-strong));
 }
 
-.cg-logo__image {
-  block-size: var(--cg-s8);
-  inline-size: auto;
-  max-inline-size: 100%;
-  object-fit: contain;
-  opacity: 0.75;
-  transition: opacity var(--cg-duration) var(--cg-ease);
+.cd-person__avatar {
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  border-radius: 50%;
 }
 
-.cg-logo__link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 100%;
-  border-radius: var(--cg-radius-md);
+.cd-person__words {
+  display: grid;
+  line-height: var(--cd-leading-ui);
 }
 
-.cg-logo:hover .cg-logo__image,
-.cg-logo__link:focus-visible .cg-logo__image {
-  opacity: 1;
+.cd-person__name {
+  font-size: var(--cd-text-ui);
+  font-weight: var(--cd-weight-semibold);
 }
 
-/* --- collectionList ---------------------------------------------------------------
-   Two shapes: `renderGuidesIndex` for `doc_page` (a compact, grouped index —
-   no images, no excerpts, just a dense list of links) and the general row
-   list for any other collection, which shows `entryImage` when the entry
-   carries one (`theme@1.4`).
-   ------------------------------------------------------------------------- */
-
-.cg-list__title-heading {
-  margin: 0 0 var(--cg-s6);
+.cd-person__role {
+  color: var(--cd-ink-muted);
+  font-size: var(--cd-text-label);
 }
 
-.cg-list__items {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cg-s5);
+@media (min-width: 64rem) {
+  .cd-quote__inner > *,
+  .cd-testimonial__inner > * {
+    grid-column: 1 / span 9;
+  }
 }
 
-.cg-list[data-layout="grid"] .cg-list__items {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
-  gap: var(--cg-gap);
-}
+/* --------------------------------------------------------------------------
+   faq: answered in the open, two columns beside the title on a desk
+   -------------------------------------------------------------------------- */
 
-.cg-list[data-layout="carousel"] .cg-list__items {
+.cd-faq__items {
   display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(16rem, 45%);
-  gap: var(--cg-gap);
+  grid-template-columns: minmax(0, 1fr);
+  column-gap: var(--cd-col-gap);
 }
 
-.cg-list[data-layout="carousel"] .cg-list__row {
-  scroll-snap-align: start;
+.cd-faq__item {
+  padding-block: var(--cd-s5) var(--cd-s8);
+  border-block-start: var(--cd-rule) solid var(--cd-line);
 }
 
-.cg-list__row {
-  display: flex;
-  gap: var(--cg-s4);
-  padding-block: var(--cg-s4);
-  border-block-end: 1px solid var(--cg-line-soft);
+.cd-faq__question {
+  margin-block-end: var(--cd-s2);
+  font-size: var(--cd-text-md);
+  font-weight: var(--cd-weight-semibold);
+  line-height: var(--cd-leading-heading);
 }
 
-.cg-list[data-layout="grid"] .cg-list__row,
-.cg-list[data-layout="carousel"] .cg-list__row {
-  flex-direction: column;
-  padding: var(--cg-s5);
-  border: 1px solid var(--cg-line);
-  border-radius: var(--cg-radius-md);
-  box-shadow: var(--cg-ring);
+.cd-faq__answer {
+  color: var(--cd-ink-soft);
+  font-size: var(--cd-text-ui);
+  line-height: var(--cd-leading-lead);
 }
 
-.cg-list__thumb {
-  flex: none;
-  inline-size: 6rem;
-  aspect-ratio: 4 / 3;
-  overflow: hidden;
-  border-radius: var(--cg-radius-sm);
+.cd-faq__answer > * + * {
+  margin-block-start: var(--cd-s3);
 }
 
-.cg-list[data-layout="grid"] .cg-list__thumb,
-.cg-list[data-layout="carousel"] .cg-list__thumb {
-  inline-size: 100%;
+@media (min-width: 48rem) {
+  .cd-faq__items {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
-.cg-list__thumb-image {
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: cover;
-}
+@media (min-width: 64rem) {
+  .cd-faq[data-titled="true"] .cd-head {
+    grid-column: 1 / span 4;
+  }
 
-.cg-list__body {
-  display: flex;
-  flex-direction: column;
-  min-inline-size: 0;
+  .cd-faq[data-titled="true"] .cd-faq__items {
+    grid-column: 5 / -1;
+  }
 }
 
-.cg-list__title {
-  margin: 0;
-  font-size: var(--cg-text-md);
-  font-weight: var(--cg-weight-semibold);
-  line-height: var(--cg-leading-snug);
-}
+/* --------------------------------------------------------------------------
+   accordion
+   -------------------------------------------------------------------------- */
 
-.cg-list__link {
-  color: var(--cg-ink);
-  text-decoration: none;
+.cd-accordion__items {
+  border-block-start: var(--cd-rule) solid var(--cd-line);
 }
 
-.cg-list__link:hover {
-  color: var(--cg-accent);
+.cd-accordion__item {
+  border-block-end: var(--cd-rule) solid var(--cd-line);
 }
 
-.cg-list__date {
-  margin-block-start: var(--cg-s1);
-  color: var(--cg-ink-subtle);
-  font-size: var(--cg-text-xs);
-  font-weight: var(--cg-weight-semibold);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
+.cd-accordion__summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--cd-s4);
+  min-block-size: 3.25rem;
+  padding-block: var(--cd-s3);
+  font-weight: var(--cd-weight-medium);
+  line-height: var(--cd-leading-ui);
+  cursor: pointer;
+  list-style: none;
+  transition: color var(--cd-duration) var(--cd-ease);
 }
 
-.cg-list__excerpt {
-  margin: var(--cg-s2) 0 0;
-  color: var(--cg-ink-muted);
-  font-size: var(--cg-text-sm);
-  line-height: var(--cg-leading-normal);
+.cd-accordion__summary::-webkit-details-marker {
+  display: none;
 }
 
-.cg-list__empty {
-  padding: var(--cg-s6);
-  background: var(--cg-surface-sunken);
-  border-radius: var(--cg-radius-md);
-  color: var(--cg-ink-subtle);
-  text-align: center;
+.cd-accordion__summary:hover {
+  color: var(--cd-link);
 }
 
-/* The "All guides" compact index — grouped by section, alphabetical, no
-   images: a reference table of contents, not a card grid. */
-.cg-guides {
-  display: grid;
-  gap: var(--cg-gap);
-  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+.cd-accordion__sign {
+  position: relative;
+  flex: none;
+  inline-size: 0.75rem;
+  block-size: 0.75rem;
 }
 
-.cg-guides__section {
-  min-inline-size: 0;
+.cd-accordion__sign::before,
+.cd-accordion__sign::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: calc(50% - var(--cd-rule));
+  block-size: var(--cd-rule-strong);
+  background: var(--cd-ink-muted);
 }
 
-.cg-guides__heading {
-  margin: 0 0 var(--cg-s3);
-  font-size: var(--cg-text-xs);
-  font-weight: var(--cg-weight-bold);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
-  color: var(--cg-accent);
+.cd-accordion__sign::after {
+  rotate: 90deg;
 }
 
-.cg-guides__items {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: var(--cg-s2);
+.cd-accordion__item[open] .cd-accordion__sign::after {
+  display: none;
 }
 
-.cg-guides__link {
-  color: var(--cg-ink-muted);
-  font-size: var(--cg-text-sm);
-  text-decoration: none;
+.cd-accordion__answer {
+  padding-block-end: var(--cd-s5);
+  color: var(--cd-ink-soft);
 }
 
-.cg-guides__link:hover {
-  color: var(--cg-accent);
+@media (min-width: 64rem) {
+  .cd-accordion__inner > * {
+    grid-column: 1 / span 8;
+  }
 }
 
-/* --- embed --------------------------------------------------------------------------- */
+/* --------------------------------------------------------------------------
+   stats and statCounter: a ruled row of figures
+   -------------------------------------------------------------------------- */
 
-.cg-embed {
-  aspect-ratio: var(--cg-ratio, 16 / 9);
-  max-inline-size: var(--cg-measure);
-  margin-inline: auto;
-  border: 1px solid var(--cg-line);
-  border-radius: var(--cg-radius-md);
-  overflow: hidden;
-}
-
-.cg-embed__frame {
-  inline-size: 100%;
-  block-size: 100%;
-  border: 0;
+.cd-figures__items {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--cd-s8) var(--cd-col-gap);
+  margin: 0;
 }
 
-.cg-embed__placeholder {
+.cd-figures__item {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--cg-s4);
-  block-size: 100%;
-  padding: var(--cg-s8);
-  background: var(--cg-surface-sunken);
-  color: var(--cg-ink-muted);
-  text-align: center;
+  flex-direction: column-reverse;
+  justify-content: flex-end;
+  gap: var(--cd-s1);
+  padding-block-start: var(--cd-s4);
+  border-block-start: var(--cd-rule) solid var(--cd-line);
 }
 
-.cg-embed__provider {
-  margin: 0;
-  padding: var(--cg-s1) var(--cg-s3);
-  border: 1px solid var(--cg-line-strong);
-  border-radius: var(--cg-radius-pill);
-  font-size: var(--cg-text-xs);
-  font-weight: var(--cg-weight-semibold);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
+.cd-figures__label {
+  color: var(--cd-ink-muted);
+  font-size: var(--cd-text-ui);
+  line-height: var(--cd-leading-ui);
 }
 
-.cg-embed__notice {
+.cd-figures__value {
   margin: 0;
-  max-inline-size: var(--cg-measure-narrow);
-  line-height: var(--cg-leading-relaxed);
-  text-wrap: pretty;
-}
-
-.cg-embed__link {
-  display: inline-flex;
-  align-items: center;
-  min-block-size: 44px;
-  padding: var(--cg-s3) var(--cg-s6);
-  background: var(--cg-surface-raised);
-  color: var(--cg-accent);
-  border: 1px solid var(--cg-line-strong);
-  border-radius: var(--cg-radius-sm);
-  font-size: var(--cg-text-sm);
-  font-weight: var(--cg-weight-semibold);
-  text-decoration: none;
-  transition:
-    background-color var(--cg-duration) var(--cg-ease),
-    color var(--cg-duration) var(--cg-ease);
+  font-size: var(--cd-size-figure);
+  font-weight: var(--cd-weight-medium);
+  line-height: 1.1;
+  letter-spacing: var(--cd-tracking-display);
+  font-variant-numeric: tabular-nums;
 }
 
-.cg-embed__link:hover {
-  background: var(--cg-accent);
-  color: var(--cg-accent-fg);
-  border-color: var(--cg-accent);
+.cd-figures__unit {
+  margin-inline-start: 0.1em;
+  color: var(--cd-ink-muted);
+  font-size: 0.55em;
+  font-weight: var(--cd-weight-regular);
+  letter-spacing: 0;
 }
 
-/* --- testimonial --------------------------------------------------------------------- */
-
-.cg-testimonial {
-  display: grid;
-  gap: var(--cg-s5);
-  max-inline-size: var(--cg-page-narrow);
-  margin-inline: auto;
-  padding: var(--cg-s8);
-  border-inline-end: 3px solid var(--cg-accent);
-  border-block: 1px solid var(--cg-line);
-  border-inline-start: 1px solid var(--cg-line);
-  border-radius: var(--cg-radius-md) 0 0 var(--cg-radius-md);
-  background: var(--cg-surface-sunken);
-}
-
-@media (min-width: 56rem) {
-  .cg-testimonial {
-    grid-template-columns: 1fr auto;
-    align-items: center;
-    gap: var(--cg-s8);
+@media (min-width: 64rem) {
+  .cd-figures[data-count="3"] .cd-figures__items {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  .cg-testimonial__attribution {
-    flex-direction: column;
-    align-items: flex-start;
-    min-inline-size: 13rem;
-    padding-inline-start: var(--cg-s6);
-    border-inline-start: 1px solid var(--cg-line-soft);
+  .cd-figures[data-count="4"] .cd-figures__items {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
 
-.cg-testimonial__quote {
-  margin: 0;
-  font-size: var(--cg-text-xl);
-  line-height: var(--cg-leading-snug);
-  letter-spacing: var(--cg-tracking-snug);
-  text-wrap: balance;
-}
-
-.cg-testimonial__quote p {
-  margin: 0;
-}
+/* --------------------------------------------------------------------------
+   logos and logoStrip: wordmarks in grey
+   -------------------------------------------------------------------------- */
 
-.cg-testimonial__quote p + p {
-  margin-block-start: var(--cg-s4);
+.cd-mark {
+  inline-size: auto;
+  max-inline-size: 9rem;
+  max-block-size: 2rem;
+  object-fit: contain;
+  filter: grayscale(1);
 }
 
-.cg-testimonial__attribution {
-  display: flex;
-  align-items: center;
-  gap: var(--cg-s3);
-  margin-block-start: var(--cg-s2);
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .cd-mark {
+    filter: grayscale(1) invert(1);
+  }
 }
 
-.cg-testimonial__avatar {
-  inline-size: var(--cg-s10);
-  block-size: var(--cg-s10);
-  border-radius: var(--cg-radius-pill);
-  box-shadow: var(--cg-ring);
+:root[data-theme="dark"] .cd-mark {
+  filter: grayscale(1) invert(1);
 }
 
-.cg-testimonial__who {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cg-s1);
-  font-size: var(--cg-text-sm);
-  color: var(--cg-ink-subtle);
+.cd-logos__items {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--cd-rule);
+  margin: 0;
+  padding: var(--cd-rule) 0;
+  list-style: none;
+  background: var(--cd-line);
 }
 
-.cg-testimonial__name {
-  font-weight: var(--cg-weight-semibold);
-  color: var(--cg-ink);
+.cd-logos__item {
+  display: grid;
+  place-items: center;
+  min-block-size: 6rem;
+  padding: var(--cd-s5);
+  background: var(--cd-canvas);
 }
 
-/* --- pricingTable -------------------------------------------------------------------- */
-
-.cg-pricing__tiers {
+.cd-logos__link {
   display: grid;
-  gap: var(--cg-s6);
-  margin: 0;
+  place-items: center;
 }
 
 @media (min-width: 48rem) {
-  .cg-pricing__tiers {
-    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
-    align-items: start;
+  .cd-logos__items {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
 
-.cg-pricing__tier {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cg-s4);
-  padding: var(--cg-s6);
-  border: 1px solid var(--cg-line);
-  border-radius: var(--cg-radius-md);
-  background: var(--cg-surface);
-  box-shadow: var(--cg-elevation-1);
-}
+@media (min-width: 64rem) {
+  .cd-logos[data-count="4"] .cd-logos__items {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 
-.cg-pricing__tier[data-highlighted="true"] {
-  border-color: var(--cg-accent);
-  box-shadow: var(--cg-elevation-3);
+  .cd-logos[data-count="6"] .cd-logos__items {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
 }
 
-.cg-pricing__name {
-  margin: 0;
-  font-size: var(--cg-text-lg);
-  font-weight: var(--cg-weight-semibold);
-  letter-spacing: var(--cg-tracking-snug);
+.cd-strip__inner {
+  row-gap: var(--cd-s5);
 }
 
-.cg-pricing__price {
-  display: flex;
-  align-items: baseline;
-  gap: var(--cg-s1);
+.cd-strip__caption {
   margin: 0;
+  padding-block-start: var(--cd-s6);
+  border-block-start: var(--cd-rule) solid var(--cd-line);
+  color: var(--cd-ink-muted);
+  font-size: var(--cd-text-ui);
 }
 
-.cg-pricing__amount {
-  font-size: var(--cg-text-3xl);
-  font-weight: var(--cg-weight-bold);
-  letter-spacing: var(--cg-tracking-tight);
-  color: var(--cg-accent);
-  font-variant-numeric: tabular-nums;
-}
-
-.cg-pricing__interval {
-  color: var(--cg-ink-muted);
-  font-size: var(--cg-text-sm);
-}
-
-.cg-pricing__features {
+.cd-strip__items {
   display: flex;
-  flex-direction: column;
-  gap: var(--cg-s2);
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--cd-s6) var(--cd-s12);
   margin: 0;
-  padding: var(--cg-s4) 0 0;
-  border-block-start: 1px solid var(--cg-line-soft);
-  color: var(--cg-ink-muted);
-  font-size: var(--cg-text-sm);
-  line-height: var(--cg-leading-normal);
-}
-
-.cg-pricing__feature {
-  padding-inline-start: var(--cg-s5);
-  position: relative;
+  padding: 0;
+  list-style: none;
 }
 
-.cg-pricing__feature::before {
-  content: "";
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: 0.5em;
-  inline-size: 0.55em;
-  block-size: 0.3em;
-  border-inline-start: 2px solid var(--cg-accent);
-  border-block-end: 2px solid var(--cg-accent);
-  transform: translateY(-60%) rotate(-45deg);
-}
+/* --------------------------------------------------------------------------
+   embed
+   -------------------------------------------------------------------------- */
 
-.cg-pricing__action {
-  margin-block-start: auto;
-  padding-block-start: var(--cg-s2);
+.cd-embed__frame {
+  position: relative;
+  inline-size: 100%;
 }
 
-.cg-pricing__action .cg-action {
+.cd-embed__iframe {
   inline-size: 100%;
-  justify-content: center;
+  block-size: 100%;
+  border: 0;
 }
 
-/* --- accordion ------------------------------------------------------------------------ */
-
-.cg-panels {
-  max-inline-size: var(--cg-page-narrow);
-  margin-inline: auto;
+.cd-embed__notice {
+  display: grid;
+  align-content: center;
+  justify-items: start;
+  gap: var(--cd-s3);
+  block-size: 100%;
+  max-inline-size: 40rem;
+  padding: var(--cd-s8);
 }
 
-.cg-panels__items {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cg-s3);
+.cd-embed__reason {
   margin: 0;
+  color: var(--cd-ink-soft);
 }
 
-.cg-panels__item {
-  border: 1px solid var(--cg-line);
-  border-radius: var(--cg-radius-md);
-  background: var(--cg-surface);
-  transition: border-color var(--cg-duration) var(--cg-ease);
+@media (min-width: 64rem) {
+  .cd-embed__inner > * {
+    grid-column: 1 / span 8;
+  }
 }
 
-.cg-panels__item:has(.cg-panels__details[open]) {
-  border-color: var(--cg-line-strong);
-}
+/* --------------------------------------------------------------------------
+   pricingTable: plans side by side, never cards
+   -------------------------------------------------------------------------- */
 
-.cg-panels__question {
-  display: flex;
-  align-items: center;
-  gap: var(--cg-s4);
-  padding: var(--cg-s4) var(--cg-s5);
-  font-weight: var(--cg-weight-semibold);
-  cursor: pointer;
+.cd-plans__items {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--cd-s10) var(--cd-col-gap);
+  margin: 0;
+  padding: 0;
   list-style: none;
 }
 
-.cg-panels__question::-webkit-details-marker {
-  display: none;
-}
-
-.cg-panels__question-text {
-  flex: 1;
-}
-
-.cg-panels__details[open] .cg-panels__question {
-  color: var(--cg-accent);
-}
-
-.cg-panels__chevron {
-  flex: none;
-  inline-size: 0.6em;
-  block-size: 0.6em;
-  border-inline-end: 2px solid currentColor;
-  border-block-end: 2px solid currentColor;
-  transform: rotate(45deg);
-  transition: transform var(--cg-duration) var(--cg-ease);
-}
-
-.cg-panels__details[open] .cg-panels__chevron {
-  transform: rotate(-135deg);
-}
-
-.cg-panels__answer {
-  padding: 0 var(--cg-s5) var(--cg-s5);
-  color: var(--cg-ink-muted);
-  line-height: var(--cg-leading-relaxed);
+.cd-plans__item {
+  display: grid;
+  grid-template-rows: auto auto 1fr auto;
+  align-content: start;
+  gap: var(--cd-s4);
+  padding-block-start: var(--cd-s5);
+  border-block-start: var(--cd-rule) solid var(--cd-line);
 }
 
-.cg-panels__answer > :first-child {
-  margin-block-start: 0;
+.cd-plans__item[data-highlighted="true"] {
+  padding-block-start: calc(var(--cd-s5) - var(--cd-rule));
+  border-block-start: var(--cd-rule-strong) solid var(--cd-line-ink);
 }
 
-.cg-panels__answer > :last-child {
-  margin-block-end: 0;
+.cd-plans__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--cd-s1) var(--cd-s3);
 }
 
-/* --- statCounter ---------------------------------------------------------------------- */
-
-.cg-kpis {
-  padding: var(--cg-s8) var(--cg-s6);
-  border-radius: var(--cg-radius-lg);
-  background: var(--cg-accent);
-  color: var(--cg-accent-fg);
+.cd-plans__name {
+  font-size: var(--cd-text-lg);
+  font-weight: var(--cd-weight-semibold);
 }
 
-.cg-kpis__items {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
-  gap: var(--cg-s6);
+.cd-plans__flag {
   margin: 0;
+  color: var(--cd-ink-muted);
+  font-size: var(--cd-text-label);
+  font-weight: var(--cd-weight-medium);
 }
 
-.cg-kpi {
+.cd-plans__price {
   display: flex;
-  flex-direction: column;
-  gap: var(--cg-s1);
-}
-
-.cg-kpi__label {
-  order: 2;
-  font-size: var(--cg-text-xs);
-  font-weight: var(--cg-weight-semibold);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
-  opacity: 0.82;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--cd-s2);
+  margin: 0;
 }
 
-.cg-kpi__value {
-  order: 1;
-  margin: 0;
-  font-size: var(--cg-text-3xl);
-  font-weight: var(--cg-weight-bold);
-  line-height: var(--cg-leading-tight);
-  letter-spacing: var(--cg-tracking-tight);
+.cd-plans__amount {
+  font-size: var(--cd-size-figure);
+  font-weight: var(--cd-weight-medium);
+  line-height: 1.1;
+  letter-spacing: var(--cd-tracking-display);
   font-variant-numeric: tabular-nums;
 }
 
-/* --- logoStrip ------------------------------------------------------------------------ */
+.cd-plans__interval {
+  color: var(--cd-ink-muted);
+  font-size: var(--cd-text-ui);
+}
 
-.cg-logo-band__items {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 0;
+.cd-plans__features {
   margin: 0;
   padding: 0;
   list-style: none;
+  border-block-start: var(--cd-rule) solid var(--cd-line);
 }
 
-.cg-logo-band__item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--cg-s3) var(--cg-s5);
-  border-inline-start: 1px solid var(--cg-line-soft);
+.cd-plans__feature {
+  padding-block: var(--cd-s2);
+  border-block-end: var(--cd-rule) solid var(--cd-line);
+  color: var(--cd-ink-soft);
+  font-size: var(--cd-text-ui);
+  line-height: var(--cd-leading-ui);
 }
 
-.cg-logo-band__item:first-child {
-  border-inline-start: 0;
+.cd-plans__action {
+  margin-block-start: var(--cd-s2);
 }
 
-.cg-logo-band__image {
-  block-size: var(--cg-s6);
-  inline-size: auto;
-  max-inline-size: 100%;
-  object-fit: contain;
+@media (min-width: 48rem) {
+  .cd-plans__items {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
-.cg-logo-band__caption {
-  margin-block-start: var(--cg-s4);
-  color: var(--cg-ink-subtle);
-  font-size: var(--cg-text-xs);
-  font-weight: var(--cg-weight-semibold);
-  letter-spacing: var(--cg-tracking-wide);
-  text-transform: uppercase;
-  text-align: center;
+@media (min-width: 64rem) {
+  .cd-plans[data-count="3"] .cd-plans__items {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .cd-plans[data-count="4"] .cd-plans__items {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 }