/* Public marketing site: shared craft layer (loaded by layouts/public_base.html only).
   Scoped under .public-site so the authenticated app shell is untouched. */

/* P-01: the legacy Semantic-UI rule `nav { margin-bottom: 40px !important }` in app.css
   pushed the public header nav links up out of the row's vertical centre. */
.public-site nav { margin-bottom: 0 !important; }

/* One public button system: base, two fills and three sizes. Values follow the marketing theme
   (shadcn_tokens.css .theme-marketing). Fill and border colours on the modifier classes come from
   tokens, so the same markup reads correctly in light and dark. A button that carries its own
   border-* utility (older templates) keeps that colour: the transparent default only applies when
   no border utility is present. */
.public-site .public-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.5rem; padding: 0.5rem 1.5rem; max-width: 100%; text-align: center;
  border-width: 1px; border-style: solid;
  border-radius: calc(var(--radius) + 4px);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  overflow-wrap: anywhere; text-decoration: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}
.public-site .public-btn:not([class*="border-"], .public-btn--outline) { border-color: transparent; }
.public-site .public-btn svg { width: 1rem; height: 1rem; pointer-events: none; flex-shrink: 0; }
.public-site .public-btn:disabled,
.public-site .public-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.public-site .public-btn:focus-visible {
  border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.5);
}
.public-site .public-btn--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.public-site .public-btn--primary:hover { background: hsl(var(--primary) / 0.9); }
.public-site .public-btn--outline {
  border-color: hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground));
}
.public-site .public-btn--outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.dark .public-site .public-btn--outline { border-color: hsl(var(--input)); background: hsl(var(--input) / 0.3); }
.dark .public-site .public-btn--outline:hover { background: hsl(var(--input) / 0.5); }
.public-site .public-btn--outline:focus-visible { border-color: hsl(var(--ring)); }
.public-site .public-btn--sm { height: 2.25rem; padding: 0.5rem 1rem; }
.public-site .public-btn--xs { height: 2rem; padding: 0 0.75rem; gap: 0.375rem; border-radius: var(--radius); }

/* Small uppercase mono label above a section heading. */
.public-site .public-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: hsl(var(--muted-foreground));
}
.public-site .public-eyebrow a { color: inherit; text-decoration: none; }
.public-site .public-eyebrow a:hover { color: hsl(var(--foreground)); }

/* P-15: wide container for hero/figure sections; prose keeps a ~680px measure. */
.public-site .public-container { max-width: 72rem; margin-inline: auto; padding: 5rem 1rem; }
@media (min-width: 640px) { .public-site .public-container { padding-inline: 1.5rem; } }
.public-site .public-page-content > * { max-width: 42.5rem; margin-inline: auto; }
.public-site .landing-band .public-page-content > * { margin-inline: 0; }
.public-site .public-page-content > table,
.public-site .public-page-content > pre,
.public-site .public-page-content > figure,
.public-site .public-page-content > .public-wide { max-width: none; }
.public-site .public-figure { max-width: 72rem; margin-inline: auto; }
/* P-06: product screenshots are shown at their captured CSS width and never stretched past
   it; a narrower viewport shrinks nothing below 1:1 because the template swaps in the
   phone-width capture instead (public/page.html <picture>). */
.public-site .public-figure img { display: block; margin-inline: auto; width: auto; height: auto; max-width: 100%; }
.public-site .public-figure figcaption { text-align: center; }
/* Full-bleed tinted band, a section-break option. */
.public-site .public-band { background: hsl(var(--muted)); border-block: 1px solid hsl(var(--border)); }

/* P-13: one type scale for inner pages (home is the same family at larger display sizes). */
.public-site .public-page-content h1 { font-size: 2.25rem; line-height: 1.15; }
.public-site .public-page-content h2 { font-size: 1.5rem; line-height: 1.25; margin-top: 4rem; }
.public-site .public-page-content h3 { font-size: 1.25rem; }
@media (min-width: 768px) {
  .public-site .public-page-content h1 { font-size: 3rem; }
  .public-site .public-page-content h2 { font-size: 1.875rem; margin-top: 6rem; }
}
.public-site .public-page-content h1 + h2,
.public-site .public-page-content h1 + p + h2 { margin-top: 3rem; }

