@media (max-width: 1199px) {
    .site-header {
        background: var(--color-bg);
        backdrop-filter: none;
    }

    .brand,
    .nav-toggle {
        position: relative;
        z-index: 31;
    }

    .site-nav {
        min-height: 100vh;
        min-height: 100dvh;
        padding-top: 120px;
    }
}

@media (max-width: 767px) {
    .hero {
        padding: 44px 0 36px;
    }

    .page-hero {
        padding: 40px 0 44px;
    }

    .section {
        padding: 48px 0;
    }

    .section--cta {
        padding-top: 8px;
    }

    .section-heading {
        margin-bottom: 24px;
    }

    .button-row,
    .cta-band__actions {
        width: 100%;
        flex-direction: column;
    }

    .button-row .button,
    .cta-band__actions .button {
        width: 100%;
    }

    .feature-card,
    .pricing-card,
    .demo-form {
        padding: 20px;
    }

    .cta-band {
        padding: 28px 20px;
    }

    .integration-byo {
        padding: 20px;
    }

    .table-scroll__hint {
        display: block;
    }

    /* Keep the capability column in view while the plans scroll underneath it. */
    .pricing-table thead th:first-child,
    .pricing-table tbody th {
        position: sticky;
        left: 0;
        z-index: 1;
        box-shadow: 1px 0 0 var(--color-neutral-800);
    }

    .pricing-table thead th:first-child {
        background: var(--color-neutral-900);
    }

    .pricing-table tbody th {
        background: var(--color-bg);
    }

    .stat-band {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }

    .work-order-detail p {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 6px;
    }

    .doc-section {
        padding-block: 28px;
    }

    .doc-section:first-child {
        padding-top: 4px;
    }

    .status-component,
    .incident,
    .response-card,
    .library-card,
    .doc-card {
        padding: 20px;
    }

    .role-card__summary {
        padding: 18px;
    }

    .role-card__body {
        padding: 0 18px 20px;
    }

    .role-card__actions .button {
        width: 100%;
    }

    .role-card__meta {
        flex-direction: column;
        gap: 2px;
    }

    .role-card__meta span + span::before {
        content: none;
    }

    .status-component__header {
        flex-direction: column;
        gap: 10px;
    }

    /* Reference tables stack into one card per row instead of scrolling sideways. */
    .table-scroll:has(.doc-table) {
        overflow: visible;
    }

    .doc-table,
    .doc-table tbody,
    .doc-table tr,
    .doc-table td {
        display: block;
    }

    .doc-table {
        min-width: 0;
    }

    .doc-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .doc-table tr {
        padding: 14px 16px;
        border-bottom: 1px solid var(--color-neutral-800);
    }

    .doc-table tbody tr:last-child {
        border-bottom: 0;
    }

    .doc-table td {
        padding: 0;
        border: 0;
    }

    .doc-table td + td {
        margin-top: 6px;
    }

    .doc-table td:first-child {
        white-space: normal;
        color: var(--color-text);
    }

    .doc-table__required {
        display: inline;
        margin: 0 0 0 8px;
    }
}

