:root {
    /* Sidebar design tokens */
    --xl-content-size: 1152px;
}

.docs-section-main-section {
    width: 100%;
}

.docs-section-main-section .overview {
    background: var(--color-brand-dark);
}

.docs-section-main-section > * > * {
    padding-left: var(--s0);
}

@media (min-width: 1025px) {
    .docs-section-main-section > * > * {
        padding-left: var(--s5);
    }
}

.docs-section-main-section .overview .content {
    max-width: var(--xl-content-size);
    color: var(--bz-white);
    margin-left: var(--s-1);
}

.docs-section-main-section .overview h1 {
    color: var(--bz-white);
}

.docs-section-main-section .overview a:not(.cta-button) {
    color: var(--bz-medium-green);
}

.docs-section-main-section .overview a:not(.cta-button):hover {
    color: var(--bz-white);
}

/* Primary button on the dark-green band */
.docs-section-main-section .overview .cta-button {
    align-self: flex-start;
    background-color: var(--bz-medium-green);
    border: var(--bz-border-control) solid var(--bz-medium-green);
    border-radius: var(--bz-radius-md);
    color: var(--bz-dark-green);
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    padding: 11px 18px 12px;
    text-decoration: none;
    transition: var(--bz-transition);
}

.docs-section-main-section .overview .cta-button:hover {
    background-color: var(--bz-dark-med-green);
    border-color: var(--bz-dark-med-green);
    color: var(--bz-dark-green);
}


.overview {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-xl);
}

.overview p {
    line-height: 1.75;
    font-size: var(--font-size-xl);
}

.docs-section-main-section .overview {
    padding-top: var(--s5);
    padding-bottom: var(--s5);
}

.docs-section-main-section #on-page-cta-form {
    max-width: var(--xl-content-size);
}

.docs-main-section {
    max-width: var(--xl-content-size);
    padding: var(--s-1);
}

@media (min-width: 1025px) {
    .docs-main-section {
        padding-right: var(--s0);
    }
}

/* Docs article body: Whitney Book, dark-blue ink.
   .article scoping beats blog.css `.article p`. */
.article .docs-content,
.article .docs-content p,
.article .docs-content li {
    font-family: var(--font-body);
    font-size: var(--article-font-size);
    line-height: var(--article-line-height);
    color: var(--bz-dark-blue);
}

/* Docs article (markdown) headings, sized by the --article-h* tokens.
   :not([class]) leaves component headings (gs-*, cards) to their own rules. */
.article .docs-content h2:not([class]) {
    font-size: var(--article-h2-size);
    line-height: var(--article-h2-line);
}

.article .docs-content h3:not([class]) {
    font-size: var(--article-h3-size);
    line-height: var(--article-h3-line);
}

.article .docs-content h4:not([class]) {
    font-size: var(--article-h4-size);
    line-height: var(--article-h4-line);
}

.article .docs-content h5:not([class]) {
    font-size: var(--article-h5-size);
    line-height: var(--article-h5-line);
}

.article .docs-content h6:not([class]) {
    font-size: var(--article-h6-size);
    line-height: var(--article-h6-line);
}

/* Code block styles for docs content */
.docs-content pre {
    border-radius: var(--border-radius);
    padding-inline-start: var(--s1);
    padding-block-start: var(--s1);
    padding-block-end: var(--s1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.docs-content pre > code {
    display: inline-block;
    font-size: var(--font-size);
    background-color: inherit;
    word-break: normal;
    white-space: pre;
    border-radius: var(--border-radius);
    line-height: var(--line-height-sm);
}

.docs-content *:not(pre) > code {
    background-color: var(--color-light-grey);
    word-break: break-word;
    white-space: pre-wrap;
    border-radius: var(--border-radius);
    padding: var(--s-7) var(--s-5);
}

/* Table styles for docs content */
.docs-content table {
    border-collapse: collapse;
    width: 100%;
    margin: var(--s1) 0;
    border: 1px solid var(--bz-gray-light);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.docs-content table thead {
    background-color: var(--bz-light-grey);
}

.docs-content table th,
.docs-content table td {
    border: 1px solid var(--bz-gray-light);
    padding: var(--s-1) var(--s0);
    text-align: left;
}

.docs-content table th {
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--bz-dark-blue);
}

.docs-content table tbody tr:hover {
    background-color: var(--bz-light-grey);
}

/* Remove double borders at edges */
.docs-content table thead tr:first-child th {
    border-top: none;
}

.docs-content table tbody tr:last-child td {
    border-bottom: none;
}

.docs-content table th:first-child,
.docs-content table td:first-child {
    border-left: none;
}

.docs-content table th:last-child,
.docs-content table td:last-child {
    border-right: none;
}

/* Prevent article title from causing horizontal overflow on mobile */
.article-title {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.title-section {
    overflow: hidden;
}

/* ──────────────────────────────────────────────
   Docs Section Landing Pages
   ────────────────────────────────────────────── */

.docs-landing {
    padding-bottom: var(--s3);
}

.docs-landing-title {
    font-family: var(--font-header);
    font-size: 48px;
    line-height: 57px;
    color: var(--bz-dark-blue);
    margin-block-end: var(--s-1);
}

.docs-landing-intro {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: var(--bz-muted-ink);
    max-width: var(--measure);
}

.docs-landing-intro p {
    margin-block-end: var(--s-1);
}

/* Card grid */
.docs-landing-grid {
    padding-bottom: var(--s2);
}

/* Card link */
a.docs-landing-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--bz-radius-xl);
}

/* Card inner box */
box-l.docs-landing-card-inner {
    box-sizing: border-box; /* height: 100% + padding otherwise overflows into the grid gap */
    height: 100%;
    border: var(--bz-border-hairline) solid var(--bz-medium-green);
    border-radius: var(--bz-radius-xl);
    background: var(--bz-white);
    transition: var(--bz-transition);
}

a.docs-landing-card:hover box-l.docs-landing-card-inner {
    border-color: var(--bz-dark-med-green);
    box-shadow: var(--bz-shadow-soft);
}

/* Card header row (title + arrow) */
.docs-landing-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-1);
}

.docs-landing-card-title {
    font-family: var(--font-ui);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--bz-dark-blue);
    line-height: var(--line-height-sm);
    margin: 0;
}

/* Arrow icon */
.docs-landing-card-arrow {
    flex-shrink: 0;
    color: var(--bz-green);
    opacity: 0;
    transform: translateX(-4px);
    transition: var(--bz-transition);
}

a.docs-landing-card:hover .docs-landing-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Description text */
.docs-landing-card-desc {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--bz-muted-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Subsection meta (article count) */
.docs-landing-card-meta {
    font-size: var(--font-size-sm);
    color: var(--bz-muted-ink);
    margin: 0;
}

@media (max-width: 600px) {
    .docs-landing-title {
        font-size: 40px;
        line-height: 48px;
    }
}