/* P-19: content rules moved here from the per-template inline <style> blocks in
   public/page.html, public/vs_hub.html and public/hub_index.html (one token source,
   not three copies of the same prose rules). Scoped to .public-prose, a class added
   only to those three templates' <article> elements -- not to the bare
   .public-page-content class, which public/pricing.html's lead also carries (for its
   width only; public_pricing.css's header comment documents that reuse) and never
   had this prose styling. font-size, line-height and h2's margin-top are
   deliberately not repeated here: the h1/h2/h3 rule above already sets them with
   equal or higher specificity, and this file is the one that was already winning
   that fight before the inline blocks were removed. Colours are tokens, not the hex
   values the inline blocks fell back to (no --color-* variable has ever existed, so
   the fallback always rendered). blockquote and hr use margin-block, not the margin
   shorthand: a shorthand's inline component would outrank (specificity 0,2,1 beats
   0,2,0) the centring rule above (.public-page-content > * { margin-inline: auto }),
   un-centring a top-level hr/blockquote. */
.public-site .public-page-content.public-prose h1 { font-weight: 700; margin-bottom: 1rem; }
.public-site .public-page-content.public-prose h2 { font-weight: 600; margin-bottom: 0.75rem; }
.public-site .public-page-content.public-prose h3 { font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.public-site .public-page-content.public-prose p { margin-bottom: 1rem; line-height: 1.75; }
.public-site .public-page-content.public-prose ul,
.public-site .public-page-content.public-prose ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.public-site .public-page-content.public-prose li { margin-bottom: 0.25rem; line-height: 1.75; }
.public-site .public-page-content.public-prose a { color: hsl(var(--info)); text-decoration: underline; }
.public-site .public-page-content.public-prose a:hover { color: hsl(var(--info-emphasis)); }
.public-site .public-page-content.public-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.public-site .public-page-content.public-prose th,
.public-site .public-page-content.public-prose td { border: 1px solid hsl(var(--border)); padding: 0.75rem; text-align: left; }
.public-site .public-page-content.public-prose th { background: hsl(var(--muted)); font-weight: 600; }
.public-site .public-page-content.public-prose em { font-style: italic; }
.public-site .public-page-content.public-prose strong { font-weight: 700; }
.public-site .public-page-content.public-prose blockquote {
  border-left: 4px solid hsl(var(--border)); padding-left: 1rem; margin-block: 1rem; color: hsl(var(--muted-foreground));
}
.public-site .public-page-content.public-prose hr { border: none; border-top: 1px solid hsl(var(--border)); margin-block: 2rem; }
.public-site .public-page-content.public-prose code {
  background: hsl(var(--muted)); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875em;
}
.public-site .public-page-content.public-prose pre {
  background: hsl(var(--muted)); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin-bottom: 1rem;
}
.public-site .public-page-content.public-prose pre code { background: none; padding: 0; }

/* P-20: public/vs_hub.html and public/hub_index.html rendered a tighter list gap
   (0.5rem, not the page.html value above) before their inline <style> blocks were
   removed; .public-hub is added to both hub <article> elements to keep that
   unchanged. hub_index.html alone also rendered a looser list margin (1.5rem, not
   the 1rem both page.html and vs_hub.html use); .public-hub-feed is added to its
   <article> only, so vs_hub.html's unrelated 1rem value is not touched. */
.public-site .public-page-content.public-prose.public-hub li { margin-bottom: 0.5rem; }
.public-site .public-page-content.public-prose.public-hub-feed ul { margin-bottom: 1.5rem; }

/* B-01/B-04: landing layout for module, use-case and comparison pages (public/_partials/_landing.html).
   The hero sits tighter below than a content band; bands are separated by a border line, not by tint;
   a band's own heading needs no top margin. */
.public-site .landing-hero .public-container { padding-block: 5rem 4rem; }
.public-site .landing-bands > .landing-band + .landing-band { border-top: 1px solid hsl(var(--border)); }
.public-site .landing-band .public-page-content > h2:first-child { margin-top: 0; }

/* P-18: one standard sub-line under the H1 instead of a one-off italic line. */
.public-site .public-page-content h1 + p > em:only-child {
  font-style: normal; font-size: 1.125rem; color: hsl(var(--muted-foreground));
}

/* P-18: footer entries that are not links read as plain text, not as disabled links. */
.public-site .public-footer-plain { color: inherit; cursor: text; }

/* Home: browser frame around the product window. The capture is 2x and shown at its own CSS width
   (1280px desktop, 358px phone); a narrower viewport shrinks the frame, never stretches the image (P-06). */
.public-site .home-hero__stage { margin-inline: auto; max-width: calc(1282px + 1.5rem); padding-inline: 0.75rem; }
.public-site .home-hero__figure { margin: 0; }
.public-site .home-frame {
  border: 1px solid hsl(var(--border)); border-radius: 0.75rem; overflow: hidden;
  background: hsl(var(--card));
  width: fit-content; max-width: 100%; margin-inline: auto;
}
.public-site .home-frame__bar {
  display: flex; align-items: center; gap: 0.375rem; height: 2.25rem; padding-inline: 0.75rem;
  background: hsl(var(--muted)); border-bottom: 1px solid hsl(var(--border));
}
.public-site .home-frame__dot { width: 0.625rem; height: 0.625rem; border-radius: 9999px; background: hsl(var(--border)); }
.public-site .home-frame__url { margin-left: 0.75rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
/* No `width: auto` here: it would override the width attribute and show the 2x file at twice its size. */
.public-site .home-frame__img { display: block; height: auto; max-width: 100%; }

/* Home page layer. Every value is from the reference home page (reference-design-values-v1.yml); the
   entry each class carries is named beside it. Palette comes from .theme-marketing (shadcn_tokens.css). */

/* Shared public component; used by the homepage and the pricing page; registered in docs/reuse-register.yml. */

/* Marketing theme type scale, prose, tables and callout. Scoped to .theme-marketing (set on <body> by
   {% block body_theme %}) so a public page that has not opted in keeps its earlier sizes. Selectors
   carry three classes to outrank the .public-prose rules above. */
.public-site.theme-marketing .public-h1,
.public-site.theme-marketing .public-page-content h1 {
  font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; letter-spacing: -0.025em;
  text-wrap: balance; color: hsl(var(--foreground));
}
.public-site.theme-marketing .public-lead {
  max-width: 48rem; margin-top: 1.5rem; font-size: 1.125rem; line-height: 2rem;
  color: hsl(var(--muted-foreground));
}
.public-site.theme-marketing .public-page-content h2 {
  font-size: 1.5rem; line-height: 2rem; font-weight: 600; margin-top: 4rem; margin-bottom: 1rem;
  color: hsl(var(--foreground));
}
.public-site.theme-marketing .public-page-content h3 {
  font-size: 1rem; line-height: 1.5rem; font-weight: 600; margin-top: 2rem;
  color: hsl(var(--foreground));
}
@media (min-width: 640px) {
  .public-site.theme-marketing .public-h1,
  .public-site.theme-marketing .public-page-content h1 { font-size: 3rem; line-height: 3rem; }
  .public-site.theme-marketing .public-lead { font-size: 1.25rem; line-height: 2rem; }
  .public-site.theme-marketing .public-page-content h2 { font-size: 1.875rem; line-height: 2.25rem; }
}
.public-site.theme-marketing .landing-band .public-page-content > h2:first-child { margin-top: 0; }
.public-site.theme-marketing .public-page-content p,
.public-site.theme-marketing .public-page-content li {
  font-size: 1rem; line-height: 1.75rem; color: hsl(var(--muted-foreground));
}
.public-site.theme-marketing .public-page-content strong { color: hsl(var(--foreground)); }
.public-site.theme-marketing .public-page-content a {
  color: inherit; text-decoration: underline; text-underline-offset: 4px;
}
.public-site.theme-marketing .public-page-content a:hover { color: hsl(var(--foreground)); }

/* Tables: markdown output has no wrapper, so the table is the bordered box. */
.public-site.theme-marketing .public-page-content table {
  width: 100%; margin-bottom: 1.5rem; border: 1px solid hsl(var(--border)); border-radius: 1rem;
  border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 0.875rem;
}
.public-site.theme-marketing .public-page-content thead tr { background: hsl(var(--muted) / 0.5); }
.public-site.theme-marketing .public-page-content th,
.public-site.theme-marketing .public-page-content td {
  padding: 1rem; border: 0; text-align: left; vertical-align: top;
}
.public-site.theme-marketing .public-page-content th {
  background: transparent; font-weight: 600; color: hsl(var(--foreground));
  border-bottom: 1px solid hsl(var(--border));
}
.public-site.theme-marketing .public-page-content td {
  font-size: 0.875rem; line-height: 1.5rem; color: hsl(var(--muted-foreground));
}
.public-site.theme-marketing .public-page-content tbody tr:not(:last-child) td {
  border-bottom: 1px solid hsl(var(--border));
}
@media (max-width: 639px) {
  .public-site.theme-marketing .public-page-content table { display: block; overflow-x: auto; max-width: 100%; }
}

/* The question callout: a neutral card. */
.public-site .public-callout {
  border: 1px solid hsl(var(--border)); border-radius: 1rem; background: hsl(var(--card)); padding: 1.5rem;
}
.public-site .public-page-content .public-callout p {
  font-size: 1.125rem; line-height: 2rem; color: hsl(var(--foreground));
}
.public-site .public-callout > :last-child { margin-bottom: 0; }
.public-site .public-btn--lg { height: 2.5rem; min-height: 2.5rem; padding-inline: 1.5rem; }
.public-site .public-btn--primary:focus-visible,
.public-site .public-btn--outline:focus-visible {
  outline: 2px solid hsl(var(--foreground)); outline-offset: 2px; border-color: hsl(var(--ring));
}

/* type_scale.home_h1 (72/72 at lg, 60/60 at sm, 48/48; 700; -0.025em) and home_lead (20/32 from sm, 18/32; max 768px) */
.public-site .home-display {
  margin-top: 2rem; font-size: 3rem; line-height: 1; font-weight: 700; letter-spacing: -0.025em;
  text-wrap: balance; color: hsl(var(--foreground));
}
.public-site .home-lead {
  margin: 1.5rem auto 0; max-width: 48rem; font-size: 1.125rem; line-height: 2rem;
  color: hsl(var(--muted-foreground)); text-wrap: balance;
}
/* Role pages: their headlines are sentences, so the home scale steps down one size. */
.public-site .home-display--compact { font-size: 2.25rem; line-height: 1.1; }
@media (min-width: 640px) { .public-site .home-display--compact { font-size: 3rem; } }
@media (min-width: 1024px) { .public-site .home-display--compact { font-size: 3.25rem; } }
@media (min-width: 640px) {
  .public-site .home-display { font-size: 3.75rem; }
  .public-site .home-lead { font-size: 1.25rem; }
}
@media (min-width: 1024px) { .public-site .home-display { font-size: 4.5rem; } }
.public-site .home-hero { position: relative; padding-block: 6rem; background: hsl(var(--background)); }
.public-site .home-hero::before {
  content: ""; display: none; position: absolute; inset-block: 0; left: 50%; width: min(100%, 1400px);
  transform: translateX(-50%); pointer-events: none; border-inline: 1px solid hsl(var(--border));
}
@media (min-width: 640px) { .public-site .home-hero::before { display: block; } }
@media (min-width: 1024px) { .public-site .home-hero { padding-block: 8rem; } }

/* Home first screen: the headline, one sentence, two buttons and the cited answer card all end above the
   bottom edge of a 1440 by 900 screen and a 375 by 812 phone, so the hero sits tight under the navigation bar. */
.public-site .home-hero--fold { padding-block: 2rem 2.5rem; }
.public-site .home-hero--fold .home-display { margin-top: 0; font-size: 2.25rem; line-height: 1.1; }
.public-site .home-hero--fold .home-lead { margin-top: 1rem; font-size: 1rem; line-height: 1.5rem; }
@media (min-width: 640px) {
  .public-site .home-hero--fold .home-display { font-size: 3rem; }
  .public-site .home-hero--fold .home-lead { font-size: 1.125rem; line-height: 1.75rem; }
}
@media (min-width: 1024px) {
  .public-site .home-hero--fold { padding-block: 2.5rem 8.5rem; }
  .public-site .home-hero--fold .home-display { font-size: 3.5rem; }
}
/* From a laptop screen the headline and the answer sit side by side: the answer image is captured at the
   width of its column, so it is shown at the size it was taken and ends above the bottom of a 1440 by 900
   screen. The hero fills the first screen so the next section starts below it. */
@media (min-width: 1280px) {
  .public-site .home-hero--fold { min-height: calc(100vh - 4rem); }
  .public-site .home-hero__layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 626px; column-gap: 3rem; align-items: start;
    max-width: 1282px; margin-inline: auto; padding-inline: 0.75rem;
  }
  .public-site .home-hero__copy { margin-inline: 0; text-align: left; padding-inline: 0; }
  .public-site .home-hero__copy .home-lead { margin-inline: 0; text-wrap: pretty; }
  .public-site .home-hero__actions { justify-content: flex-start; }
  .public-site .home-hero__layout .home-hero__stage { margin-top: 0; padding-inline: 0; }
}

/* layout_rhythm.home_section (80px), section_divider (1px border colour), rails (1px, from 640px) */
.public-site .home-section { border-top: 1px solid hsl(var(--border)); padding-block: 5rem; background: hsl(var(--background)); }
.public-site .home-section > .container,
.public-site .home-closing > .container { position: relative; }
.public-site .home-section > .container::before,
.public-site .home-closing > .container::before {
  content: ""; display: none; position: absolute; inset: -5rem 0; pointer-events: none;
  border-inline: 1px solid hsl(var(--border));
}
.public-site .home-closing > .container::before { inset-block: -6rem; }
@media (min-width: 640px) {
  .public-site .home-section > .container::before,
  .public-site .home-closing > .container::before { display: block; }
}

/* type_scale.section_eyebrow, home_section_h2, home_section_lead */
.public-site .home-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: hsl(var(--muted-foreground));
}
.public-site .home-h2 {
  margin-top: 0.75rem; font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; color: hsl(var(--foreground));
  text-wrap: balance;
}
@media (min-width: 768px) { .public-site .home-h2 { font-size: 3rem; line-height: 1; } }
.public-site .home-section-lead { margin-top: 1.25rem; font-size: 1.125rem; line-height: 2rem; color: hsl(var(--muted-foreground)); }
.public-site .home-section-lead strong { color: hsl(var(--foreground)); }