@media (min-width: 768px) {
    .container { width: min(100% - 64px, var(--container)); }
    .card-grid--three,
    .use-case-grid,
    .integration-grid,
    .blog-grid,
    .values-grid,
    .team-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* An odd last card spans the row instead of leaving a hole beside it. */
    .use-case-grid > :last-child:nth-child(odd),
    .card-grid--three > :last-child:nth-child(odd),
    .integration-grid > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    .site-footer__grid {
        grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pricing-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc(50% - 8px);
        justify-self: center;
    }
    .demo-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .work-order-visual__columns {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .stat-band {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .company-origin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
    .section-heading--split {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
    .changelog-entry {
        display: grid;
        grid-template-columns: 150px minmax(0, 1fr);
        gap: 32px;
    }
    .changelog-entry__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding-top: 26px;
    }
    .changelog-list::before {
        content: "";
        position: absolute;
        left: 150px;
        top: 12px;
        bottom: 12px;
        width: 1px;
        margin-left: 16px;
        background: var(--color-neutral-800);
    }
    .changelog-entry::before {
        content: "";
        position: absolute;
        left: 150px;
        top: 32px;
        width: 9px;
        height: 9px;
        margin-left: 12px;
        border-radius: 50%;
        background: var(--color-neutral-700);
        box-shadow: 0 0 0 4px var(--color-bg);
    }
    .changelog-entry:first-child::before {
        background: var(--color-accent);
    }
    .doc-nav {
        margin-inline: -32px;
        padding-inline: 32px;
    }
    .doc-card-grid,
    .library-grid,
    .compliance-grid,
    .process-steps,
    .offer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .doc-card-grid > :last-child:nth-child(odd),
    .library-grid > :last-child:nth-child(odd),
    .compliance-grid > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    .concept-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
    }
    .example-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .endpoint-list__item {
        grid-template-columns: 62px minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 18px;
    }
    .endpoint-list__description {
        grid-column: auto;
    }
    .spec-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .spec-list > div:nth-child(odd) {
        border-right: 1px solid var(--color-neutral-800);
    }
    .spec-list > div:nth-last-child(2):nth-child(odd) {
        border-bottom: 0;
    }
    .fact-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .role-card__columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }
    .uptime__day:nth-child(-n+60) {
        display: block;
    }
    .uptime__range--long {
        display: inline;
    }
    .uptime__range--short {
        display: none;
    }
}