/* Shared public component; used by the homepage and the pricing page; registered in docs/reuse-register.yml. */
/* cards.home (16px radius, 1px border, 28px padding), card_h3_home, card_body, card_eyebrow, cta_eyebrow */
.public-site .public-card {
  border: 1px solid hsl(var(--border)); border-radius: 1rem; background: hsl(var(--card));
  color: hsl(var(--card-foreground)); padding: 1.75rem;
}
.public-site .public-card--callout { padding: 2rem; display: flex; flex-direction: column; align-items: flex-start; }
.public-site .public-card--callout .public-btn,
.public-site .public-btn--wrap {
  max-width: 100%; height: auto; padding-block: 0.625rem; white-space: normal; text-align: center;
}
.public-site .public-card--callout .public-btn { margin-top: auto; }
.public-site .public-card-title { font-size: 1.5rem; line-height: 2rem; font-weight: 600; color: hsl(var(--foreground)); }
.public-site .public-card-body { font-size: 0.875rem; line-height: 1.5rem; color: hsl(var(--muted-foreground)); }
.public-site .public-card-title + .public-card-body { margin-top: 0.75rem; }
.public-site .public-card-eyebrow,
.public-site .home-cta-eyebrow {
  font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: hsl(var(--foreground));
}
.public-site .public-card-eyebrow + .public-card-title { margin-top: 0.75rem; }
.public-site .home-cta-eyebrow { font-size: 0.875rem; line-height: 1.25rem; }

/* Shared public component; used by the homepage and the pricing page; registered in docs/reuse-register.yml. */
/* inline_link: underline, offset 4px, hover foreground; 2px solid focus outline (survives forced-colors mode) */
.public-site .public-link { text-decoration: underline; text-underline-offset: 4px; transition: color 150ms; }
.public-site .public-link:hover { color: hsl(var(--foreground)); }
.public-site .public-link:focus-visible,
.public-site .public-faq summary:focus-visible,
.public-site .public-table-scroll:focus-visible {
  outline: 2px solid hsl(var(--foreground)); outline-offset: 2px;
}
.public-site .public-link:focus-visible,
.public-site .public-faq summary:focus-visible { border-radius: 0.25rem; }
/* the global :focus-visible rule rounds to 0.25rem; the wrapper keeps its own rounded-2xl radius */
.public-site .public-table-scroll:focus-visible { border-radius: 1rem; }

/* layout_rhythm.list_emphasis and note_block */
.public-site .home-emphasis-list { list-style: none; padding: 0; }
.public-site .home-emphasis-list > li {
  border-left: 2px solid hsl(var(--border)); padding-left: 1.25rem;
  font-size: 1rem; line-height: 1.75rem; color: hsl(var(--muted-foreground));
}
.public-site .home-emphasis-list > li + li { margin-top: 1rem; }
.public-site .home-emphasis-list strong { color: hsl(var(--foreground)); }
.public-site .home-note {
  border-left: 2px solid hsl(var(--primary)); padding-left: 1.25rem;
  font-size: 0.875rem; line-height: 1.5rem; color: hsl(var(--muted-foreground));
}