@media (min-width: 1200px) {
    .site-header {
        background: color-mix(in srgb, var(--color-bg) 88%, transparent);
        backdrop-filter: blur(10px);
    }
    .nav-toggle { display: none; }
    .site-nav {
        position: static;
        inset: auto;
        z-index: auto;
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        width: auto;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        overflow: visible;
    }
    .site-nav__links {
        flex-direction: row;
        align-items: center;
        gap: 2px;
        margin-left: 20px;
    }
    .site-nav__links a {
        min-height: 36px;
        padding: 8px 12px;
        border-bottom: none;
        border-radius: var(--radius-md);
        font-size: 14px;
        color: var(--color-neutral-300);
    }
    .site-nav__links a:hover {
        color: var(--color-text);
        background: color-mix(in srgb, var(--color-text) 6%, transparent);
    }
    .site-nav__links a.is-active {
        padding-left: 12px;
        color: var(--color-text);
        background: color-mix(in srgb, var(--color-accent) 12%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent);
    }
    .site-nav__actions {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin-top: 0;
    }
    .site-nav__actions .button {
        width: auto;
    }
    .section {
        padding: 88px 0;
    }
    .section--stats {
        padding: 44px 0;
    }
    .section--cta {
        padding-top: 16px;
    }
    .page-hero {
        padding: 88px 0 72px;
    }
    .hero__grid,
    .feature-split__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hero {
        padding: 96px 0 80px;
    }
    .hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
        gap: 56px;
        align-items: center;
    }
    .hero .work-order-visual__columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .feature-split {
        padding: 56px 0;
    }
    .feature-split + .feature-split .feature-split__grid {
        padding-top: 56px;
    }
    .feature-split__grid {
        gap: 72px;
        align-items: center;
    }
    .feature-split--reverse .feature-split__copy {
        order: 2;
    }
    .protocol-section {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 56px;
        align-items: center;
    }
    .protocol-section__copy .section-heading {
        margin-bottom: 20px;
    }
    .card-grid--three,
    .use-case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .use-case-grid > :last-child:nth-child(odd),
    .card-grid--three > :last-child:nth-child(odd),
    .integration-grid > :last-child:nth-child(odd) {
        grid-column: auto;
    }
    .demo-layout { grid-template-columns: minmax(0, .85fr) minmax(360px, 1.15fr); gap: 56px; }
    .blog-newsletter__form { max-width: 420px; }
    .use-case-grid > :last-child:nth-child(3n+1) {
        grid-column: 1 / -1;
    }
    .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pricing-card:last-child:nth-child(odd) {
        grid-column: auto;
        width: auto;
        justify-self: stretch;
    }
    .pricing-card--featured {
        margin-block: -12px;
        padding-block: 40px;
    }
    .faq-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .blog-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .blog-search { width: auto; flex: 0 1 380px; }
    .pricing-card--contact {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
        align-items: center;
        gap: 32px;
    }
    .pricing-card--contact .pricing-card__features { flex: none; }
    .article-card--featured.blog-card .article-card__copy { padding: 32px 36px 32px 0; }
    .article-card--featured.blog-card .blog-card__media img,
    .article-card--featured.blog-card .article-card__fallback { height: 100%; }
    .values-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .integration-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .integration-group:first-child .integration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .integration-byo,
    .article-card--featured {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
    }
    .integration-byo {
        gap: 48px;
        padding: 40px;
    }
    .article-card--featured {
        gap: 48px;
        padding: 44px;
    }
    .blog-newsletter,
    .cta-band {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .blog-newsletter {
        padding: 44px;
    }
    .cta-band {
        padding: 52px 48px;
    }
    .stat-band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .stat-band__item + .stat-band__item {
        padding-left: 28px;
        border-left: 1px solid color-mix(in srgb, var(--color-section-ghost) 70%, transparent);
    }
    .page-hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: 64px;
        align-items: center;
    }
    .page-hero--compact {
        padding: 72px 0 56px;
    }
    .section--doc {
        padding-top: 0;
    }
    .doc-layout {
        display: grid;
        grid-template-columns: 232px minmax(0, 1fr);
        gap: 72px;
        align-items: start;
        padding-top: 56px;
    }
    .doc-nav {
        top: calc(var(--header-height) + 32px);
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        max-height: calc(100vh - var(--header-height) - 64px);
        margin: 0;
        padding: 0 0 24px;
        overflow: hidden auto;
        background: none;
        border: 0;
        -webkit-mask-image: none;
        mask-image: none;
        scrollbar-width: thin;
    }
    .doc-nav__title {
        display: block;
        margin: 0;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--color-neutral-500);
    }
    .doc-nav__group {
        display: flex;
        flex-direction: column;
    }
    .doc-nav__heading {
        display: block;
        margin-bottom: 6px;
        font-size: var(--text-meta);
        font-weight: 500;
        color: var(--color-neutral-300);
    }
    .doc-nav__link,
    .doc-nav__group:last-child .doc-nav__link:last-child {
        min-height: 32px;
        margin: 0;
        padding: 6px 14px;
        border: 0;
        border-left: 1px solid var(--color-neutral-800);
        border-radius: 0;
        font-size: var(--text-small);
        white-space: normal;
    }
    .doc-nav__link:hover {
        border-left-color: var(--color-neutral-600);
    }
    .doc-nav__link.is-active {
        background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent);
        border-left-color: var(--color-accent);
        box-shadow: inset 1px 0 0 var(--color-accent);
    }
    .doc-nav__link--code {
        font-size: 13px;
    }
    .doc-section {
        padding-block: 44px;
        scroll-margin-top: calc(var(--header-height) + 24px);
    }
    .quickstart {
        gap: 40px;
    }
    .quickstart__step {
        grid-template-columns: 36px minmax(0, .85fr) minmax(0, 1.15fr);
        gap: 0 28px;
        align-items: start;
    }
    .quickstart__step .code-block {
        grid-column: 3;
        grid-row: 1;
    }
    .quickstart__step:not(:last-child)::before {
        bottom: -32px;
    }
    .doc-card-grid,
    .library-grid,
    .compliance-grid,
    .concept-grid,
    .offer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .doc-card-grid > :last-child:nth-child(odd),
    .library-grid > :last-child:nth-child(odd),
    .compliance-grid > :last-child:nth-child(odd) {
        grid-column: auto;
    }
    .process-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .disclosure {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        gap: 64px;
        align-items: center;
    }
    .incidents-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 48px;
    }
    .notify-card {
        position: sticky;
        top: calc(var(--header-height) + 32px);
        margin-top: 72px;
    }
    .role-card__summary {
        padding: 24px 28px;
    }
    .role-card__body {
        padding: 0 28px 28px;
    }
    .role-card__heading {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 16px;
        width: 100%;
    }
    .role-card__summary {
        gap: 24px;
    }
}

@media (min-width: 1600px) {
    .container--wide { width: min(100% - 96px, var(--container-wide)); }
}

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