/* Shared public component; used by the homepage and the pricing page; registered in docs/reuse-register.yml. */
/* Roadmap stepper: a 1px line with an 8px dot per stage; one row of five from 768px, a vertical line below */
.public-site .public-stepper { list-style: none; padding: 0; display: grid; gap: 2rem; }
.public-site .public-stepper > li { position: relative; padding-left: 1.5rem; }
.public-site .public-stepper > li::before {
  content: ""; position: absolute; left: 3.5px; top: 0.5rem; bottom: -2rem; border-left: 1px solid hsl(var(--border));
}
.public-site .public-stepper > li:last-child::before { display: none; }
.public-site .public-stepper > li::after {
  content: ""; position: absolute; left: 0; top: 0.25rem; width: 0.5rem; height: 0.5rem; border-radius: 9999px;
  background: hsl(var(--border));
}
.public-site .public-stepper > li:first-child::after { background: hsl(var(--foreground)); }
.public-site .public-stepper__name {
  margin-top: 0.5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: hsl(var(--muted-foreground));
}
.public-site .public-stepper > li:first-child .public-stepper__name { color: hsl(var(--foreground)); }
.public-site .public-stepper__body { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.5rem; color: hsl(var(--muted-foreground)); }
@media (min-width: 768px) {
  .public-site .public-stepper { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 1.5rem; }
  .public-site .public-stepper > li { padding-left: 0; padding-top: 1.5rem; }
  .public-site .public-stepper > li::before { left: 0; right: -1.5rem; top: 3.5px; bottom: auto; border-left: 0; border-top: 1px solid hsl(var(--border)); }
  .public-site .public-stepper > li:last-child::before { display: block; right: 0; }
  .public-site .public-stepper > li::after { top: 0; }
}

/* Shared public component; used by the homepage and the pricing page; registered in docs/reuse-register.yml. */
/* layout_rhythm.table: wrapper overflow-x auto; 48rem minimum; 16px cell padding; header at muted 50% */
.public-site .public-table { width: 100%; min-width: 48rem; border-collapse: collapse; text-align: left; font-size: 0.875rem; line-height: 1.25rem; }
/* A table that fits its container: no minimum width, equal fixed columns; its wrapper must not set overflow. */
.public-site .public-table--fit { min-width: 0; table-layout: fixed; }
.public-site .public-table thead tr { border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.5); }
.public-site .public-table th { padding: 1rem; font-weight: 600; color: hsl(var(--foreground)); }
.public-site .public-table tbody tr { border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
.public-site .public-table tbody tr:last-child { border-bottom: 0; }
.public-site .public-table td { padding: 1rem; font-size: 0.875rem; line-height: 1.5rem; color: hsl(var(--muted-foreground)); }
.public-site .public-table td:first-child { font-weight: 600; color: hsl(var(--foreground)); }
.public-site .public-table td strong { font-weight: 600; color: hsl(var(--foreground)); }

/* Shared public component; used by the homepage and the pricing page; registered in docs/reuse-register.yml. */
/* inner_h3_faq (16/24, 600), body 16/28 muted, divider-separated items, rotating chevron */
.public-site .public-faq { border-top: 1px solid hsl(var(--border)); }
.public-site .public-faq details { border-bottom: 1px solid hsl(var(--border)); }
.public-site .public-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none;
  padding-block: 1.25rem; font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: hsl(var(--foreground));
}
.public-site .public-faq summary::-webkit-details-marker { display: none; }
.public-site .public-faq summary svg { flex: none; width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); transition: transform 150ms; }
.public-site .public-faq details[open] summary svg { transform: rotate(180deg); }
.public-site .public-faq details > p { padding-bottom: 1.25rem; font-size: 1rem; line-height: 1.75rem; color: hsl(var(--muted-foreground)); }

/* Closing call to action: centred, 96px block padding, the section divider above */
.public-site .home-closing { border-top: 1px solid hsl(var(--border)); padding-block: 6rem; text-align: center; background: hsl(var(--background)); }
.public-site .home-closing .home-h2 { margin-top: 1rem; }
.public-site .home-closing .home-section-lead { margin-inline: auto; max-width: 42rem; text-wrap: balance; }