/* WorkUnstuck site foundation */

:root,
[data-theme="light"] {
    color-scheme: light;
    --color-navy: #10233f;
    --color-navy-deep: #0b1728;
    --color-blue: #1f63e9;
    --color-blue-dark: #164db9;
    --color-blue-soft: #eaf1ff;
    --color-button-primary: #1f63e9;
    --color-button-primary-hover: #164db9;
    --color-green: #116b43;
    --color-green-soft: #e9f7f0;
    --color-red: #b84a42;
    --color-red-soft: #fff1ef;
    --color-red-border: #9c5b60;
    --color-red-pill: #f7d7d3;
    --color-red-step-border: #9c5b60;
    --color-warm: #a95425;
    --color-warm-soft: #fff8f1;
    --color-green-border: #5f8d74;
    --color-green-pill: #d4eddf;
    --color-text: #18263a;
    --color-muted: #5d6c7e;
    --color-bg: #ffffff;
    --color-bg-soft: #f5f7fa;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-border: #dce3eb;
    --color-border-strong: #7f8c9b;
    --color-header: rgba(255, 255, 255, 0.96);
    --color-focus: #8a4500;
    --color-focus-contrast: #ffffff;
    --shadow-soft: 0 16px 45px rgba(20, 35, 55, 0.1);
    --shadow-nav: 0 18px 45px rgba(15, 32, 55, 0.14);
    --radius-small: 0.625rem;
    --radius-medium: 0.875rem;
    --radius-large: 1.125rem;
    --radius-panel: 1.375rem;
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4.5rem;
    --space-8: 6.5rem;
    --container: 75rem;
    --reading: 43rem;
    --header-height: 5rem;
}

[data-theme="dark"] {
    color-scheme: dark;
    --color-navy: #f0f4fb;
    --color-navy-deep: #07111f;
    --color-blue: #82a9ff;
    --color-blue-dark: #a8c2ff;
    --color-blue-soft: #172d4d;
    --color-button-primary: #2862d7;
    --color-button-primary-hover: #326ad8;
    --color-green: #72d7a1;
    --color-green-soft: #123628;
    --color-green-border: #4f8c6d;
    --color-green-pill: #1e5039;
    --color-red: #ff9f97;
    --color-red-soft: #3b2326;
    --color-red-border: #a7666a;
    --color-red-pill: #5b3034;
    --color-red-step-border: #a7666a;
    --color-warm: #f2ad77;
    --color-warm-soft: #34271f;
    --color-text: #e4ebf3;
    --color-muted: #b2becc;
    --color-bg: #0b1728;
    --color-bg-soft: #101f33;
    --color-surface: #12243a;
    --color-surface-raised: #172b43;
    --color-border: #2b425b;
    --color-border-strong: #607b98;
    --color-header: rgba(11, 23, 40, 0.96);
    --color-focus: #ffc767;
    --color-focus-contrast: #0b1728;
    --shadow-soft: 0 16px 45px rgba(0, 0, 0, 0.28);
    --shadow-nav: 0 18px 45px rgba(0, 0, 0, 0.42);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}

body,
button,
a,
input,
textarea,
select {
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    display: block;
}

svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

a {
    color: inherit;
    text-decoration: none;
}

p,
h1,
h2,
h3 {
    margin-top: 0;
}

p:last-child {
    margin-bottom: 0;
}

button,
summary {
    font: inherit;
}

button {
    color: inherit;
}

::selection {
    background: var(--color-blue);
    color: #ffffff;
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--color-focus-contrast);
}

.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-small);
    background: var(--color-navy-deep);
    color: #ffffff;
    font-weight: 750;
    transform: translateY(-150%);
    transition: transform 160ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.container {
    width: min(var(--container), calc(100% - 2rem));
    margin-inline: auto;
}

.section {
    padding-block: clamp(4.5rem, 8vw, var(--space-8));
}

.section-soft {
    background: var(--color-bg-soft);
}

.eyebrow {
    margin-bottom: 1rem;
    color: var(--color-blue);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    line-height: 1.4;
    text-transform: uppercase;
}

h1,
h2,
h3 {
    color: var(--color-navy);
    font-weight: 800;
    text-wrap: balance;
}

h1 {
    max-width: 12ch;
    margin-bottom: 1.4rem;
    font-size: clamp(2.75rem, 5.8vw, 4.8rem);
    letter-spacing: -0.052em;
    line-height: 0.98;
}

h2 {
    margin-bottom: 1.2rem;
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: -0.038em;
    line-height: 1.05;
}

h3 {
    margin-bottom: 0.65rem;
    font-size: 1.2rem;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.section-heading {
    max-width: var(--reading);
    margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.section-heading-wide {
    max-width: 58rem;
}

.section-heading-centered {
    margin-inline: auto;
    text-align: center;
}

.section-heading > p:not(.eyebrow),
.hero-lede,
.bridge-copy,
.local-copy,
.founder-copy {
    color: var(--color-muted);
    font-size: 1.1rem;
}

.button {
    display: inline-flex;
    min-height: 2.875rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.72rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    font-size: 0.94rem;
    font-weight: 750;
    line-height: 1.2;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.button svg,
.text-link svg,
.card-link svg,
.solution-links > a > svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    background: var(--color-button-primary);
    color: #ffffff;
}

.button-primary:hover {
    background: var(--color-button-primary-hover);
}

.button-large {
    min-height: 3.25rem;
    padding-inline: 1.4rem;
    font-size: 1rem;
}

.button-light {
    background: #ffffff;
    color: #10233f;
}

.button-light:hover {
    background: #eaf1ff;
}

.text-link {
    display: inline-flex;
    min-height: 2.875rem;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-blue);
    font-weight: 750;
}

.text-link:hover,
.card-link:hover {
    color: var(--color-blue-dark);
}

/* Header and navigation */

.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-header);
    backdrop-filter: blur(12px);
}

.header-inner {
    display: flex;
    min-height: var(--header-height);
    align-items: center;
    gap: 1.5rem;
}

.brand {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
}

.brand-name {
    color: var(--color-navy);
    font-size: 1.36rem;
    font-weight: 850;
    letter-spacing: -0.045em;
    line-height: 1;
}

.brand-name span {
    color: var(--color-blue);
}

.brand-tagline {
    margin-top: 0.32rem;
    color: var(--color-muted);
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    order: 3;
}

.theme-toggle,
.menu-toggle {
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    cursor: pointer;
}

.theme-toggle {
    display: none;
    width: 2.375rem;
    height: 2.375rem;
    min-width: 2.375rem;
    min-height: 2.375rem;
    place-items: center;
    border-color: var(--color-border);
    background: var(--color-bg-soft);
}

.js .theme-toggle {
    display: grid;
}

.theme-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.theme-toggle-text {
    display: none;
}

.theme-icon-sun,
[data-theme="dark"] .theme-icon-moon {
    display: none;
}

[data-theme="dark"] .theme-icon-sun {
    display: block;
}

.menu-toggle {
    display: none;
    align-items: center;
    gap: 0.6rem;
    padding-inline: 0.75rem;
}

.menu-toggle-label {
    font-size: 0.9rem;
    font-weight: 750;
}

.menu-toggle-icon {
    display: grid;
    width: 1.25rem;
    gap: 0.25rem;
}

.menu-toggle-icon span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 160ms ease, opacity 160ms ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:first-child {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:last-child {
    transform: translateY(-6px) rotate(-45deg);
}

.site-nav {
    margin-left: auto;
}

.nav-list,
.dropdown-menu,
.manual-steps,
.report-rows,
.timeline-list,
.dashboard-card ul,
.process-list,
.footer-column ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.nav-item > a,
.nav-dropdown > summary {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.25rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    color: var(--color-text);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.nav-item > a:hover,
.nav-dropdown > summary:hover,
.nav-dropdown[open] > summary {
    background: var(--color-bg-soft);
    color: var(--color-blue);
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown > summary {
    cursor: pointer;
    list-style: none;
}

.nav-dropdown > summary::-webkit-details-marker {
    display: none;
}

.nav-dropdown > summary svg {
    width: 0.9rem;
    height: 0.9rem;
    transition: transform 160ms ease;
}

.nav-dropdown[open] > summary svg {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 0;
    width: max-content;
    min-width: 15.5rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-nav);
}

.dropdown-menu a {
    display: flex;
    min-height: 2.65rem;
    align-items: center;
    padding: 0.55rem 0.75rem;
    border-radius: 0.45rem;
    font-size: 0.92rem;
    font-weight: 650;
}

.dropdown-menu .deferred-link {
    display: flex;
    min-height: 2.65rem;
    align-items: center;
    padding: 0.55rem 0.75rem;
    color: var(--color-muted);
    font-size: 0.92rem;
    font-weight: 650;
    opacity: 0.72;
}

.dropdown-menu a:hover {
    background: var(--color-bg-soft);
    color: var(--color-blue);
}

.nav-cta {
    margin-left: 0.45rem;
}

.nav-theme {
    margin-left: 0.85rem;
}

/* Hero */

.hero {
    overflow: hidden;
    padding-block: clamp(3.8rem, 7vw, 6.5rem);
    border-bottom: 1px solid var(--color-border);
}

.hero-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.5rem, 4.5vw, 4rem);
    grid-template-columns: minmax(0, 0.88fr) minmax(33rem, 1.12fr);
}

.hero-copy {
    position: relative;
    z-index: 1;
}

.hero-lede {
    max-width: 43rem;
    margin-bottom: 1.7rem;
    font-size: 1.12rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1.25rem;
}

.location-line {
    display: flex;
    margin-top: 1.7rem;
    margin-bottom: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 650;
}

.location-line svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    color: var(--color-blue);
}

.location-line .location-separator {
    color: var(--color-border-strong);
}

.location-followup {
    display: inline-flex;
    gap: 0.35rem;
    white-space: nowrap;
}

@media (min-width: 48.01rem) {
    .location-line {
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

.hero-workflow {
    position: relative;
    display: grid;
    min-height: 31rem;
    align-items: center;
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1fr) 3.25rem minmax(0, 1.12fr);
}

.hero-workflow::before {
    position: absolute;
    z-index: -1;
    width: 34rem;
    height: 34rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-soft);
    content: "";
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.workflow-panel {
    padding: 1.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-soft);
}

.workflow-manual {
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
    transform: translateY(-0.75rem);
}

.workflow-automated {
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
    transform: translateY(0.75rem);
}

.workflow-label,
.comparison-label {
    margin-bottom: 0.9rem;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.workflow-label span {
    display: inline-flex;
    margin-right: 0.35rem;
    padding: 0.18rem 0.38rem;
    border-radius: 0.3rem;
    background: var(--color-red-pill);
    color: var(--color-red);
}

.workflow-automated .workflow-label,
.workflow-automated .workflow-label span {
    color: var(--color-green);
}

.workflow-automated .workflow-label span {
    background: var(--color-green-pill);
}

.manual-steps {
    display: grid;
    gap: 0.8rem;
}

.manual-steps li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
    font-size: 0.86rem;
    font-weight: 650;
}

.manual-steps b {
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--color-red-step-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-red);
    font-size: 0.68rem;
}

.manual-steps svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    color: var(--color-red);
}

.workflow-repeat {
    display: flex;
    margin-top: 1rem;
    margin-bottom: 0;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-red);
    font-size: 0.82rem;
    font-weight: 800;
}

.workflow-repeat svg {
    width: 1rem;
    height: 1rem;
}

.workflow-arrow {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-blue);
}

.workflow-arrow svg {
    width: 1.65rem;
    height: 1.65rem;
}

.report-window {
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
    background: var(--color-bg);
}

.report-header {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: space-between;
    padding-inline: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.78rem;
    font-weight: 750;
}

.status-dot {
    color: var(--color-green);
    font-size: 0.74rem;
}

.report-chart {
    display: flex;
    height: 8rem;
    align-items: end;
    gap: 0.45rem;
    padding: 1rem 1.1rem 0.65rem;
    border-bottom: 1px solid var(--color-border);
    background-image: linear-gradient(var(--color-border) 1px, transparent 1px);
    background-size: 100% 1.65rem;
}

.report-chart span {
    width: 16%;
    height: var(--bar-height);
    min-height: 0.75rem;
    border-radius: 0.2rem 0.2rem 0 0;
    background: var(--color-blue);
}

.report-chart span:nth-child(2n) {
    background: var(--color-green);
}

.report-rows {
    padding: 0.45rem 0.7rem 0.6rem;
}

.report-rows li {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block: 0.35rem;
    color: var(--color-muted);
    font-size: 0.75rem;
}

.report-rows strong {
    color: var(--color-text);
}

.workflow-success {
    display: flex;
    margin-top: 0.85rem;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-green);
    font-size: 0.82rem;
    font-weight: 800;
}

.workflow-success svg {
    width: 1.05rem;
    height: 1.05rem;
    padding: 0.15rem;
    border-radius: 50%;
    background: var(--color-green-soft);
}

/* Recognition cards */

.card-grid {
    display: grid;
    gap: 1rem;
}

.problem-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.problem-card {
    display: flex;
    min-height: 15.5rem;
    flex-direction: column;
    padding: clamp(1.35rem, 3vw, 1.75rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.problem-card:hover {
    border-color: var(--color-blue);
    transform: translateY(-3px);
}

.problem-card p {
    margin-bottom: 1.25rem;
    color: var(--color-muted);
    font-size: 1rem;
}

.icon-box {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    margin-bottom: 1.2rem;
    place-items: center;
    border-radius: 0.65rem;
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.icon-box svg {
    width: 1.35rem;
    height: 1.35rem;
}

.card-link {
    display: inline-flex;
    margin-top: auto;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-blue);
    font-size: 0.9rem;
    font-weight: 750;
}

/* Before and after */

.before-after {
    position: relative;
    display: grid;
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.comparison-side {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--color-border);
}

.comparison-before {
    border-radius: var(--radius-large) 0 0 var(--radius-large);
    background: var(--color-red-soft);
}

.comparison-after {
    border-left: 0;
    border-radius: 0 var(--radius-large) var(--radius-large) 0;
    background: var(--color-green-soft);
}

.comparison-heading {
    display: grid;
    margin-bottom: 1rem;
    gap: 0.2rem;
}

.comparison-heading h3 {
    margin: 0;
    font-size: clamp(1.3rem, 2.5vw, 1.65rem);
}

.comparison-before .comparison-label {
    margin: 0;
    color: var(--color-red);
}

.comparison-after .comparison-label {
    margin: 0;
    color: var(--color-green);
}

.comparison-side > p {
    max-width: 34rem;
    color: var(--color-muted);
}

.timeline-list {
    display: grid;
    margin-top: 1.8rem;
    gap: 0;
}

.timeline-list li {
    position: relative;
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.94rem;
    font-weight: 650;
}

.timeline-list li:not(:last-child)::after {
    position: absolute;
    top: 2rem;
    bottom: -0.25rem;
    left: 0.85rem;
    width: 1px;
    background: var(--color-border-strong);
    content: "";
}

.timeline-list span {
    display: grid;
    z-index: 1;
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-red);
    font-size: 0.7rem;
    font-weight: 800;
}

.comparison-transition {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    width: 3.6rem;
    height: 3.6rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-soft);
    color: var(--color-blue);
    transform: translate(-50%, -50%);
}

.comparison-transition svg {
    width: 1.5rem;
    height: 1.5rem;
}

.dashboard-card {
    overflow: hidden;
    margin-top: 1.8rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: 0 10px 30px rgba(20, 35, 55, 0.08);
}

.dashboard-top {
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-inline: 1rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.84rem;
    font-weight: 750;
}

.live-badge {
    padding: 0.25rem 0.45rem;
    border-radius: 999px;
    background: var(--color-green-soft);
    color: var(--color-green);
    font-size: 0.72rem;
}

.dashboard-body {
    display: grid;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1.2fr);
}

.mini-chart {
    display: flex;
    height: 7rem;
    align-items: end;
    gap: 0.35rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--color-border-strong);
}

.mini-chart i {
    width: 14%;
    height: 35%;
    border-radius: 0.2rem 0.2rem 0 0;
    background: var(--color-blue);
}

.mini-chart i:nth-child(2) { height: 52%; }
.mini-chart i:nth-child(3) { height: 42%; }
.mini-chart i:nth-child(4) { height: 72%; }
.mini-chart i:nth-child(5) { height: 61%; }
.mini-chart i:nth-child(6) { height: 88%; }

.dashboard-card ul {
    display: grid;
    gap: 0.7rem;
}

.dashboard-card li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    font-weight: 650;
}

.dashboard-card li svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-green);
}

.section-action {
    display: flex;
    margin-top: 2rem;
    align-items: center;
    gap: 1rem;
}

.section-action p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.94rem;
}

/* Bridge, solutions, capabilities */

.section-bridge {
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
    border-block: 1px solid var(--color-border);
    background: var(--color-navy-deep);
}

.bridge-grid {
    display: grid;
    align-items: start;
    gap: 2rem 5rem;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.section-bridge h2 {
    max-width: 13ch;
    margin: 0;
    color: #ffffff;
}

.section-bridge .eyebrow {
    color: #8ab0ff;
}

.bridge-copy {
    color: #c2cedd;
}

.split-heading {
    display: grid;
    align-items: start;
    gap: clamp(2rem, 6vw, 6rem);
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
}

.split-heading .section-heading {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
    margin-bottom: 0;
}

.solution-links {
    display: grid;
    border-block: 1px solid var(--color-border);
}

.solution-links > a {
    display: grid;
    min-height: 6.75rem;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    transition: background-color 160ms ease, color 160ms ease, padding 160ms ease;
}

.solution-links > a:last-child {
    border-bottom: 0;
}

.solution-links > a:hover {
    padding-left: 1.25rem;
    background: var(--color-warm-soft);
    color: var(--color-blue);
}

.solution-links span,
.solution-links strong,
.solution-links small {
    display: block;
}

.solution-links strong {
    color: var(--color-navy);
    font-size: 1.05rem;
    line-height: 1.3;
}

.solution-links small {
    margin-top: 0.45rem;
    color: var(--color-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.solution-links > a > svg {
    color: var(--color-blue);
}

.solution-links .frustration-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-warm-soft);
    color: var(--color-warm);
}

.frustration-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.capability-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.capability-card {
    display: flex;
    min-height: 7.5rem;
    align-items: center;
    gap: 0.9rem;
    padding: 1.15rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-navy);
    transition: border-color 160ms ease, transform 160ms ease;
}

a.capability-card:hover {
    border-color: var(--color-blue);
    transform: translateY(-2px);
}

.capability-card svg {
    width: 1.65rem;
    height: 1.65rem;
    flex: 0 0 auto;
    color: var(--color-blue);
}

.capability-card span,
.capability-card strong,
.capability-card small {
    display: block;
}

.capability-card strong {
    font-size: 0.98rem;
    line-height: 1.3;
}

.capability-card small {
    margin-top: 0.4rem;
    color: var(--color-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.capability-static {
    color: var(--color-muted);
}

.capability-static svg {
    color: var(--color-green);
}

/* Process */

.process-note {
    max-width: var(--reading);
    margin: 1.75rem auto 0;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.98rem;
    line-height: 1.6;
}

.process-list {
    position: relative;
    display: grid;
    gap: 1rem;
    counter-reset: steps;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.process-list::before {
    position: absolute;
    z-index: -1;
    top: 3.05rem;
    right: 10%;
    left: 10%;
    height: 1px;
    background: var(--color-border-strong);
    content: "";
}

.process-list li {
    position: relative;
    padding: 1.25rem;
    text-align: center;
}

.step-number {
    position: absolute;
    top: 0;
    right: 1rem;
    color: var(--color-border-strong);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.step-icon {
    display: grid;
    width: 3.75rem;
    height: 3.75rem;
    margin: 0 auto 1.35rem;
    place-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-blue);
}

.step-icon svg {
    width: 1.65rem;
    height: 1.65rem;
}

.process-list p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.94rem;
}

/* Local and founder */

.section-local {
    border-block: 1px solid var(--color-border);
    background: var(--color-bg-soft);
}

.local-grid,
.founder-grid {
    display: grid;
    align-items: center;
    gap: clamp(3rem, 8vw, 7rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.local-copy h2,
.founder-copy h2 {
    max-width: 17ch;
}

.map-card {
    position: relative;
    min-height: 27rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background-color: var(--color-surface);
    background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
    box-shadow: var(--shadow-soft);
}

.map-ring {
    position: absolute;
    border: 1px solid var(--color-blue);
    border-radius: 50%;
    opacity: 0.28;
}

.map-ring-one {
    width: 15rem;
    height: 15rem;
    top: 4rem;
    left: 3rem;
}

.map-ring-two {
    width: 24rem;
    height: 24rem;
    top: -0.5rem;
    left: -1.5rem;
}

.map-pin {
    position: absolute;
    top: 10.2rem;
    left: 9.2rem;
    display: grid;
    width: 3.75rem;
    height: 3.75rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-button-primary);
    box-shadow: 0 0 0 0.75rem var(--color-blue-soft);
    color: #ffffff;
}

.map-pin svg {
    width: 1.7rem;
    height: 1.7rem;
}

.map-label,
.remote-label {
    position: absolute;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 0.45rem;
    background: var(--color-surface-raised);
    box-shadow: 0 6px 18px rgba(20, 35, 55, 0.1);
    color: var(--color-navy);
    font-size: 0.78rem;
    font-weight: 750;
}

.map-label-turlock { top: 14.4rem; left: 8.8rem; }
.map-label-modesto { top: 6rem; left: 5rem; }
.map-label-merced { top: 19.2rem; left: 14.5rem; }

.remote-line {
    position: absolute;
    top: 12.1rem;
    right: 1.7rem;
    width: 7rem;
    border-top: 2px dashed var(--color-green);
    transform: rotate(-12deg);
}

.remote-label {
    right: 1.2rem;
    bottom: 5.5rem;
    border-color: var(--color-green);
    color: var(--color-green);
}

.area-links {
    display: flex;
    margin-top: 1.75rem;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.area-links a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding-inline: 0.95rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
    color: var(--color-blue);
    font-size: 0.85rem;
    font-weight: 750;
}

.area-links a:hover {
    border-color: var(--color-blue);
    background: var(--color-blue-soft);
}

.founder-statement {
    max-width: 36rem;
    margin-bottom: 1.4rem;
    padding-left: 1.25rem;
    border-left: 3px solid var(--color-blue);
    color: var(--color-navy);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 750;
    line-height: 1.4;
}

.credibility-flow {
    position: relative;
    display: grid;
    margin: 0;
    padding: 0;
    gap: 1.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
}

.credibility-flow li {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.credibility-flow li:not(:last-child)::after {
    position: absolute;
    top: 1.55rem;
    right: -1.3rem;
    color: var(--color-blue);
    content: "→";
    font-size: 1.35rem;
    font-weight: 700;
}

.credibility-icon {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.85rem;
    place-items: center;
    border: 1px solid var(--color-blue);
    border-radius: 50%;
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.credibility-icon svg {
    width: 1.45rem;
    height: 1.45rem;
}

.credibility-step {
    margin-bottom: 0.35rem;
    color: var(--color-blue);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.credibility-flow strong {
    color: var(--color-navy);
    font-size: 0.96rem;
    line-height: 1.3;
}

.credibility-flow small {
    margin-top: 0.5rem;
    color: var(--color-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* Closing CTA and footer */

.final-cta {
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background: #0b1c32;
    color: #ffffff;
}

.final-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem 4rem;
}

.final-cta .eyebrow {
    color: #8ab0ff;
}

.final-cta h2 {
    max-width: 17ch;
    margin-bottom: 1rem;
    color: #ffffff;
}

.final-cta p:not(.eyebrow) {
    max-width: 43rem;
    color: #c2cedd;
}

.final-cta .button {
    flex: 0 0 auto;
}

.site-footer {
    padding-top: 4rem;
    background: #071322;
    color: #b8c5d5;
}

.footer-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(15rem, 1.5fr) repeat(3, minmax(9rem, 1fr));
}

.brand-footer .brand-name {
    color: #ffffff;
}

.brand-footer .brand-tagline {
    color: #97a8bb;
}

.footer-intro p {
    max-width: 21rem;
    margin-top: 1.25rem;
    color: #97a8bb;
    font-size: 0.94rem;
}

/* The tap target is 44px so a phone number is actually usable on a phone. */
.footer-phone {
    margin-top: 0.85rem;
}

.footer-phone a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    color: #b8c5d5;
    font-size: 1rem;
}

.footer-phone a:hover {
    color: #ffffff;
}

.footer-column h2 {
    margin-bottom: 1rem;
    color: #ffffff;
    font-size: 0.94rem;
    letter-spacing: 0;
}

.footer-column ul {
    display: grid;
    gap: 0.5rem;
}

.footer-column a {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    color: #b8c5d5;
    font-size: 0.88rem;
}

.footer-column .deferred-link {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    color: #8394a9;
    font-size: 0.88rem;
    opacity: 0.72;
}

.footer-column a:hover {
    color: #ffffff;
}

.footer-bottom {
    margin-top: 3rem;
    padding-block: 1.4rem;
    border-top: 1px solid #213249;
}

.footer-bottom p {
    margin: 0;
    color: #8394a9;
    font-size: 0.8rem;
}

.back-to-top {
    position: fixed;
    z-index: 90;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: grid;
    width: 3.1rem;
    height: 3.1rem;
    padding: 0;
    place-items: center;
    border: 1px solid var(--color-blue);
    border-radius: 50%;
    background: var(--color-button-primary);
    box-shadow: var(--shadow-soft);
    color: #ffffff;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.75rem);
    visibility: hidden;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease, background-color 160ms ease;
}

.back-to-top:hover {
    background: var(--color-button-primary-hover);
    transform: translateY(-1px);
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
}

.back-to-top svg {
    width: 1.35rem;
    height: 1.35rem;
    stroke-width: 2.2;
}

/* Shared inner-page patterns */

.breadcrumbs {
    padding-top: 1.5rem;
}

.breadcrumbs ol {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    color: var(--color-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.breadcrumbs li:not(:last-child)::after {
    margin-left: 0.4rem;
    color: var(--color-border-strong);
    content: "/";
}

.breadcrumbs a:hover {
    color: var(--color-blue);
}

.page-hero {
    padding-block: clamp(3.25rem, 7vw, 5.5rem);
    border-bottom: 1px solid var(--color-border);
}

.page-hero-inner {
    max-width: 57rem;
    margin-inline: auto;
    text-align: center;
}

.page-hero h1 {
    max-width: none;
    margin-inline: auto;
    font-size: clamp(2.8rem, 6vw, 4.4rem);
}

.page-hero-lede {
    max-width: 50rem;
    margin: 0 auto 1rem;
    color: var(--color-text);
    font-size: clamp(1.15rem, 2.2vw, 1.35rem);
    font-weight: 650;
    line-height: 1.55;
}

.page-hero-supporting {
    max-width: 43rem;
    margin-inline: auto;
    color: var(--color-muted);
    font-size: 1.03rem;
}

.content-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-card {
    display: flex;
    min-width: 0;
    gap: 1rem;
    padding: 1.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
}

a.content-card:hover {
    border-color: var(--color-blue);
    background: var(--color-blue-soft);
}

.content-card-icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    place-items: center;
    border-radius: var(--radius-small);
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.content-card-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.content-card h3 {
    margin-bottom: 0.3rem;
    font-size: 1.02rem;
}

.content-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.91rem;
    line-height: 1.5;
}

.related-pages {
    padding: 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-bg-soft);
}

.related-pages h2 {
    font-size: 1.5rem;
}

.related-pages ul {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 0.75rem;
    list-style: none;
}

.related-pages a,
.related-pages a span {
    display: block;
}

.related-pages a {
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.related-pages a:hover {
    border-color: var(--color-blue);
}

.related-pages a span {
    margin-top: 0.2rem;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.shared-cta .final-cta-inner {
    justify-content: center;
    text-align: center;
}

.shared-cta h2,
.shared-cta p:not(.eyebrow) {
    margin-inline: auto;
}

/* Show Me the Task */

.task-intake {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.task-intake-grid {
    display: grid;
    align-items: start;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 1.65fr) minmax(17rem, 0.65fr);
}

.task-form-card {
    padding: clamp(1.4rem, 4vw, 2.75rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-soft);
}

.task-form-heading {
    position: relative;
    margin-bottom: 2rem;
    padding-right: 7rem;
}

.task-form-heading h2 {
    max-width: 18ch;
    margin-bottom: 0.75rem;
    font-size: clamp(1.85rem, 3vw, 2.55rem);
}

.task-form-heading > p:not(.eyebrow) {
    max-width: 38rem;
    margin-bottom: 0;
    color: var(--color-muted);
}

.task-form-heading .required-note {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--color-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.required-note span {
    color: var(--color-red);
}

.form-grid {
    display: grid;
    gap: 1.35rem 1.15rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-field {
    min-width: 0;
}

.form-field-full {
    grid-column: 1 / -1;
}

.form-field label {
    display: flex;
    margin-bottom: 0.45rem;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--color-navy);
    font-size: 0.94rem;
    font-weight: 750;
}

.field-status {
    color: var(--color-red);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.field-status-optional {
    color: var(--color-muted);
}

.form-field input,
.form-field textarea {
    width: 100%;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
}

.form-field input {
    min-height: 3.15rem;
    padding: 0.7rem 0.85rem;
}

.form-field textarea {
    display: block;
    min-height: 8rem;
    padding: 0.8rem 0.85rem;
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--color-muted);
    opacity: 0.82;
}

.form-field input:hover,
.form-field textarea:hover {
    border-color: var(--color-blue);
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: var(--color-blue);
}

.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
    border-color: var(--color-red);
    background: var(--color-red-soft);
}

.form-field input:-webkit-autofill,
.form-field textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--color-text);
    box-shadow: 0 0 0 1000px var(--color-surface) inset;
    caret-color: var(--color-text);
}

.field-help,
.field-error {
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
}

.field-help {
    color: var(--color-muted);
}

.field-error {
    color: var(--color-red);
    font-weight: 700;
}

.form-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-submit-row {
    display: flex;
    margin-top: 1.75rem;
    align-items: center;
    gap: 1rem 1.4rem;
}

.form-submit-row p {
    max-width: 24rem;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.submit-working {
    display: none;
}

.task-form.is-submitting [data-submit-default] {
    display: none;
}

.task-form.is-submitting .submit-working {
    display: inline;
}

.task-form.is-submitting [data-submit-button] {
    cursor: wait;
    opacity: 0.75;
}

.form-message {
    display: flex;
    margin-bottom: 1.75rem;
    gap: 1rem;
    padding: 1.15rem;
    border: 1px solid;
    border-radius: var(--radius-medium);
}

.form-message-success {
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.form-message-error {
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
}

.form-message-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
}

.form-message-success .form-message-icon {
    color: var(--color-green);
}

.form-message-error .form-message-icon {
    color: var(--color-red);
}

.form-message-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.form-message h3 {
    margin-bottom: 0.25rem;
    font-size: 1.05rem;
}

.form-message p {
    margin: 0;
}

.form-message ul {
    margin: 0.6rem 0 0;
    padding-left: 1.2rem;
}

.form-message a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.task-next-step {
    padding-top: 1rem;
}

.task-next-step h2 {
    margin-bottom: 1.75rem;
    font-size: clamp(1.7rem, 3vw, 2.25rem);
}

.task-next-step ol {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 1.25rem;
    list-style: none;
}

.task-next-step li {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 2.25rem minmax(0, 1fr);
}

.task-next-step li > span {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid var(--color-blue);
    border-radius: 50%;
    color: var(--color-blue);
    font-size: 0.78rem;
    font-weight: 850;
}

.task-next-step li p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.93rem;
    line-height: 1.55;
}

.task-next-step li strong {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--color-navy);
}

.task-examples .section-heading {
    margin-bottom: 2.25rem;
}

/* Feasibility and support */

.feasibility-section {
    border-block: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.feasibility-shell {
    display: grid;
    gap: 2rem;
}

.feasibility-heading {
    max-width: 52rem;
}

.feasibility-heading h2 {
    max-width: 15ch;
}

.feasibility-heading > p:not(.eyebrow) {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 1.05rem;
}

.feasibility-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feasibility-grid article {
    min-width: 0;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-soft);
}

.feasibility-grid article > span,
.feasibility-compact-icon,
.feasibility-runtime > span {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.feasibility-grid svg,
.feasibility-compact-icon svg,
.feasibility-runtime svg {
    width: 1.3rem;
    height: 1.3rem;
}

.feasibility-grid h3,
.feasibility-runtime h3 {
    font-size: 1.1rem;
}

.feasibility-grid p,
.feasibility-runtime p,
.feasibility-compact-copy > p:not(.eyebrow) {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.feasibility-runtime {
    display: grid;
    align-items: start;
    gap: 1rem;
    padding: 1.35rem clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--radius-medium);
    background: var(--color-navy-deep);
    grid-template-columns: auto minmax(0, 1fr);
}

.feasibility-runtime > span {
    margin: 0;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.feasibility-runtime h3 {
    margin-bottom: 0.35rem;
    color: #ffffff;
}

.feasibility-runtime p {
    color: #c5d1df;
}

.feasibility-compact-section {
    padding-block: clamp(3rem, 6vw, 4.5rem);
    border-block: 1px solid var(--color-border);
}

.feasibility-compact {
    display: grid;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-soft);
    grid-template-columns: auto minmax(0, 1fr) minmax(11rem, auto);
}

.feasibility-compact-icon {
    width: 3rem;
    height: 3rem;
    margin: 0;
}

.feasibility-compact-copy .eyebrow {
    margin-bottom: 0.35rem;
}

.feasibility-compact-copy h2 {
    margin-bottom: 0.65rem;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
}

.feasibility-compact-copy > p + p {
    margin-top: 0.5rem;
}

.feasibility-compact-link {
    justify-self: end;
    text-align: right;
}

/* Reusable service-page patterns */

.service-hero {
    overflow: hidden;
    padding-block: clamp(3.5rem, 7vw, 6rem);
    border-bottom: 1px solid var(--color-border);
}

.service-hero-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
    grid-template-columns: minmax(0, 1.08fr) minmax(28rem, 0.92fr);
}

.service-hero h1 {
    max-width: 18ch;
    font-size: clamp(2.8rem, 4.3vw, 3.85rem);
}

.service-hero-copy > p:not(.eyebrow) {
    max-width: 43rem;
    color: var(--color-muted);
}

.service-hero-lede {
    margin-bottom: 1rem;
    color: var(--color-text) !important;
    font-size: clamp(1.08rem, 2vw, 1.22rem);
    font-weight: 650;
    line-height: 1.58;
}

.service-hero-actions {
    display: flex;
    margin-top: 1.75rem;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.service-hero-visual {
    position: relative;
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) 2.8rem minmax(0, 1.05fr);
}

.service-hero-visual::before {
    position: absolute;
    z-index: -1;
    width: 31rem;
    height: 31rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-soft);
    content: "";
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.service-flow-manual,
.service-flow-automated {
    min-width: 0;
    padding: 1.3rem;
    border: 1px solid;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
}

.service-flow-manual {
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
}

.service-flow-automated {
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.service-flow-manual > p,
.service-flow-automated > p {
    margin-bottom: 1rem;
    color: var(--color-muted);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.065em;
    line-height: 1.45;
    text-transform: uppercase;
}

.service-flow-manual > p span,
.service-flow-automated > p span {
    display: inline-flex;
    margin-right: 0.3rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.3rem;
}

.service-flow-manual > p span {
    background: var(--color-red-pill);
    color: var(--color-red);
}

.service-flow-automated > p span {
    background: var(--color-green-pill);
    color: var(--color-green);
}

.service-flow-manual ul,
.service-flow-automated ol,
.human-control-panel ul,
.signal-list,
.automated-example-list,
.tool-map ul,
.fit-option ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-flow-manual ul,
.service-flow-automated ol {
    display: grid;
    gap: 0.65rem;
}

.service-flow-manual li {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.service-flow-manual li svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    color: var(--color-red);
}

.service-flow-automated li {
    display: grid;
    min-height: 2.4rem;
    align-items: center;
    gap: 0.55rem;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    font-size: 0.83rem;
}

.service-flow-automated li > span {
    display: grid;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    border: 1px solid var(--color-green-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-green);
    font-size: 0.65rem;
    font-weight: 850;
}

.service-flow-review {
    display: flex;
    margin-top: 1rem;
    align-items: flex-start;
    gap: 0.55rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-green-border);
    color: var(--color-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.service-flow-review svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    margin-top: 0.15rem;
    color: var(--color-green);
}

.service-flow-review strong {
    color: var(--color-text);
}

.service-flow-arrow {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-soft);
    color: var(--color-blue);
}

.service-flow-arrow svg {
    width: 1.25rem;
    height: 1.25rem;
}

.service-definition-grid,
.service-technology-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.5rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.72fr);
}

.service-definition .section-heading,
.service-technology .section-heading,
.service-fit .section-heading {
    margin-bottom: 1.5rem;
}

.service-reading-copy {
    max-width: var(--reading);
    color: var(--color-muted);
    font-size: 1.05rem;
}

.human-control-panel {
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-bg-soft);
}

.human-control-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.25rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.human-control-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.human-control-panel h3 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

.human-control-panel > p {
    color: var(--color-muted);
    font-size: 0.95rem;
}

.human-control-panel ul {
    display: grid;
    margin-top: 1.25rem;
    gap: 0.65rem;
}

.human-control-panel li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.human-control-panel li svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-green);
}

.signal-list {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.signal-list li {
    display: grid;
    min-width: 0;
    gap: 1rem;
    padding: 1.4rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 2.6rem minmax(0, 1fr);
}

.signal-list li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.signal-list li > span {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-blue);
}

.signal-list li > span svg {
    width: 1.2rem;
    height: 1.2rem;
}

.signal-list p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.94rem;
    line-height: 1.5;
}

.signal-list strong {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--color-navy);
}

.service-example {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.automated-example-list {
    display: grid;
    margin-top: 1.8rem;
    gap: 0.75rem;
}

.automated-example-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.automated-example-list li svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 1.1rem;
    margin-top: 0.15rem;
    color: var(--color-green);
}

.automated-example-list strong {
    color: var(--color-text);
}

.automated-example-list .human-review-step {
    border-style: dashed;
}

.automated-example-list .human-review-step svg {
    color: var(--color-blue);
}

.service-scope-grid .content-card {
    align-items: flex-start;
}

.service-technology-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(24rem, 1.18fr);
}

.tool-map {
    display: grid;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-bg-soft);
}

.tool-map-start,
.tool-map-result {
    justify-self: center;
    margin: 0;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-small);
    font-size: 0.88rem;
    font-weight: 800;
}

.tool-map-start {
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-navy);
}

.tool-map-arrow {
    width: 1.3rem;
    height: 1.3rem;
    margin: 0.8rem auto;
    color: var(--color-blue);
    transform: rotate(90deg);
}

.tool-map ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.tool-map li {
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.tool-map-result {
    display: inline-flex;
    margin-top: 1rem;
    align-items: center;
    gap: 0.45rem;
    background: var(--color-green-soft);
    color: var(--color-green);
}

.tool-map-result svg {
    width: 1rem;
    height: 1rem;
}

.service-fit-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.fit-option {
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.fit-custom {
    border-color: var(--color-blue);
    background: var(--color-blue-soft);
}

.fit-label {
    margin-bottom: 0.65rem;
    color: var(--color-blue);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fit-option h3 {
    max-width: 24ch;
    margin-bottom: 1.25rem;
    font-size: clamp(1.25rem, 2.4vw, 1.65rem);
}

.fit-option ul {
    display: grid;
    gap: 0.8rem;
}

.fit-option li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--color-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.fit-option li svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 1.05rem;
    margin-top: 0.2rem;
    color: var(--color-green);
}

.service-related-inner {
    max-width: 58rem;
}

.service-related .related-pages {
    background: var(--color-surface);
}

.service-related .related-pages ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Custom business software service patterns */

.custom-software-hero-grid {
    gap: clamp(2.75rem, 5vw, 4.5rem);
    grid-template-columns: minmax(0, 0.94fr) minmax(30rem, 1.06fr);
}

.custom-software-hero h1 {
    max-width: 15ch;
}

.custom-gap-visual {
    position: relative;
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
    grid-template-columns: minmax(0, 0.88fr) 2.8rem minmax(0, 1.12fr);
}

.custom-gap-visual::before {
    position: absolute;
    z-index: -1;
    width: 31rem;
    height: 31rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-soft);
    content: "";
    inset: 50% auto auto 52%;
    transform: translate(-50%, -50%);
}

.workaround-stack,
.focused-tool {
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
}

.workaround-stack {
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
}

.focused-tool {
    overflow: hidden;
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.workaround-stack > p,
.focused-tool > p:not(.focused-tool-note) {
    margin-bottom: 0.9rem;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1.45;
    text-transform: uppercase;
}

.workaround-stack > p span,
.focused-tool > p span {
    display: inline-flex;
    margin-right: 0.3rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.3rem;
}

.workaround-stack > p span {
    background: var(--color-red-pill);
    color: var(--color-red);
}

.focused-tool > p span {
    background: var(--color-green-pill);
    color: var(--color-green);
}

.workaround-stack ul,
.focused-tool-screen ul,
.small-software-section ul,
.custom-tool-types,
.keep-options,
.companion-existing {
    margin: 0;
    padding: 0;
    list-style: none;
}

.workaround-stack ul {
    display: grid;
    gap: 0.6rem;
}

.workaround-stack li {
    display: flex;
    min-height: 2.3rem;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-red-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    font-size: 0.76rem;
    font-weight: 750;
}

.workaround-stack li:nth-child(2) {
    transform: translateX(0.35rem);
}

.workaround-stack li:nth-child(3) {
    transform: translateX(-0.2rem);
}

.workaround-stack li:nth-child(4) {
    transform: translateX(0.2rem);
}

.workaround-stack li svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    color: var(--color-red);
}

.custom-gap-arrow {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-soft);
    color: var(--color-blue);
}

.custom-gap-arrow svg {
    width: 1.25rem;
    height: 1.25rem;
}

.focused-tool-bar {
    display: flex;
    margin: -1.25rem -1.25rem 1rem;
    gap: 0.3rem;
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--color-green-border);
    background: var(--color-surface);
}

.focused-tool-bar i {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--color-border-strong);
}

.focused-tool-screen {
    padding: 0.9rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.focused-tool-screen > strong {
    display: block;
    margin-bottom: 0.7rem;
    color: var(--color-navy);
    font-size: 0.8rem;
}

.focused-tool-screen ul {
    display: grid;
    gap: 0.5rem;
}

.focused-tool-screen li {
    display: grid;
    gap: 0.1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.7rem;
}

.focused-tool-screen li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.focused-tool-screen span {
    color: var(--color-muted);
}

.focused-tool-screen b {
    color: var(--color-green);
    font-size: 0.72rem;
}

.focused-tool-note {
    display: flex;
    margin-top: 0.8rem;
    align-items: flex-start;
    gap: 0.45rem;
    color: var(--color-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.focused-tool-note svg {
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 0.9rem;
    margin-top: 0.1rem;
    color: var(--color-green);
}

.software-gap-grid,
.keep-what-works-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.92fr) minmax(24rem, 1.08fr);
}

.software-gap-section .section-heading,
.keep-what-works-section .section-heading {
    margin-bottom: 1.5rem;
}

.workflow-gap-map {
    display: grid;
    justify-items: center;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-bg-soft);
}

.workflow-gap-system,
.workflow-gap-answer {
    display: flex;
    width: min(100%, 21rem);
    min-height: 4.2rem;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.workflow-gap-system {
    border: 1px solid var(--color-border-strong);
}

.workflow-gap-answer {
    position: relative;
    margin-top: 1.2rem;
    border: 1px solid var(--color-green-border);
    background: var(--color-green-soft);
}

.workflow-gap-answer::before {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 1.2rem;
    background: var(--color-border-strong);
    content: "";
    transform: translateX(-50%);
}

.workflow-gap-system svg,
.workflow-gap-answer svg {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    color: var(--color-blue);
}

.workflow-gap-answer svg {
    color: var(--color-green);
}

.workflow-gap-system span,
.workflow-gap-answer span {
    color: var(--color-navy);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.3;
}

.workflow-gap-system small,
.workflow-gap-answer small {
    display: block;
    margin-bottom: 0.1rem;
    color: var(--color-blue);
    font-size: 0.65rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.workflow-gap-answer small {
    color: var(--color-green);
}

.workflow-gap-line {
    width: 1px;
    height: 1.2rem;
    background: var(--color-border-strong);
}

.workflow-gap-workarounds {
    width: min(100%, 26rem);
    padding: 1rem;
    border: 1px dashed var(--color-red-border);
    border-radius: var(--radius-small);
    background: var(--color-red-soft);
}

.workflow-gap-workarounds p {
    margin-bottom: 0.7rem;
    color: var(--color-red);
    font-size: 0.75rem;
    font-weight: 800;
}

.workflow-gap-workarounds ul {
    display: flex;
    margin: 0;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    list-style: none;
}

.workflow-gap-workarounds li {
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-red-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.signals-caution {
    max-width: 51rem;
    margin: 1.5rem 0 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    font-style: italic;
}

.small-software-section {
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background: #0b1c32;
    color: #c2cedd;
}

.small-software-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 8vw, 7rem);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.small-software-section .eyebrow {
    color: #8ab0ff;
}

.small-software-section h2 {
    color: #ffffff;
}

.small-software-statement {
    max-width: 34rem;
    color: #ffffff;
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    font-weight: 750;
    line-height: 1.45;
}

.small-software-grid > div:last-child > p {
    margin-bottom: 1.2rem;
}

.small-software-section ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.small-software-section li {
    padding: 0.45rem 0.7rem;
    border: 1px solid #49627f;
    border-radius: 999px;
    background: #102945;
    color: #dce6f2;
    font-size: 0.8rem;
    font-weight: 700;
}

.custom-software-example {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.custom-types-layout {
    display: grid;
    align-items: start;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
}

.custom-types-heading {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}

.custom-types-heading h2 {
    font-size: clamp(2rem, 3.7vw, 3rem);
}

.custom-types-heading > p:not(.eyebrow) {
    color: var(--color-muted);
}

.custom-tool-types {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.custom-tool-types li {
    display: grid;
    min-width: 0;
    gap: 0.8rem;
    padding: 1.1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 1.4rem minmax(0, 1fr);
}

.custom-tool-types li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.custom-tool-types svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    color: var(--color-blue);
}

.custom-tool-types strong,
.custom-tool-types span {
    display: block;
}

.custom-tool-types strong {
    margin-bottom: 0.15rem;
    color: var(--color-navy);
    font-size: 0.94rem;
}

.custom-tool-types span {
    color: var(--color-muted);
    font-size: 0.83rem;
    line-height: 1.45;
}

.keep-options {
    display: grid;
    margin-top: 1.5rem;
    gap: 0.65rem 1.2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.keep-options li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.keep-options svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    margin-top: 0.23rem;
    color: var(--color-green);
}

.keep-what-works-statement {
    margin-top: 1.5rem;
    color: var(--color-navy);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 800;
}

.companion-tool-map {
    display: grid;
    justify-items: center;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-bg-soft);
}

.companion-map-label {
    margin-bottom: 1rem;
    color: var(--color-blue);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.companion-existing {
    display: grid;
    width: 100%;
    gap: 0.6rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.companion-existing span {
    display: grid;
    min-height: 5.2rem;
    place-items: center;
    gap: 0.45rem;
    padding: 0.7rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-navy);
    font-size: 0.75rem;
    font-weight: 750;
    text-align: center;
}

.companion-existing svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-blue);
}

.companion-connectors {
    display: grid;
    width: 69%;
    height: 2.1rem;
    grid-template-columns: repeat(3, 1fr);
}

.companion-connectors i {
    position: relative;
    border-bottom: 1px solid var(--color-border-strong);
}

.companion-connectors i::after {
    position: absolute;
    bottom: -2.1rem;
    left: 50%;
    width: 1px;
    height: 2.1rem;
    background: var(--color-border-strong);
    content: "";
}

.companion-focus {
    display: flex;
    min-width: min(100%, 19rem);
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-green-soft);
}

.companion-focus svg {
    width: 1.45rem;
    height: 1.45rem;
    color: var(--color-green);
}

.companion-focus span {
    color: var(--color-navy);
    font-size: 0.88rem;
    font-weight: 800;
}

.companion-focus small {
    display: block;
    color: var(--color-green);
    font-size: 0.65rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.companion-map-result {
    display: flex;
    margin-top: 1rem;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-muted);
    font-size: 0.76rem;
    font-weight: 700;
    text-align: center;
}

.companion-map-result svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    color: var(--color-green);
}

.software-technology .section-heading {
    margin-bottom: 1.25rem;
}

.software-approaches > div:last-child {
    grid-column: 1 / -1;
    border-right: 0;
}

.custom-software-related-inner {
    max-width: 72rem;
}

.custom-software-related .related-pages {
    background: var(--color-bg-soft);
}

.custom-software-related .related-pages ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Reusable problem-page patterns */

.problem-hero {
    overflow: hidden;
    padding-block: clamp(3.5rem, 7vw, 6rem);
    border-bottom: 1px solid var(--color-border);
}

.problem-hero-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 6vw, 5rem);
    grid-template-columns: minmax(0, 0.98fr) minmax(29rem, 1.02fr);
}

.problem-hero h1 {
    max-width: 15ch;
    font-size: clamp(2.8rem, 4.6vw, 4.15rem);
}

.problem-hero-copy > p:not(.eyebrow) {
    max-width: 42rem;
    color: var(--color-muted);
}

.problem-hero-lede {
    margin-bottom: 1rem;
    color: var(--color-text) !important;
    font-size: clamp(1.12rem, 2vw, 1.27rem);
    font-weight: 650;
    line-height: 1.58;
}

.problem-hero-actions {
    display: flex;
    margin-top: 1.75rem;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.repetition-visual {
    position: relative;
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1.08fr) 2.8rem minmax(0, 0.92fr);
}

.repetition-visual::before {
    position: absolute;
    z-index: -1;
    width: 31rem;
    height: 31rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-soft);
    content: "";
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.repetition-current,
.repetition-simplified {
    min-width: 0;
    padding: 1.3rem;
    border: 1px solid;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
}

.repetition-current {
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
}

.repetition-simplified {
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.repetition-current > p:first-child,
.repetition-simplified > p:first-child {
    margin-bottom: 0.9rem;
    color: var(--color-muted);
    font-size: 0.73rem;
    font-weight: 850;
    letter-spacing: 0.065em;
    line-height: 1.45;
    text-transform: uppercase;
}

.repetition-current > p:first-child span,
.repetition-simplified > p:first-child span {
    display: inline-flex;
    margin-right: 0.3rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.3rem;
}

.repetition-current > p:first-child span {
    background: var(--color-red-pill);
    color: var(--color-red);
}

.repetition-simplified > p:first-child span {
    background: var(--color-green-pill);
    color: var(--color-green);
}

.repetition-current ol,
.recognition-list,
.worth-signs,
.common-task-list,
.human-judgment-section ul,
.implementation-options,
.evaluation-factors ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.repetition-current ol {
    display: grid;
    gap: 0.55rem;
}

.repetition-current li {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.4rem;
    grid-template-columns: 1.45rem 1rem minmax(0, 1fr);
    font-size: 0.79rem;
    font-weight: 700;
}

.repetition-current li b {
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border: 1px solid var(--color-red-step-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-red);
    font-size: 0.62rem;
}

.repetition-current li svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-red);
}

.repetition-loop {
    display: flex;
    margin: 0.9rem 0 0;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-red);
    font-size: 0.75rem;
    font-weight: 800;
}

.repetition-loop svg {
    width: 0.9rem;
    height: 0.9rem;
    transform: rotate(180deg);
}

.repetition-shift {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-soft);
    color: var(--color-blue);
}

.repetition-shift svg {
    width: 1.25rem;
    height: 1.25rem;
}

.simplified-path {
    display: grid;
    align-items: center;
    gap: 0.55rem;
}

.simplified-path > span {
    display: flex;
    min-height: 2.7rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    font-size: 0.76rem;
    font-weight: 750;
}

.simplified-path > span svg,
.simplified-path > svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-green);
}

.simplified-path > svg {
    margin-inline: auto;
    transform: rotate(90deg);
}

.simplified-note {
    display: flex;
    margin: 0.9rem 0 0;
    align-items: flex-start;
    gap: 0.45rem;
    color: var(--color-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.simplified-note svg {
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 0.9rem;
    margin-top: 0.15rem;
    color: var(--color-green);
}

.recognition-layout {
    display: grid;
    align-items: start;
    gap: clamp(2.5rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
}

.recognition-copy {
    color: var(--color-muted);
    font-size: 1.04rem;
}

.recognition-list {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recognition-list > div {
    padding: 1.1rem;
    border-bottom: 1px solid var(--color-border);
}

.recognition-list > div:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.recognition-list dt {
    margin-bottom: 0.2rem;
    color: var(--color-blue);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.recognition-list dd {
    margin: 0;
    color: var(--color-navy);
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.4;
}

.problem-signal-grid,
.common-tasks-layout {
    display: grid;
    align-items: start;
    gap: clamp(2.5rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
}

.problem-signal-heading,
.common-tasks-heading {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}

.problem-signal-heading h2,
.common-tasks-heading h2 {
    font-size: clamp(2rem, 3.7vw, 3rem);
}

.problem-signal-heading > p:not(.eyebrow),
.common-tasks-heading > p:not(.eyebrow) {
    color: var(--color-muted);
}

.worth-signs {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.worth-signs li {
    display: grid;
    min-width: 0;
    gap: 0.85rem;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 2rem minmax(0, 1fr);
}

.worth-signs li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.worth-signs li > span {
    color: var(--color-blue);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.06em;
}

.worth-signs p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.worth-signs strong {
    display: block;
    margin-bottom: 0.12rem;
    color: var(--color-navy);
}

.problem-example {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.common-task-list {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.common-task-list li {
    display: grid;
    min-width: 0;
    gap: 0.8rem;
    padding: 1.1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 1.4rem minmax(0, 1fr);
}

.common-task-list li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.common-task-list svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    color: var(--color-blue);
}

.common-task-list strong,
.common-task-list span {
    display: block;
}

.common-task-list strong {
    margin-bottom: 0.15rem;
    color: var(--color-navy);
    font-size: 0.94rem;
}

.common-task-list span {
    color: var(--color-muted);
    font-size: 0.83rem;
    line-height: 1.45;
}

.human-judgment-section {
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background: #0b1c32;
    color: #c2cedd;
}

.human-judgment-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.5rem, 8vw, 7rem);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.human-judgment-section .eyebrow {
    color: #8ab0ff;
}

.human-judgment-section h2 {
    color: #ffffff;
}

.human-judgment-statement {
    max-width: 33rem;
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.25rem, 2.3vw, 1.6rem);
    font-weight: 750;
    line-height: 1.45;
}

.human-judgment-grid > div:last-child > p {
    margin-bottom: 1.35rem;
}

.human-judgment-section ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.human-judgment-section li {
    padding: 0.45rem 0.7rem;
    border: 1px solid #49627f;
    border-radius: 999px;
    background: #102945;
    color: #dce6f2;
    font-size: 0.8rem;
    font-weight: 700;
}

.implementation-layout,
.automation-worth-grid {
    display: grid;
    align-items: start;
    gap: clamp(2.5rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
}

.problem-implementation .section-heading {
    margin-bottom: 1.25rem;
}

.implementation-note {
    max-width: 39rem;
    color: var(--color-muted);
    font-size: 0.95rem;
}

.implementation-options {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.implementation-options > div {
    padding: 1.1rem;
    border-bottom: 1px solid var(--color-border);
}

.implementation-options > div:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.implementation-options dt {
    margin-bottom: 0.25rem;
    color: var(--color-navy);
    font-size: 0.94rem;
    font-weight: 800;
}

.implementation-options dd {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.84rem;
    line-height: 1.48;
}

.automation-worth-copy {
    color: var(--color-muted);
    font-size: 1.03rem;
}

.evaluation-factors {
    padding: clamp(1.4rem, 4vw, 2.25rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-bg-soft);
}

.evaluation-factors > p {
    margin-bottom: 1rem;
    color: var(--color-blue);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.evaluation-factors ul {
    display: grid;
    gap: 0.75rem;
}

.evaluation-factors li {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.92rem;
}

.evaluation-factors li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.evaluation-factors span {
    color: var(--color-navy);
    font-weight: 800;
}

.problem-related-inner {
    max-width: 72rem;
}

.problem-related .related-pages {
    background: var(--color-surface);
}

.problem-related .related-pages ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Data-entry problem-page patterns */

.data-entry-hero-grid {
    gap: clamp(2.75rem, 5.5vw, 4.75rem);
    grid-template-columns: minmax(0, 0.92fr) minmax(31rem, 1.08fr);
}

.data-entry-hero h1 {
    max-width: 15ch;
}

.data-entry-hero-visual {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 0.8rem;
}

.data-entry-hero-visual::before {
    position: absolute;
    z-index: -1;
    width: 31rem;
    height: 31rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-soft);
    content: "";
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.transfer-lane {
    min-width: 0;
    padding: 1.15rem;
    border: 1px solid;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
}

.transfer-lane-manual {
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
}

.transfer-lane-automated {
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.transfer-lane > p:first-child {
    margin-bottom: 0.85rem;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1.45;
    text-transform: uppercase;
}

.transfer-lane > p:first-child span {
    display: inline-flex;
    margin-right: 0.3rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.3rem;
}

.transfer-lane-manual > p:first-child span {
    background: var(--color-red-pill);
    color: var(--color-red);
}

.transfer-lane-automated > p:first-child span {
    background: var(--color-green-pill);
    color: var(--color-green);
}

.transfer-path {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.35rem;
    grid-template-columns: minmax(0, 1fr) 1.25rem minmax(0, 1.08fr) 1.25rem minmax(0, 1fr);
}

.transfer-node {
    display: grid;
    min-width: 0;
    min-height: 5.3rem;
    place-items: center;
    align-content: center;
    gap: 0.15rem;
    padding: 0.6rem 0.4rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    text-align: center;
}

.transfer-node svg {
    width: 1.15rem;
    height: 1.15rem;
    margin-bottom: 0.2rem;
    color: var(--color-blue);
}

.transfer-node strong {
    color: var(--color-navy);
    font-size: 0.72rem;
    line-height: 1.3;
}

.transfer-node small {
    color: var(--color-muted);
    font-size: 0.61rem;
    line-height: 1.3;
}

.transfer-node-manual {
    border-color: var(--color-red-border);
}

.transfer-node-manual svg {
    color: var(--color-red);
}

.transfer-node-automation {
    border-color: var(--color-green-border);
}

.transfer-node-automation svg {
    color: var(--color-green);
}

.transfer-arrow {
    color: var(--color-border-strong);
}

.transfer-arrow svg {
    width: 1.1rem;
    height: 1.1rem;
}

.lane-change {
    display: grid;
    align-items: center;
    gap: 0.65rem;
    grid-template-columns: 1fr 2.2rem 1fr;
}

.lane-change span {
    height: 1px;
    background: var(--color-border);
}

.lane-change svg {
    width: 1.1rem;
    height: 1.1rem;
    margin-inline: auto;
    color: var(--color-blue);
    transform: rotate(90deg);
}

.transfer-review-note {
    display: flex;
    margin: 0.75rem 0 0;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.transfer-review-note svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--color-green);
}

.information-exists-grid,
.data-workflows-layout,
.partial-automation-grid {
    display: grid;
    align-items: start;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
}

.information-exists-section .section-heading,
.partial-automation-section .section-heading {
    margin-bottom: 1.4rem;
}

.information-exists-copy {
    max-width: var(--reading);
    color: var(--color-muted);
    font-size: 1.03rem;
}

.information-exists-statement {
    margin-top: 1.4rem;
    color: var(--color-navy);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 800;
    line-height: 1.45;
}

.information-source-map {
    padding: clamp(1.4rem, 4vw, 2.25rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-bg-soft);
}

.information-source-map > p {
    margin-bottom: 1rem;
    color: var(--color-blue);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.information-source-map ul,
.data-route-list,
.field-review-column ul,
.partial-automation-reasons,
.data-entry-process {
    margin: 0;
    padding: 0;
    list-style: none;
}

.information-source-map ul {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.information-source-map li {
    display: grid;
    min-width: 0;
    min-height: 4.4rem;
    place-items: center;
    align-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-navy);
    font-size: 0.68rem;
    font-weight: 750;
    text-align: center;
}

.information-source-map li svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--color-blue);
}

.source-map-movement {
    display: grid;
    margin-top: 1rem;
    align-items: center;
    gap: 0.65rem;
    grid-template-columns: 1fr auto 1fr;
}

.source-map-movement > span {
    height: 1px;
    background: var(--color-border-strong);
}

.source-map-movement p {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-red);
    font-size: 0.72rem;
    font-weight: 800;
}

.source-map-movement svg {
    width: 1rem;
    height: 1rem;
}

.data-workflows-layout {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
}

.data-workflows-heading {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}

.data-workflows-heading h2 {
    font-size: clamp(2rem, 3.7vw, 3rem);
}

.data-workflows-heading > p:not(.eyebrow) {
    color: var(--color-muted);
}

.data-route-list {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.data-route-list li {
    display: grid;
    min-width: 0;
    min-height: 5.2rem;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: minmax(0, 1fr) 1.1rem minmax(0, 1fr);
}

.data-route-list li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.data-route-list span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.data-route-list span svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    color: var(--color-blue);
}

.data-route-list > li > svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-border-strong);
}

.data-route-list strong {
    color: var(--color-navy);
    font-size: 0.8rem;
    line-height: 1.35;
}

.data-entry-example {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.data-review-section {
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background: #0b1c32;
    color: #c2cedd;
}

.data-review-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
}

.data-review-section .eyebrow {
    color: #8ab0ff;
}

.data-review-section h2 {
    color: #ffffff;
}

.data-review-statement {
    max-width: 34rem;
    color: #ffffff;
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    font-weight: 750;
    line-height: 1.45;
}

.field-review-visual {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
    grid-template-columns: minmax(0, 1fr) 2.4rem minmax(0, 1fr);
}

.field-review-column {
    min-width: 0;
    padding: 1.1rem;
    border: 1px solid #49627f;
    border-radius: var(--radius-large);
    background: #102945;
}

.field-review-column > p {
    display: flex;
    margin-bottom: 0.85rem;
    align-items: center;
    gap: 0.45rem;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
}

.field-review-column > p svg {
    width: 1rem;
    height: 1rem;
    color: #72d7a1;
}

.field-exception-column > p svg {
    color: #8ab0ff;
}

.field-review-column ul {
    display: grid;
    gap: 0.5rem;
}

.field-auto-column li {
    display: flex;
    min-width: 0;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid #4f8c6d;
    border-radius: var(--radius-small);
    background: #123628;
    color: #dce6f2;
    font-size: 0.7rem;
}

.field-auto-column b {
    color: #72d7a1;
    font-size: 0.68rem;
}

.field-exception-column ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.field-exception-column li {
    padding: 0.42rem 0.6rem;
    border: 1px solid #49627f;
    border-radius: 999px;
    color: #dce6f2;
    font-size: 0.68rem;
    font-weight: 700;
}

.field-review-arrow {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    border: 1px solid #49627f;
    border-radius: 50%;
    background: #102945;
    color: #8ab0ff;
}

.field-review-arrow svg {
    width: 1.1rem;
    height: 1.1rem;
}

.data-entry-options > div:last-child {
    grid-column: 1 / -1;
    border-right: 0;
}

.partial-automation-grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
}

.partial-automation-statement {
    max-width: 38rem;
    color: var(--color-navy);
    font-size: 1rem;
    font-weight: 750;
}

.partial-automation-reasons {
    border-top: 1px solid var(--color-border);
}

.partial-automation-reasons li {
    display: grid;
    min-width: 0;
    gap: 0.9rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 2rem minmax(0, 1fr);
}

.partial-automation-reasons li > span {
    color: var(--color-blue);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.06em;
}

.partial-automation-reasons p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.partial-automation-reasons strong {
    color: var(--color-navy);
}

.data-entry-process-section .section-heading {
    max-width: 52rem;
}

.data-entry-process {
    position: relative;
    display: grid;
    margin-top: 3rem;
    gap: 1.2rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.data-entry-process::before {
    position: absolute;
    top: 2.25rem;
    right: 9%;
    left: 9%;
    height: 1px;
    background: var(--color-border-strong);
    content: "";
}

.data-entry-process li {
    position: relative;
    display: grid;
    min-width: 0;
    justify-items: center;
    text-align: center;
}

.data-entry-process li > span {
    position: absolute;
    top: -0.45rem;
    right: calc(50% - 2.8rem);
    color: var(--color-blue);
    font-size: 0.63rem;
    font-weight: 850;
    letter-spacing: 0.07em;
}

.data-entry-process li > svg {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1rem;
    padding: 1.35rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-blue);
}

.data-entry-process h3 {
    max-width: 16ch;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.35;
}

.data-entry-related-inner {
    max-width: 72rem;
}

.data-entry-related .related-pages {
    background: var(--color-bg-soft);
}

.data-entry-related .related-pages ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Browser automation service patterns */

.browser-hero-grid {
    gap: clamp(2.75rem, 5.5vw, 4.75rem);
    grid-template-columns: minmax(0, 0.92fr) minmax(31rem, 1.08fr);
}

.browser-automation-hero h1 {
    max-width: 15ch;
}

.browser-hero-visual {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 0.7rem;
}

.browser-hero-visual::before {
    position: absolute;
    z-index: -1;
    width: 31rem;
    height: 31rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-soft);
    content: "";
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.browser-window,
.browser-exception-window,
.site-change-browser {
    min-width: 0;
    overflow: hidden;
    border: 1px solid;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
}

.browser-window-manual {
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
}

.browser-window-simple {
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.browser-chrome {
    display: grid;
    min-height: 2.15rem;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    grid-template-columns: auto minmax(0, 1fr);
}

.browser-chrome > span {
    display: flex;
    gap: 0.25rem;
}

.browser-chrome i {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--color-border-strong);
}

.browser-chrome b {
    overflow: hidden;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-muted);
    font-size: 0.61rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browser-workflow-body {
    padding: 1rem;
}

.browser-workflow-body > p {
    margin-bottom: 0.75rem;
    color: var(--color-muted);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.browser-workflow-body > p span {
    display: inline-flex;
    margin-right: 0.3rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.3rem;
}

.browser-window-manual .browser-workflow-body > p span {
    background: var(--color-red-pill);
    color: var(--color-red);
}

.browser-window-simple .browser-workflow-body > p span {
    background: var(--color-green-pill);
    color: var(--color-green);
}

.browser-step-sequence,
.browser-actions-panel ul,
.browser-example-timeline,
.browser-task-list,
.connection-option ul,
.browser-tool-comparison ul,
.browser-exception-window ul,
.site-change-browser ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.browser-step-sequence {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.browser-step-sequence li {
    display: grid;
    min-width: 0;
    min-height: 2.65rem;
    place-items: center;
    align-content: center;
    gap: 0.12rem;
    padding: 0.35rem 0.25rem;
    border: 1px solid var(--color-red-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-navy);
    font-size: 0.66rem;
    font-weight: 750;
    text-align: center;
}

.browser-step-sequence b {
    color: var(--color-red);
    font-size: 0.56rem;
}

.browser-simplify-marker {
    display: grid;
    align-items: center;
    gap: 0.65rem;
    grid-template-columns: 1fr 2.2rem 1fr;
}

.browser-simplify-marker span {
    height: 1px;
    background: var(--color-border);
}

.browser-simplify-marker svg {
    width: 1.1rem;
    height: 1.1rem;
    margin-inline: auto;
    color: var(--color-blue);
    transform: rotate(90deg);
}

.browser-simple-path {
    display: grid;
    align-items: center;
    gap: 0.65rem;
    grid-template-columns: minmax(0, 1fr) 1.2rem minmax(0, 1fr);
}

.browser-simple-path > div {
    display: grid;
    min-height: 4.5rem;
    place-items: center;
    align-content: center;
    gap: 0.12rem;
    padding: 0.55rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    text-align: center;
}

.browser-simple-path > div svg {
    width: 1.1rem;
    height: 1.1rem;
    margin-bottom: 0.18rem;
    color: var(--color-green);
}

.browser-simple-path strong {
    color: var(--color-navy);
    font-size: 0.72rem;
}

.browser-simple-path small {
    color: var(--color-muted);
    font-size: 0.61rem;
    line-height: 1.3;
}

.browser-simple-path > svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-green);
}

.browser-definition-grid,
.browser-extension-grid,
.browser-reliability-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.78fr) minmax(24rem, 1.22fr);
}

.browser-definition .section-heading,
.browser-extension-comparison .section-heading,
.browser-reliability .section-heading {
    margin-bottom: 1.4rem;
}

.browser-actions-panel {
    padding: clamp(1.4rem, 4vw, 2.1rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-bg-soft);
}

.browser-actions-panel > p {
    margin-bottom: 1rem;
    color: var(--color-blue);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.browser-actions-panel ul {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.browser-actions-panel li {
    display: grid;
    min-width: 0;
    min-height: 4.5rem;
    place-items: center;
    align-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-navy);
    font-size: 0.68rem;
    font-weight: 750;
    text-align: center;
}

.browser-actions-panel li svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--color-blue);
}

.icon-download {
    transform: rotate(180deg);
}

.browser-example {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.browser-example-timeline {
    display: grid;
    margin-top: 1.35rem;
    gap: 0.7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.browser-example-timeline li {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    color: var(--color-muted);
    font-size: 0.77rem;
    line-height: 1.35;
}

.browser-example-timeline span {
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border: 1px solid var(--color-red-step-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-red);
    font-size: 0.62rem;
    font-weight: 850;
}

.browser-task-layout {
    display: grid;
    align-items: start;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
}

.browser-task-heading {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}

.browser-task-heading h2 {
    font-size: clamp(2rem, 3.7vw, 3rem);
}

.browser-task-heading > p:not(.eyebrow) {
    color: var(--color-muted);
}

.browser-task-list {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.browser-task-list li {
    display: grid;
    min-width: 0;
    gap: 0.8rem;
    padding: 1.1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 1.4rem minmax(0, 1fr);
}

.browser-task-list li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.browser-task-list > li > svg {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.15rem;
    color: var(--color-blue);
}

.browser-task-list strong,
.browser-task-list span {
    display: block;
}

.browser-task-list strong {
    margin-bottom: 0.15rem;
    color: var(--color-navy);
    font-size: 0.94rem;
}

.browser-task-list span {
    color: var(--color-muted);
    font-size: 0.83rem;
    line-height: 1.45;
}

.browser-connection-choice .section-heading {
    max-width: 52rem;
}

.connection-choice-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.connection-option {
    padding: clamp(1.5rem, 4vw, 2.2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.browser-option {
    border-color: var(--color-blue);
    background: var(--color-blue-soft);
}

.connection-option-icon {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    margin-bottom: 1rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-bg-soft);
    color: var(--color-blue);
}

.connection-option-icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

.connection-label {
    margin-bottom: 0.55rem;
    color: var(--color-blue);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.connection-option h3 {
    max-width: 28ch;
    font-size: clamp(1.25rem, 2.3vw, 1.6rem);
}

.connection-option ul {
    display: grid;
    margin-top: 1.2rem;
    gap: 0.7rem;
}

.connection-option li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.connection-option li svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    margin-top: 0.2rem;
    color: var(--color-green);
}

.connection-core-message {
    max-width: 54rem;
    margin: 1.5rem auto 0;
    color: var(--color-navy);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 800;
    text-align: center;
}

.extension-comparison-note {
    max-width: 38rem;
    color: var(--color-muted);
    font-size: 0.95rem;
}

.browser-tool-comparison {
    display: grid;
    min-width: 0;
    align-items: stretch;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) 3.2rem minmax(0, 1fr);
}

.browser-tool-comparison article {
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.browser-tool-comparison article > span {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 0.9rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.browser-tool-comparison article > span svg {
    width: 1.2rem;
    height: 1.2rem;
}

.browser-tool-comparison h3 {
    min-height: 0;
    font-size: 1.1rem;
}

.browser-tool-comparison ul {
    display: grid;
    gap: 0.65rem;
}

.browser-tool-comparison li {
    position: relative;
    padding-left: 0.9rem;
    color: var(--color-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.browser-tool-comparison li::before {
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--color-green);
    content: "";
}

.browser-tool-divider {
    display: grid;
    place-items: center;
}

.browser-tool-divider span {
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-muted);
    font-size: 0.62rem;
    font-weight: 800;
    text-align: center;
}

.browser-review-section {
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background: #0b1c32;
    color: #c2cedd;
}

.browser-review-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.browser-review-section .eyebrow {
    color: #8ab0ff;
}

.browser-review-section h2 {
    color: #ffffff;
}

.browser-review-statement {
    max-width: 33rem;
    color: #ffffff;
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    font-weight: 750;
    line-height: 1.45;
}

.browser-exception-window {
    border-color: #49627f;
    background: #102945;
}

.browser-review-section .browser-chrome {
    border-color: #49627f;
    background: #12243a;
}

.browser-review-section .browser-chrome b {
    border-color: #49627f;
    color: #c2cedd;
}

.exception-window-body {
    padding: 1.2rem;
}

.exception-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.8rem;
    border: 1px solid #a7666a;
    border-radius: var(--radius-small);
    background: #3b2326;
    color: #dce6f2;
}

.exception-alert svg {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 1.2rem;
    margin-top: 0.15rem;
    color: #ff9f97;
}

.exception-alert span,
.exception-alert strong {
    display: block;
}

.exception-alert strong {
    margin-bottom: 0.12rem;
    color: #ffffff;
    font-size: 0.78rem;
}

.exception-alert span {
    font-size: 0.72rem;
    line-height: 1.4;
}

.browser-exception-window ul {
    display: flex;
    margin-top: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.browser-exception-window li {
    padding: 0.4rem 0.6rem;
    border: 1px solid #49627f;
    border-radius: 999px;
    color: #dce6f2;
    font-size: 0.68rem;
    font-weight: 700;
}

.site-change-cycle {
    padding: clamp(1.4rem, 4vw, 2.1rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-bg-soft);
}

.site-change-browser {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
    box-shadow: none;
}

.site-change-browser ul {
    display: grid;
    padding: 1rem;
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-change-browser li {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    grid-template-columns: 1rem minmax(0, 1fr);
    font-size: 0.72rem;
}

.site-change-browser li svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-blue);
}

.site-change-browser li span {
    color: var(--color-navy);
    font-weight: 750;
}

.site-change-browser li b {
    color: var(--color-red);
    font-size: 0.62rem;
    grid-column: 2;
}

.site-change-path {
    display: grid;
    margin-block: 0.85rem;
    align-items: center;
    gap: 0.65rem;
    grid-template-columns: 1fr 2rem 1fr;
}

.site-change-path span {
    height: 1px;
    background: var(--color-border-strong);
}

.site-change-path svg {
    width: 1rem;
    height: 1rem;
    margin-inline: auto;
    color: var(--color-blue);
    transform: rotate(90deg);
}

.maintenance-response {
    display: flex;
    width: min(100%, 24rem);
    margin-inline: auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-green-soft);
}

.maintenance-response > span {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 2.4rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-green);
}

.maintenance-response > span svg {
    width: 1.1rem;
    height: 1.1rem;
}

.maintenance-response p,
.maintenance-response small,
.maintenance-response strong {
    display: block;
    margin: 0;
}

.maintenance-response small {
    color: var(--color-green);
    font-size: 0.63rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.maintenance-response strong {
    color: var(--color-navy);
    font-size: 0.8rem;
    line-height: 1.35;
}

.browser-process-section .section-heading {
    max-width: 54rem;
}

.browser-related-inner {
    max-width: 72rem;
}

.browser-related .related-pages {
    background: var(--color-bg-soft);
}

.browser-related .related-pages ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Chrome extension development service patterns */

.extension-hero-grid {
    gap: clamp(2.75rem, 5.5vw, 4.75rem);
    grid-template-columns: minmax(0, 0.85fr) minmax(32rem, 1.15fr);
}

.extension-hero h1 {
    max-width: 14ch;
}

.extension-hero-visual {
    position: relative;
    min-width: 0;
}

.extension-hero-visual::before {
    position: absolute;
    z-index: -1;
    width: 32rem;
    height: 32rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-soft);
    content: "";
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.extension-mock-browser,
.inline-site-panel,
.extension-system-source {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.extension-browser-body {
    display: grid;
    min-height: 20rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(13.5rem, 0.75fr);
}

.extension-site-content {
    min-width: 0;
    padding: 1.3rem;
    background: var(--color-bg-soft);
}

.mock-site-label {
    margin-bottom: 1rem;
    color: var(--color-muted);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.mock-record-heading {
    display: grid;
    align-items: center;
    gap: 0.65rem;
    grid-template-columns: 2.4rem minmax(0, 1fr);
}

.mock-record-heading > span {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--color-blue-soft);
}

.mock-record-heading b,
.mock-record-heading small {
    display: block;
}

.mock-record-heading b {
    color: var(--color-navy);
    font-size: 0.9rem;
}

.mock-record-heading small {
    color: var(--color-muted);
    font-size: 0.66rem;
}

.mock-record-fields {
    display: grid;
    margin: 1.15rem 0 0;
    gap: 0.5rem;
}

.mock-record-fields div {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    grid-template-columns: 4.5rem minmax(0, 1fr);
}

.mock-record-fields dt,
.mock-record-fields dd {
    min-width: 0;
    margin: 0;
    font-size: 0.68rem;
}

.mock-record-fields dt {
    color: var(--color-muted);
    font-weight: 700;
}

.mock-record-fields dd {
    overflow: hidden;
    color: var(--color-navy);
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mock-site-lines {
    display: grid;
    margin-top: 1rem;
    gap: 0.45rem;
}

.mock-site-lines span {
    height: 0.45rem;
    border-radius: 999px;
    background: var(--color-border);
}

.mock-site-lines span:nth-child(2) {
    width: 78%;
}

.mock-site-lines span:nth-child(3) {
    width: 58%;
}

.extension-sidebar-demo {
    min-width: 0;
    padding: 1rem;
    border-left: 1px solid var(--color-blue);
    background: var(--color-blue-soft);
}

.extension-sidebar-heading {
    display: grid;
    align-items: center;
    gap: 0.55rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 2rem minmax(0, 1fr);
}

.extension-sidebar-heading > span {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-blue);
    color: #ffffff;
}

.extension-sidebar-heading svg {
    width: 1rem;
    height: 1rem;
}

.extension-sidebar-heading p,
.extension-sidebar-heading strong,
.extension-sidebar-heading small {
    display: block;
    margin: 0;
}

.extension-sidebar-heading strong {
    color: var(--color-navy);
    font-size: 0.78rem;
}

.extension-sidebar-heading small {
    color: var(--color-muted);
    font-size: 0.61rem;
}

.extension-demo-action {
    display: flex;
    width: 100%;
    min-height: 2.55rem;
    margin-top: 0.55rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-navy);
    font-size: 0.67rem;
    font-weight: 750;
    text-align: left;
}

.extension-demo-action svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 0.95rem;
    color: var(--color-blue);
}

.extension-sidebar-actions {
    display: grid;
    margin-top: 0.75rem;
    gap: 0.45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.extension-sidebar-actions span,
.extension-sidebar-actions b {
    display: grid;
    min-height: 2.35rem;
    place-items: center;
    padding: 0.4rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
    color: var(--color-navy);
    font-size: 0.61rem;
    line-height: 1.25;
    text-align: center;
}

.extension-sidebar-actions b {
    border-color: var(--color-blue);
    background: var(--color-blue);
    color: #ffffff;
}

.mockup-disclaimer {
    margin: 0.55rem 0 0;
    color: var(--color-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}

.extension-sense-grid,
.extension-app-grid,
.extension-connections-grid,
.extension-distribution-grid,
.extension-maintenance-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.8fr) minmax(25rem, 1.2fr);
}

.extension-sense-section .section-heading,
.extension-app-comparison .section-heading,
.extension-connections-section .section-heading,
.extension-distribution-section .section-heading,
.extension-maintenance-section .section-heading {
    margin-bottom: 1.4rem;
}

.extension-core-message,
.extension-app-statement {
    color: var(--color-navy);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 800;
    line-height: 1.45;
}

.inline-tool-visual {
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-bg-soft);
}

.inline-site-panel {
    box-shadow: none;
}

.inline-site-panel > div:last-child {
    display: grid;
    min-height: 7.5rem;
    align-content: center;
    gap: 0.55rem;
    padding: 1.1rem;
}

.inline-site-panel > div:last-child span {
    width: 100%;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--color-border);
}

.inline-site-panel > div:last-child span:nth-child(2) { width: 82%; }
.inline-site-panel > div:last-child span:nth-child(3) { width: 64%; }
.inline-site-panel > div:last-child span:nth-child(4) { width: 48%; }

.inline-tool-connector,
.extension-change-connector {
    display: grid;
    margin-block: 0.8rem;
    align-items: center;
    gap: 0.65rem;
    grid-template-columns: 1fr 2rem 1fr;
}

.inline-tool-connector span,
.extension-change-connector span {
    height: 1px;
    background: var(--color-border-strong);
}

.inline-tool-connector svg,
.extension-change-connector svg {
    width: 1rem;
    height: 1rem;
    margin-inline: auto;
    color: var(--color-blue);
    transform: rotate(90deg);
}

.inline-extension-panel,
.extension-maintenance-response {
    display: flex;
    width: min(100%, 26rem);
    margin-inline: auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-green-soft);
}

.inline-extension-panel > span,
.extension-maintenance-response > svg {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    place-items: center;
    padding: 0.65rem;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-green);
}

.inline-extension-panel > span svg {
    width: 1.1rem;
    height: 1.1rem;
}

.inline-extension-panel p,
.inline-extension-panel small,
.inline-extension-panel strong,
.extension-maintenance-response span,
.extension-maintenance-response small,
.extension-maintenance-response strong {
    display: block;
    margin: 0;
}

.inline-extension-panel small,
.extension-maintenance-response small {
    color: var(--color-green);
    font-size: 0.63rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.inline-extension-panel strong,
.extension-maintenance-response strong {
    color: var(--color-navy);
    font-size: 0.84rem;
    line-height: 1.35;
}

.extension-capabilities-layout,
.extension-use-layout {
    display: grid;
    align-items: start;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
}

.extension-capabilities-heading,
.extension-use-heading {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}

.extension-capabilities-heading h2,
.extension-use-heading h2 {
    font-size: clamp(2rem, 3.7vw, 3rem);
}

.extension-capabilities-heading > p:not(.eyebrow),
.extension-use-heading > p:not(.eyebrow) {
    color: var(--color-muted);
}

.extension-capability-list,
.extension-switch-sequence,
.extension-example-sidebar,
.extension-choice ul,
.tool-placement-comparison ul,
.extension-use-list,
.extension-permission-panel ul,
.distribution-paths,
.extension-change-visual ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.extension-capability-list {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.extension-capability-list li {
    display: grid;
    min-width: 0;
    align-items: start;
    gap: 0.8rem;
    padding: 1.1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 1.4rem minmax(0, 1fr);
}

.extension-capability-list li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.extension-capability-list > li > svg {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.18rem;
    color: var(--color-blue);
}

.extension-capability-list strong,
.extension-capability-list small {
    display: block;
}

.extension-capability-list strong {
    margin-bottom: 0.16rem;
    color: var(--color-navy);
    font-size: 0.94rem;
}

.extension-capability-list small {
    color: var(--color-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.extension-example-section {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.extension-switch-sequence {
    display: grid;
    margin-top: 1.3rem;
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.extension-switch-sequence li {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    color: var(--color-muted);
    font-size: 0.77rem;
    line-height: 1.35;
}

.extension-switch-sequence span {
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border: 1px solid var(--color-red-step-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-red);
    font-size: 0.62rem;
    font-weight: 850;
}

.extension-example-sidebar {
    display: grid;
    margin-top: 1.3rem;
    gap: 0.65rem;
}

.extension-example-sidebar > div {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    grid-template-columns: 2rem minmax(0, 1fr);
}

.extension-example-sidebar > div > svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-green);
}

.extension-example-sidebar strong,
.extension-example-sidebar small {
    display: block;
}

.extension-example-sidebar strong {
    color: var(--color-navy);
    font-size: 0.8rem;
}

.extension-example-sidebar small {
    color: var(--color-muted);
    font-size: 0.7rem;
    line-height: 1.35;
}

.extension-automation-comparison .section-heading {
    max-width: 56rem;
}

.extension-choice-grid {
    display: grid;
    align-items: stretch;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr);
}

.extension-choice {
    padding: clamp(1.5rem, 4vw, 2.2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.extension-choice-assisted {
    border-color: var(--color-blue);
    background: var(--color-blue-soft);
}

.extension-choice-icon {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    margin-bottom: 1rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-blue);
}

.extension-choice-icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

.extension-choice-label {
    margin-bottom: 0.5rem;
    color: var(--color-blue);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.extension-choice h3 {
    font-size: clamp(1.3rem, 2.4vw, 1.65rem);
}

.extension-choice ul,
.tool-placement-comparison ul {
    display: grid;
    margin-top: 1.1rem;
    gap: 0.65rem;
}

.extension-choice li,
.tool-placement-comparison li {
    position: relative;
    padding-left: 1rem;
    color: var(--color-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.extension-choice li::before,
.tool-placement-comparison li::before {
    position: absolute;
    top: 0.58em;
    left: 0;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: var(--color-green);
    content: "";
}

.extension-choice .text-link {
    margin-top: 1.2rem;
}

.extension-choice-bridge {
    display: grid;
    place-items: center;
}

.extension-choice-bridge span {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-muted);
    font-size: 0.65rem;
    font-weight: 850;
    text-align: center;
}

.extension-choice-summary {
    max-width: 50rem;
    margin: 1.5rem auto 0;
    color: var(--color-navy);
    font-size: 1.02rem;
    font-weight: 750;
    text-align: center;
}

.extension-app-statement {
    margin-bottom: 1rem;
}

.tool-placement-comparison {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tool-placement-comparison article {
    min-width: 0;
    padding: 1.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-bg-soft);
}

.tool-placement-comparison article > span {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 0.85rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.tool-placement-comparison article > span svg {
    width: 1.2rem;
    height: 1.2rem;
}

.tool-placement-comparison h3 {
    font-size: 1.1rem;
}

.extension-use-list {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.extension-use-list li {
    display: grid;
    min-width: 0;
    gap: 0.75rem;
    padding: 1.05rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 1.8rem minmax(0, 1fr);
}

.extension-use-list li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.extension-use-list > li > span {
    color: var(--color-blue);
    font-size: 0.65rem;
    font-weight: 850;
}

.extension-use-list p,
.extension-use-list strong {
    display: block;
    margin: 0;
}

.extension-use-list p {
    color: var(--color-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.extension-use-list strong {
    margin-bottom: 0.15rem;
    color: var(--color-navy);
    font-size: 0.93rem;
}

.extension-connection-note,
.distribution-note {
    color: var(--color-muted);
    font-size: 0.94rem;
}

.extension-system-flow {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.8rem;
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-bg-soft);
    grid-template-columns: minmax(0, 1fr) 5rem minmax(0, 0.8fr);
}

.extension-system-source {
    box-shadow: none;
}

.extension-system-source > div:last-child {
    display: grid;
    min-height: 8rem;
    place-items: center;
    align-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
}

.extension-system-source > div:last-child > svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-blue);
}

.extension-system-source strong {
    color: var(--color-navy);
    font-size: 0.84rem;
}

.extension-system-source > div:last-child span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-green-border);
    border-radius: 999px;
    background: var(--color-green-soft);
    color: var(--color-green);
    font-size: 0.64rem;
    font-weight: 800;
}

.extension-system-source span svg {
    width: 0.85rem;
    height: 0.85rem;
}

.extension-system-arrow {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
}

.extension-system-arrow span {
    width: 100%;
    height: 1px;
    background: var(--color-border-strong);
    grid-area: 1 / 1;
}

.extension-system-arrow svg {
    z-index: 1;
    width: 1.3rem;
    height: 1.3rem;
    padding-inline: 0.15rem;
    background: var(--color-bg-soft);
    color: var(--color-blue);
    grid-area: 1 / 1;
}

.extension-system-arrow small {
    color: var(--color-muted);
    font-size: 0.58rem;
    font-weight: 700;
    text-align: center;
}

.extension-system-destination {
    display: grid;
    min-height: 8rem;
    place-items: center;
    align-content: center;
    gap: 0.55rem;
    padding: 1rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-large);
    background: var(--color-green-soft);
    text-align: center;
}

.extension-system-destination > svg {
    width: 1.7rem;
    height: 1.7rem;
    color: var(--color-green);
}

.extension-system-destination small,
.extension-system-destination strong {
    display: block;
}

.extension-system-destination small {
    color: var(--color-muted);
    font-size: 0.62rem;
}

.extension-system-destination strong {
    color: var(--color-navy);
    font-size: 0.86rem;
}

.extension-security-section {
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background: #0b1c32;
    color: #c2cedd;
}

.extension-security-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.extension-security-section .eyebrow {
    color: #8ab0ff;
}

.extension-security-section h2 {
    color: #ffffff;
}

.extension-security-statement {
    max-width: 34rem;
    color: #ffffff;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 750;
    line-height: 1.45;
}

.extension-permission-panel {
    padding: clamp(1.2rem, 4vw, 1.7rem);
    border: 1px solid #49627f;
    border-radius: var(--radius-large);
    background: #102945;
}

.permission-panel-heading {
    display: grid;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #49627f;
    grid-template-columns: 2.5rem minmax(0, 1fr);
}

.permission-panel-heading > svg {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.7rem;
    border-radius: 50%;
    background: #183959;
    color: #83dcb2;
}

.permission-panel-heading small,
.permission-panel-heading strong {
    display: block;
}

.permission-panel-heading small {
    color: #8ab0ff;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.permission-panel-heading strong {
    color: #ffffff;
    font-size: 1rem;
}

.extension-permission-panel ul {
    display: grid;
    margin-top: 1rem;
    gap: 0.55rem;
}

.extension-permission-panel li {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem;
    border: 1px solid #36516e;
    border-radius: var(--radius-small);
    background: #0f2239;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.extension-permission-panel li span {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 750;
}

.extension-permission-panel li svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    color: #8ab0ff;
}

.extension-permission-panel li b {
    color: #c2cedd;
    font-size: 0.7rem;
    font-weight: 650;
    text-align: right;
}

.extension-permission-panel > p {
    margin: 0.85rem 0 0;
    color: #9eb0c6;
    font-size: 0.67rem;
    text-align: center;
}

.distribution-paths {
    display: grid;
    gap: 0;
}

.distribution-paths li {
    position: relative;
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 0;
    grid-template-columns: 3.4rem minmax(0, 1fr);
}

.distribution-paths li:not(:last-child)::after {
    position: absolute;
    top: 4rem;
    bottom: -0.2rem;
    left: 1.7rem;
    width: 1px;
    background: var(--color-border-strong);
    content: "";
}

.distribution-paths li > span {
    z-index: 1;
    display: grid;
    width: 3.4rem;
    height: 3.4rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-blue);
}

.distribution-paths li > span svg {
    width: 1.3rem;
    height: 1.3rem;
}

.distribution-paths p,
.distribution-paths strong,
.distribution-paths small {
    display: block;
    margin: 0;
}

.distribution-paths strong {
    margin-bottom: 0.12rem;
    color: var(--color-navy);
    font-size: 0.96rem;
}

.distribution-paths small {
    color: var(--color-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.extension-change-visual {
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-surface);
}

.extension-change-visual ul {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.extension-change-visual li {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-bg-soft);
    grid-template-columns: 1.2rem minmax(0, 1fr);
}

.extension-change-visual li > svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-blue);
}

.extension-change-visual strong,
.extension-change-visual small {
    display: block;
}

.extension-change-visual strong {
    color: var(--color-navy);
    font-size: 0.8rem;
}

.extension-change-visual small {
    color: var(--color-muted);
    font-size: 0.68rem;
    line-height: 1.35;
}

.extension-maintenance-response > svg {
    stroke-width: 2;
}

.extension-process-section .section-heading {
    max-width: 58rem;
}

.extension-process {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.extension-process h3 {
    font-size: 0.8rem;
}

.extension-related-inner {
    max-width: 72rem;
}

.extension-related .related-pages {
    background: var(--color-bg-soft);
}

.extension-related .related-pages ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 67.99rem) {
    .extension-hero-visual {
        width: min(100%, 46rem);
        margin-inline: auto;
    }

    .extension-sense-grid,
    .extension-app-grid,
    .extension-connections-grid,
    .extension-security-grid,
    .extension-distribution-grid,
    .extension-maintenance-grid,
    .extension-capabilities-layout,
    .extension-use-layout {
        grid-template-columns: 1fr;
    }

    .extension-capabilities-heading,
    .extension-use-heading {
        position: static;
        max-width: var(--reading);
    }
}

@media (max-width: 48rem) {
    .extension-hero-visual {
        width: min(100%, 40rem);
    }

    .extension-hero-visual::before {
        width: 23rem;
        height: 23rem;
    }

    .extension-capability-list,
    .extension-use-list,
    .tool-placement-comparison,
    .extension-change-visual ul,
    .extension-related .related-pages ul {
        grid-template-columns: 1fr;
    }

    .extension-capability-list li:nth-child(odd),
    .extension-use-list li:nth-child(odd) {
        border-right: 0;
    }

    .extension-choice-grid {
        grid-template-columns: 1fr;
    }

    .extension-choice-bridge {
        min-height: 2rem;
    }

    .extension-system-flow {
        grid-template-columns: 1fr;
    }

    .extension-system-arrow span {
        width: 1px;
        height: 2rem;
    }

    .extension-system-arrow svg {
        transform: rotate(90deg);
    }
}

@media (max-width: 31rem) {
    .extension-hero-visual::before {
        width: 20rem;
        height: 20rem;
    }

    .extension-browser-body {
        grid-template-columns: 1fr;
    }

    .extension-site-content {
        padding: 1rem;
    }

    .extension-sidebar-demo {
        padding: 1rem;
        border-top: 1px solid var(--color-blue);
        border-left: 0;
    }

    .inline-tool-visual,
    .extension-system-flow,
    .extension-change-visual {
        padding: 1rem;
    }

    .extension-capability-list li,
    .extension-use-list li {
        padding-inline: 0;
    }

    .extension-switch-sequence {
        grid-template-columns: 1fr;
    }

    .extension-choice,
    .tool-placement-comparison article {
        padding: 1.1rem;
    }

    .extension-permission-panel {
        padding: 1rem;
    }

    .extension-permission-panel li {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .extension-permission-panel li b {
        padding-left: 1.45rem;
        text-align: left;
    }

    .extension-change-visual ul {
        grid-template-columns: 1fr;
    }
}

/* Web data collection service patterns */

.data-collection-hero-grid {
    gap: clamp(2.75rem, 5.5vw, 4.75rem);
    grid-template-columns: minmax(0, 0.85fr) minmax(32rem, 1.15fr);
}

.data-collection-hero h1 {
    max-width: 15ch;
}

.collection-hero-visual {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 0.65rem;
}

.collection-hero-visual::before {
    position: absolute;
    z-index: -1;
    width: 32rem;
    height: 32rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-soft);
    content: "";
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.collection-source-stack,
.collection-output-panel,
.research-loop-visual,
.delivery-map,
.source-choice-visual,
.collection-review-panel,
.collection-change-visual {
    min-width: 0;
    padding: clamp(1rem, 3vw, 1.4rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.collection-source-stack {
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
}

.collection-source-stack > p,
.collection-output-heading small {
    color: var(--color-muted);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.collection-source-stack > p {
    margin-bottom: 0.75rem;
}

.collection-source-stack > p span {
    display: inline-flex;
    margin-right: 0.3rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.3rem;
    background: var(--color-red-pill);
    color: var(--color-red);
}

.collection-source-cards {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.collection-source-cards article {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-red-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.collection-source-cards .browser-chrome {
    min-height: 1.75rem;
    padding: 0.35rem 0.5rem;
}

.collection-source-cards .browser-chrome b {
    font-size: 0.52rem;
}

.collection-source-cards article > p {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem;
    grid-template-columns: 1.4rem minmax(0, 1fr);
}

.collection-source-cards article > p > svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-red);
}

.collection-source-cards strong,
.collection-source-cards small {
    display: block;
}

.collection-source-cards strong {
    color: var(--color-navy);
    font-size: 0.71rem;
}

.collection-source-cards small {
    color: var(--color-muted);
    font-size: 0.59rem;
}

.collection-convergence,
.collection-change-path {
    display: grid;
    align-items: center;
    gap: 0.6rem;
    grid-template-columns: 1fr 2rem 1fr;
}

.collection-convergence span,
.collection-change-path span {
    height: 1px;
    background: var(--color-border-strong);
}

.collection-convergence svg,
.collection-change-path svg {
    width: 1rem;
    height: 1rem;
    margin-inline: auto;
    color: var(--color-blue);
    transform: rotate(90deg);
}

.collection-output-panel {
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.collection-output-heading {
    display: grid;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
    grid-template-columns: 2.4rem minmax(0, 1fr);
}

.collection-output-heading > span {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-green);
}

.collection-output-heading svg {
    width: 1.1rem;
    height: 1.1rem;
}

.collection-output-heading small,
.collection-output-heading strong {
    display: block;
}

.collection-output-heading small {
    color: var(--color-green);
}

.collection-output-heading strong {
    color: var(--color-navy);
    font-size: 0.9rem;
}

.collection-output-table {
    overflow: hidden;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.collection-output-table > div {
    display: grid;
    min-width: 0;
    grid-template-columns: 1.1fr 0.9fr 0.9fr;
}

.collection-output-table > div:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

.collection-output-table b,
.collection-output-table span {
    min-width: 0;
    padding: 0.42rem 0.5rem;
    overflow: hidden;
    font-size: 0.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collection-output-table b {
    background: var(--color-bg-soft);
    color: var(--color-muted);
    font-weight: 850;
}

.collection-output-table span {
    color: var(--color-navy);
    font-weight: 700;
}

.collection-output-panel > p {
    display: flex;
    margin: 0.65rem 0 0;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-green);
    font-size: 0.66rem;
    font-weight: 750;
}

.collection-output-panel > p svg {
    width: 0.9rem;
    height: 0.9rem;
}

.research-job-grid,
.collection-delivery-grid,
.collection-api-grid,
.collection-review-grid,
.collection-reliability-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.8fr) minmax(25rem, 1.2fr);
}

.research-job-section .section-heading,
.collection-delivery-section .section-heading,
.collection-api-section .section-heading,
.collection-review-section .section-heading,
.collection-reliability-section .section-heading {
    margin-bottom: 1.4rem;
}

.research-job-statement,
.collection-api-statement,
.collection-review-statement {
    color: var(--color-navy);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 800;
    line-height: 1.45;
}

.research-loop-visual {
    position: relative;
    display: grid;
    min-height: 22rem;
    place-items: center;
    background: var(--color-bg-soft);
    box-shadow: none;
}

.research-loop-center {
    z-index: 2;
    display: grid;
    width: 8.5rem;
    height: 8.5rem;
    place-items: center;
    align-content: center;
    gap: 0.15rem;
    border: 1px solid var(--color-blue);
    border-radius: 50%;
    background: var(--color-surface);
    text-align: center;
}

.research-loop-center svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.25rem;
    color: var(--color-blue);
}

.research-loop-center strong,
.research-loop-center small {
    display: block;
}

.research-loop-center strong {
    color: var(--color-navy);
    font-size: 0.82rem;
}

.research-loop-center small {
    color: var(--color-muted);
    font-size: 0.65rem;
}

.research-loop-visual ol {
    position: absolute;
    display: grid;
    width: min(92%, 28rem);
    margin: 0;
    padding: 0;
    gap: 7.2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
}

.research-loop-visual li {
    display: grid;
    min-width: 0;
    place-items: center;
    align-content: center;
    gap: 0.2rem;
    color: var(--color-navy);
    font-size: 0.68rem;
    font-weight: 750;
    text-align: center;
}

.research-loop-visual li > span {
    position: absolute;
    width: 1.3rem;
    height: 1.3rem;
    transform: translate(1.35rem, -1rem);
    color: var(--color-blue);
    font-size: 0.55rem;
}

.research-loop-visual li > svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-blue);
}

.research-loop-visual > p {
    position: absolute;
    right: 1rem;
    bottom: 0.9rem;
    left: 1rem;
    display: flex;
    margin: 0;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-muted);
    font-size: 0.67rem;
    font-weight: 700;
    text-align: center;
}

.research-loop-visual > p svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--color-blue);
}

.collection-types-layout {
    display: grid;
    align-items: start;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
}

.collection-types-heading {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}

.collection-types-heading h2 {
    font-size: clamp(2rem, 3.7vw, 3rem);
}

.collection-types-heading > p:not(.eyebrow) {
    color: var(--color-muted);
}

.collection-type-list,
.collection-example-timeline,
.collection-summary-visual ul,
.collection-workflow-strip,
.delivery-map ul,
.collection-comparison-grid ul,
.collection-change-sources ul,
.appropriate-use-panel ul,
.collection-fit-grid ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.collection-type-list {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.collection-type-list li {
    display: grid;
    min-width: 0;
    align-items: start;
    gap: 0.8rem;
    padding: 1.1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 1.4rem minmax(0, 1fr);
}

.collection-type-list li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.collection-type-list > li > svg {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.16rem;
    color: var(--color-blue);
}

.collection-type-list strong,
.collection-type-list small {
    display: block;
}

.collection-type-list strong {
    margin-bottom: 0.15rem;
    color: var(--color-navy);
    font-size: 0.94rem;
}

.collection-type-list small {
    color: var(--color-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.web-data-example-section {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.collection-example-timeline {
    display: grid;
    margin-top: 1.3rem;
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.collection-example-timeline li {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    color: var(--color-muted);
    font-size: 0.77rem;
    line-height: 1.35;
}

.collection-example-timeline span {
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border: 1px solid var(--color-red-step-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-red);
    font-size: 0.62rem;
    font-weight: 850;
}

.collection-summary-visual {
    margin-top: 1.3rem;
    overflow: hidden;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.collection-summary-heading {
    display: grid;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-green-soft);
    grid-template-columns: 1.5rem minmax(0, 1fr);
}

.collection-summary-heading > svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-green);
}

.collection-summary-heading strong,
.collection-summary-heading small {
    display: block;
}

.collection-summary-heading strong {
    color: var(--color-navy);
    font-size: 0.78rem;
}

.collection-summary-heading small {
    color: var(--color-muted);
    font-size: 0.67rem;
}

.collection-summary-visual li {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    color: var(--color-muted);
    font-size: 0.7rem;
}

.collection-summary-visual li:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

.collection-summary-visual li b {
    color: var(--color-green);
    font-size: 0.66rem;
}

.collection-workflow-section .section-heading {
    max-width: 56rem;
}

.collection-workflow-strip {
    position: relative;
    display: grid;
    margin-top: 2.5rem;
    gap: 1rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.collection-workflow-strip::before {
    position: absolute;
    top: 2.15rem;
    right: 8%;
    left: 8%;
    height: 1px;
    background: var(--color-border-strong);
    content: "";
}

.collection-workflow-strip li {
    position: relative;
    min-width: 0;
    padding: 4.8rem 0.7rem 0;
    text-align: center;
}

.collection-workflow-strip li > span {
    position: absolute;
    z-index: 2;
    top: -0.45rem;
    left: calc(50% + 1rem);
    color: var(--color-blue);
    font-size: 0.62rem;
    font-weight: 850;
}

.collection-workflow-strip li > svg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 4.3rem;
    height: 4.3rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-blue);
    transform: translateX(-50%);
}

.collection-workflow-strip h3 {
    min-height: 2.4em;
    margin-bottom: 0.35rem;
    color: var(--color-navy);
    font-size: 0.9rem;
}

.collection-workflow-strip p {
    color: var(--color-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.collection-workflow-message,
.collection-comparison-message {
    max-width: 58rem;
    margin: 2rem auto 0;
    color: var(--color-navy);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
}

.collection-delivery-note {
    color: var(--color-muted);
    font-size: 0.94rem;
}

.delivery-map {
    position: relative;
    display: grid;
    background: var(--color-bg-soft);
    box-shadow: none;
}

.delivery-map-center {
    display: grid;
    width: min(100%, 14rem);
    margin: 0 auto 1rem;
    place-items: center;
    align-content: center;
    gap: 0.15rem;
    padding: 1rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-large);
    background: var(--color-green-soft);
    text-align: center;
}

.delivery-map-center svg {
    width: 1.4rem;
    height: 1.4rem;
    margin-bottom: 0.25rem;
    color: var(--color-green);
}

.delivery-map-center strong,
.delivery-map-center small {
    display: block;
}

.delivery-map-center strong {
    color: var(--color-navy);
    font-size: 0.85rem;
}

.delivery-map-center small {
    color: var(--color-muted);
    font-size: 0.66rem;
}

.delivery-map ul {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.delivery-map li {
    display: grid;
    min-width: 0;
    min-height: 4.5rem;
    place-items: center;
    align-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-navy);
    font-size: 0.68rem;
    font-weight: 750;
    text-align: center;
}

.delivery-map li svg {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--color-blue);
}

.collection-browser-comparison .section-heading {
    max-width: 54rem;
}

.collection-comparison-grid {
    display: grid;
    align-items: stretch;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr) 4rem minmax(0, 1fr);
}

.collection-comparison-grid article {
    min-width: 0;
    padding: clamp(1.5rem, 4vw, 2.2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.collection-comparison-grid article:first-child {
    border-color: var(--color-blue);
    background: var(--color-blue-soft);
}

.collection-comparison-grid article > span {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    margin-bottom: 1rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-blue);
}

.collection-comparison-grid article > span svg {
    width: 1.3rem;
    height: 1.3rem;
}

.collection-comparison-grid article > p {
    margin-bottom: 0.5rem;
    color: var(--color-blue);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.collection-comparison-grid h3 {
    font-size: clamp(1.3rem, 2.4vw, 1.65rem);
}

.collection-comparison-grid ul {
    display: grid;
    margin-top: 1.1rem;
    gap: 0.65rem;
}

.collection-comparison-grid li,
.collection-fit-grid li {
    position: relative;
    padding-left: 1rem;
    color: var(--color-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.collection-comparison-grid li::before,
.collection-fit-grid li::before {
    position: absolute;
    top: 0.58em;
    left: 0;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: var(--color-green);
    content: "";
}

.collection-comparison-grid .text-link {
    margin-top: 1.2rem;
}

.collection-comparison-bridge {
    display: grid;
    place-items: center;
}

.collection-comparison-bridge span {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-muted);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.source-choice-visual {
    display: grid;
    background: var(--color-bg-soft);
    box-shadow: none;
}

.source-choice-visual article {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    grid-template-columns: 2.6rem minmax(0, 1fr) minmax(8rem, 0.75fr);
}

.source-choice-visual article > span {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.source-choice-preferred {
    border-color: var(--color-green-border) !important;
}

.source-choice-preferred > span {
    background: var(--color-green-soft) !important;
    color: var(--color-green) !important;
}

.source-choice-visual article > span svg {
    width: 1.2rem;
    height: 1.2rem;
}

.source-choice-visual p,
.source-choice-visual small,
.source-choice-visual strong {
    display: block;
    margin: 0;
}

.source-choice-visual small {
    color: var(--color-muted);
    font-size: 0.63rem;
}

.source-choice-visual strong {
    color: var(--color-navy);
    font-size: 0.88rem;
}

.source-choice-visual article > b {
    color: var(--color-muted);
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.35;
    text-align: right;
}

.source-choice-or {
    display: grid;
    margin-block: 0.75rem;
    align-items: center;
    gap: 0.65rem;
    grid-template-columns: 1fr auto 1fr;
}

.source-choice-or span {
    height: 1px;
    background: var(--color-border-strong);
}

.source-choice-or b {
    color: var(--color-muted);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.collection-review-panel {
    display: grid;
    gap: 0.65rem;
    background: var(--color-surface);
    box-shadow: none;
}

.review-lane {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    grid-template-columns: 2.5rem minmax(0, 1fr);
}

.review-lane > svg {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.7rem;
    border-radius: 50%;
}

.review-lane-expected {
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.review-lane-expected > svg {
    background: var(--color-surface);
    color: var(--color-green);
}

.review-lane-human {
    border-color: var(--color-blue);
    background: var(--color-blue-soft);
}

.review-lane-human > svg {
    background: var(--color-surface);
    color: var(--color-blue);
}

.review-lane small,
.review-lane strong {
    display: block;
}

.review-lane small {
    margin-bottom: 0.12rem;
    color: var(--color-muted);
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.review-lane strong {
    color: var(--color-navy);
    font-size: 0.8rem;
    line-height: 1.4;
}

.collection-change-visual {
    background: var(--color-bg-soft);
    box-shadow: none;
}

.collection-change-sources {
    padding: 1rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.collection-change-sources > p {
    margin-bottom: 0.75rem;
    color: var(--color-red);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

.collection-change-sources ul {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.collection-change-sources li {
    display: grid;
    min-width: 0;
    min-height: 3.8rem;
    place-items: center;
    align-content: center;
    gap: 0.3rem;
    padding: 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    color: var(--color-navy);
    font-size: 0.65rem;
    font-weight: 750;
    text-align: center;
}

.collection-change-sources li svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-red);
}

.collection-change-path {
    margin-block: 0.8rem;
}

.collection-maintenance-response {
    display: flex;
    width: min(100%, 27rem);
    margin-inline: auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-green-soft);
}

.collection-maintenance-response > svg {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    padding: 0.7rem;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-green);
}

.collection-maintenance-response small,
.collection-maintenance-response strong {
    display: block;
}

.collection-maintenance-response small {
    color: var(--color-green);
    font-size: 0.63rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.collection-maintenance-response strong {
    color: var(--color-navy);
    font-size: 0.82rem;
    line-height: 1.35;
}

.collection-access-section {
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background: #0b1c32;
    color: #c2cedd;
}

.collection-access-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.collection-access-section .eyebrow {
    color: #8ab0ff;
}

.collection-access-section h2 {
    color: #ffffff;
}

.collection-access-statement {
    max-width: 35rem;
    color: #ffffff;
    font-size: clamp(1.1rem, 2.2vw, 1.45rem);
    font-weight: 750;
    line-height: 1.45;
}

.appropriate-use-panel {
    padding: clamp(1.2rem, 4vw, 1.7rem);
    border: 1px solid #49627f;
    border-radius: var(--radius-large);
    background: #102945;
}

.appropriate-use-heading {
    display: grid;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #49627f;
    grid-template-columns: 2.5rem minmax(0, 1fr);
}

.appropriate-use-heading > svg {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.7rem;
    border-radius: 50%;
    background: #183959;
    color: #83dcb2;
}

.appropriate-use-heading small,
.appropriate-use-heading strong {
    display: block;
}

.appropriate-use-heading small {
    color: #8ab0ff;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.appropriate-use-heading strong {
    color: #ffffff;
    font-size: 1rem;
}

.appropriate-use-panel ul {
    display: grid;
    margin-top: 1rem;
    gap: 0.55rem;
}

.appropriate-use-panel li {
    display: grid;
    min-width: 0;
    align-items: start;
    gap: 0.7rem;
    padding: 0.7rem;
    border: 1px solid #36516e;
    border-radius: var(--radius-small);
    background: #0f2239;
    grid-template-columns: 1.2rem minmax(0, 1fr);
}

.appropriate-use-panel li > svg {
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
    color: #8ab0ff;
}

.appropriate-use-panel li strong,
.appropriate-use-panel li small {
    display: block;
}

.appropriate-use-panel li strong {
    color: #ffffff;
    font-size: 0.76rem;
}

.appropriate-use-panel li small {
    color: #c2cedd;
    font-size: 0.7rem;
    line-height: 1.4;
}

.appropriate-use-panel > p {
    margin: 0.85rem 0 0;
    color: #9eb0c6;
    font-size: 0.67rem;
    text-align: center;
}

.collection-process-section .section-heading {
    max-width: 58rem;
}

.collection-process {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.collection-process h3 {
    font-size: 0.8rem;
}

.collection-fit-section .section-heading {
    max-width: 54rem;
}

.collection-fit-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.collection-fit-grid article {
    min-width: 0;
    padding: clamp(1.5rem, 4vw, 2.2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-bg-soft);
}

.collection-fit-positive {
    border-color: var(--color-green-border) !important;
    background: var(--color-green-soft) !important;
}

.collection-fit-grid article > span {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    margin-bottom: 1rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-blue);
}

.collection-fit-positive > span {
    color: var(--color-green) !important;
}

.collection-fit-grid article > span svg {
    width: 1.3rem;
    height: 1.3rem;
}

.collection-fit-grid h3 {
    font-size: 1.2rem;
}

.collection-fit-grid ul {
    display: grid;
    margin-top: 1rem;
    gap: 0.65rem;
}

.collection-related-inner {
    max-width: 72rem;
}

.collection-related .related-pages {
    background: var(--color-surface);
}

.collection-related .related-pages ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 67.99rem) {
    .collection-hero-visual {
        width: min(100%, 46rem);
        margin-inline: auto;
    }

    .research-job-grid,
    .collection-delivery-grid,
    .collection-api-grid,
    .collection-review-grid,
    .collection-reliability-grid,
    .collection-access-grid,
    .collection-types-layout {
        grid-template-columns: 1fr;
    }

    .collection-types-heading {
        position: static;
        max-width: var(--reading);
    }

    .collection-workflow-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .collection-workflow-strip::before {
        display: none;
    }
}

@media (max-width: 48rem) {
    .collection-hero-visual {
        width: min(100%, 40rem);
    }

    .collection-hero-visual::before {
        width: 23rem;
        height: 23rem;
    }

    .collection-type-list,
    .collection-workflow-strip,
    .collection-comparison-grid,
    .collection-fit-grid,
    .collection-related .related-pages ul {
        grid-template-columns: 1fr;
    }

    .collection-type-list li:nth-child(odd) {
        border-right: 0;
    }

    .collection-workflow-strip li {
        display: grid;
        min-height: 5.5rem;
        align-items: center;
        gap: 0.9rem;
        padding: 0.65rem 0;
        grid-template-columns: 3.6rem minmax(0, 1fr);
        text-align: left;
    }

    .collection-workflow-strip li > span {
        top: 0.25rem;
        left: 2.7rem;
    }

    .collection-workflow-strip li > svg {
        position: static;
        width: 3.4rem;
        height: 3.4rem;
        margin: 0;
        padding: 1rem;
        transform: none;
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .collection-workflow-strip h3,
    .collection-workflow-strip p {
        min-height: 0;
        margin: 0;
        grid-column: 2;
    }

    .collection-comparison-bridge {
        min-height: 2rem;
    }

    .delivery-map ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .collection-change-sources ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 31rem) {
    .collection-hero-visual::before {
        width: 20rem;
        height: 20rem;
    }

    .collection-source-stack,
    .collection-output-panel,
    .research-loop-visual,
    .delivery-map,
    .source-choice-visual,
    .collection-review-panel,
    .collection-change-visual,
    .appropriate-use-panel {
        padding: 1rem;
    }

    .collection-source-cards article > p {
        gap: 0.35rem;
        padding: 0.55rem;
        grid-template-columns: 1.1rem minmax(0, 1fr);
    }

    .collection-source-cards article > p > svg {
        width: 0.95rem;
        height: 0.95rem;
    }

    .collection-type-list li {
        padding-inline: 0;
    }

    .collection-example-timeline {
        grid-template-columns: 1fr;
    }

    .source-choice-visual article {
        align-items: start;
        grid-template-columns: 2.4rem minmax(0, 1fr);
    }

    .source-choice-visual article > b {
        padding-left: 3.1rem;
        text-align: left;
        grid-column: 1 / -1;
    }

    .review-lane {
        align-items: start;
    }

    .collection-change-sources ul {
        grid-template-columns: 1fr;
    }

    .collection-fit-grid article,
    .collection-comparison-grid article {
        padding: 1.1rem;
    }
}

/* Web research problem-page patterns */

.research-hero-grid {
    gap: clamp(2.75rem, 5.5vw, 4.75rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(31rem, 1.1fr);
}

.research-hero h1 {
    max-width: 14ch;
}

.research-hero-visual {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 0.8rem;
}

.research-hero-visual::before {
    position: absolute;
    z-index: -1;
    width: 31rem;
    height: 31rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-soft);
    content: "";
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.research-search-panel,
.research-results-panel,
.research-routine-visual,
.research-review-output,
.research-relationship-visual,
.research-monitoring-comparison,
.research-source-change-visual {
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
}

.research-search-panel {
    padding: 1.15rem;
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
}

.research-search-panel > p {
    margin-bottom: 0.85rem;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1.45;
    text-transform: uppercase;
}

.research-search-panel > p span {
    display: inline-flex;
    margin-right: 0.3rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.3rem;
    background: var(--color-red-pill);
    color: var(--color-red);
}

.research-source-windows {
    display: grid;
    min-width: 0;
    gap: 0.55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.research-source-windows article {
    min-width: 0;
    overflow: hidden;
    padding-bottom: 0.65rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.research-browser-bar {
    display: flex;
    min-width: 0;
    min-height: 1.65rem;
    align-items: center;
    gap: 0.22rem;
    padding: 0.35rem 0.45rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.research-browser-bar i {
    width: 0.28rem;
    height: 0.28rem;
    flex: 0 0 0.28rem;
    border-radius: 50%;
    background: var(--color-border-strong);
}

.research-browser-bar span {
    overflow: hidden;
    margin-left: 0.25rem;
    color: var(--color-muted);
    font-size: 0.55rem;
    font-style: normal;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.research-search-field {
    display: flex;
    min-width: 0;
    margin: 0.65rem 0.55rem 0.4rem;
    align-items: center;
    gap: 0.35rem;
    padding: 0.48rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-navy);
    font-size: 0.61rem;
    font-weight: 750;
}

.research-search-field svg {
    width: 0.8rem;
    height: 0.8rem;
    flex: 0 0 0.8rem;
    color: var(--color-blue);
}

.research-source-windows article > small {
    display: block;
    padding-inline: 0.65rem;
    color: var(--color-muted);
    font-size: 0.58rem;
}

.research-convergence,
.research-change-path {
    display: grid;
    align-items: center;
    gap: 0.65rem;
    grid-template-columns: 1fr 2.2rem 1fr;
}

.research-convergence span,
.research-change-path span {
    height: 1px;
    background: var(--color-border-strong);
}

.research-convergence svg,
.research-change-path svg {
    width: 1.1rem;
    height: 1.1rem;
    margin-inline: auto;
    color: var(--color-blue);
    transform: rotate(90deg);
}

.research-results-panel {
    padding: 1.15rem;
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.research-results-heading {
    display: flex;
    margin-bottom: 0.75rem;
    align-items: center;
    gap: 0.65rem;
}

.research-results-heading > span {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    place-items: center;
    border: 1px solid var(--color-green-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-green);
}

.research-results-heading svg {
    width: 1rem;
    height: 1rem;
}

.research-results-heading p,
.research-results-panel > p {
    margin: 0;
}

.research-results-heading small,
.research-results-heading strong {
    display: block;
}

.research-results-heading small {
    color: var(--color-green);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.research-results-heading strong {
    color: var(--color-navy);
    font-size: 0.84rem;
}

.research-results-panel ul,
.research-routine-visual ol,
.research-repeat-list,
.research-example-timeline,
.research-review-output ul,
.research-judgment-visual ul,
.research-output-shelf,
.research-relationship-visual ul,
.research-source-change-visual ul,
.research-process {
    margin: 0;
    padding: 0;
    list-style: none;
}

.research-results-panel ul {
    display: grid;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.research-results-panel li {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.65rem;
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.2fr) auto;
    font-size: 0.63rem;
}

.research-results-panel li:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

.research-results-panel b {
    color: var(--color-navy);
}

.research-results-panel li span {
    overflow: hidden;
    color: var(--color-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.research-results-panel em {
    color: var(--color-green);
    font-size: 0.56rem;
    font-style: normal;
    font-weight: 850;
    text-transform: uppercase;
}

.research-results-panel > p {
    display: flex;
    margin-top: 0.7rem;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-muted);
    font-size: 0.67rem;
    font-weight: 700;
}

.research-results-panel > p svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--color-green);
}

.research-routine-grid,
.research-outputs-grid,
.research-relationship-grid,
.research-monitoring-grid,
.research-reliability-grid,
.research-access-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
}

.research-routine-section .section-heading,
.research-outputs-section .section-heading,
.research-monitoring-section .section-heading,
.research-reliability-section .section-heading {
    margin-bottom: 1.35rem;
}

.research-routine-statement,
.research-output-note,
.research-reliability-note {
    color: var(--color-navy);
    font-size: 1.02rem;
    font-weight: 750;
    line-height: 1.55;
}

.research-routine-visual {
    padding: clamp(1.3rem, 3vw, 2rem);
    background: var(--color-bg-soft);
}

.research-routine-visual > p {
    margin-bottom: 1rem;
    color: var(--color-blue);
    font-size: 0.73rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.research-routine-visual ol {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.research-routine-visual li {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 8.5rem;
    place-items: center;
    align-content: center;
    padding: 0.85rem 0.65rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    text-align: center;
}

.research-routine-visual li:not(:last-child) {
    border-right: 0;
}

.research-routine-visual li > span {
    position: absolute;
    top: 0.45rem;
    left: 0.55rem;
    color: var(--color-blue);
    font-size: 0.6rem;
    font-weight: 850;
}

.research-routine-visual li > svg {
    width: 1.3rem;
    height: 1.3rem;
    margin-bottom: 0.45rem;
    color: var(--color-blue);
}

.research-routine-visual strong,
.research-routine-visual small {
    display: block;
}

.research-routine-visual strong {
    color: var(--color-navy);
    font-size: 0.75rem;
}

.research-routine-visual small {
    margin-top: 0.15rem;
    color: var(--color-muted);
    font-size: 0.64rem;
    line-height: 1.35;
}

.research-routine-examples {
    display: flex;
    margin-top: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.research-routine-examples span {
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.64rem;
    font-weight: 700;
}

.research-repeat-layout {
    display: grid;
    align-items: start;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
}

.research-repeat-heading {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}

.research-repeat-heading h2 {
    font-size: clamp(2rem, 3.7vw, 3rem);
}

.research-repeat-heading > p:not(.eyebrow) {
    color: var(--color-muted);
}

.research-repeat-heading .research-repeat-message {
    margin-top: 1.2rem;
    color: var(--color-navy);
    font-weight: 750;
}

.research-repeat-list {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.research-repeat-list li {
    display: grid;
    min-width: 0;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 1.7rem minmax(0, 1fr);
}

.research-repeat-list li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.research-repeat-list li > span {
    color: var(--color-blue);
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.05em;
}

.research-repeat-list p {
    margin: 0;
}

.research-repeat-list strong,
.research-repeat-list small {
    display: block;
}

.research-repeat-list strong {
    margin-bottom: 0.12rem;
    color: var(--color-navy);
    font-size: 0.9rem;
}

.research-repeat-list small {
    color: var(--color-muted);
    font-size: 0.79rem;
    line-height: 1.45;
}

.research-example {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.research-example-timeline {
    display: grid;
    gap: 0.48rem;
    margin-top: 1rem;
}

.research-example-timeline li {
    display: grid;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-muted);
    font-size: 0.8rem;
    grid-template-columns: 1.55rem minmax(0, 1fr);
}

.research-example-timeline span {
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border: 1px solid var(--color-red-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-red);
    font-size: 0.63rem;
    font-weight: 850;
}

.research-review-output {
    overflow: hidden;
    margin-top: 1rem;
    border-color: var(--color-green-border);
    background: var(--color-surface);
    box-shadow: none;
}

.research-review-output > p {
    display: grid;
    margin: 0;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-green-border);
    background: var(--color-green-soft);
    grid-template-columns: 1.3rem minmax(0, 1fr);
}

.research-review-output > p svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-green);
}

.research-review-output > p strong,
.research-review-output > p small {
    display: block;
}

.research-review-output > p strong {
    color: var(--color-navy);
    font-size: 0.78rem;
}

.research-review-output > p small {
    color: var(--color-muted);
    font-size: 0.64rem;
}

.research-review-output li {
    display: grid;
    align-items: start;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    color: var(--color-muted);
    font-size: 0.73rem;
    grid-template-columns: 1rem minmax(0, 1fr);
}

.research-review-output li:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

.research-review-output li svg {
    width: 0.85rem;
    height: 0.85rem;
    margin-top: 0.1rem;
    color: var(--color-green);
}

.research-review-output .research-human-row svg {
    color: var(--color-blue);
}

.research-judgment-section {
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background: #0b1c32;
    color: #c2cedd;
}

.research-judgment-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
}

.research-judgment-section .eyebrow {
    color: #8ab0ff;
}

.research-judgment-section h2 {
    color: #ffffff;
}

.research-judgment-statement {
    max-width: 34rem;
    color: #ffffff;
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    font-weight: 750;
    line-height: 1.45;
}

.research-judgment-visual {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
    grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr);
}

.research-machine-column,
.research-person-column {
    min-width: 0;
    padding: 1.1rem;
    border: 1px solid #49627f;
    border-radius: var(--radius-large);
    background: #102945;
}

.research-machine-column > p,
.research-person-column > p {
    display: flex;
    margin-bottom: 0.8rem;
    align-items: center;
    gap: 0.45rem;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
}

.research-machine-column > p svg,
.research-person-column > p svg {
    width: 1rem;
    height: 1rem;
    color: #72d7a1;
}

.research-person-column > p svg {
    color: #8ab0ff;
}

.research-judgment-visual ul {
    display: grid;
    gap: 0.4rem;
}

.research-judgment-visual li {
    padding: 0.48rem 0.55rem;
    border: 1px solid #49627f;
    border-radius: var(--radius-small);
    background: #0b1c32;
    color: #dce6f2;
    font-size: 0.68rem;
}

.research-review-bridge {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
}

.research-review-bridge span {
    width: 100%;
    height: 1px;
    background: #49627f;
}

.research-review-bridge svg {
    width: 1.1rem;
    height: 1.1rem;
    color: #8ab0ff;
}

.research-output-note {
    max-width: 34rem;
}

.research-output-shelf {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.research-output-shelf > div {
    display: grid;
    min-width: 0;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 1.5rem minmax(0, 1fr);
}

.research-output-shelf > div:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.research-output-shelf > div:last-child {
    grid-column: 1 / -1;
    border-right: 0;
}

.research-output-shelf svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-blue);
}

.research-output-shelf strong,
.research-output-shelf small {
    display: block;
}

.research-output-shelf strong {
    color: var(--color-navy);
    font-size: 0.9rem;
}

.research-output-shelf small {
    margin-top: 0.12rem;
    color: var(--color-muted);
    font-size: 0.77rem;
    line-height: 1.4;
}

.research-relationship-grid {
    align-items: start;
}

.research-relationship-grid > div:first-child > p:not(.eyebrow) {
    color: var(--color-muted);
}

.research-relationship-visual {
    display: grid;
    min-width: 0;
    align-items: stretch;
    gap: 0.7rem;
    padding: clamp(1.3rem, 3vw, 2rem);
    background: var(--color-surface);
    grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr);
}

.research-relationship-visual article {
    position: relative;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-bg-soft);
}

.research-relationship-visual article > span {
    position: absolute;
    top: 0.65rem;
    right: 0.7rem;
    color: var(--color-blue);
    font-size: 0.62rem;
    font-weight: 850;
}

.research-relationship-visual article > svg {
    width: 1.35rem;
    height: 1.35rem;
    margin-bottom: 0.6rem;
    color: var(--color-blue);
}

.research-relationship-visual h3 {
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
}

.research-relationship-visual li,
.research-relationship-visual article > p {
    color: var(--color-muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.research-relationship-visual li {
    position: relative;
    padding: 0.3rem 0 0.3rem 0.75rem;
}

.research-relationship-visual li::before {
    position: absolute;
    top: 0.78rem;
    left: 0;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--color-blue);
    content: "";
}

.research-relationship-arrow {
    display: grid;
    place-items: center;
    color: var(--color-blue);
}

.research-relationship-arrow svg {
    width: 1.2rem;
    height: 1.2rem;
}

.research-relationship-visual > p {
    margin: 0;
    padding-top: 0.4rem;
    color: var(--color-navy);
    font-size: 0.82rem;
    font-weight: 800;
    grid-column: 1 / -1;
    text-align: center;
}

.research-monitoring-grid {
    align-items: start;
}

.research-monitoring-grid > div:first-child > p {
    color: var(--color-muted);
}

.research-monitoring-comparison {
    overflow: hidden;
    background: var(--color-bg-soft);
}

.research-monitoring-comparison article {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
    padding: 1.15rem;
    grid-template-columns: 2.2rem minmax(0, 1.2fr) minmax(0, 0.8fr) 1rem minmax(0, 0.8fr) 1rem minmax(0, 0.8fr);
}

.research-monitoring-comparison article:not(:last-of-type) {
    border-bottom: 1px solid var(--color-border);
}

.research-monitoring-comparison article > span {
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-blue);
}

.research-monitoring-comparison article > span svg,
.research-monitoring-comparison article > svg {
    width: 1rem;
    height: 1rem;
}

.research-monitoring-comparison article > svg {
    color: var(--color-border-strong);
}

.research-monitoring-comparison h3 {
    font-size: 0.88rem;
}

.research-monitoring-comparison article p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.67rem;
    font-weight: 700;
    text-align: center;
}

.research-monitoring-comparison > p {
    margin: 0;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.68rem;
    text-align: center;
}

.research-reliability-grid {
    align-items: start;
}

.research-source-change-visual {
    padding: clamp(1.3rem, 3vw, 2rem);
    background: var(--color-bg-soft);
}

.research-source-status > p {
    margin-bottom: 0.8rem;
    color: var(--color-red);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-align: center;
    text-transform: uppercase;
}

.research-source-status ul {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.research-source-status li {
    padding: 0.65rem 0.45rem;
    border: 1px solid var(--color-red-border);
    border-radius: var(--radius-small);
    background: var(--color-red-soft);
    color: var(--color-navy);
    font-size: 0.67rem;
    font-weight: 700;
    text-align: center;
}

.research-change-path {
    margin-block: 0.8rem;
}

.research-verification-status {
    padding: 1rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-green-soft);
}

.research-verification-status > p {
    display: flex;
    margin-bottom: 0.7rem;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
}

.research-verification-status > p svg {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--color-green);
}

.research-verification-status small,
.research-verification-status strong {
    display: block;
}

.research-verification-status small {
    color: var(--color-green);
    font-size: 0.6rem;
    font-weight: 850;
    text-transform: uppercase;
}

.research-verification-status strong {
    color: var(--color-navy);
    font-size: 0.82rem;
}

.research-verification-status ul {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.research-verification-status li {
    padding: 0.55rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.65rem;
    text-align: center;
}

.research-access-section {
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background: #0b1c32;
    color: #c2cedd;
}

.research-access-section .eyebrow {
    color: #8ab0ff;
}

.research-access-section h2 {
    color: #ffffff;
}

.research-access-grid > div:last-child > p {
    max-width: 42rem;
}

.research-access-statement {
    color: #ffffff;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 750;
    line-height: 1.5;
}

.research-process-section .section-heading {
    max-width: 48rem;
}

.research-process {
    position: relative;
    display: grid;
    margin-top: 3rem;
    gap: 1rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.research-process::before {
    position: absolute;
    top: 2.2rem;
    right: 7%;
    left: 7%;
    height: 1px;
    background: var(--color-border-strong);
    content: "";
}

.research-process li {
    position: relative;
    display: grid;
    min-width: 0;
    justify-items: center;
    align-content: start;
    text-align: center;
}

.research-process li > span {
    position: absolute;
    z-index: 2;
    top: -0.35rem;
    right: calc(50% - 2.8rem);
    color: var(--color-blue);
    font-size: 0.61rem;
    font-weight: 850;
}

.research-process li > svg {
    z-index: 1;
    width: 4.4rem;
    height: 4.4rem;
    margin-bottom: 0.8rem;
    padding: 1.35rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-blue);
}

.research-process h3 {
    max-width: 10rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

.research-related-inner {
    max-width: 72rem;
}

.research-related .related-pages {
    background: var(--color-surface);
}

.research-related .related-pages ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 67.99rem) {
    .research-hero-visual {
        width: min(100%, 46rem);
        margin-inline: auto;
    }

    .research-routine-grid,
    .research-repeat-layout,
    .research-outputs-grid,
    .research-relationship-grid,
    .research-monitoring-grid,
    .research-reliability-grid,
    .research-access-grid,
    .research-judgment-grid {
        grid-template-columns: 1fr;
    }

    .research-repeat-heading {
        position: static;
        max-width: var(--reading);
    }

    .research-process {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .research-process::before {
        display: none;
    }
}

@media (max-width: 48rem) {
    .research-hero-visual {
        width: min(100%, 38rem);
    }

    .research-hero-visual::before {
        width: 23rem;
        height: 23rem;
    }

    .research-repeat-list,
    .research-output-shelf,
    .research-related .related-pages ul {
        grid-template-columns: 1fr;
    }

    .research-repeat-list li:nth-child(odd),
    .research-output-shelf > div:nth-child(odd) {
        border-right: 0;
    }

    .research-output-shelf > div:last-child {
        grid-column: auto;
    }

    .research-relationship-visual {
        grid-template-columns: 1fr;
    }

    .research-relationship-arrow {
        min-height: 2rem;
        transform: rotate(90deg);
    }

    .research-monitoring-comparison article {
        grid-template-columns: 2.2rem minmax(0, 1fr);
    }

    .research-monitoring-comparison article > p {
        padding: 0.55rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-small);
        background: var(--color-surface);
        grid-column: 1 / -1;
    }

    .research-monitoring-comparison article > svg {
        margin-inline: auto;
        grid-column: 1 / -1;
        transform: rotate(90deg);
    }

    .research-process {
        max-width: 42rem;
        margin-inline: auto;
        gap: 0;
        grid-template-columns: 1fr;
    }

    .research-process li {
        min-height: 5.7rem;
        justify-items: start;
        align-items: center;
        gap: 1rem;
        padding-block: 0.7rem;
        grid-template-columns: 4rem minmax(0, 1fr);
        text-align: left;
    }

    .research-process li > span {
        top: 0.4rem;
        right: auto;
        left: 2.8rem;
    }

    .research-process li > svg {
        width: 3.5rem;
        height: 3.5rem;
        margin: 0;
        padding: 1rem;
        grid-column: 1;
    }

    .research-process h3 {
        max-width: none;
        grid-column: 2;
    }

    .research-process li:not(:last-child)::after {
        position: absolute;
        top: 4.2rem;
        bottom: -0.8rem;
        left: 1.75rem;
        width: 1px;
        background: var(--color-border-strong);
        content: "";
    }
}

@media (max-width: 31rem) {
    .research-search-panel,
    .research-results-panel,
    .research-routine-visual,
    .research-relationship-visual,
    .research-source-change-visual {
        padding: 1rem;
    }

    .research-hero-visual::before {
        width: 20rem;
        height: 20rem;
    }

    .research-source-windows {
        grid-template-columns: 1fr;
    }

    .research-source-windows article {
        padding-bottom: 0.5rem;
    }

    .research-search-field {
        margin-block: 0.5rem 0.3rem;
    }

    .research-routine-visual ol {
        grid-template-columns: 1fr;
    }

    .research-routine-visual li {
        min-height: 5.8rem;
    }

    .research-routine-visual li:not(:last-child) {
        border-right: 1px solid var(--color-border);
        border-bottom: 0;
    }

    .research-repeat-list li {
        padding-inline: 0;
    }

    .research-judgment-visual {
        grid-template-columns: 1fr;
    }

    .research-review-bridge {
        min-height: 2.3rem;
        transform: rotate(90deg);
    }

    .research-source-status ul,
    .research-verification-status ul {
        grid-template-columns: 1fr;
    }

    .research-change-path {
        gap: 0.4rem;
    }
}

/* Website monitoring problem-page patterns */

.monitoring-hero-grid {
    gap: clamp(2.75rem, 5.5vw, 4.75rem);
    grid-template-columns: minmax(0, 0.92fr) minmax(31rem, 1.08fr);
}

.monitoring-hero h1 {
    max-width: 14ch;
}

.monitoring-hero-visual {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 0.8rem;
}

.monitoring-hero-visual::before {
    position: absolute;
    z-index: -1;
    width: 31rem;
    height: 31rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-soft);
    content: "";
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.monitoring-known-sources,
.monitoring-changed-result,
.monitoring-check-cycle,
.monitoring-history-visual,
.monitoring-example-output,
.monitoring-reliability-visual,
.monitoring-review-queue {
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
}

.monitoring-known-sources {
    padding: 1.15rem;
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
}

.monitoring-known-sources > p {
    margin-bottom: 0.85rem;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.monitoring-known-sources > p span {
    display: inline-flex;
    margin-right: 0.3rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.3rem;
    background: var(--color-red-pill);
    color: var(--color-red);
}

.monitoring-source-cards {
    display: grid;
    min-width: 0;
    gap: 0.55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.monitoring-source-cards article {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.monitoring-browser-bar {
    display: flex;
    min-width: 0;
    min-height: 1.65rem;
    align-items: center;
    gap: 0.22rem;
    padding: 0.35rem 0.45rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.monitoring-browser-bar i {
    width: 0.28rem;
    height: 0.28rem;
    flex: 0 0 0.28rem;
    border-radius: 50%;
    background: var(--color-border-strong);
}

.monitoring-browser-bar span {
    overflow: hidden;
    margin-left: 0.25rem;
    color: var(--color-muted);
    font-size: 0.55rem;
    font-style: normal;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitoring-source-cards article > p {
    display: grid;
    min-width: 0;
    margin: 0;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 0.55rem;
    grid-template-columns: 1.1rem minmax(0, 1fr);
}

.monitoring-source-cards article > p svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-blue);
}

.monitoring-source-cards strong,
.monitoring-source-cards small,
.monitoring-change-heading small,
.monitoring-change-heading strong,
.monitoring-cycle-heading small,
.monitoring-cycle-heading strong,
.monitoring-review-heading small,
.monitoring-review-heading strong {
    display: block;
}

.monitoring-source-cards strong {
    color: var(--color-navy);
    font-size: 0.68rem;
}

.monitoring-source-cards small {
    color: var(--color-muted);
    font-size: 0.58rem;
}

.monitoring-flow-step,
.monitoring-reliability-path {
    display: grid;
    align-items: center;
    gap: 0.6rem;
    grid-template-columns: 1fr auto 1fr;
}

.monitoring-flow-step > span,
.monitoring-reliability-path > span {
    height: 1px;
    background: var(--color-border-strong);
}

.monitoring-flow-step > div {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-blue);
}

.monitoring-flow-step svg,
.monitoring-reliability-path svg {
    width: 1rem;
    height: 1rem;
}

.monitoring-flow-step small {
    color: var(--color-muted);
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
}

.monitoring-changed-result {
    padding: 1.15rem;
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.monitoring-change-heading,
.monitoring-cycle-heading,
.monitoring-review-heading {
    display: flex;
    margin-bottom: 0.75rem;
    align-items: center;
    gap: 0.65rem;
}

.monitoring-change-heading > span,
.monitoring-cycle-heading > svg,
.monitoring-review-heading > svg {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    padding: 0.6rem;
    border: 1px solid var(--color-green-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-green);
}

.monitoring-change-heading > span {
    display: grid;
    padding: 0;
    place-items: center;
}

.monitoring-change-heading svg {
    width: 1rem;
    height: 1rem;
}

.monitoring-change-heading p,
.monitoring-changed-result > p,
.monitoring-value-comparison p {
    margin: 0;
}

.monitoring-change-heading small {
    color: var(--color-green);
    font-size: 0.61rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.monitoring-change-heading strong {
    color: var(--color-navy);
    font-size: 0.85rem;
}

.monitoring-value-comparison {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
    grid-template-columns: minmax(0, 1fr) 1.4rem minmax(0, 1fr);
}

.monitoring-value-comparison > div {
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    text-align: center;
}

.monitoring-value-comparison small,
.monitoring-value-comparison strong {
    display: block;
}

.monitoring-value-comparison small {
    color: var(--color-muted);
    font-size: 0.58rem;
}

.monitoring-value-comparison strong {
    color: var(--color-navy);
    font-size: 0.75rem;
}

.monitoring-value-comparison > svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-green);
}

.monitoring-changed-result > p {
    display: flex;
    margin-top: 0.7rem;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-muted);
    font-size: 0.67rem;
    font-weight: 700;
}

.monitoring-changed-result > p svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--color-green);
}

.monitoring-job-grid,
.monitoring-change-grid,
.monitoring-delivery-grid,
.monitoring-reliability-grid,
.monitoring-access-grid,
.monitoring-review-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
}

.monitoring-job-section .section-heading,
.monitoring-change-section .section-heading,
.monitoring-delivery-section .section-heading,
.monitoring-reliability-section .section-heading,
.monitoring-review-section .section-heading {
    margin-bottom: 1.35rem;
}

.monitoring-job-statement,
.monitoring-change-statement,
.monitoring-delivery-note,
.monitoring-reliability-note,
.monitoring-review-statement {
    color: var(--color-navy);
    font-size: 1.02rem;
    font-weight: 750;
    line-height: 1.55;
}

.monitoring-check-cycle {
    padding: clamp(1.3rem, 3vw, 2rem);
    background: var(--color-bg-soft);
}

.monitoring-cycle-heading > svg {
    border-color: var(--color-border);
    color: var(--color-blue);
}

.monitoring-cycle-heading small {
    color: var(--color-blue);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.monitoring-cycle-heading strong {
    color: var(--color-navy);
    font-size: 0.85rem;
}

.monitoring-check-cycle ol,
.monitoring-type-list,
.monitoring-example-timeline,
.monitoring-history-visual ol,
.monitoring-rule-list,
.monitoring-review-queue ul,
.monitoring-process {
    margin: 0;
    padding: 0;
    list-style: none;
}

.monitoring-check-cycle ol {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.monitoring-check-cycle li {
    position: relative;
    min-width: 0;
    padding: 1rem 0.7rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    text-align: center;
}

.monitoring-check-cycle li:not(:last-child) {
    border-right: 0;
}

.monitoring-check-cycle li > span {
    position: absolute;
    top: 0.4rem;
    left: 0.5rem;
    color: var(--color-blue);
    font-size: 0.58rem;
    font-weight: 850;
}

.monitoring-check-cycle li strong,
.monitoring-check-cycle li small {
    display: block;
}

.monitoring-check-cycle li strong {
    color: var(--color-navy);
    font-size: 0.72rem;
}

.monitoring-check-cycle li small {
    margin-top: 0.15rem;
    color: var(--color-muted);
    font-size: 0.62rem;
}

.monitoring-cycle-examples {
    display: flex;
    margin-top: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.monitoring-cycle-examples span {
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.64rem;
    font-weight: 700;
}

.monitoring-types-layout,
.monitoring-meaning-layout {
    display: grid;
    align-items: start;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
}

.monitoring-types-heading,
.monitoring-meaning-heading {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}

.monitoring-types-heading h2,
.monitoring-meaning-heading h2 {
    font-size: clamp(2rem, 3.7vw, 3rem);
}

.monitoring-types-heading > p:not(.eyebrow),
.monitoring-meaning-heading > p:not(.eyebrow) {
    color: var(--color-muted);
}

.monitoring-type-list {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.monitoring-type-list li {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 0.65rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 1.4rem minmax(0, 1fr);
}

.monitoring-type-list li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.monitoring-type-list li > span {
    position: absolute;
    top: 0.45rem;
    right: 0.6rem;
    color: var(--color-blue);
    font-size: 0.58rem;
    font-weight: 850;
}

.monitoring-type-list svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--color-blue);
}

.monitoring-type-list strong,
.monitoring-type-list small {
    display: block;
    grid-column: 2;
}

.monitoring-type-list strong {
    color: var(--color-navy);
    font-size: 0.88rem;
}

.monitoring-type-list small {
    margin-top: -0.5rem;
    color: var(--color-muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.monitoring-example {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.monitoring-example-timeline {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.monitoring-example-timeline li {
    display: grid;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-muted);
    font-size: 0.8rem;
    grid-template-columns: 1.55rem minmax(0, 1fr);
}

.monitoring-example-timeline span {
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border: 1px solid var(--color-red-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-red);
    font-size: 0.63rem;
    font-weight: 850;
}

.monitoring-example-output {
    overflow: hidden;
    margin-top: 1rem;
    border-color: var(--color-green-border);
    background: var(--color-surface);
    box-shadow: none;
}

.monitoring-example-output > div {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) auto;
    font-size: 0.69rem;
}

.monitoring-example-output > div:not(:last-of-type) {
    border-bottom: 1px solid var(--color-border);
}

.monitoring-example-output > div span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-navy);
    font-weight: 800;
}

.monitoring-example-output > div svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--color-blue);
}

.monitoring-example-output b {
    color: var(--color-muted);
}

.monitoring-example-output em {
    color: var(--color-green);
    font-size: 0.58rem;
    font-style: normal;
    font-weight: 850;
    text-transform: uppercase;
}

.monitoring-example-output > p {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.7rem;
    border-top: 1px solid var(--color-green-border);
    background: var(--color-green-soft);
    color: var(--color-muted);
    font-size: 0.67rem;
    font-weight: 700;
}

.monitoring-example-output > p svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--color-green);
}

.monitoring-history-visual {
    padding: clamp(1.3rem, 3vw, 2rem);
    background: var(--color-surface);
}

.monitoring-history-visual ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.monitoring-history-visual li {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 9rem;
    place-items: center;
    align-content: center;
    padding: 1rem 0.65rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    text-align: center;
}

.monitoring-history-visual li:not(:last-child) {
    border-right: 0;
}

.monitoring-history-visual li > span {
    position: absolute;
    top: 0.45rem;
    left: 0.55rem;
    color: var(--color-blue);
    font-size: 0.58rem;
    font-weight: 850;
}

.monitoring-history-visual li > svg {
    width: 1.35rem;
    height: 1.35rem;
    margin-bottom: 0.45rem;
    color: var(--color-blue);
}

.monitoring-history-visual strong,
.monitoring-history-visual small {
    display: block;
}

.monitoring-history-visual strong {
    color: var(--color-navy);
    font-size: 0.72rem;
}

.monitoring-history-visual small {
    margin-top: 0.15rem;
    color: var(--color-muted);
    font-size: 0.61rem;
}

.monitoring-meaning-heading .monitoring-meaning-message {
    margin-top: 1.2rem;
    color: var(--color-navy);
    font-weight: 750;
}

.monitoring-rule-list {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.monitoring-rule-list li {
    display: grid;
    min-width: 0;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 4.7rem minmax(0, 1fr);
}

.monitoring-rule-list li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.monitoring-rule-list li > span {
    align-self: start;
    padding: 0.25rem 0.35rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
    background: var(--color-blue-soft);
    color: var(--color-blue);
    font-size: 0.62rem;
    font-weight: 850;
    text-align: center;
    text-transform: uppercase;
}

.monitoring-rule-list p {
    margin: 0;
}

.monitoring-rule-list strong,
.monitoring-rule-list small {
    display: block;
}

.monitoring-rule-list strong {
    color: var(--color-navy);
    font-size: 0.87rem;
}

.monitoring-rule-list small {
    margin-top: 0.12rem;
    color: var(--color-muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.monitoring-delivery-options {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.monitoring-delivery-options > div {
    display: grid;
    min-width: 0;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 1.5rem minmax(0, 1fr);
}

.monitoring-delivery-options > div:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.monitoring-delivery-options > div:last-child {
    border-right: 0;
    grid-column: 1 / -1;
}

.monitoring-delivery-options svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-blue);
}

.monitoring-delivery-options strong,
.monitoring-delivery-options small {
    display: block;
}

.monitoring-delivery-options strong {
    color: var(--color-navy);
    font-size: 0.9rem;
}

.monitoring-delivery-options small {
    margin-top: 0.12rem;
    color: var(--color-muted);
    font-size: 0.77rem;
    line-height: 1.4;
}

.monitoring-distinctions-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.monitoring-distinctions-grid article {
    min-width: 0;
    padding: clamp(1.4rem, 3vw, 2.1rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.monitoring-distinctions-grid article > p:not(.eyebrow) {
    color: var(--color-muted);
}

.monitoring-distinctions-grid h2 {
    font-size: clamp(1.7rem, 3vw, 2.35rem);
}

.monitoring-distinction-flow {
    display: grid;
    margin-top: 1.3rem;
    align-items: center;
    gap: 0.45rem;
    grid-template-columns: minmax(0, 1fr) 1rem minmax(0, 1fr) 1rem minmax(0, 1fr);
}

.monitoring-distinction-flow span,
.monitoring-distinction-flow strong {
    min-width: 0;
    padding: 0.6rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-bg-soft);
    color: var(--color-navy);
    font-size: 0.66rem;
    text-align: center;
}

.monitoring-distinction-flow strong {
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.monitoring-distinction-flow svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--color-blue);
}

.monitoring-reliability-grid {
    align-items: start;
}

.monitoring-reliability-visual {
    padding: clamp(1.3rem, 3vw, 2rem);
    background: var(--color-bg-soft);
}

.monitoring-source-state,
.monitoring-change-state {
    padding: 1rem;
    border: 1px solid;
    border-radius: var(--radius-small);
}

.monitoring-source-state {
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.monitoring-change-state {
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
}

.monitoring-source-state > p,
.monitoring-change-state > p {
    display: flex;
    margin-bottom: 0.65rem;
    align-items: center;
    gap: 0.55rem;
}

.monitoring-source-state > p svg,
.monitoring-change-state > p svg {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--color-green);
}

.monitoring-change-state > p svg {
    color: var(--color-red);
}

.monitoring-source-state small,
.monitoring-source-state strong,
.monitoring-change-state small,
.monitoring-change-state strong {
    display: block;
}

.monitoring-source-state small,
.monitoring-change-state small {
    color: var(--color-muted);
    font-size: 0.6rem;
    font-weight: 850;
    text-transform: uppercase;
}

.monitoring-source-state strong,
.monitoring-change-state strong {
    color: var(--color-navy);
    font-size: 0.82rem;
}

.monitoring-source-state > b {
    display: block;
    padding: 0.55rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-green);
    font-size: 0.69rem;
    text-align: center;
}

.monitoring-reliability-path {
    margin-block: 0.8rem;
}

.monitoring-reliability-path svg {
    margin-inline: auto;
    color: var(--color-red);
    transform: rotate(90deg);
}

.monitoring-change-state ul {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 0.45rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
}

.monitoring-change-state li {
    padding: 0.5rem;
    border: 1px solid var(--color-red-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.65rem;
    text-align: center;
}

.monitoring-access-section {
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background: #0b1c32;
    color: #c2cedd;
}

.monitoring-access-section .eyebrow {
    color: #8ab0ff;
}

.monitoring-access-section h2 {
    color: #ffffff;
}

.monitoring-access-grid > div:last-child > p {
    max-width: 42rem;
}

.monitoring-access-statement {
    color: #ffffff;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 750;
    line-height: 1.5;
}

.monitoring-review-queue {
    overflow: hidden;
    background: var(--color-bg-soft);
}

.monitoring-review-heading {
    margin: 0;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.monitoring-review-heading > svg {
    border-color: var(--color-border-strong);
    color: var(--color-blue);
}

.monitoring-review-heading small {
    color: var(--color-blue);
    font-size: 0.6rem;
    font-weight: 850;
    text-transform: uppercase;
}

.monitoring-review-heading strong {
    color: var(--color-navy);
    font-size: 0.85rem;
}

.monitoring-review-queue li {
    display: flex;
    min-width: 0;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    color: var(--color-navy);
    font-size: 0.75rem;
}

.monitoring-review-queue li:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

.monitoring-review-queue li b {
    color: var(--color-blue);
    font-size: 0.65rem;
    text-align: right;
}

.monitoring-process-section .section-heading {
    max-width: 50rem;
}

.monitoring-process {
    position: relative;
    display: grid;
    margin-top: 3rem;
    gap: 1rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.monitoring-process::before {
    position: absolute;
    top: 2.2rem;
    right: 7%;
    left: 7%;
    height: 1px;
    background: var(--color-border-strong);
    content: "";
}

.monitoring-process li {
    position: relative;
    display: grid;
    min-width: 0;
    justify-items: center;
    align-content: start;
    text-align: center;
}

.monitoring-process li > span {
    position: absolute;
    z-index: 2;
    top: -0.35rem;
    right: calc(50% - 2.8rem);
    color: var(--color-blue);
    font-size: 0.61rem;
    font-weight: 850;
}

.monitoring-process li > svg {
    z-index: 1;
    width: 4.4rem;
    height: 4.4rem;
    margin-bottom: 0.8rem;
    padding: 1.35rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-blue);
}

.monitoring-process h3 {
    max-width: 10rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

.monitoring-related-inner {
    max-width: 72rem;
}

.monitoring-related .related-pages {
    background: var(--color-surface);
}

.monitoring-related .related-pages ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 67.99rem) {
    .monitoring-hero-visual {
        width: min(100%, 46rem);
        margin-inline: auto;
    }

    .monitoring-job-grid,
    .monitoring-types-layout,
    .monitoring-change-grid,
    .monitoring-meaning-layout,
    .monitoring-delivery-grid,
    .monitoring-reliability-grid,
    .monitoring-access-grid,
    .monitoring-review-grid {
        grid-template-columns: 1fr;
    }

    .monitoring-types-heading,
    .monitoring-meaning-heading {
        position: static;
        max-width: var(--reading);
    }

    .monitoring-process {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .monitoring-process::before {
        display: none;
    }
}

@media (max-width: 48rem) {
    .monitoring-hero-visual {
        width: min(100%, 38rem);
    }

    .monitoring-hero-visual::before {
        width: 23rem;
        height: 23rem;
    }

    .monitoring-type-list,
    .monitoring-rule-list,
    .monitoring-delivery-options,
    .monitoring-distinctions-grid,
    .monitoring-related .related-pages ul {
        grid-template-columns: 1fr;
    }

    .monitoring-type-list li:nth-child(odd),
    .monitoring-rule-list li:nth-child(odd),
    .monitoring-delivery-options > div:nth-child(odd) {
        border-right: 0;
    }

    .monitoring-delivery-options > div:last-child {
        grid-column: auto;
    }

    .monitoring-process {
        max-width: 42rem;
        margin-inline: auto;
        gap: 0;
        grid-template-columns: 1fr;
    }

    .monitoring-process li {
        min-height: 5.7rem;
        justify-items: start;
        align-items: center;
        gap: 1rem;
        padding-block: 0.7rem;
        grid-template-columns: 4rem minmax(0, 1fr);
        text-align: left;
    }

    .monitoring-process li > span {
        top: 0.4rem;
        right: auto;
        left: 2.8rem;
    }

    .monitoring-process li > svg {
        width: 3.5rem;
        height: 3.5rem;
        margin: 0;
        padding: 1rem;
        grid-column: 1;
    }

    .monitoring-process h3 {
        max-width: none;
        grid-column: 2;
    }

    .monitoring-process li:not(:last-child)::after {
        position: absolute;
        top: 4.2rem;
        bottom: -0.8rem;
        left: 1.75rem;
        width: 1px;
        background: var(--color-border-strong);
        content: "";
    }
}

@media (max-width: 31rem) {
    .monitoring-known-sources,
    .monitoring-changed-result,
    .monitoring-check-cycle,
    .monitoring-history-visual,
    .monitoring-reliability-visual {
        padding: 1rem;
    }

    .monitoring-hero-visual::before {
        width: 20rem;
        height: 20rem;
    }

    .monitoring-source-cards,
    .monitoring-check-cycle ol,
    .monitoring-history-visual ol,
    .monitoring-change-state ul {
        grid-template-columns: 1fr;
    }

    .monitoring-check-cycle li,
    .monitoring-history-visual li {
        min-height: 5.8rem;
    }

    .monitoring-check-cycle li:not(:last-child),
    .monitoring-history-visual li:not(:last-child) {
        border-right: 1px solid var(--color-border);
        border-bottom: 0;
    }

    .monitoring-value-comparison {
        grid-template-columns: 1fr;
    }

    .monitoring-value-comparison > svg {
        margin-inline: auto;
        transform: rotate(90deg);
    }

    .monitoring-type-list li,
    .monitoring-rule-list li {
        padding-inline: 0;
    }

    .monitoring-rule-list li {
        grid-template-columns: 4.2rem minmax(0, 1fr);
    }

    .monitoring-distinction-flow {
        grid-template-columns: 1fr;
    }

    .monitoring-distinction-flow svg {
        margin-inline: auto;
        transform: rotate(90deg);
    }

    .monitoring-review-queue li {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Reporting problem-page patterns */

.reporting-hero-grid {
    gap: clamp(2.75rem, 5.5vw, 4.75rem);
    grid-template-columns: minmax(0, 0.92fr) minmax(31rem, 1.08fr);
}

.reporting-hero h1 {
    max-width: 14ch;
}

.reporting-hero-visual {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 0.8rem;
}

.reporting-hero-visual::before {
    position: absolute;
    z-index: -1;
    width: 31rem;
    height: 31rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-soft);
    content: "";
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.reporting-source-panel,
.reporting-output-panel,
.reporting-cadence-visual,
.reporting-example-output,
.reporting-source-map,
.reporting-review-queue,
.reporting-quality-visual {
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
}

.reporting-source-panel {
    padding: 1.15rem;
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
}

.reporting-source-panel > p {
    margin-bottom: 0.85rem;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.reporting-source-panel > p span {
    display: inline-flex;
    margin-right: 0.3rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.3rem;
    background: var(--color-red-pill);
    color: var(--color-red);
}

.reporting-source-cards {
    display: grid;
    min-width: 0;
    gap: 0.55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reporting-source-cards article {
    display: grid;
    min-width: 0;
    min-height: 5.1rem;
    place-items: center;
    align-content: center;
    gap: 0.35rem;
    padding: 0.6rem 0.4rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    text-align: center;
}

.reporting-source-cards svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-blue);
}

.reporting-source-cards strong,
.reporting-source-cards small,
.reporting-output-heading small,
.reporting-output-heading strong,
.reporting-cadence-heading small,
.reporting-cadence-heading strong,
.reporting-review-heading small,
.reporting-review-heading strong {
    display: block;
}

.reporting-source-cards strong {
    color: var(--color-navy);
    font-size: 0.65rem;
}

.reporting-source-cards small {
    color: var(--color-muted);
    font-size: 0.57rem;
}

.reporting-flow-step,
.reporting-source-convergence,
.reporting-quality-path {
    display: grid;
    align-items: center;
    gap: 0.6rem;
    grid-template-columns: 1fr auto 1fr;
}

.reporting-flow-step > span,
.reporting-source-convergence > span,
.reporting-quality-path > span {
    height: 1px;
    background: var(--color-border-strong);
}

.reporting-flow-step > div {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-blue);
}

.reporting-flow-step svg,
.reporting-source-convergence svg,
.reporting-quality-path svg {
    width: 1rem;
    height: 1rem;
}

.reporting-flow-step small {
    color: var(--color-muted);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.reporting-output-panel {
    padding: 1.15rem;
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.reporting-output-heading,
.reporting-cadence-heading,
.reporting-review-heading {
    display: flex;
    margin-bottom: 0.75rem;
    align-items: center;
    gap: 0.65rem;
}

.reporting-output-heading > span,
.reporting-cadence-heading > svg,
.reporting-review-heading > svg {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    padding: 0.6rem;
    border: 1px solid var(--color-green-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-green);
}

.reporting-output-heading > span {
    display: grid;
    padding: 0;
    place-items: center;
}

.reporting-output-heading svg {
    width: 1rem;
    height: 1rem;
}

.reporting-output-heading p,
.reporting-output-panel > p,
.reporting-example-output > p,
.reporting-review-heading span {
    margin: 0;
}

.reporting-output-heading small {
    color: var(--color-green);
    font-size: 0.61rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.reporting-output-heading strong {
    color: var(--color-navy);
    font-size: 0.85rem;
}

.reporting-output-preview {
    overflow: hidden;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.reporting-output-preview > div {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.65rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr) auto;
    font-size: 0.62rem;
}

.reporting-output-preview > div:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

.reporting-output-preview b {
    color: var(--color-navy);
}

.reporting-output-preview span {
    color: var(--color-muted);
}

.reporting-output-preview em {
    color: var(--color-green);
    font-size: 0.56rem;
    font-style: normal;
    font-weight: 850;
    text-transform: uppercase;
}

.reporting-output-panel > p {
    display: flex;
    margin-top: 0.7rem;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-muted);
    font-size: 0.67rem;
    font-weight: 700;
}

.reporting-output-panel > p svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--color-green);
}

.reporting-job-grid,
.reporting-sources-grid,
.reporting-review-grid,
.reporting-delivery-grid,
.reporting-dashboard-grid,
.reporting-reliability-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
}

.reporting-job-section .section-heading,
.reporting-sources-section .section-heading,
.reporting-review-section .section-heading,
.reporting-delivery-section .section-heading,
.reporting-dashboard-section .section-heading,
.reporting-reliability-section .section-heading {
    margin-bottom: 1.35rem;
}

.reporting-job-statement,
.reporting-sources-statement,
.reporting-review-statement,
.reporting-delivery-note,
.reporting-reliability-note {
    color: var(--color-navy);
    font-size: 1.02rem;
    font-weight: 750;
    line-height: 1.55;
}

.reporting-cadence-visual {
    padding: clamp(1.3rem, 3vw, 2rem);
    background: var(--color-bg-soft);
}

.reporting-cadence-heading > svg {
    border-color: var(--color-border);
    color: var(--color-blue);
}

.reporting-cadence-heading small {
    color: var(--color-blue);
    font-size: 0.61rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.reporting-cadence-heading strong {
    color: var(--color-navy);
    font-size: 0.84rem;
}

.reporting-cadence-visual ol,
.reporting-repeat-list,
.reporting-example-timeline,
.reporting-example-output ul,
.reporting-preparation-flow,
.reporting-review-queue ul,
.reporting-output-comparison ul,
.reporting-quality-visual ul,
.reporting-process {
    margin: 0;
    padding: 0;
    list-style: none;
}

.reporting-cadence-visual ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reporting-cadence-visual li {
    position: relative;
    min-width: 0;
    padding: 1rem 0.65rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    text-align: center;
}

.reporting-cadence-visual li:not(:last-child) {
    border-right: 0;
}

.reporting-cadence-visual li > span {
    position: absolute;
    top: 0.4rem;
    left: 0.5rem;
    color: var(--color-blue);
    font-size: 0.58rem;
    font-weight: 850;
}

.reporting-cadence-visual li strong,
.reporting-cadence-visual li small {
    display: block;
}

.reporting-cadence-visual li strong {
    color: var(--color-navy);
    font-size: 0.72rem;
}

.reporting-cadence-visual li small {
    margin-top: 0.15rem;
    color: var(--color-muted);
    font-size: 0.61rem;
}

.reporting-cadence-options {
    display: flex;
    margin-top: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.reporting-cadence-options span {
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.64rem;
    font-weight: 700;
}

.reporting-repeat-layout {
    display: grid;
    align-items: start;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
}

.reporting-repeat-heading {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}

.reporting-repeat-heading h2 {
    font-size: clamp(2rem, 3.7vw, 3rem);
}

.reporting-repeat-heading > p:not(.eyebrow) {
    color: var(--color-muted);
}

.reporting-repeat-heading .reporting-repeat-message {
    margin-top: 1.2rem;
    color: var(--color-navy);
    font-weight: 750;
}

.reporting-repeat-list {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reporting-repeat-list li {
    display: grid;
    min-width: 0;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 1.7rem minmax(0, 1fr);
}

.reporting-repeat-list li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.reporting-repeat-list li > span {
    color: var(--color-blue);
    font-size: 0.67rem;
    font-weight: 850;
}

.reporting-repeat-list p {
    margin: 0;
}

.reporting-repeat-list strong,
.reporting-repeat-list small {
    display: block;
}

.reporting-repeat-list strong {
    color: var(--color-navy);
    font-size: 0.9rem;
}

.reporting-repeat-list small {
    margin-top: 0.12rem;
    color: var(--color-muted);
    font-size: 0.79rem;
    line-height: 1.45;
}

.reporting-example {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.reporting-example-timeline {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.reporting-example-timeline li {
    display: grid;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-muted);
    font-size: 0.8rem;
    grid-template-columns: 1.55rem minmax(0, 1fr);
}

.reporting-example-timeline span {
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border: 1px solid var(--color-red-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-red);
    font-size: 0.63rem;
    font-weight: 850;
}

.reporting-example-output {
    overflow: hidden;
    margin-top: 1rem;
    border-color: var(--color-green-border);
    background: var(--color-surface);
    box-shadow: none;
}

.reporting-example-output > p {
    display: grid;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-green-border);
    background: var(--color-green-soft);
    grid-template-columns: 1.2rem minmax(0, 1fr);
}

.reporting-example-output > p svg,
.reporting-example-output li svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--color-green);
}

.reporting-example-output > p strong,
.reporting-example-output > p small {
    display: block;
}

.reporting-example-output > p strong {
    color: var(--color-navy);
    font-size: 0.77rem;
}

.reporting-example-output > p small {
    color: var(--color-muted);
    font-size: 0.63rem;
}

.reporting-example-output li {
    display: grid;
    align-items: start;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    color: var(--color-muted);
    font-size: 0.72rem;
    grid-template-columns: 1rem minmax(0, 1fr);
}

.reporting-example-output li:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

.reporting-example-output .reporting-human-row svg {
    color: var(--color-blue);
}

.reporting-sources-grid {
    align-items: start;
}

.reporting-source-map {
    padding: clamp(1.3rem, 3vw, 2rem);
    background: var(--color-bg-soft);
}

.reporting-source-map-list {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.reporting-source-map-list span {
    display: grid;
    min-width: 0;
    min-height: 4.7rem;
    place-items: center;
    align-content: center;
    gap: 0.3rem;
    padding: 0.5rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-navy);
    font-size: 0.62rem;
    font-weight: 700;
    text-align: center;
}

.reporting-source-map-list svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-blue);
}

.reporting-source-convergence {
    margin-block: 0.8rem;
}

.reporting-source-convergence svg,
.reporting-quality-path svg {
    margin-inline: auto;
    color: var(--color-blue);
    transform: rotate(90deg);
}

.reporting-source-result {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-green-soft);
}

.reporting-source-result > svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-green);
}

.reporting-source-result small,
.reporting-source-result strong {
    display: block;
}

.reporting-source-result small {
    color: var(--color-green);
    font-size: 0.6rem;
    font-weight: 850;
    text-transform: uppercase;
}

.reporting-source-result strong {
    color: var(--color-navy);
    font-size: 0.83rem;
}

.reporting-preparation-section {
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background: #0b1c32;
    color: #c2cedd;
}

.reporting-preparation-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr);
}

.reporting-preparation-section .eyebrow {
    color: #8ab0ff;
}

.reporting-preparation-section h2 {
    color: #ffffff;
}

.reporting-preparation-statement {
    color: #ffffff;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 750;
    line-height: 1.5;
}

.reporting-preparation-flow {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.reporting-preparation-flow li {
    position: relative;
    min-width: 0;
    padding: 1.3rem 0.5rem 0.8rem;
    border: 1px solid #49627f;
    border-radius: var(--radius-small);
    background: #102945;
    text-align: center;
}

.reporting-preparation-flow li > span {
    position: absolute;
    top: 0.35rem;
    left: 0.45rem;
    color: #8ab0ff;
    font-size: 0.55rem;
    font-weight: 850;
}

.reporting-preparation-flow strong,
.reporting-preparation-flow small {
    display: block;
}

.reporting-preparation-flow strong {
    color: #ffffff;
    font-size: 0.68rem;
}

.reporting-preparation-flow small {
    margin-top: 0.2rem;
    color: #c2cedd;
    font-size: 0.58rem;
    line-height: 1.35;
}

.reporting-review-queue {
    overflow: hidden;
    background: var(--color-bg-soft);
}

.reporting-review-heading {
    margin: 0;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.reporting-review-heading > svg {
    border-color: var(--color-border-strong);
    color: var(--color-blue);
}

.reporting-review-heading small {
    color: var(--color-blue);
    font-size: 0.6rem;
    font-weight: 850;
    text-transform: uppercase;
}

.reporting-review-heading strong {
    color: var(--color-navy);
    font-size: 0.85rem;
}

.reporting-review-queue li {
    display: flex;
    min-width: 0;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    color: var(--color-navy);
    font-size: 0.75rem;
}

.reporting-review-queue li:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

.reporting-review-queue li b {
    color: var(--color-blue);
    font-size: 0.65rem;
    text-align: right;
}

.reporting-delivery-options {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reporting-delivery-options > div {
    display: grid;
    min-width: 0;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 1.5rem minmax(0, 1fr);
}

.reporting-delivery-options > div:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.reporting-delivery-options > div:last-child {
    border-right: 0;
    grid-column: 1 / -1;
}

.reporting-delivery-options svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-blue);
}

.reporting-delivery-options strong,
.reporting-delivery-options small {
    display: block;
}

.reporting-delivery-options strong {
    color: var(--color-navy);
    font-size: 0.9rem;
}

.reporting-delivery-options small {
    margin-top: 0.12rem;
    color: var(--color-muted);
    font-size: 0.77rem;
    line-height: 1.4;
}

.reporting-trigger-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reporting-trigger-grid article {
    min-width: 0;
    padding: clamp(1.4rem, 3vw, 2.1rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.reporting-trigger-grid article > p:not(.eyebrow) {
    color: var(--color-muted);
}

.reporting-trigger-grid h2 {
    font-size: clamp(1.7rem, 3vw, 2.35rem);
}

.reporting-schedule-line,
.reporting-event-line {
    display: grid;
    margin-top: 1.3rem;
    align-items: center;
    gap: 0.55rem;
}

.reporting-schedule-line {
    grid-template-columns: auto 1fr auto 1fr auto;
}

.reporting-schedule-line span,
.reporting-event-line span,
.reporting-event-line strong {
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-bg-soft);
    color: var(--color-navy);
    font-size: 0.7rem;
    font-weight: 750;
    text-align: center;
}

.reporting-schedule-line i {
    height: 1px;
    background: var(--color-border-strong);
}

.reporting-event-line {
    grid-template-columns: minmax(0, 1fr) 1.2rem minmax(0, 1fr);
}

.reporting-event-line svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-blue);
}

.reporting-event-line strong {
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.reporting-dashboard-grid {
    align-items: start;
}

.reporting-dashboard-grid > div:first-child > p {
    color: var(--color-muted);
}

.reporting-output-comparison {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reporting-output-comparison article {
    min-width: 0;
    padding: 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.reporting-output-comparison article > span {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.75rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-blue);
}

.reporting-output-comparison svg {
    width: 1.1rem;
    height: 1.1rem;
}

.reporting-output-comparison h3 {
    font-size: 0.95rem;
}

.reporting-output-comparison li {
    position: relative;
    padding: 0.35rem 0 0.35rem 0.8rem;
    color: var(--color-muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

.reporting-output-comparison li::before {
    position: absolute;
    top: 0.8rem;
    left: 0;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--color-blue);
    content: "";
}

.reporting-reliability-grid {
    align-items: start;
}

.reporting-quality-visual {
    padding: clamp(1.3rem, 3vw, 2rem);
    background: var(--color-bg-soft);
}

.reporting-quality-input,
.reporting-quality-review {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.reporting-quality-input > p {
    margin-bottom: 0.7rem;
    color: var(--color-blue);
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.reporting-quality-input li {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-green-soft);
    color: var(--color-navy);
    font-size: 0.68rem;
}

.reporting-quality-input li + li {
    margin-top: 0.4rem;
}

.reporting-quality-input li b {
    color: var(--color-green);
}

.reporting-quality-input .quality-warning {
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
}

.reporting-quality-input .quality-warning b {
    color: var(--color-red);
}

.reporting-quality-path {
    margin-block: 0.8rem;
}

.reporting-quality-review > p {
    display: flex;
    margin-bottom: 0.7rem;
    align-items: center;
    gap: 0.55rem;
}

.reporting-quality-review > p svg {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--color-red);
}

.reporting-quality-review small,
.reporting-quality-review strong {
    display: block;
}

.reporting-quality-review small {
    color: var(--color-red);
    font-size: 0.6rem;
    font-weight: 850;
    text-transform: uppercase;
}

.reporting-quality-review strong {
    color: var(--color-navy);
    font-size: 0.82rem;
}

.reporting-quality-review ul {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reporting-quality-review li {
    padding: 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-bg-soft);
    color: var(--color-muted);
    font-size: 0.65rem;
    text-align: center;
}

.reporting-process-section .section-heading {
    max-width: 50rem;
}

.reporting-process {
    position: relative;
    display: grid;
    margin-top: 3rem;
    gap: 0.8rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.reporting-process::before {
    position: absolute;
    top: 2.2rem;
    right: 6%;
    left: 6%;
    height: 1px;
    background: var(--color-border-strong);
    content: "";
}

.reporting-process li {
    position: relative;
    display: grid;
    min-width: 0;
    justify-items: center;
    align-content: start;
    text-align: center;
}

.reporting-process li > span {
    position: absolute;
    z-index: 2;
    top: -0.35rem;
    right: calc(50% - 2.8rem);
    color: var(--color-blue);
    font-size: 0.61rem;
    font-weight: 850;
}

.reporting-process li > svg {
    z-index: 1;
    width: 4.4rem;
    height: 4.4rem;
    margin-bottom: 0.8rem;
    padding: 1.35rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-blue);
}

.reporting-process h3 {
    max-width: 9rem;
    font-size: 0.74rem;
    line-height: 1.35;
}

.reporting-related-inner {
    max-width: 72rem;
}

.reporting-related .related-pages {
    background: var(--color-surface);
}

.reporting-related .related-pages ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 67.99rem) {
    .reporting-hero-visual {
        width: min(100%, 46rem);
        margin-inline: auto;
    }

    .reporting-job-grid,
    .reporting-repeat-layout,
    .reporting-sources-grid,
    .reporting-preparation-grid,
    .reporting-review-grid,
    .reporting-delivery-grid,
    .reporting-dashboard-grid,
    .reporting-reliability-grid {
        grid-template-columns: 1fr;
    }

    .reporting-repeat-heading {
        position: static;
        max-width: var(--reading);
    }

    .reporting-preparation-flow {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .reporting-process {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .reporting-process::before {
        display: none;
    }
}

@media (max-width: 48rem) {
    .reporting-hero-visual {
        width: min(100%, 38rem);
    }

    .reporting-hero-visual::before {
        width: 23rem;
        height: 23rem;
    }

    .reporting-repeat-list,
    .reporting-delivery-options,
    .reporting-trigger-grid,
    .reporting-output-comparison,
    .reporting-related .related-pages ul {
        grid-template-columns: 1fr;
    }

    .reporting-repeat-list li:nth-child(odd),
    .reporting-delivery-options > div:nth-child(odd) {
        border-right: 0;
    }

    .reporting-delivery-options > div:last-child {
        grid-column: auto;
    }

    .reporting-process {
        max-width: 42rem;
        margin-inline: auto;
        gap: 0;
        grid-template-columns: 1fr;
    }

    .reporting-process li {
        min-height: 5.7rem;
        justify-items: start;
        align-items: center;
        gap: 1rem;
        padding-block: 0.7rem;
        grid-template-columns: 4rem minmax(0, 1fr);
        text-align: left;
    }

    .reporting-process li > span {
        top: 0.4rem;
        right: auto;
        left: 2.8rem;
    }

    .reporting-process li > svg {
        width: 3.5rem;
        height: 3.5rem;
        margin: 0;
        padding: 1rem;
        grid-column: 1;
    }

    .reporting-process h3 {
        max-width: none;
        grid-column: 2;
    }

    .reporting-process li:not(:last-child)::after {
        position: absolute;
        top: 4.2rem;
        bottom: -0.8rem;
        left: 1.75rem;
        width: 1px;
        background: var(--color-border-strong);
        content: "";
    }
}

@media (max-width: 31rem) {
    .reporting-source-panel,
    .reporting-output-panel,
    .reporting-cadence-visual,
    .reporting-source-map,
    .reporting-quality-visual {
        padding: 1rem;
    }

    .reporting-hero-visual::before {
        width: 20rem;
        height: 20rem;
    }

    .reporting-source-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reporting-cadence-visual ol,
    .reporting-preparation-flow,
    .reporting-quality-review ul {
        grid-template-columns: 1fr;
    }

    .reporting-cadence-visual li:not(:last-child) {
        border-right: 1px solid var(--color-border);
        border-bottom: 0;
    }

    .reporting-source-map-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reporting-review-queue li {
        align-items: flex-start;
        flex-direction: column;
    }

    .reporting-schedule-line,
    .reporting-event-line {
        grid-template-columns: 1fr;
    }

    .reporting-schedule-line i {
        width: 1px;
        height: 1rem;
        margin-inline: auto;
    }

    .reporting-event-line svg {
        margin-inline: auto;
        transform: rotate(90deg);
    }
}

/* Spreadsheet automation problem-page patterns */

.spreadsheet-hero-grid {
    gap: clamp(2.75rem, 5vw, 4.5rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(33rem, 1.1fr);
}

.spreadsheet-hero h1 {
    max-width: 14ch;
}

.spreadsheet-hero-visual {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 0.7rem;
}

.spreadsheet-hero-visual::before {
    position: absolute;
    z-index: -1;
    width: 32rem;
    height: 32rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-soft);
    content: "";
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.spreadsheet-manual-panel,
.spreadsheet-outcome-panel,
.spreadsheet-cycle,
.spreadsheet-bridge-visual,
.spreadsheet-review-panel,
.spreadsheet-risk-visual {
    min-width: 0;
    padding: clamp(1rem, 3vw, 1.35rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.spreadsheet-manual-panel {
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
}

.spreadsheet-outcome-panel {
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.spreadsheet-manual-panel > p:first-child,
.spreadsheet-outcome-panel > p:first-child {
    margin-bottom: 0.8rem;
    color: var(--color-muted);
    font-size: 0.69rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    line-height: 1.45;
    text-transform: uppercase;
}

.spreadsheet-manual-panel > p:first-child span,
.spreadsheet-outcome-panel > p:first-child span {
    display: inline-flex;
    margin-right: 0.3rem;
    padding: 0.15rem 0.38rem;
    border-radius: 0.3rem;
}

.spreadsheet-manual-panel > p:first-child span {
    background: var(--color-red-pill);
    color: var(--color-red);
}

.spreadsheet-outcome-panel > p:first-child span {
    background: var(--color-green-pill);
    color: var(--color-green);
}

.spreadsheet-window {
    overflow: hidden;
    border: 1px solid var(--color-red-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.spreadsheet-window-bar {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.3rem;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-soft);
}

.spreadsheet-window-bar i {
    width: 0.38rem;
    height: 0.38rem;
    flex: 0 0 0.38rem;
    border-radius: 50%;
    background: var(--color-border-strong);
}

.spreadsheet-window-bar strong {
    overflow: hidden;
    margin-left: 0.25rem;
    color: var(--color-navy);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spreadsheet-tabs {
    display: flex;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}

.spreadsheet-tabs span {
    min-width: 0;
    flex: 1 1 0;
    padding: 0.38rem 0.25rem;
    border-right: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.58rem;
    font-weight: 750;
    text-align: center;
}

.spreadsheet-tabs span:last-child {
    border-right: 0;
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.spreadsheet-grid-preview {
    display: grid;
    min-height: 5rem;
    gap: 1px;
    padding: 1px;
    background: var(--color-border);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.spreadsheet-grid-preview b,
.spreadsheet-grid-preview i {
    min-width: 0;
    background: var(--color-surface);
}

.spreadsheet-grid-preview b {
    min-height: 1.05rem;
    background: var(--color-blue-soft);
}

.spreadsheet-grid-preview i:nth-of-type(6),
.spreadsheet-grid-preview i:nth-of-type(10) {
    background: var(--color-red-soft);
}

.spreadsheet-manual-panel ol,
.spreadsheet-example-steps,
.spreadsheet-example-output ul,
.spreadsheet-decision-options ul,
.spreadsheet-software-comparison ul,
.spreadsheet-review-panel ul,
.spreadsheet-risk-workbook ul,
.spreadsheet-process {
    margin: 0;
    padding: 0;
    list-style: none;
}

.spreadsheet-manual-panel ol {
    display: grid;
    margin-top: 0.75rem;
    gap: 0.45rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.spreadsheet-manual-panel li {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-muted);
    font-size: 0.63rem;
    font-weight: 750;
}

.spreadsheet-manual-panel li span {
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    place-items: center;
    border: 1px solid var(--color-red-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-red);
    font-size: 0.56rem;
}

.spreadsheet-hero-connector,
.spreadsheet-bridge-shift,
.spreadsheet-risk-path {
    display: grid;
    align-items: center;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.spreadsheet-hero-connector span,
.spreadsheet-bridge-shift span,
.spreadsheet-risk-path span {
    height: 1px;
    background: var(--color-border-strong);
}

.spreadsheet-hero-connector svg,
.spreadsheet-bridge-shift svg,
.spreadsheet-risk-path svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-blue);
    transform: rotate(90deg);
}

.spreadsheet-outcome-options {
    display: grid;
    align-items: center;
    gap: 0.6rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.spreadsheet-outcome-options article {
    display: flex;
    min-width: 0;
    min-height: 4.2rem;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.spreadsheet-outcome-options article > svg {
    width: 1.3rem;
    height: 1.3rem;
    flex: 0 0 1.3rem;
    color: var(--color-green);
}

.spreadsheet-outcome-options strong,
.spreadsheet-outcome-options small {
    display: block;
    line-height: 1.35;
}

.spreadsheet-outcome-options strong {
    color: var(--color-navy);
    font-size: 0.75rem;
}

.spreadsheet-outcome-options small {
    margin-top: 0.1rem;
    color: var(--color-muted);
    font-size: 0.61rem;
}

.spreadsheet-outcome-options em {
    color: var(--color-muted);
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 850;
    text-transform: uppercase;
}

.spreadsheet-outcome-note {
    display: flex;
    margin-top: 0.7rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--color-muted);
    font-size: 0.68rem;
    font-weight: 750;
}

.spreadsheet-outcome-note svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--color-green);
}

.spreadsheet-job-grid,
.spreadsheet-connection-grid,
.spreadsheet-review-grid,
.spreadsheet-software-grid,
.spreadsheet-risk-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
}

.spreadsheet-job-section .section-heading,
.spreadsheet-connection-section .section-heading,
.spreadsheet-review-section .section-heading,
.spreadsheet-software-section .section-heading,
.spreadsheet-risk-section .section-heading {
    margin-bottom: 1.25rem;
}

.spreadsheet-job-statement,
.spreadsheet-review-statement {
    max-width: 36rem;
    color: var(--color-navy);
    font-size: 1.08rem;
    font-weight: 750;
}

.spreadsheet-cycle-heading,
.spreadsheet-review-heading,
.spreadsheet-risk-workbook > p,
.spreadsheet-risk-review > p {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
}

.spreadsheet-cycle-heading > svg,
.spreadsheet-review-heading > svg,
.spreadsheet-risk-workbook > p > svg,
.spreadsheet-risk-review > p > svg {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    padding: 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-blue);
}

.spreadsheet-cycle-heading small,
.spreadsheet-cycle-heading strong,
.spreadsheet-review-heading small,
.spreadsheet-review-heading strong,
.spreadsheet-risk-workbook small,
.spreadsheet-risk-workbook strong,
.spreadsheet-risk-review small,
.spreadsheet-risk-review strong {
    display: block;
}

.spreadsheet-cycle-heading small,
.spreadsheet-review-heading small,
.spreadsheet-risk-workbook small,
.spreadsheet-risk-review small {
    color: var(--color-blue);
    font-size: 0.63rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.spreadsheet-cycle-heading strong,
.spreadsheet-review-heading strong,
.spreadsheet-risk-workbook strong,
.spreadsheet-risk-review strong {
    color: var(--color-navy);
    font-size: 0.88rem;
}

.spreadsheet-cycle ol {
    display: grid;
    margin: 1rem 0 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-bg-soft);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
}

.spreadsheet-cycle li {
    min-width: 0;
    padding: 0.75rem 0.6rem;
    border-right: 1px solid var(--color-border);
}

.spreadsheet-cycle li:last-child {
    border-right: 0;
}

.spreadsheet-cycle li span,
.spreadsheet-cycle li strong,
.spreadsheet-cycle li small {
    display: block;
}

.spreadsheet-cycle li span {
    color: var(--color-blue);
    font-size: 0.58rem;
    font-weight: 850;
}

.spreadsheet-cycle li strong {
    color: var(--color-navy);
    font-size: 0.76rem;
}

.spreadsheet-cycle li small {
    color: var(--color-muted);
    font-size: 0.61rem;
}

.spreadsheet-cycle-tags {
    display: flex;
    margin-top: 0.8rem;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.spreadsheet-cycle-tags span {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-muted);
    font-size: 0.63rem;
    font-weight: 700;
}

.spreadsheet-example {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.spreadsheet-example-steps {
    display: grid;
    margin-top: 1.5rem;
    gap: 0.55rem;
}

.spreadsheet-example-steps li {
    display: grid;
    align-items: center;
    gap: 0.55rem;
    grid-template-columns: 1.55rem minmax(0, 1fr);
    color: var(--color-muted);
    font-size: 0.82rem;
}

.spreadsheet-example-steps span {
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    border: 1px solid var(--color-red-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-red);
    font-size: 0.62rem;
    font-weight: 850;
}

.spreadsheet-example-output {
    overflow: hidden;
    margin-top: 1.5rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.spreadsheet-output-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-green-border);
    background: var(--color-bg-soft);
}

.spreadsheet-output-tabs span {
    flex: 1 1 0;
    padding: 0.48rem 0.35rem;
    border-right: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.65rem;
    font-weight: 750;
    text-align: center;
}

.spreadsheet-output-tabs span:last-child {
    border-right: 0;
    background: var(--color-green-soft);
    color: var(--color-green);
}

.spreadsheet-example-output ul {
    display: grid;
    gap: 0.55rem;
    padding: 0.85rem;
}

.spreadsheet-example-output li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.spreadsheet-example-output li svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    margin-top: 0.1rem;
    color: var(--color-green);
}

.spreadsheet-example-output .spreadsheet-review-row {
    padding-top: 0.55rem;
    border-top: 1px dashed var(--color-green-border);
}

.spreadsheet-example-output .spreadsheet-review-row svg {
    color: var(--color-blue);
}

.spreadsheet-decision-section {
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background: #0b1c32;
    color: #c2cedd;
}

.spreadsheet-decision-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
}

.spreadsheet-decision-section .eyebrow {
    color: #8ab0ff;
}

.spreadsheet-decision-section h2,
.spreadsheet-decision-section h3 {
    color: #ffffff;
}

.spreadsheet-decision-copy > p:not(.eyebrow):not(.spreadsheet-decision-statement) {
    color: #c2cedd;
}

.spreadsheet-decision-statement {
    max-width: 34rem;
    color: #ffffff;
    font-size: clamp(1.16rem, 2.2vw, 1.48rem);
    font-weight: 750;
    line-height: 1.5;
}

.spreadsheet-decision-options {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spreadsheet-decision-options article {
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 1.7rem);
    border: 1px solid #49627f;
    border-radius: var(--radius-large);
    background: #102945;
}

.spreadsheet-decision-options article > span {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    place-items: center;
    border: 1px solid #49627f;
    border-radius: 50%;
    color: #8ab0ff;
}

.spreadsheet-decision-options article > span svg {
    width: 1.35rem;
    height: 1.35rem;
}

.spreadsheet-decision-options h3 {
    margin-bottom: 1rem;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.spreadsheet-decision-options ul {
    display: grid;
    gap: 0.65rem;
}

.spreadsheet-decision-options li {
    position: relative;
    padding-left: 1rem;
    color: #dce6f2;
    font-size: 0.82rem;
    line-height: 1.48;
}

.spreadsheet-decision-options li::before {
    position: absolute;
    top: 0.6em;
    left: 0;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: #72d7a1;
    content: "";
}

.spreadsheet-connection-links {
    display: grid;
    justify-items: start;
    gap: 0.65rem;
}

.spreadsheet-bridge-before,
.spreadsheet-bridge-after {
    padding: 1rem;
    border: 1px solid;
    border-radius: var(--radius-small);
}

.spreadsheet-bridge-before {
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
}

.spreadsheet-bridge-after {
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.spreadsheet-bridge-before > p,
.spreadsheet-bridge-after > p {
    margin-bottom: 0.75rem;
    color: var(--color-muted);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.spreadsheet-bridge-before > p span,
.spreadsheet-bridge-after > p span {
    display: inline-flex;
    margin-right: 0.3rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.3rem;
}

.spreadsheet-bridge-before > p span {
    background: var(--color-red-pill);
    color: var(--color-red);
}

.spreadsheet-bridge-after > p span {
    background: var(--color-green-pill);
    color: var(--color-green);
}

.spreadsheet-bridge-before > div,
.spreadsheet-bridge-after > div {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.45rem;
    grid-template-columns: minmax(0, 1fr) 1.4rem minmax(0, 1fr) 1.4rem minmax(0, 1fr);
}

.spreadsheet-bridge-after > div {
    grid-template-columns: minmax(0, 1fr) 2.3rem minmax(0, 1.2fr);
}

.spreadsheet-bridge-before strong,
.spreadsheet-bridge-after strong {
    display: grid;
    min-width: 0;
    min-height: 4.4rem;
    place-items: center;
    align-content: center;
    gap: 0.3rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-navy);
    font-size: 0.69rem;
    text-align: center;
}

.spreadsheet-bridge-before strong svg,
.spreadsheet-bridge-after strong svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--color-blue);
}

.spreadsheet-bridge-before i,
.spreadsheet-bridge-after i {
    display: grid;
    place-items: center;
    color: var(--color-red);
}

.spreadsheet-bridge-after i {
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid var(--color-green-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-green);
}

.spreadsheet-bridge-before i svg,
.spreadsheet-bridge-after i svg {
    width: 1rem;
    height: 1rem;
}

.spreadsheet-method-list > div:last-child {
    border-right: 0;
    grid-column: 1 / -1;
}

.spreadsheet-review-grid,
.spreadsheet-risk-grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(24rem, 1.12fr);
}

.spreadsheet-review-panel {
    background: var(--color-bg-soft);
}

.spreadsheet-review-panel ul {
    display: grid;
    margin-top: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spreadsheet-review-panel li {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.76rem;
}

.spreadsheet-review-panel li:nth-child(even) {
    border-right: 0;
}

.spreadsheet-review-panel li:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.spreadsheet-review-panel b {
    color: var(--color-blue);
    font-size: 0.63rem;
    text-transform: uppercase;
}

.spreadsheet-software-comparison {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spreadsheet-software-comparison article {
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 1.65rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.spreadsheet-software-comparison article > span {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    margin-bottom: 1rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.spreadsheet-software-comparison article > span svg {
    width: 1.3rem;
    height: 1.3rem;
}

.spreadsheet-software-comparison h3 {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.spreadsheet-software-comparison ul {
    display: grid;
    gap: 0.55rem;
}

.spreadsheet-software-comparison li {
    position: relative;
    padding-left: 1rem;
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.spreadsheet-software-comparison li::before {
    position: absolute;
    top: 0.6em;
    left: 0;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--color-green);
    content: "";
}

.spreadsheet-risk-note {
    color: var(--color-muted);
    font-size: 0.94rem;
}

.spreadsheet-risk-workbook,
.spreadsheet-risk-review {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.spreadsheet-risk-workbook > p,
.spreadsheet-risk-review > p {
    margin-bottom: 0.85rem;
}

.spreadsheet-risk-workbook ul {
    display: grid;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
}

.spreadsheet-risk-workbook li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.73rem;
}

.spreadsheet-risk-workbook li:last-child {
    border-bottom: 0;
}

.spreadsheet-risk-workbook b {
    color: var(--color-green);
    font-size: 0.62rem;
    text-transform: uppercase;
}

.spreadsheet-risk-workbook .spreadsheet-risk-warning {
    background: var(--color-red-soft);
}

.spreadsheet-risk-workbook .spreadsheet-risk-warning b {
    color: var(--color-red);
}

.spreadsheet-risk-review > p > svg {
    color: var(--color-red);
}

.spreadsheet-risk-review small {
    color: var(--color-red);
}

.spreadsheet-risk-review > div {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.spreadsheet-risk-review > div span {
    padding: 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-bg-soft);
    color: var(--color-muted);
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
}

.spreadsheet-process-section .section-heading {
    max-width: 52rem;
}

.spreadsheet-process {
    position: relative;
    display: grid;
    margin-top: 3rem;
    gap: 0.8rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.spreadsheet-process::before {
    position: absolute;
    top: 2.2rem;
    right: 7%;
    left: 7%;
    height: 1px;
    background: var(--color-border-strong);
    content: "";
}

.spreadsheet-process li {
    position: relative;
    display: grid;
    min-width: 0;
    justify-items: center;
    align-content: start;
    text-align: center;
}

.spreadsheet-process li > span {
    position: absolute;
    z-index: 2;
    top: -0.35rem;
    right: calc(50% - 2.8rem);
    color: var(--color-blue);
    font-size: 0.61rem;
    font-weight: 850;
}

.spreadsheet-process li > svg {
    z-index: 1;
    width: 4.4rem;
    height: 4.4rem;
    margin-bottom: 0.8rem;
    padding: 1.35rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-blue);
}

.spreadsheet-process h3 {
    max-width: 10rem;
    font-size: 0.76rem;
    line-height: 1.35;
}

.spreadsheet-related-inner {
    max-width: 72rem;
}

.spreadsheet-related .related-pages {
    background: var(--color-surface);
}

.spreadsheet-related .related-pages ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 67.99rem) {
    .spreadsheet-hero-visual {
        width: min(100%, 46rem);
        margin-inline: auto;
    }

    .spreadsheet-job-grid,
    .spreadsheet-decision-grid,
    .spreadsheet-connection-grid,
    .spreadsheet-review-grid,
    .spreadsheet-software-grid,
    .spreadsheet-risk-grid {
        grid-template-columns: 1fr;
    }

    .spreadsheet-process {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .spreadsheet-process::before {
        display: none;
    }
}

@media (max-width: 48rem) {
    .spreadsheet-hero-visual {
        width: min(100%, 38rem);
    }

    .spreadsheet-hero-visual::before {
        width: 23rem;
        height: 23rem;
    }

    .spreadsheet-decision-options,
    .spreadsheet-software-comparison,
    .spreadsheet-related .related-pages ul {
        grid-template-columns: 1fr;
    }

    .spreadsheet-process {
        max-width: 42rem;
        margin-inline: auto;
        gap: 0;
        grid-template-columns: 1fr;
    }

    .spreadsheet-process li {
        min-height: 5.7rem;
        justify-items: start;
        align-items: center;
        gap: 1rem;
        padding-block: 0.7rem;
        grid-template-columns: 4rem minmax(0, 1fr);
        text-align: left;
    }

    .spreadsheet-process li > span {
        top: 0.4rem;
        right: auto;
        left: 2.8rem;
    }

    .spreadsheet-process li > svg {
        width: 3.5rem;
        height: 3.5rem;
        margin: 0;
        padding: 1rem;
        grid-column: 1;
    }

    .spreadsheet-process h3 {
        max-width: none;
        grid-column: 2;
    }

    .spreadsheet-process li:not(:last-child)::after {
        position: absolute;
        top: 4.2rem;
        bottom: -0.8rem;
        left: 1.75rem;
        width: 1px;
        background: var(--color-border-strong);
        content: "";
    }
}

@media (max-width: 31rem) {
    .spreadsheet-manual-panel,
    .spreadsheet-outcome-panel,
    .spreadsheet-cycle,
    .spreadsheet-bridge-visual,
    .spreadsheet-review-panel,
    .spreadsheet-risk-visual {
        padding: 1rem;
    }

    .spreadsheet-hero-visual::before {
        width: 20rem;
        height: 20rem;
    }

    .spreadsheet-manual-panel ol,
    .spreadsheet-cycle ol,
    .spreadsheet-outcome-options,
    .spreadsheet-review-panel ul,
    .spreadsheet-risk-review > div {
        grid-template-columns: 1fr;
    }

    .spreadsheet-manual-panel li {
        min-height: 1.75rem;
    }

    .spreadsheet-outcome-options em {
        text-align: center;
    }

    .spreadsheet-cycle li {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .spreadsheet-cycle li:last-child {
        border-bottom: 0;
    }

    .spreadsheet-bridge-before > div,
    .spreadsheet-bridge-after > div {
        grid-template-columns: 1fr;
    }

    .spreadsheet-bridge-before i,
    .spreadsheet-bridge-after i {
        margin-inline: auto;
        transform: rotate(90deg);
    }

    .spreadsheet-review-panel li,
    .spreadsheet-review-panel li:nth-child(even),
    .spreadsheet-review-panel li:nth-last-child(-n + 2) {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .spreadsheet-review-panel li:last-child {
        border-bottom: 0;
    }
}

/* System integration service patterns */

.integration-hero-grid {
    gap: clamp(2.75rem, 5.5vw, 4.75rem);
    grid-template-columns: minmax(0, 0.86fr) minmax(32rem, 1.14fr);
}

.integration-hero h1 {
    max-width: 14ch;
}

.integration-hero-visual {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 0.65rem;
}

.integration-hero-visual::before {
    position: absolute;
    z-index: -1;
    width: 32rem;
    height: 32rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-soft);
    content: "";
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.integration-islands-panel,
.connected-workflow-panel,
.employee-bridge-visual,
.api-capability-panel,
.source-choice-visual,
.transfer-reliability-panel,
.keep-connect-visual {
    min-width: 0;
    padding: clamp(1rem, 3vw, 1.4rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.integration-islands-panel {
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
}

.connected-workflow-panel {
    border-color: var(--color-green-border);
    background: var(--color-green-soft);
}

.integration-islands-panel > p,
.connected-workflow-panel > p {
    margin-bottom: 0.75rem;
    color: var(--color-muted);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.integration-islands-panel > p span,
.connected-workflow-panel > p span {
    display: inline-flex;
    margin-right: 0.3rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.3rem;
}

.integration-islands-panel > p span {
    background: var(--color-red-pill);
    color: var(--color-red);
}

.connected-workflow-panel > p span {
    background: var(--color-green-pill);
    color: var(--color-green);
}

.integration-islands {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.integration-islands > div,
.connected-system-map > div:not(.integration-hub) {
    display: grid;
    min-width: 0;
    min-height: 4.4rem;
    place-items: center;
    align-content: center;
    gap: 0.2rem;
    padding: 0.55rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    text-align: center;
}

.integration-islands svg,
.connected-system-map > div:not(.integration-hub) svg {
    width: 1.1rem;
    height: 1.1rem;
    margin-bottom: 0.1rem;
    color: var(--color-blue);
}

.integration-islands strong,
.integration-islands small,
.connected-system-map strong,
.connected-system-map small {
    display: block;
}

.integration-islands strong,
.connected-system-map strong {
    color: var(--color-navy);
    font-size: 0.7rem;
}

.integration-islands small,
.connected-system-map small {
    color: var(--color-muted);
    font-size: 0.58rem;
    line-height: 1.25;
}

.manual-bridge-badge {
    display: flex;
    width: min(100%, 25rem);
    margin: 0.75rem auto 0;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-red-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.manual-bridge-badge > svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 1.1rem;
    color: var(--color-red);
}

.manual-bridge-badge small,
.manual-bridge-badge strong {
    display: block;
}

.manual-bridge-badge small {
    color: var(--color-red);
    font-size: 0.58rem;
    font-weight: 850;
    text-transform: uppercase;
}

.manual-bridge-badge strong {
    color: var(--color-navy);
    font-size: 0.66rem;
    line-height: 1.35;
}

.integration-hero-shift {
    display: grid;
    align-items: center;
    gap: 0.6rem;
    grid-template-columns: 1fr 2rem 1fr;
}

.integration-hero-shift span {
    height: 1px;
    background: var(--color-border-strong);
}

.integration-hero-shift svg {
    width: 1rem;
    height: 1rem;
    margin-inline: auto;
    color: var(--color-blue);
    transform: rotate(90deg);
}

.connected-system-map {
    display: grid;
    align-items: center;
    gap: 0.5rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.connected-system-map .integration-hub {
    display: grid;
    min-width: 0;
    min-height: 5.5rem;
    place-items: center;
    align-content: center;
    gap: 0.2rem;
    padding: 0.55rem;
    border: 1px solid var(--color-green-border);
    border-radius: 50%;
    background: var(--color-surface);
    grid-column: 3;
    grid-row: 1 / 3;
    text-align: center;
}

.integration-hub svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--color-green);
}

.connected-system-map > div:nth-child(1) { grid-column: 1 / 3; }
.connected-system-map > div:nth-child(3) { grid-column: 4 / 6; }
.connected-system-map > div:nth-child(4) { grid-column: 1 / 3; }
.connected-system-map > div:nth-child(5) { grid-column: 4 / 6; }

.connected-workflow-note {
    display: flex;
    margin: 0.65rem 0 0;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-green);
    font-size: 0.66rem;
    font-weight: 750;
    text-align: center;
}

.connected-workflow-note svg {
    width: 0.9rem;
    height: 0.9rem;
}

.separate-software-grid,
.integration-api-grid,
.no-api-grid,
.integration-human-grid,
.integration-reliability-grid,
.integration-keep-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.8fr) minmax(25rem, 1.2fr);
}

.separate-software-section .section-heading,
.integration-api-section .section-heading,
.no-api-section .section-heading,
.integration-human-section .section-heading,
.integration-reliability-section .section-heading,
.integration-keep-section .section-heading {
    margin-bottom: 1.4rem;
}

.separate-software-statement,
.integration-api-statement,
.integration-human-statement,
.integration-keep-statement {
    color: var(--color-navy);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 800;
    line-height: 1.45;
}

.employee-bridge-visual {
    display: grid;
    align-items: center;
    gap: 0.7rem;
    background: var(--color-bg-soft);
    box-shadow: none;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.9fr) minmax(0, 1fr);
}

.bridge-system,
.bridge-person {
    display: grid;
    min-width: 0;
    place-items: center;
    align-content: center;
    gap: 0.4rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    text-align: center;
}

.bridge-system > svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-blue);
}

.bridge-person {
    border-color: var(--color-red-border);
    background: var(--color-red-soft);
}

.bridge-person > span {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-red);
}

.bridge-person svg {
    width: 1.2rem;
    height: 1.2rem;
}

.bridge-system small,
.bridge-system strong,
.bridge-person small,
.bridge-person strong {
    display: block;
}

.bridge-system small,
.bridge-person small {
    color: var(--color-muted);
    font-size: 0.62rem;
}

.bridge-system strong,
.bridge-person strong {
    color: var(--color-navy);
    font-size: 0.78rem;
}

.integration-example-section {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.integration-example-timeline,
.connectable-system-list,
.api-capability-panel ul,
.no-api-methods,
.two-way-flow ul,
.truth-ownership-panel ul,
.integration-review-panel ul,
.transfer-reliability-panel ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.integration-example-timeline {
    display: grid;
    margin-top: 1.3rem;
    gap: 0.65rem;
}

.integration-example-timeline li {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    color: var(--color-muted);
    font-size: 0.77rem;
    line-height: 1.35;
}

.integration-example-timeline span {
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border: 1px solid var(--color-red-step-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-red);
    font-size: 0.62rem;
    font-weight: 850;
}

.integrated-record-flow {
    display: grid;
    margin-top: 1.3rem;
    align-items: center;
    gap: 0.45rem;
    grid-template-columns: minmax(0, 1fr) 1rem minmax(0, 1.15fr) 1rem minmax(0, 1fr);
}

.integrated-record-flow > div {
    display: grid;
    min-width: 0;
    min-height: 5rem;
    place-items: center;
    align-content: center;
    gap: 0.2rem;
    padding: 0.55rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    text-align: center;
}

.integrated-record-flow > div > svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-green);
}

.integrated-record-flow strong,
.integrated-record-flow small {
    display: block;
}

.integrated-record-flow strong {
    color: var(--color-navy);
    font-size: 0.68rem;
}

.integrated-record-flow small {
    color: var(--color-muted);
    font-size: 0.58rem;
}

.integrated-record-flow > span svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--color-green);
}

.integrated-review-note {
    display: flex;
    margin: 0.75rem 0 0;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-green);
    font-size: 0.68rem;
    font-weight: 750;
}

.integrated-review-note svg {
    width: 0.9rem;
    height: 0.9rem;
}

.connectable-systems-layout {
    display: grid;
    align-items: start;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
}

.connectable-systems-heading {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}

.connectable-systems-heading h2 {
    font-size: clamp(2rem, 3.7vw, 3rem);
}

.connectable-systems-heading > p:not(.eyebrow) {
    color: var(--color-muted);
}

.connectable-system-list {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.connectable-system-list li {
    display: grid;
    min-width: 0;
    align-items: start;
    gap: 0.8rem;
    padding: 1.1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 1.4rem minmax(0, 1fr);
}

.connectable-system-list li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.connectable-system-list > li > svg {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.16rem;
    color: var(--color-blue);
}

.connectable-system-list strong,
.connectable-system-list small {
    display: block;
}

.connectable-system-list strong {
    margin-bottom: 0.15rem;
    color: var(--color-navy);
    font-size: 0.94rem;
}

.connectable-system-list small {
    color: var(--color-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.api-capability-panel {
    display: grid;
    align-items: center;
    gap: 0.7rem;
    background: var(--color-bg-soft);
    box-shadow: none;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 1.2fr) minmax(0, 1fr);
}

.api-system-node {
    display: grid;
    min-width: 0;
    min-height: 6rem;
    place-items: center;
    align-content: center;
    gap: 0.4rem;
    padding: 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    text-align: center;
}

.api-system-node svg {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--color-blue);
}

.api-system-node strong {
    color: var(--color-navy);
    font-size: 0.75rem;
}

.api-connection-line {
    display: grid;
    place-items: center;
}

.api-connection-line > span {
    width: 100%;
    height: 1px;
    background: var(--color-green);
    grid-area: 1 / 1;
}

.api-connection-line > div {
    z-index: 1;
    display: grid;
    min-width: 6.5rem;
    place-items: center;
    gap: 0.2rem;
    padding: 0.65rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-green-soft);
    grid-area: 1 / 1;
}

.api-connection-line svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-green);
}

.api-connection-line strong {
    color: var(--color-navy);
    font-size: 0.7rem;
}

.api-capability-panel ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    grid-column: 1 / -1;
}

.api-capability-panel li {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.63rem;
    font-weight: 700;
}

.no-api-note {
    color: var(--color-muted);
    font-size: 0.92rem;
}

.no-api-methods {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.no-api-methods > div,
.no-api-methods > a {
    display: grid;
    min-width: 0;
    align-items: start;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    color: inherit;
    grid-template-columns: 1.3rem minmax(0, 1fr);
    text-decoration: none;
}

.no-api-methods > :nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.no-api-methods > a:hover strong {
    color: var(--color-blue);
}

.no-api-methods > a:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: -3px;
}

.no-api-methods svg {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    color: var(--color-blue);
}

.no-api-methods strong,
.no-api-methods small {
    display: block;
}

.no-api-methods strong {
    color: var(--color-navy);
    font-size: 0.88rem;
}

.no-api-methods small {
    color: var(--color-muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.integration-direction-section .section-heading {
    max-width: 54rem;
}

.data-direction-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.data-direction-grid article {
    min-width: 0;
    padding: clamp(1.4rem, 4vw, 2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-bg-soft);
}

.one-way-flow {
    border-color: var(--color-green-border) !important;
    background: var(--color-green-soft) !important;
}

.data-direction-grid article > p {
    margin-bottom: 1.2rem;
    color: var(--color-muted);
    font-size: 0.76rem;
    font-weight: 750;
}

.data-direction-grid article > p span {
    display: inline-flex;
    margin-right: 0.35rem;
    padding: 0.2rem 0.4rem;
    border-radius: 0.3rem;
    background: var(--color-blue-soft);
    color: var(--color-blue);
    font-size: 0.65rem;
    text-transform: uppercase;
}

.one-way-flow > p span {
    background: var(--color-green-pill) !important;
    color: var(--color-green) !important;
}

.data-direction-grid article > div {
    display: grid;
    align-items: center;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr) minmax(6rem, 0.9fr) minmax(0, 1fr);
}

.data-direction-grid article > div > strong {
    display: grid;
    min-height: 4.5rem;
    place-items: center;
    padding: 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-navy);
    font-size: 0.78rem;
    text-align: center;
}

.data-direction-grid article > div > span {
    display: grid;
    place-items: center;
}

.data-direction-grid article > div > span i {
    width: 100%;
    height: 1px;
    background: var(--color-green);
    grid-area: 1 / 1;
}

.data-direction-grid article > div > span svg {
    z-index: 1;
    width: 1.2rem;
    height: 1.2rem;
    background: inherit;
    color: var(--color-green);
    grid-area: 1 / 1;
}

.two-way-flow article > div > span,
.two-way-flow > div > span {
    grid-template-columns: repeat(2, 1fr);
}

.two-way-flow > div > span svg:last-child {
    transform: rotate(180deg);
}

.one-way-flow > small {
    display: block;
    margin-top: 1rem;
    color: var(--color-muted);
    font-size: 0.72rem;
    text-align: center;
}

.two-way-flow ul {
    display: flex;
    margin-top: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}

.two-way-flow li {
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.62rem;
    font-weight: 700;
}

.integration-truth-section {
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background: #0b1c32;
    color: #c2cedd;
}

.integration-truth-grid {
    display: grid;
    align-items: center;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.integration-truth-section .eyebrow {
    color: #8ab0ff;
}

.integration-truth-section h2 {
    color: #ffffff;
}

.integration-truth-statement {
    color: #ffffff;
    font-size: clamp(1.1rem, 2.2vw, 1.45rem);
    font-weight: 750;
    line-height: 1.45;
}

.truth-ownership-panel {
    padding: clamp(1.2rem, 4vw, 1.7rem);
    border: 1px solid #49627f;
    border-radius: var(--radius-large);
    background: #102945;
}

.truth-panel-heading {
    display: grid;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #49627f;
    grid-template-columns: 2.5rem minmax(0, 1fr);
}

.truth-panel-heading > svg {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.7rem;
    border-radius: 50%;
    background: #183959;
    color: #83dcb2;
}

.truth-panel-heading small,
.truth-panel-heading strong {
    display: block;
}

.truth-panel-heading small {
    color: #8ab0ff;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.truth-panel-heading strong {
    color: #ffffff;
    font-size: 1rem;
}

.truth-ownership-panel ul {
    display: grid;
    margin-top: 1rem;
    gap: 0.55rem;
}

.truth-ownership-panel li {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem;
    border: 1px solid #36516e;
    border-radius: var(--radius-small);
    background: #0f2239;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.truth-ownership-panel li span {
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 750;
}

.truth-ownership-panel li b {
    color: #c2cedd;
    font-size: 0.7rem;
    font-weight: 650;
    text-align: right;
}

.integration-review-panel {
    min-width: 0;
    padding: clamp(1.2rem, 4vw, 1.7rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.integration-review-panel > div {
    display: grid;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-green-soft);
    grid-template-columns: 2.4rem minmax(0, 1fr);
}

.integration-review-panel > div > svg {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0.7rem;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-green);
}

.integration-review-panel small,
.integration-review-panel strong {
    display: block;
}

.integration-review-panel small {
    color: var(--color-green);
    font-size: 0.63rem;
    font-weight: 850;
    text-transform: uppercase;
}

.integration-review-panel strong {
    color: var(--color-navy);
    font-size: 0.82rem;
}

.integration-review-panel ul {
    display: grid;
    margin-top: 0.75rem;
    gap: 0.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.integration-review-panel li {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    color: var(--color-muted);
    font-size: 0.68rem;
    font-weight: 700;
    grid-template-columns: 1rem minmax(0, 1fr);
}

.integration-review-panel li svg {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--color-blue);
}

.transfer-reliability-panel {
    background: var(--color-bg-soft);
    box-shadow: none;
}

.transfer-attempt-row {
    display: grid;
    align-items: center;
    gap: 0.7rem;
    grid-template-columns: minmax(0, 1fr) minmax(4rem, 0.8fr) minmax(0, 1fr);
}

.transfer-attempt-row > span {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-navy);
    font-size: 0.72rem;
    font-weight: 750;
}

.transfer-attempt-row svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-blue);
}

.transfer-attempt-row > i {
    height: 1px;
    background: var(--color-red);
}

.transfer-status {
    display: grid;
    margin-top: 0.75rem;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem;
    border: 1px solid var(--color-red-border);
    border-radius: var(--radius-small);
    background: var(--color-red-soft);
    grid-template-columns: 2.3rem minmax(0, 1fr);
}

.transfer-status > svg {
    width: 2.3rem;
    height: 2.3rem;
    padding: 0.65rem;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-red);
}

.transfer-status small,
.transfer-status strong {
    display: block;
}

.transfer-status small {
    color: var(--color-red);
    font-size: 0.62rem;
    font-weight: 850;
    text-transform: uppercase;
}

.transfer-status strong {
    color: var(--color-navy);
    font-size: 0.8rem;
}

.transfer-reliability-panel ol {
    display: grid;
    margin-top: 0.75rem;
    gap: 0.5rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.transfer-reliability-panel li {
    display: grid;
    min-width: 0;
    min-height: 5.3rem;
    place-items: center;
    align-content: center;
    gap: 0.1rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    text-align: center;
}

.transfer-reliability-panel li > span {
    color: var(--color-blue);
    font-size: 0.58rem;
    font-weight: 850;
}

.transfer-reliability-panel li strong {
    color: var(--color-navy);
    font-size: 0.72rem;
}

.transfer-reliability-panel li small {
    color: var(--color-muted);
    font-size: 0.6rem;
    line-height: 1.25;
}

.integration-process-section .section-heading {
    max-width: 58rem;
}

.integration-process {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.integration-process h3 {
    font-size: 0.8rem;
}

.keep-connect-visual {
    display: grid;
    align-items: center;
    gap: 0.8rem;
    background: var(--color-bg-soft);
    box-shadow: none;
    grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.8fr) minmax(0, 1fr);
}

.keep-connect-visual > div {
    display: grid;
    min-width: 0;
    min-height: 7rem;
    place-items: center;
    align-content: center;
    gap: 0.4rem;
    padding: 0.8rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    text-align: center;
}

.keep-connect-visual > div > svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-green);
}

.keep-connect-visual small,
.keep-connect-visual strong,
.keep-connect-visual b {
    display: block;
}

.keep-connect-visual small {
    color: var(--color-green);
    font-size: 0.6rem;
    font-weight: 850;
    text-transform: uppercase;
}

.keep-connect-visual strong {
    color: var(--color-navy);
    font-size: 0.8rem;
}

.keep-connect-visual b {
    color: var(--color-muted);
    font-size: 0.63rem;
    font-weight: 650;
}

.keep-connect-bridge {
    display: grid;
    place-items: center;
}

.keep-connect-bridge i {
    width: 100%;
    height: 1px;
    background: var(--color-green);
    grid-area: 1 / 1;
}

.keep-connect-bridge > svg {
    z-index: 1;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0.7rem;
    border: 1px solid var(--color-green-border);
    border-radius: 50%;
    background: var(--color-green-soft);
    color: var(--color-green);
    grid-area: 1 / 1;
}

.keep-connect-bridge small {
    margin-top: 0.45rem;
    color: var(--color-muted);
    font-size: 0.58rem;
    font-weight: 700;
    text-align: center;
}

.integration-related-inner {
    max-width: 72rem;
}

.integration-related .related-pages {
    background: var(--color-surface);
}

.integration-related .related-pages ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 67.99rem) {
    .integration-hero-visual {
        width: min(100%, 46rem);
        margin-inline: auto;
    }

    .separate-software-grid,
    .integration-api-grid,
    .no-api-grid,
    .integration-human-grid,
    .integration-reliability-grid,
    .integration-keep-grid,
    .integration-truth-grid,
    .connectable-systems-layout {
        grid-template-columns: 1fr;
    }

    .connectable-systems-heading {
        position: static;
        max-width: var(--reading);
    }
}

@media (max-width: 48rem) {
    .integration-hero-visual {
        width: min(100%, 40rem);
    }

    .integration-hero-visual::before {
        width: 23rem;
        height: 23rem;
    }

    .integration-islands {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .employee-bridge-visual,
    .api-capability-panel,
    .data-direction-grid,
    .keep-connect-visual,
    .integration-related .related-pages ul {
        grid-template-columns: 1fr;
    }

    .bridge-person,
    .api-connection-line,
    .keep-connect-bridge {
        width: min(100%, 18rem);
        margin-inline: auto;
    }

    .api-connection-line > span,
    .keep-connect-bridge i {
        width: 1px;
        height: 2rem;
    }

    .api-capability-panel ul {
        grid-column: auto;
    }

    .no-api-methods,
    .connectable-system-list {
        grid-template-columns: 1fr;
    }

    .no-api-methods > :nth-child(odd),
    .connectable-system-list li:nth-child(odd) {
        border-right: 0;
    }

    .keep-connect-bridge > svg {
        transform: rotate(90deg);
    }
}

@media (max-width: 31rem) {
    .integration-hero-visual::before {
        width: 20rem;
        height: 20rem;
    }

    .integration-islands-panel,
    .connected-workflow-panel,
    .employee-bridge-visual,
    .api-capability-panel,
    .integration-review-panel,
    .transfer-reliability-panel,
    .truth-ownership-panel,
    .keep-connect-visual {
        padding: 1rem;
    }

    .connected-system-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .connected-system-map .integration-hub {
        min-height: 5.2rem;
        border-radius: var(--radius-small);
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .connected-system-map > div:nth-child(1),
    .connected-system-map > div:nth-child(3),
    .connected-system-map > div:nth-child(4),
    .connected-system-map > div:nth-child(5) {
        grid-column: auto;
    }

    .integrated-record-flow {
        grid-template-columns: 1fr;
    }

    .integrated-record-flow > span {
        display: grid;
        place-items: center;
    }

    .integrated-record-flow > span svg {
        transform: rotate(90deg);
    }

    .connectable-system-list li,
    .no-api-methods > div,
    .no-api-methods > a {
        padding-inline: 0;
    }

    .data-direction-grid article,
    .source-choice-visual {
        padding: 1rem;
    }

    .data-direction-grid article > div {
        grid-template-columns: 1fr;
    }

    .data-direction-grid article > div > span {
        width: 5rem;
        margin-inline: auto;
        transform: rotate(90deg);
    }

    .truth-ownership-panel li {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .truth-ownership-panel li b {
        text-align: left;
    }

    .integration-review-panel ul {
        grid-template-columns: 1fr;
    }

    .transfer-reliability-panel ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Responsive navigation and layouts */

@media (max-width: 74rem) {
    .nav-item > a,
    .nav-dropdown > summary {
        padding-inline: 0.5rem;
        font-size: 0.84rem;
    }

    .nav-cta .button {
        padding-inline: 0.85rem;
        font-size: 0.85rem;
    }

    .hero-grid {
        gap: 2.5rem;
        grid-template-columns: minmax(0, 0.9fr) minmax(30rem, 1.1fr);
    }
}

@media (max-width: 67.99rem) {
    :root {
        --header-height: 4.5rem;
    }

    .header-inner {
        position: relative;
        flex-wrap: wrap;
    }

    .header-actions {
        margin-left: auto;
        order: 0;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .site-nav {
        order: 3;
        width: 100%;
        margin: -0.35rem 0 0;
        padding-bottom: 1rem;
    }

    .js .site-nav:not(.is-open) {
        display: none;
    }

    .nav-list {
        display: grid;
        align-items: stretch;
        gap: 0.25rem;
    }

    .nav-item > a,
    .nav-dropdown > summary {
        min-height: 3rem;
        justify-content: space-between;
        padding-inline: 0.8rem;
        border: 1px solid var(--color-border);
        font-size: 0.9rem;
    }

    .dropdown-menu {
        position: static;
        width: auto;
        min-width: 0;
        margin-top: 0.25rem;
        padding: 0.3rem 0.5rem 0.45rem 1rem;
        border: 0;
        border-left: 2px solid var(--color-blue);
        border-radius: 0;
        box-shadow: none;
    }

    .dropdown-menu a {
        min-height: 2.75rem;
    }

    .nav-cta {
        margin: 0.25rem 0 0;
    }

    .nav-theme {
        margin: 0.5rem 0 0;
    }

    .js .nav-theme .theme-toggle {
        display: flex;
        width: 100%;
        height: auto;
        min-height: 3rem;
        justify-content: flex-start;
        gap: 0.7rem;
        padding: 0.65rem 0.8rem;
        border-color: var(--color-border-strong);
        background: var(--color-surface);
    }

    .theme-toggle-text {
        display: inline;
        font-size: 0.9rem;
        font-weight: 700;
    }

    .nav-cta .button {
        width: 100%;
        min-height: 3rem;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        max-width: 48rem;
    }

    .hero-workflow {
        width: min(100%, 44rem);
        margin-inline: auto;
    }

    .problem-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split-heading {
        gap: 3rem;
        grid-template-columns: 1fr;
    }

    .split-heading .section-heading {
        position: static;
    }

    .process-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-list::before {
        display: none;
    }

    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-intro {
        grid-column: 1 / -1;
    }

    .task-intake-grid {
        grid-template-columns: 1fr;
    }

    .task-next-step {
        max-width: 46rem;
        padding-top: 0;
    }

    .feasibility-grid {
        grid-template-columns: 1fr;
    }

    .feasibility-compact {
        align-items: start;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .feasibility-compact-link {
        grid-column: 2;
        justify-self: start;
        text-align: left;
    }

    .service-hero-grid,
    .service-definition-grid,
    .service-technology-grid {
        grid-template-columns: 1fr;
    }

    .service-hero-copy {
        max-width: 50rem;
    }

    .service-hero-visual {
        width: min(100%, 46rem);
        margin-inline: auto;
    }

    .human-control-panel {
        max-width: 44rem;
    }

    .tool-map {
        max-width: 46rem;
    }

    .software-gap-grid,
    .custom-types-layout,
    .keep-what-works-grid {
        grid-template-columns: 1fr;
    }

    .custom-gap-visual {
        width: min(100%, 46rem);
        margin-inline: auto;
    }

    .custom-types-heading {
        position: static;
        max-width: var(--reading);
    }

    .problem-hero-grid,
    .problem-signal-grid,
    .common-tasks-layout,
    .implementation-layout,
    .automation-worth-grid {
        grid-template-columns: 1fr;
    }

    .problem-hero-copy {
        max-width: 50rem;
    }

    .repetition-visual {
        width: min(100%, 46rem);
        margin-inline: auto;
    }

    .problem-signal-heading,
    .common-tasks-heading {
        position: static;
        max-width: var(--reading);
    }

    .information-exists-grid,
    .data-workflows-layout,
    .partial-automation-grid {
        grid-template-columns: 1fr;
    }

    .data-entry-hero-visual {
        width: min(100%, 46rem);
        margin-inline: auto;
    }

    .data-workflows-heading {
        position: static;
        max-width: var(--reading);
    }

    .data-entry-process {
        max-width: 42rem;
        margin-inline: auto;
        gap: 0;
        grid-template-columns: 1fr;
    }

    .data-entry-process::before {
        display: none;
    }

    .data-entry-process li {
        min-height: 5.7rem;
        justify-items: start;
        align-items: center;
        gap: 1rem;
        padding-block: 0.7rem;
        grid-template-columns: 4rem minmax(0, 1fr);
        text-align: left;
    }

    .data-entry-process li > span {
        top: 0.4rem;
        right: auto;
        left: 2.8rem;
    }

    .data-entry-process li > svg {
        width: 3.5rem;
        height: 3.5rem;
        margin: 0;
        padding: 1rem;
        grid-column: 1;
    }

    .data-entry-process h3 {
        max-width: none;
        grid-column: 2;
    }

    .data-entry-process li:not(:last-child)::after {
        position: absolute;
        top: 4.2rem;
        bottom: -0.8rem;
        left: 1.75rem;
        width: 1px;
        background: var(--color-border-strong);
        content: "";
    }

    .browser-definition-grid,
    .browser-extension-grid,
    .browser-reliability-grid,
    .browser-review-grid,
    .browser-task-layout {
        grid-template-columns: 1fr;
    }

    .browser-hero-visual {
        width: min(100%, 46rem);
        margin-inline: auto;
    }

    .browser-task-heading {
        position: static;
        max-width: var(--reading);
    }
}

@media (max-width: 48rem) {
    .section {
        padding-block: 4.5rem;
    }

    .brand-tagline {
        display: none;
    }

    .hero {
        padding-block: 3.5rem 4.5rem;
    }

    .hero-workflow {
        min-height: 0;
        gap: 0.7rem;
        grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1.2fr);
    }

    .hero-workflow::before {
        width: 23rem;
        height: 23rem;
    }

    .workflow-panel {
        padding: 1.05rem;
    }

    .workflow-manual,
    .workflow-automated {
        transform: none;
    }

    .manual-steps li {
        font-size: 0.82rem;
    }

    .manual-steps svg {
        width: 1rem;
        height: 1rem;
    }

    .workflow-arrow {
        width: 2.5rem;
        height: 2.5rem;
    }

    .report-chart {
        height: 6.25rem;
        gap: 0.3rem;
        padding-inline: 0.7rem;
    }

    .problem-card-grid,
    .capability-grid {
        grid-template-columns: 1fr;
    }

    .problem-card {
        min-height: 0;
    }

    .before-after {
        gap: 3.2rem;
        grid-template-columns: 1fr;
    }

    .comparison-before,
    .comparison-after {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-large);
    }

    .comparison-transition {
        top: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .section-action,
    .final-cta-inner {
        align-items: stretch;
        flex-direction: column;
    }

    .section-action .button,
    .final-cta .button {
        align-self: flex-start;
    }

    .bridge-grid,
    .local-grid,
    .founder-grid {
        grid-template-columns: 1fr;
    }

    .local-copy {
        order: -1;
    }

    .map-card {
        min-height: 23rem;
    }

    .process-list {
        gap: 0;
        grid-template-columns: 1fr;
    }

    .process-list li {
        display: grid;
        min-height: 7.5rem;
        padding: 1rem 1rem 1rem 5rem;
        align-content: center;
        text-align: left;
    }

    .step-icon {
        position: absolute;
        top: 1.25rem;
        left: 0;
        width: 3.5rem;
        height: 3.5rem;
        margin: 0;
    }

    .step-number {
        top: 0.7rem;
        right: 0.2rem;
    }

    .process-list li:not(:last-child)::after {
        position: absolute;
        top: 4.75rem;
        bottom: -0.25rem;
        left: 1.75rem;
        width: 1px;
        background: var(--color-border-strong);
        content: "";
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-column:last-child {
        grid-column: 1 / -1;
    }

    .page-hero-inner {
        text-align: left;
    }

    .page-hero h1,
    .page-hero-lede,
    .page-hero-supporting {
        margin-left: 0;
    }

    .content-card-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .feasibility-runtime,
    .feasibility-compact {
        grid-template-columns: 1fr;
    }

    .feasibility-compact-link {
        grid-column: auto;
    }

    .form-field-full {
        grid-column: auto;
    }

    .service-hero {
        padding-block: 3.25rem 4rem;
    }

    .service-hero-visual {
        width: min(100%, 24rem);
        gap: 0.65rem;
        grid-template-columns: 1fr;
    }

    .service-hero-visual::before {
        width: 23rem;
        height: 23rem;
    }

    .service-flow-arrow {
        margin-inline: auto;
        transform: rotate(90deg);
    }

    .signal-list,
    .service-fit-grid,
    .service-related .related-pages ul {
        grid-template-columns: 1fr;
    }

    .signal-list li:nth-child(odd) {
        border-right: 0;
    }

    .custom-gap-visual {
        width: min(100%, 24rem);
        gap: 0.65rem;
        grid-template-columns: 1fr;
    }

    .custom-gap-visual::before {
        width: 23rem;
        height: 23rem;
    }

    .custom-gap-arrow {
        margin-inline: auto;
        transform: rotate(90deg);
    }

    .workaround-stack li {
        transform: none !important;
    }

    .small-software-grid {
        grid-template-columns: 1fr;
    }

    .custom-tool-types,
    .custom-software-related .related-pages ul {
        grid-template-columns: 1fr;
    }

    .custom-tool-types li:nth-child(odd) {
        border-right: 0;
    }

    .problem-hero {
        padding-block: 3.25rem 4rem;
    }

    .repetition-visual {
        width: min(100%, 24rem);
        gap: 0.65rem;
        grid-template-columns: 1fr;
    }

    .repetition-visual::before {
        width: 23rem;
        height: 23rem;
    }

    .repetition-shift {
        margin-inline: auto;
        transform: rotate(90deg);
    }

    .recognition-layout,
    .human-judgment-grid {
        grid-template-columns: 1fr;
    }

    .worth-signs,
    .common-task-list,
    .implementation-options,
    .problem-related .related-pages ul {
        grid-template-columns: 1fr;
    }

    .worth-signs li:nth-child(odd),
    .common-task-list li:nth-child(odd),
    .implementation-options > div:nth-child(odd) {
        border-right: 0;
    }

    .data-route-list,
    .data-entry-related .related-pages ul {
        grid-template-columns: 1fr;
    }

    .data-route-list li:nth-child(odd) {
        border-right: 0;
    }

    .data-entry-hero-visual {
        width: min(100%, 38rem);
    }

    .data-entry-hero-visual::before {
        width: 23rem;
        height: 23rem;
    }

    .data-review-grid {
        grid-template-columns: 1fr;
    }

    .browser-hero-visual {
        width: min(100%, 38rem);
    }

    .browser-hero-visual::before {
        width: 23rem;
        height: 23rem;
    }

    .browser-task-list,
    .connection-choice-grid,
    .browser-related .related-pages ul {
        grid-template-columns: 1fr;
    }

    .browser-task-list li:nth-child(odd) {
        border-right: 0;
    }
}

@media (max-width: 31rem) {
    .container {
        width: min(100% - 1.25rem, var(--container));
    }

    h1 {
        font-size: clamp(2.4rem, 13vw, 3.15rem);
    }

    h2 {
        font-size: 2rem;
    }

    .menu-toggle-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .back-to-top {
        right: max(0.75rem, env(safe-area-inset-right));
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        width: 2.9rem;
        height: 2.9rem;
    }

    .final-cta-inner,
    .footer-grid,
    .footer-bottom {
        padding-right: 4rem;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .button,
    .hero-actions .text-link {
        align-self: flex-start;
    }

    .location-line {
        display: grid;
        grid-template-columns: 1rem minmax(0, 1fr);
        column-gap: 0.5rem;
        align-items: start;
        line-height: 1.65;
    }

    .location-line .location-separator {
        display: none;
    }

    .location-line svg {
        display: block;
        margin-top: 0.25rem;
    }

    .location-line .location-item {
        display: block;
        grid-column: 2;
    }

    .location-followup {
        display: block;
        grid-column: 2;
        white-space: normal;
    }

    .hero-workflow {
        gap: 0.65rem;
        grid-template-columns: 1fr;
    }

    .hero-workflow::before {
        width: 20rem;
        height: 20rem;
    }

    .workflow-manual,
    .workflow-automated {
        width: min(100%, 20rem);
        margin-inline: auto;
    }

    .workflow-panel {
        padding: 0.85rem 1rem;
    }

    .workflow-label {
        margin-bottom: 0.65rem;
    }

    .manual-steps {
        gap: 0.55rem;
    }

    .workflow-repeat {
        margin-top: 0.7rem;
    }

    .workflow-arrow {
        width: 2.25rem;
        height: 2.25rem;
        margin-inline: auto;
        transform: rotate(90deg);
    }

    .manual-steps li {
        font-size: 0.88rem;
    }

    .report-header {
        min-height: 2.25rem;
    }

    .report-chart {
        height: 5rem;
        padding-block: 0.7rem 0.5rem;
    }

    .report-rows li {
        padding-block: 0.25rem;
    }

    .workflow-success {
        margin-top: 0.65rem;
    }

    .dashboard-body {
        grid-template-columns: 1fr;
    }

    .mini-chart {
        height: 5.5rem;
    }

    .section-action .button {
        width: 100%;
    }

    .final-cta .button {
        width: 100%;
    }

    .map-card {
        min-height: 21rem;
    }

    .map-ring-one { left: 0.5rem; }
    .map-ring-two { left: -4rem; }
    .map-pin { left: 6.8rem; }
    .map-label-turlock { left: 6.1rem; }
    .map-label-modesto { left: 2.2rem; }
    .map-label-merced { left: 11rem; }
    .remote-line { right: 0.75rem; width: 4rem; }
    .remote-label { right: 0.75rem; }

    .credibility-flow {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }

    .credibility-flow li:not(:last-child)::after {
        top: auto;
        right: 50%;
        bottom: -2rem;
        content: "↓";
        transform: translateX(50%);
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-column:last-child,
    .footer-intro {
        grid-column: auto;
    }

    .breadcrumbs {
        padding-top: 1rem;
    }

    .page-hero {
        padding-block: 2.75rem 3.5rem;
    }

    .task-form-card {
        padding: 1.15rem;
        border-radius: var(--radius-large);
    }

    .task-form-heading {
        padding-right: 0;
    }

    .task-form-heading .required-note {
        position: static;
        margin-top: 0.75rem;
    }

    .form-submit-row {
        align-items: stretch;
        flex-direction: column;
    }

    .form-submit-row .button {
        width: 100%;
    }

    .form-message {
        gap: 0.75rem;
        padding: 1rem;
    }

    .content-card {
        padding: 1.1rem;
    }

    .shared-cta .final-cta-inner {
        padding-right: 0;
    }

    .service-hero h1 {
        font-size: clamp(2.3rem, 12.5vw, 2.95rem);
    }

    .service-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .service-hero-actions .button,
    .service-hero-actions .text-link {
        align-self: flex-start;
    }

    .service-flow-manual,
    .service-flow-automated {
        padding: 1rem;
    }

    .workaround-stack,
    .focused-tool {
        padding: 1rem;
    }

    .focused-tool-bar {
        margin: -1rem -1rem 0.85rem;
    }

    .workflow-gap-map,
    .companion-tool-map {
        padding: 1.15rem;
    }

    .keep-options {
        grid-template-columns: 1fr;
    }

    .custom-tool-types li {
        padding-inline: 0;
    }

    .companion-existing {
        gap: 0.4rem;
    }

    .companion-existing span {
        min-height: 4.7rem;
        padding: 0.5rem 0.35rem;
        font-size: 0.68rem;
    }

    .signal-list li {
        gap: 0.75rem;
        padding-inline: 0;
        grid-template-columns: 2.4rem minmax(0, 1fr);
    }

    .signal-list li > span {
        width: 2.4rem;
        height: 2.4rem;
    }

    .tool-map,
    .fit-option {
        padding: 1.15rem;
    }

    .problem-hero h1 {
        font-size: clamp(2.3rem, 12.2vw, 2.9rem);
    }

    .problem-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .problem-hero-actions .button,
    .problem-hero-actions .text-link {
        align-self: flex-start;
    }

    .repetition-current,
    .repetition-simplified {
        padding: 1rem;
    }

    .recognition-list {
        grid-template-columns: 1fr;
    }

    .recognition-list > div:nth-child(odd) {
        border-right: 0;
    }

    .worth-signs li,
    .common-task-list li,
    .implementation-options > div {
        padding-inline: 0;
    }

    .human-judgment-section li {
        border-radius: var(--radius-small);
    }

    .evaluation-factors {
        padding: 1.15rem;
    }

    .transfer-lane {
        padding: 0.95rem;
    }

    .transfer-path {
        justify-items: stretch;
        gap: 0.45rem;
        grid-template-columns: 1fr;
    }

    .transfer-node {
        min-height: 4.5rem;
    }

    .transfer-arrow {
        display: grid;
        justify-items: center;
    }

    .transfer-arrow svg {
        transform: rotate(90deg);
    }

    .data-entry-hero-visual::before {
        width: 20rem;
        height: 20rem;
    }

    .information-source-map {
        padding: 1.1rem;
    }

    .information-source-map ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .source-map-movement {
        gap: 0.45rem;
    }

    .source-map-movement p {
        max-width: 9rem;
        justify-content: center;
        text-align: center;
    }

    .data-route-list li {
        gap: 0.45rem;
        padding-inline: 0;
    }

    .field-review-visual {
        grid-template-columns: 1fr;
    }

    .field-review-arrow {
        margin-inline: auto;
        transform: rotate(90deg);
    }

    .field-review-column {
        padding: 1rem;
    }

    .partial-automation-reasons li {
        gap: 0.7rem;
    }

    .data-entry-process {
        margin-top: 2rem;
    }

    .browser-step-sequence {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .browser-simple-path {
        grid-template-columns: 1fr;
    }

    .browser-simple-path > svg {
        margin-inline: auto;
        transform: rotate(90deg);
    }

    .browser-hero-visual::before {
        width: 20rem;
        height: 20rem;
    }

    .browser-actions-panel,
    .site-change-cycle {
        padding: 1.1rem;
    }

    .browser-actions-panel ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .browser-example-timeline {
        grid-template-columns: 1fr;
    }

    .browser-task-list li {
        padding-inline: 0;
    }

    .connection-option {
        padding: 1.15rem;
    }

    .browser-tool-comparison {
        grid-template-columns: 1fr;
    }

    .browser-tool-divider {
        min-height: 2rem;
    }

    .browser-tool-comparison article,
    .field-review-column {
        padding: 1rem;
    }

    .exception-window-body {
        padding: 1rem;
    }

    .site-change-browser ul {
        grid-template-columns: 1fr;
    }
}

/* Turlock area-page patterns */

.area-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.5rem, 7vw, 6rem);
    border-bottom: 1px solid var(--color-border);
}

.area-hero::before {
    position: absolute;
    top: -14rem;
    right: -13rem;
    width: 35rem;
    height: 35rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    content: "";
    opacity: 0.72;
}

.area-hero::after {
    position: absolute;
    top: -8rem;
    right: -7rem;
    width: 23rem;
    height: 23rem;
    border: 1px solid var(--color-blue);
    border-radius: 50%;
    content: "";
    opacity: 0.14;
}

.area-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    align-items: center;
    gap: clamp(3rem, 6vw, 5.75rem);
    grid-template-columns: minmax(0, 0.94fr) minmax(28rem, 1.06fr);
}

.area-hero-copy h1 {
    max-width: 14ch;
    font-size: clamp(2.75rem, 5.2vw, 4.55rem);
}

.area-hero-lede {
    max-width: 42rem;
    margin-bottom: 1rem;
    color: var(--color-text);
    font-size: clamp(1.12rem, 2vw, 1.3rem);
    font-weight: 650;
    line-height: 1.55;
}

.area-hero-copy > p:not(.eyebrow, .area-hero-lede) {
    max-width: 39rem;
    color: var(--color-muted);
}

.area-hero-actions {
    display: flex;
    margin-top: 2rem;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.area-observation-visual {
    min-width: 0;
}

.observation-window {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-soft);
}

.observation-window-header {
    display: flex;
    min-height: 3.35rem;
    padding: 0.85rem 1rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-navy);
    font-size: 0.78rem;
    font-weight: 800;
}

.observation-window-header::before {
    width: 2.5rem;
    height: 0.55rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-border-strong) 0 22%, transparent 22% 39%, var(--color-border-strong) 39% 61%, transparent 61% 78%, var(--color-border-strong) 78%);
    content: "";
    opacity: 0.62;
}

.observation-window-header > span:first-of-type {
    margin-right: auto;
}

.observation-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-green);
}

.observation-status i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.observation-workspace {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(10rem, 0.85fr);
}

.observed-steps,
.observation-notes,
.area-opportunity-list,
.process-observation-card ul,
.area-problem-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.observed-steps {
    display: grid;
    gap: 0.55rem;
}

.observed-steps li {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.2rem 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-bg-soft);
    grid-template-columns: auto auto minmax(0, 1fr);
}

.observed-steps li > span {
    color: var(--color-border-strong);
    font-size: 0.62rem;
    font-weight: 850;
}

.observed-steps li > svg {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--color-blue);
}

.observed-steps strong {
    overflow: hidden;
    color: var(--color-navy);
    font-size: 0.82rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.observed-steps small {
    grid-column: 3;
    color: var(--color-muted);
    font-size: 0.69rem;
    line-height: 1.35;
}

.observation-notes {
    display: grid;
    align-content: center;
    gap: 0.55rem;
}

.observation-notes p {
    display: flex;
    margin: 0;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.7rem;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.observation-notes svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    margin-top: 0.15rem;
    color: var(--color-green);
}

.observation-notes span,
.observation-result span {
    min-width: 0;
    color: var(--color-muted);
    font-size: 0.68rem;
    line-height: 1.35;
}

.observation-notes strong,
.observation-result strong {
    display: block;
    color: var(--color-navy);
    font-size: 0.76rem;
}

.observation-result {
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.9rem 1rem;
    border-top: 1px solid var(--color-green-border);
    background: var(--color-green-soft);
}

.observation-result > svg {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 1.2rem;
    color: var(--color-green);
}

.area-practical-grid,
.area-observation-grid,
.area-context-grid {
    display: grid;
    align-items: start;
    gap: clamp(2.5rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(26rem, 1.1fr);
}

.area-practical .section-heading,
.area-observation .section-heading {
    margin-bottom: 1.5rem;
}

.area-reading-copy,
.area-observation-copy > p:not(.eyebrow, .area-statement),
.area-context article > p:not(.eyebrow) {
    color: var(--color-muted);
}

.area-reading-copy p:last-child {
    margin-top: 1rem;
}

.area-opportunity-list {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.area-opportunity-list li {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.area-opportunity-list svg {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 1.2rem;
    margin-top: 0.12rem;
    color: var(--color-blue);
}

.area-opportunity-list span {
    min-width: 0;
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.area-opportunity-list strong {
    display: block;
    margin-bottom: 0.1rem;
    color: var(--color-navy);
    font-size: 0.91rem;
}

.area-statement {
    max-width: 38rem;
    margin-bottom: 1.5rem;
    padding-left: 1.25rem;
    border-left: 3px solid var(--color-blue);
    color: var(--color-navy);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 750;
    line-height: 1.4;
}

.process-observation-card {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-soft);
}

.process-observation-label {
    margin: 0;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-blue);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.process-observation-card li {
    display: grid;
    gap: 0.15rem 1rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.process-observation-card li span {
    color: var(--color-navy);
    font-size: 0.9rem;
    font-weight: 750;
}

.process-observation-card li small {
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.process-observation-principle {
    display: flex;
    margin: 0;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.15rem 1.25rem;
    background: var(--color-blue-soft);
    color: var(--color-text);
    font-size: 0.9rem;
}

.process-observation-principle svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    margin-top: 0.15rem;
    color: var(--color-blue);
}

.process-observation-principle strong {
    color: var(--color-navy);
}

.area-workflows {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.area-workflow-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.area-workflow-grid .content-card {
    display: grid;
    align-content: start;
}

.area-link-grid a {
    position: relative;
    padding-right: 2.4rem;
}

.area-link-grid a::after {
    position: absolute;
    top: 1.55rem;
    right: 1.2rem;
    color: var(--color-blue);
    content: "→";
    font-weight: 850;
}

.area-problem-links {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.area-problem-links a {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 0.25rem 0.8rem;
    padding: 1.25rem 3.25rem 1.25rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    grid-template-columns: auto minmax(0, 1fr);
}

.area-problem-links a:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.area-problem-links a:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.area-problem-links a:hover {
    background: var(--color-blue-soft);
}

.area-problem-links a > span {
    grid-row: 1 / 3;
    color: var(--color-border-strong);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.07em;
}

.area-problem-links strong {
    color: var(--color-navy);
    font-size: 1rem;
}

.area-problem-links small {
    color: var(--color-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.area-problem-links svg {
    position: absolute;
    top: 1.45rem;
    right: 1.25rem;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-blue);
}

.area-reach {
    padding-block: clamp(4.5rem, 8vw, 6.5rem);
    background: #0b1c32;
    color: #c2cedd;
}

.area-reach-grid {
    display: grid;
    align-items: center;
    gap: clamp(3rem, 8vw, 7rem);
    grid-template-columns: minmax(0, 1fr) minmax(26rem, 0.9fr);
}

.area-reach .eyebrow {
    color: #8ab0ff;
}

.area-reach h2 {
    max-width: 15ch;
    color: #ffffff;
}

.area-reach-copy > p:not(.eyebrow) {
    max-width: 40rem;
}

.area-reach-visual {
    position: relative;
    display: grid;
    gap: 1rem;
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid #304660;
    border-radius: var(--radius-panel);
    background-color: #0e223a;
    background-image: radial-gradient(circle at center, rgba(138, 176, 255, 0.08), transparent 68%);
}

.reach-local-node,
.reach-remote-node,
.reach-nationwide {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid #38516d;
    border-radius: var(--radius-small);
    background: #102842;
}

.reach-local-node > span,
.reach-remote-node > span {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 2.65rem;
    place-items: center;
    border-radius: 50%;
    background: #173b63;
    color: #8ab0ff;
}

.reach-local-node > span svg,
.reach-remote-node > span svg {
    width: 1.25rem;
    height: 1.25rem;
}

.reach-local-node strong,
.reach-remote-node strong,
.reach-nationwide strong {
    display: block;
    color: #ffffff;
    font-size: 0.95rem;
}

.reach-local-node small,
.reach-remote-node small,
.reach-nationwide small {
    display: block;
    color: #b7c6d9;
    font-size: 0.76rem;
}

.reach-connection {
    display: flex;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.reach-connection i {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #72d7a1;
}

.reach-nationwide {
    margin-top: 0.25rem;
    border-color: #477e65;
    background: #102d2c;
}

.reach-nationwide > svg {
    width: 1.3rem;
    height: 1.3rem;
    flex: 0 0 1.3rem;
    color: #72d7a1;
}

.area-context-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(21rem, 0.9fr);
}

.area-context article h2 {
    max-width: 18ch;
}

.nearby-area-card {
    position: relative;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.nearby-area-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.25rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.nearby-area-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.nearby-area-card h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.nearby-area-card > p:not(.eyebrow) {
    color: var(--color-muted);
    font-size: 0.94rem;
}

.area-related-inner {
    max-width: 62rem;
}

.area-related .related-pages ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.area-links .deferred-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding-inline: 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 750;
    opacity: 0.72;
}

@media (max-width: 67.99rem) {
    .area-hero-grid,
    .area-practical-grid,
    .area-observation-grid,
    .area-reach-grid,
    .area-context-grid {
        grid-template-columns: 1fr;
    }

    .area-hero-copy,
    .area-reach-copy {
        max-width: 48rem;
    }

    .area-hero-copy h1 {
        max-width: 16ch;
    }

    .area-observation-visual,
    .area-reach-visual {
        width: min(100%, 42rem);
    }

    .area-workflow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    .area-hero {
        padding-top: 2.75rem;
    }

    .area-hero-grid {
        gap: 2.5rem;
    }

    .area-hero-copy h1 {
        font-size: clamp(2.55rem, 11vw, 3.6rem);
    }

    .area-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .area-hero-actions .button,
    .area-hero-actions .text-link {
        width: 100%;
        justify-content: center;
    }

    .observation-workspace {
        grid-template-columns: 1fr;
    }

    .observation-notes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .observation-notes p {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .area-opportunity-list,
    .area-problem-links,
    .area-related .related-pages ul {
        grid-template-columns: 1fr;
    }

    .area-problem-links a,
    .area-problem-links a:nth-child(odd),
    .area-problem-links a:nth-last-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .area-problem-links a:last-child {
        border-bottom: 0;
    }

    .process-observation-card li {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 31rem) {
    .area-hero::before,
    .area-hero::after {
        display: none;
    }

    .observation-window-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .observation-window-header > span:first-of-type {
        order: 2;
    }

    .observation-status {
        order: 3;
        width: 100%;
    }

    .observation-workspace,
    .observed-steps li,
    .process-observation-card li,
    .process-observation-label,
    .process-observation-principle {
        padding-inline: 0.9rem;
    }

    .observation-notes {
        grid-template-columns: 1fr;
    }

    .observation-notes p {
        align-items: flex-start;
        flex-direction: row;
        text-align: left;
    }

    .area-opportunity-list,
    .area-workflow-grid {
        grid-template-columns: 1fr;
    }

    .area-problem-links a {
        padding-left: 1rem;
    }

    .area-reach-visual {
        padding: 1rem;
    }

    .reach-local-node,
    .reach-remote-node,
    .reach-nationwide {
        align-items: flex-start;
        padding: 0.85rem;
    }
}

/* Modesto area-page patterns */

.modesto-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.5rem, 7vw, 6rem);
    border-bottom: 1px solid var(--color-border);
    background-image: linear-gradient(90deg, transparent 0 49.9%, color-mix(in srgb, var(--color-border) 55%, transparent) 50%, transparent 50.1%);
    background-size: 5rem 100%;
}

.modesto-hero::before {
    position: absolute;
    inset: auto -11rem -19rem auto;
    width: 38rem;
    height: 38rem;
    border: 1px solid var(--color-blue);
    border-radius: 50%;
    content: "";
    opacity: 0.09;
}

.modesto-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    align-items: center;
    gap: clamp(3rem, 6vw, 5.5rem);
    grid-template-columns: minmax(0, 0.92fr) minmax(30rem, 1.08fr);
}

.modesto-hero-copy h1 {
    max-width: 14ch;
    font-size: clamp(2.75rem, 5.2vw, 4.55rem);
}

.modesto-hero-lede {
    max-width: 42rem;
    margin-bottom: 1rem;
    color: var(--color-text);
    font-size: clamp(1.12rem, 2vw, 1.3rem);
    font-weight: 650;
    line-height: 1.55;
}

.modesto-hero-copy > p:not(.eyebrow, .modesto-hero-lede, .modesto-proximity) {
    max-width: 39rem;
    color: var(--color-muted);
}

.modesto-proximity {
    display: flex;
    max-width: 40rem;
    margin: 1.25rem 0 0;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.modesto-proximity svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 1.05rem;
    margin-top: 0.16rem;
    color: var(--color-blue);
}

.handoff-visual {
    min-width: 0;
}

.handoff-board {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-soft);
}

.handoff-board-header {
    display: flex;
    min-height: 3.4rem;
    padding: 0.85rem 1rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-navy);
    font-size: 0.76rem;
    font-weight: 800;
}

.handoff-board-header::before {
    width: 2.5rem;
    height: 0.55rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-border-strong) 0 22%, transparent 22% 39%, var(--color-border-strong) 39% 61%, transparent 61% 78%, var(--color-border-strong) 78%);
    content: "";
    opacity: 0.62;
}

.handoff-board-header > span:first-of-type {
    margin-right: auto;
}

.handoff-board-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-warm);
}

.handoff-board-status i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.handoff-systems {
    display: grid;
    align-items: stretch;
    gap: 0;
    padding: 1.15rem;
    grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 0.68fr) minmax(0, 1fr);
}

.handoff-system {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-bg-soft);
}

.handoff-system-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.8rem;
    place-items: center;
    border-radius: var(--radius-small);
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.handoff-system-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.handoff-system > p {
    margin-bottom: 0.3rem;
    color: var(--color-blue);
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.handoff-system-title {
    margin-bottom: 0.85rem;
    font-size: 0.95rem;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.handoff-system ul,
.handoff-manual ol,
.gap-route-list,
.bridge-option-list,
.modesto-workflow-list,
.handoff-review-card ol,
.modesto-problem-grid {
    margin: 0;
    padding: 0;
    list-style: none;
}

.handoff-system ul {
    display: grid;
    gap: 0.42rem;
}

.handoff-system li {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-muted);
    font-size: 0.72rem;
}

.handoff-system li span {
    width: 0.42rem;
    height: 0.42rem;
    flex: 0 0 0.42rem;
    border-radius: 50%;
    background: var(--color-green);
}

.handoff-manual {
    position: relative;
    display: grid;
    align-content: center;
    padding: 0.75rem 0.55rem;
    text-align: center;
}

.handoff-manual > p {
    margin-bottom: 0.55rem;
    color: var(--color-warm);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.handoff-manual ol {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.35rem;
}

.handoff-manual li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.45rem;
    border: 1px solid var(--color-red-border);
    border-radius: 999px;
    background: var(--color-red-soft);
    color: var(--color-red);
    font-size: 0.65rem;
    font-weight: 750;
}

.handoff-manual li svg {
    width: 0.8rem;
    height: 0.8rem;
}

.handoff-manual > span {
    position: absolute;
    right: -0.55rem;
    bottom: 50%;
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface-raised);
    color: var(--color-warm);
    transform: translateY(50%);
}

.handoff-manual > span svg {
    width: 0.95rem;
    height: 0.95rem;
}

.handoff-solution {
    display: flex;
    margin: 0 1.15rem 1.15rem;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-green-soft);
}

.handoff-solution > svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    color: var(--color-green);
}

.handoff-solution span {
    min-width: 0;
    color: var(--color-muted);
    font-size: 0.72rem;
    line-height: 1.4;
}

.handoff-solution strong {
    display: block;
    color: var(--color-navy);
    font-size: 0.82rem;
}

.modesto-gap {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.modesto-gap-grid,
.modesto-nearby-grid,
.modesto-context-grid {
    display: grid;
    align-items: start;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(27rem, 1.1fr);
}

.modesto-gap .section-heading {
    margin-bottom: 1.5rem;
}

.modesto-reading-copy,
.modesto-nearby-copy > p:not(.eyebrow, .modesto-principle),
.modesto-context article > p:not(.eyebrow) {
    color: var(--color-muted);
}

.modesto-reading-copy p:last-child {
    margin-top: 1rem;
}

.gap-route-list {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.gap-route-list li {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.gap-route-list li:last-child {
    border-bottom: 0;
}

.gap-route-list span {
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-bg-soft);
    color: var(--color-navy);
    font-size: 0.8rem;
    font-weight: 750;
    text-align: center;
}

.gap-route-list b {
    display: inline-flex;
    min-width: 5.4rem;
    align-items: center;
    justify-content: center;
    color: var(--color-warm);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gap-route-list b::before,
.gap-route-list b::after {
    width: 0.85rem;
    border-top: 1px dashed currentColor;
    content: "";
}

.gap-route-list b::before {
    margin-right: 0.35rem;
}

.gap-route-list b::after {
    margin-left: 0.35rem;
}

.keep-workflow {
    display: grid;
    align-items: stretch;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.9fr) minmax(0, 1fr);
}

.keep-workflow > article {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.keep-workflow > article > span {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    place-items: center;
    border-radius: var(--radius-small);
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.keep-workflow > article svg {
    width: 1.3rem;
    height: 1.3rem;
}

.keep-workflow > article p {
    margin-bottom: 0.3rem;
    color: var(--color-blue);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.keep-workflow > article strong {
    display: block;
    color: var(--color-navy);
    font-size: 1.05rem;
    line-height: 1.4;
}

.keep-bridge {
    display: grid;
    align-items: center;
    gap: 0.6rem;
    grid-template-columns: minmax(1rem, 1fr) auto minmax(1rem, 1fr);
}

.keep-bridge-line {
    border-top: 2px dashed var(--color-green);
}

.keep-bridge > div {
    display: grid;
    min-width: 9.5rem;
    padding: 1rem;
    place-items: center;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-medium);
    background: var(--color-green-soft);
    text-align: center;
}

.keep-bridge svg {
    width: 1.35rem;
    height: 1.35rem;
    margin-bottom: 0.5rem;
    color: var(--color-green);
}

.keep-bridge strong {
    color: var(--color-navy);
    font-size: 0.82rem;
}

.keep-bridge small {
    margin-top: 0.2rem;
    color: var(--color-muted);
    font-size: 0.68rem;
}

.bridge-option-list {
    display: grid;
    margin-top: 1.25rem;
    gap: 0.75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bridge-option-list li {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-bg-soft);
}

.bridge-option-list li:last-child {
    grid-column: span 2;
}

.bridge-option-list svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 1.1rem;
    margin-top: 0.15rem;
    color: var(--color-blue);
}

.bridge-option-list span {
    min-width: 0;
    color: var(--color-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.bridge-option-list strong {
    display: block;
    margin-bottom: 0.1rem;
    color: var(--color-navy);
    font-size: 0.86rem;
}

.modesto-workflows-layout {
    display: grid;
    align-items: start;
    gap: clamp(2.5rem, 6vw, 5rem);
    grid-template-columns: minmax(18rem, 0.68fr) minmax(0, 1.32fr);
}

.modesto-workflows-heading {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}

.modesto-workflows-heading > p:not(.eyebrow) {
    color: var(--color-muted);
}

.modesto-workflows-heading .text-link {
    margin-top: 1rem;
}

.modesto-workflow-list {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modesto-workflow-list li {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1.1rem;
    border-bottom: 1px solid var(--color-border);
}

.modesto-workflow-list li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.modesto-workflow-list li:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
    border-right: 0;
}

.modesto-workflow-list li > span {
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 2.45rem;
    place-items: center;
    border-radius: var(--radius-small);
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.modesto-workflow-list svg {
    width: 1.15rem;
    height: 1.15rem;
}

.modesto-workflow-list strong {
    display: block;
    color: var(--color-navy);
    font-size: 0.92rem;
    line-height: 1.35;
}

.modesto-workflow-list p {
    margin: 0.2rem 0 0;
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.modesto-nearby-grid {
    align-items: center;
    grid-template-columns: minmax(0, 0.85fr) minmax(27rem, 1.15fr);
}

.modesto-principle {
    max-width: 37rem;
    margin-bottom: 1.4rem;
    padding-left: 1.25rem;
    border-left: 3px solid var(--color-blue);
    color: var(--color-navy);
    font-size: clamp(1.18rem, 2vw, 1.45rem);
    font-weight: 750;
    line-height: 1.4;
}

.handoff-review-card {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-soft);
}

.handoff-review-card > p {
    margin: 0;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-blue);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.handoff-review-card li {
    display: grid;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 2rem minmax(0, 1fr);
}

.handoff-review-card li:last-child {
    border-bottom: 0;
    background: var(--color-green-soft);
}

.handoff-review-card li > span {
    color: var(--color-border-strong);
    font-size: 0.68rem;
    font-weight: 850;
}

.handoff-review-card strong,
.handoff-review-card small {
    display: block;
}

.handoff-review-card strong {
    color: var(--color-navy);
    font-size: 0.88rem;
}

.handoff-review-card small {
    margin-top: 0.1rem;
    color: var(--color-muted);
    font-size: 0.76rem;
}

.modesto-service-grid .content-card {
    align-items: flex-start;
}

.modesto-problem-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.modesto-problem-grid a {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.2rem 2.7rem 1.2rem 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
}

.modesto-problem-grid a:hover {
    border-color: var(--color-blue);
    background: var(--color-blue-soft);
}

.modesto-problem-grid a > svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    margin-top: 0.15rem;
    color: var(--color-blue);
}

.modesto-problem-grid span,
.modesto-problem-grid strong,
.modesto-problem-grid small {
    display: block;
    min-width: 0;
}

.modesto-problem-grid strong {
    color: var(--color-navy);
    font-size: 0.92rem;
    line-height: 1.35;
}

.modesto-problem-grid small {
    margin-top: 0.25rem;
    color: var(--color-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.modesto-problem-grid b {
    position: absolute;
    top: 1.2rem;
    right: 1rem;
    color: var(--color-border-strong);
    font-size: 0.64rem;
    letter-spacing: 0.07em;
}

.modesto-reach {
    padding-block: clamp(4.5rem, 8vw, 6.5rem);
    background: #0b1c32;
    color: #c2cedd;
}

.modesto-reach-grid {
    display: grid;
    align-items: center;
    gap: clamp(3rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(30rem, 1.1fr);
}

.modesto-reach .eyebrow {
    color: #8ab0ff;
}

.modesto-reach h2 {
    max-width: 15ch;
    color: #ffffff;
}

.modesto-reach-copy > p:not(.eyebrow) {
    max-width: 40rem;
}

.modesto-reach-path {
    display: grid;
    align-items: center;
    gap: 0.6rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto minmax(0, 1fr);
}

.modesto-reach-path article {
    min-width: 0;
    min-height: 10.5rem;
    padding: 1.1rem;
    border: 1px solid #38516d;
    border-radius: var(--radius-medium);
    background: #102842;
}

.modesto-reach-path article > span {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1.5rem;
    place-items: center;
    border-radius: 50%;
    background: #173b63;
    color: #8ab0ff;
}

.modesto-reach-path article > span svg {
    width: 1.2rem;
    height: 1.2rem;
}

.modesto-reach-path article p {
    margin-bottom: 0.15rem;
    color: #b7c6d9;
    font-size: 0.7rem;
}

.modesto-reach-path article strong {
    display: block;
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1.35;
}

.modesto-reach-path .reach-path-active {
    border-color: #477e65;
    background: #102d2c;
}

.modesto-reach-path .reach-path-active > span {
    background: #194a39;
    color: #72d7a1;
}

.modesto-reach-path > i {
    color: #72d7a1;
}

.modesto-reach-path > i svg {
    width: 1.15rem;
    height: 1.15rem;
}

.modesto-context-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(21rem, 0.92fr);
}

.modesto-context article h2 {
    max-width: 19ch;
}

.modesto-nearby-area {
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.modesto-nearby-area > span {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.modesto-nearby-area > span svg {
    width: 1.35rem;
    height: 1.35rem;
}

.modesto-nearby-area h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.modesto-nearby-area > p:not(.eyebrow) {
    color: var(--color-muted);
    font-size: 0.94rem;
}

.modesto-nearby-area .text-link {
    margin-top: 0.75rem;
}

@media (max-width: 67.99rem) {
    .modesto-hero-grid,
    .modesto-gap-grid,
    .modesto-nearby-grid,
    .modesto-reach-grid,
    .modesto-context-grid {
        grid-template-columns: 1fr;
    }

    .modesto-hero-copy,
    .modesto-reach-copy {
        max-width: 48rem;
    }

    .handoff-visual,
    .gap-route-list,
    .handoff-review-card,
    .modesto-reach-path {
        width: min(100%, 44rem);
    }

    .bridge-option-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bridge-option-list li:last-child {
        grid-column: auto;
    }

    .modesto-workflows-layout {
        grid-template-columns: 1fr;
    }

    .modesto-workflows-heading {
        position: static;
        max-width: 46rem;
    }

    .modesto-problem-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    .modesto-hero {
        padding-top: 2.75rem;
        background-image: none;
    }

    .modesto-hero-grid {
        gap: 2.5rem;
    }

    .modesto-hero-copy h1 {
        font-size: clamp(2.55rem, 11vw, 3.6rem);
    }

    .handoff-systems {
        gap: 0.65rem;
        grid-template-columns: 1fr;
    }

    .handoff-manual {
        grid-template-columns: 1fr;
    }

    .handoff-manual ol {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .handoff-manual > span {
        position: static;
        margin: 0.5rem auto 0;
        transform: rotate(90deg);
    }

    .keep-workflow {
        grid-template-columns: 1fr;
    }

    .keep-bridge {
        grid-template-columns: 1fr;
    }

    .keep-bridge-line {
        width: 2rem;
        height: 1.5rem;
        margin-inline: auto;
        border-top: 0;
        border-left: 2px dashed var(--color-green);
    }

    .keep-bridge > div {
        justify-self: center;
    }

    .modesto-workflow-list,
    .modesto-problem-grid {
        grid-template-columns: 1fr;
    }

    .modesto-workflow-list li,
    .modesto-workflow-list li:nth-child(odd) {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .modesto-workflow-list li:last-child {
        grid-column: auto;
        border-bottom: 0;
    }

    .modesto-reach-path {
        grid-template-columns: 1fr;
    }

    .modesto-reach-path article {
        min-height: 0;
    }

    .modesto-reach-path > i {
        margin-inline: auto;
        transform: rotate(90deg);
    }
}

@media (max-width: 31rem) {
    .modesto-hero::before {
        display: none;
    }

    .handoff-board-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .handoff-board-header > span:first-of-type {
        order: 2;
    }

    .handoff-board-status {
        order: 3;
        width: 100%;
    }

    .handoff-systems {
        padding: 0.9rem;
    }

    .handoff-solution {
        margin: 0 0.9rem 0.9rem;
        align-items: flex-start;
    }

    .gap-route-list li {
        gap: 0.45rem;
        padding-inline: 0.7rem;
    }

    .gap-route-list span {
        padding-inline: 0.45rem;
        font-size: 0.7rem;
    }

    .gap-route-list b {
        min-width: 3.8rem;
        font-size: 0.57rem;
    }

    .gap-route-list b::before,
    .gap-route-list b::after {
        width: 0.35rem;
    }

    .bridge-option-list {
        grid-template-columns: 1fr;
    }

    .modesto-workflow-list li,
    .handoff-review-card li,
    .modesto-problem-grid a {
        padding-inline: 0.9rem;
    }

    .modesto-problem-grid a {
        padding-right: 2.5rem;
    }
}

/* Merced area-page patterns */

.merced-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.5rem, 7vw, 6rem);
    border-bottom: 1px solid var(--color-border);
    background-image: radial-gradient(circle, color-mix(in srgb, var(--color-blue) 12%, transparent) 1px, transparent 1px);
    background-position: calc(100% - 1rem) 1rem;
    background-size: 2rem 2rem;
}

.merced-hero::before {
    position: absolute;
    inset: 0 0 0 52%;
    background: linear-gradient(135deg, transparent, color-mix(in srgb, var(--color-blue-soft) 72%, transparent));
    content: "";
}

.merced-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    align-items: center;
    gap: clamp(3rem, 6vw, 5.5rem);
    grid-template-columns: minmax(0, 0.92fr) minmax(30rem, 1.08fr);
}

.merced-hero-copy h1 {
    max-width: 14ch;
    font-size: clamp(2.75rem, 5.2vw, 4.55rem);
}

.merced-hero-lede {
    max-width: 42rem;
    margin-bottom: 1rem;
    color: var(--color-text);
    font-size: clamp(1.12rem, 2vw, 1.3rem);
    font-weight: 650;
    line-height: 1.55;
}

.merced-hero-copy > p:not(.eyebrow, .merced-hero-lede, .merced-proximity) {
    max-width: 39rem;
    color: var(--color-muted);
}

.merced-proximity {
    display: flex;
    max-width: 40rem;
    margin: 1.25rem 0 0;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.merced-proximity svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 1.05rem;
    margin-top: 0.16rem;
    color: var(--color-blue);
}

.routine-visual {
    min-width: 0;
}

.routine-board {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-soft);
}

.routine-board-header {
    display: flex;
    min-height: 3.4rem;
    padding: 0.85rem 1rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-navy);
    font-size: 0.76rem;
    font-weight: 800;
}

.routine-board-header::before {
    width: 2.5rem;
    height: 0.55rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-border-strong) 0 22%, transparent 22% 39%, var(--color-border-strong) 39% 61%, transparent 61% 78%, var(--color-border-strong) 78%);
    content: "";
    opacity: 0.62;
}

.routine-board-header > span:first-of-type {
    margin-right: auto;
}

.routine-board-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-warm);
}

.routine-board-status i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.routine-trigger {
    position: relative;
    margin: 1rem 1rem 0;
    padding: 0.9rem 1rem 0.9rem 4.2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-bg-soft);
}

.routine-trigger::before {
    position: absolute;
    top: 50%;
    left: 1rem;
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-blue-soft);
    color: var(--color-blue);
    content: "↻";
    font-size: 1.25rem;
    font-weight: 800;
    transform: translateY(-50%);
}

.routine-trigger span,
.routine-trigger strong,
.routine-trigger small {
    display: block;
}

.routine-trigger span {
    color: var(--color-blue);
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.routine-trigger strong {
    color: var(--color-navy);
    font-size: 0.9rem;
}

.routine-trigger small {
    color: var(--color-muted);
    font-size: 0.7rem;
}

.routine-sequence,
.routine-outcome,
.memory-step-list,
.routine-comparison ol,
.judgment-split ul,
.walkthrough-track,
.merced-problem-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.routine-sequence {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem 1rem 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.routine-sequence li {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    grid-template-columns: auto minmax(0, 1fr);
}

.routine-sequence li > span {
    grid-column: 1 / -1;
    color: var(--color-border-strong);
    font-size: 0.58rem;
    font-weight: 850;
}

.routine-sequence svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-blue);
}

.routine-sequence strong {
    color: var(--color-navy);
    font-size: 0.72rem;
    line-height: 1.2;
}

.routine-outcome {
    display: grid;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid var(--color-green-border);
    background: var(--color-green-soft);
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.routine-outcome > span {
    display: grid;
    min-width: 0;
    gap: 0.1rem 0.55rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.routine-outcome > span > svg {
    width: 1.1rem;
    height: 1.1rem;
    grid-row: 1 / 3;
    color: var(--color-green);
}

.routine-outcome strong,
.routine-outcome small {
    display: block;
}

.routine-outcome strong {
    color: var(--color-navy);
    font-size: 0.74rem;
    line-height: 1.3;
}

.routine-outcome small {
    color: var(--color-muted);
    font-size: 0.65rem;
}

.routine-outcome > i {
    color: var(--color-green);
}

.routine-outcome > i svg {
    width: 1rem;
    height: 1rem;
}

.merced-memory {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.merced-memory-layout,
.merced-walkthrough-grid,
.merced-problems-layout,
.merced-context-grid {
    display: grid;
    align-items: start;
    gap: clamp(2.75rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.85fr) minmax(27rem, 1.15fr);
}

.merced-memory-copy > p:not(.eyebrow, .merced-principle),
.merced-walkthrough-copy > p:not(.eyebrow, .merced-principle),
.merced-problems-copy > p:not(.eyebrow),
.merced-context article > p:not(.eyebrow) {
    color: var(--color-muted);
}

.merced-memory-copy > p:last-child,
.merced-walkthrough-copy > p:last-child,
.merced-context article > p:last-child {
    margin-top: 1rem;
}

.merced-principle {
    max-width: 38rem;
    margin-bottom: 1.35rem;
    padding-left: 1.2rem;
    border-left: 3px solid var(--color-blue);
    color: var(--color-navy);
    font-size: clamp(1.15rem, 2vw, 1.42rem);
    font-weight: 750;
    line-height: 1.4;
}

.memory-step-list {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.memory-step-list li {
    display: grid;
    min-width: 0;
    gap: 0.65rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 1.8rem minmax(0, 1fr);
}

.memory-step-list li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.memory-step-list li:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.memory-step-list li > span {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-blue-soft);
    color: var(--color-blue);
    font-size: 0.6rem;
    font-weight: 850;
}

.memory-step-list strong,
.memory-step-list small {
    display: block;
}

.memory-step-list strong {
    color: var(--color-navy);
    font-size: 0.88rem;
}

.memory-step-list small {
    margin-top: 0.12rem;
    color: var(--color-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.routine-comparison {
    display: grid;
    align-items: stretch;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.routine-before,
.routine-after {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.routine-comparison-label {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--color-border);
}

.routine-comparison-label span,
.routine-comparison-label strong {
    display: block;
}

.routine-comparison-label span {
    margin-bottom: 0.2rem;
    color: var(--color-warm);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.routine-after .routine-comparison-label span {
    color: var(--color-green);
}

.routine-comparison-label strong {
    color: var(--color-navy);
    font-size: 1rem;
}

.routine-before ol {
    display: grid;
    gap: 0.55rem;
    padding: 1.15rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.routine-before li {
    position: relative;
    padding: 0.75rem 0.35rem;
    border: 1px solid var(--color-red-border);
    border-radius: var(--radius-small);
    background: var(--color-red-soft);
    color: var(--color-red);
    font-size: 0.7rem;
    font-weight: 750;
    text-align: center;
}

.routine-before li:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -0.48rem;
    z-index: 1;
    content: "›";
    font-size: 1rem;
    transform: translateY(-52%);
}

.routine-shift {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.35rem;
    color: var(--color-green);
}

.routine-shift svg {
    width: 1.3rem;
    height: 1.3rem;
}

.routine-shift span {
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

.routine-after ol {
    display: grid;
    gap: 0.65rem;
    padding: 1.15rem;
}

.routine-after li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-small);
    background: var(--color-green-soft);
}

.routine-after li > svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 1.1rem;
    margin-top: 0.15rem;
    color: var(--color-green);
}

.routine-after strong,
.routine-after small {
    display: block;
}

.routine-after strong {
    color: var(--color-navy);
    font-size: 0.84rem;
}

.routine-after small {
    color: var(--color-muted);
    font-size: 0.72rem;
}

.judgment-split {
    display: grid;
    align-items: stretch;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.judgment-routine,
.judgment-human {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.judgment-label {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-blue);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.judgment-human .judgment-label {
    color: var(--color-green);
}

.judgment-label svg {
    width: 1.15rem;
    height: 1.15rem;
}

.judgment-split ul {
    display: grid;
    gap: 0.7rem;
    padding: 1.2rem;
}

.judgment-split li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: var(--color-text);
    font-size: 0.88rem;
}

.judgment-split li svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    margin-top: 0.22rem;
    color: var(--color-green);
}

.judgment-divider {
    display: grid;
    place-items: center;
}

.judgment-divider span {
    padding: 0.55rem 0.4rem;
    border: 1px dashed var(--color-border-strong);
    border-radius: 999px;
    color: var(--color-muted);
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

.judgment-statement {
    max-width: 58rem;
    margin: 1.25rem auto 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-medium);
    background: var(--color-green-soft);
    color: var(--color-navy);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 750;
    text-align: center;
}

.recurring-workflow-grid {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recurring-workflow-grid article {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 0.8rem;
    padding: 1.2rem 7.5rem 1.2rem 1.2rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: auto minmax(0, 1fr);
}

.recurring-workflow-grid article:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.recurring-workflow-grid article:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.recurring-workflow-grid article > span {
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border-radius: var(--radius-small);
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.recurring-workflow-grid article > span svg {
    width: 1.15rem;
    height: 1.15rem;
}

.recurring-workflow-grid strong {
    display: block;
    color: var(--color-navy);
    font-size: 0.92rem;
}

.recurring-workflow-grid p {
    margin: 0.2rem 0 0;
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.recurring-workflow-grid article > small {
    position: absolute;
    top: 1.25rem;
    right: 1.2rem;
    color: var(--color-blue);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.merced-walkthrough-grid {
    align-items: center;
}

.walkthrough-track {
    position: relative;
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.walkthrough-track li {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 0.7rem;
    padding: 1.05rem;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 2rem minmax(0, 1fr);
}

.walkthrough-track li:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.walkthrough-track li:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.walkthrough-track li:last-child {
    background: var(--color-green-soft);
}

.walkthrough-track li > span {
    color: var(--color-border-strong);
    font-size: 0.67rem;
    font-weight: 850;
}

.walkthrough-track strong,
.walkthrough-track small {
    display: block;
}

.walkthrough-track strong {
    color: var(--color-navy);
    font-size: 0.88rem;
}

.walkthrough-track small {
    margin-top: 0.12rem;
    color: var(--color-muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

.merced-service-grid .content-card {
    align-items: flex-start;
}

.merced-problems-layout {
    grid-template-columns: minmax(18rem, 0.7fr) minmax(0, 1.3fr);
}

.merced-problems-copy {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}

.merced-problem-list {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.merced-problem-list a {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 0.15rem 0.75rem;
    padding: 1rem 2.8rem 1rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    grid-template-columns: auto minmax(0, 1fr);
}

.merced-problem-list a:hover {
    border-color: var(--color-blue);
    background: var(--color-blue-soft);
}

.merced-problem-list a > span {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    grid-row: 1 / 3;
    place-items: center;
    border-radius: var(--radius-small);
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.merced-problem-list a > span svg {
    width: 1.05rem;
    height: 1.05rem;
}

.merced-problem-list strong,
.merced-problem-list small {
    display: block;
}

.merced-problem-list strong {
    color: var(--color-navy);
    font-size: 0.88rem;
}

.merced-problem-list small {
    color: var(--color-muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

.merced-problem-list b {
    position: absolute;
    top: 1.25rem;
    right: 1rem;
    color: var(--color-blue);
}

.merced-reach {
    padding-block: clamp(4.5rem, 8vw, 6.5rem);
    background: #0b1c32;
    color: #c2cedd;
}

.merced-reach-grid {
    display: grid;
    align-items: center;
    gap: clamp(3rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(29rem, 1.1fr);
}

.merced-reach .eyebrow {
    color: #8ab0ff;
}

.merced-reach h2 {
    max-width: 15ch;
    color: #ffffff;
}

.merced-reach-copy > p:not(.eyebrow) {
    max-width: 40rem;
}

.merced-reach-visual {
    display: grid;
    gap: 0.8rem;
    padding: clamp(1.15rem, 3vw, 1.75rem);
    border: 1px solid #304660;
    border-radius: var(--radius-panel);
    background: #0e223a;
}

.reach-mode {
    display: grid;
    min-width: 0;
    gap: 0.15rem 0.85rem;
    padding: 1.1rem;
    border: 1px solid #38516d;
    border-radius: var(--radius-medium);
    background: #102842;
    grid-template-columns: auto minmax(0, 1fr);
}

.reach-mode > span {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    grid-row: 1 / 4;
    place-items: center;
    border-radius: 50%;
    background: #173b63;
    color: #8ab0ff;
}

.reach-mode > span svg {
    width: 1.2rem;
    height: 1.2rem;
}

.reach-mode p,
.reach-mode strong,
.reach-mode small {
    display: block;
    margin: 0;
}

.reach-mode p {
    color: #8ab0ff;
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.reach-mode strong {
    color: #ffffff;
    font-size: 0.94rem;
}

.reach-mode small {
    color: #b7c6d9;
    font-size: 0.75rem;
}

.reach-mode-remote {
    border-color: #477e65;
    background: #102d2c;
}

.reach-mode-remote > span {
    background: #194a39;
    color: #72d7a1;
}

.reach-mode-remote p {
    color: #72d7a1;
}

.reach-mode-connector {
    display: grid;
    align-items: center;
    gap: 0.7rem;
    padding-inline: 1.2rem;
    color: #91a7c0;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
    grid-template-columns: minmax(1rem, 1fr) auto minmax(1rem, 1fr);
}

.reach-mode-connector i {
    border-top: 1px dashed #477e65;
}

.merced-context-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(21rem, 0.92fr);
}

.merced-context article h2 {
    max-width: 19ch;
}

.merced-nearby-card {
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.merced-nearby-card > span {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-blue-soft);
    color: var(--color-blue);
}

.merced-nearby-card > span svg {
    width: 1.35rem;
    height: 1.35rem;
}

.merced-nearby-card h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.merced-nearby-card > p:not(.eyebrow) {
    color: var(--color-muted);
    font-size: 0.94rem;
}

.merced-area-links,
.area-sibling-links {
    display: flex;
    margin-top: 1rem;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.merced-area-links a,
.area-sibling-links a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.55rem;
    padding-inline: 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-bg-soft);
    color: var(--color-blue);
    font-size: 0.84rem;
    font-weight: 800;
}

.merced-area-links a:hover,
.area-sibling-links a:hover {
    border-color: var(--color-blue);
    background: var(--color-blue-soft);
}

.merced-area-links svg,
.area-sibling-links svg {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 67.99rem) {
    .merced-hero-grid,
    .merced-memory-layout,
    .merced-walkthrough-grid,
    .merced-problems-layout,
    .merced-reach-grid,
    .merced-context-grid {
        grid-template-columns: 1fr;
    }

    .merced-hero-copy,
    .merced-memory-copy,
    .merced-walkthrough-copy,
    .merced-problems-copy,
    .merced-reach-copy {
        max-width: 48rem;
    }

    .routine-visual,
    .memory-step-list,
    .walkthrough-track,
    .merced-problem-list,
    .merced-reach-visual {
        width: min(100%, 46rem);
    }

    .merced-problems-copy {
        position: static;
    }
}

@media (max-width: 48rem) {
    .merced-hero {
        padding-top: 2.75rem;
        background-size: 1.5rem 1.5rem;
    }

    .merced-hero::before {
        inset: 45% 0 0;
    }

    .merced-hero-grid {
        gap: 2.5rem;
    }

    .merced-hero-copy h1 {
        font-size: clamp(2.55rem, 11vw, 3.6rem);
    }

    .routine-comparison,
    .judgment-split {
        grid-template-columns: 1fr;
    }

    .routine-shift {
        padding-block: 0.15rem;
    }

    .routine-shift svg {
        transform: rotate(90deg);
    }

    .routine-shift span,
    .judgment-divider span {
        writing-mode: horizontal-tb;
    }

    .judgment-divider span {
        padding: 0.4rem 0.65rem;
    }

    .recurring-workflow-grid,
    .merced-problem-list {
        grid-template-columns: 1fr;
    }

    .recurring-workflow-grid article,
    .recurring-workflow-grid article:nth-child(odd),
    .recurring-workflow-grid article:nth-last-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .recurring-workflow-grid article:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 31rem) {
    .merced-hero {
        background-image: none;
    }

    .merced-hero::before {
        display: none;
    }

    .routine-board-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .routine-board-header > span:first-of-type {
        order: 2;
    }

    .routine-board-status {
        order: 3;
        width: 100%;
    }

    .routine-sequence {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .routine-outcome {
        grid-template-columns: 1fr;
    }

    .routine-outcome > i {
        margin-inline: auto;
        transform: rotate(90deg);
    }

    .memory-step-list,
    .walkthrough-track {
        grid-template-columns: 1fr;
    }

    .memory-step-list li,
    .memory-step-list li:nth-child(odd),
    .memory-step-list li:nth-last-child(2),
    .walkthrough-track li,
    .walkthrough-track li:nth-child(odd),
    .walkthrough-track li:nth-last-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .memory-step-list li:last-child,
    .walkthrough-track li:last-child {
        border-bottom: 0;
    }

    .routine-before ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .routine-before li:nth-child(2n)::after {
        display: none;
    }

    .recurring-workflow-grid article {
        padding: 1rem;
    }

    .recurring-workflow-grid article > small {
        position: static;
        grid-column: 2;
        margin-top: 0.2rem;
    }

    .merced-area-links {
        align-items: stretch;
        flex-direction: column;
    }

    .merced-area-links a {
        justify-content: space-between;
    }
}

/* About page */
.about-page {
    --color-heading: var(--color-navy);
    --color-text-muted: var(--color-muted);
    --color-primary: var(--color-blue);
    --color-success: var(--color-green);
    --color-success-text: var(--color-green);
    --color-surface-soft: var(--color-bg-soft);
    --color-accent: var(--color-green);
    --shadow-card: var(--shadow-soft);
}

.about-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4.25rem, 8vw, 7.75rem) 0 clamp(4.75rem, 8vw, 7rem);
    background:
        radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--color-accent) 12%, transparent) 0, transparent 28rem),
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface-soft) 72%, transparent), transparent 88%);
}

.about-hero::before {
    position: absolute;
    inset: 0 0 auto 50%;
    height: 100%;
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-border) 52%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-border) 52%, transparent) 1px, transparent 1px);
    background-size: 2.25rem 2.25rem;
    mask-image: linear-gradient(90deg, transparent, black 30%, transparent 92%);
    content: "";
    opacity: 0.42;
    pointer-events: none;
}

.about-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(30rem, 1.04fr);
    gap: clamp(3rem, 7vw, 6.5rem);
    align-items: center;
}

.about-hero-copy {
    max-width: 43rem;
}

.about-hero-copy h1 {
    max-width: 13ch;
    margin: 0.8rem 0 1.35rem;
    font-size: clamp(3rem, 5.4vw, 5.6rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.about-hero-lede {
    max-width: 40rem;
    margin-bottom: 1rem;
    color: var(--color-heading);
    font-size: clamp(1.1rem, 1.4vw, 1.28rem);
    line-height: 1.65;
}

.about-hero-copy > p:not(.eyebrow, .about-hero-lede) {
    max-width: 39rem;
    color: var(--color-text-muted);
}

.about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.4rem;
    align-items: center;
    margin-top: 2rem;
}

.about-hero-actions .text-link {
    white-space: nowrap;
}

.process-context-window {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: 1.25rem;
    background: var(--color-surface);
    box-shadow: 0 2rem 5rem color-mix(in srgb, var(--color-heading) 13%, transparent);
}

.process-context-window::after {
    position: absolute;
    right: -2rem;
    bottom: -3rem;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    content: "";
    filter: blur(1rem);
    pointer-events: none;
}

.process-context-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-soft);
    color: var(--color-heading);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.process-context-status {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    color: var(--color-success-text);
    font-size: 0.66rem;
}

.process-context-status i {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--color-success) 15%, transparent);
}

.process-context-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: stretch;
    padding: clamp(1rem, 3vw, 1.5rem);
}

.process-context-columns article {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--color-surface-soft) 70%, var(--color-surface));
}

.process-context-columns article > p {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0 0 0.8rem;
    color: var(--color-heading);
    font-size: 0.79rem;
    font-weight: 800;
}

.process-context-columns article > p svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-primary);
}

.process-context-columns ul,
.solution-tool-panel ul,
.automation-boundary ul,
.positioning-compare ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.process-context-columns li {
    display: grid;
    gap: 0.08rem;
    padding: 0.62rem 0;
    border-top: 1px solid var(--color-border);
}

.process-context-columns li span {
    color: var(--color-heading);
    font-size: 0.76rem;
    font-weight: 750;
}

.process-context-columns li small,
.process-context-result small {
    color: var(--color-text-muted);
    font-size: 0.68rem;
}

.process-context-link {
    display: grid;
    align-self: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    place-items: center;
    background: var(--color-surface);
    color: var(--color-primary);
}

.process-context-link svg {
    width: 0.9rem;
    height: 0.9rem;
}

.process-context-result {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    margin: 0 1.5rem 1.5rem;
    padding: 0.9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-success) 32%, var(--color-border));
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface));
}

.process-context-result > svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-success);
}

.process-context-result span {
    display: grid;
    gap: 0.08rem;
}

.process-context-result strong {
    color: var(--color-heading);
    font-size: 0.8rem;
}

.about-experience-grid,
.about-reality-grid,
.about-keep-grid,
.about-reach-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(28rem, 1.14fr);
    gap: clamp(3rem, 7vw, 7rem);
    /* start, not center: these columns are rarely the same height, and centering
       a short column against a tall one banks the leftover space as a gap at the
       top AND bottom. Sharing a top edge reads as intentional at any length. */
    align-items: start;
}

.about-experience-copy,
.about-reality-copy,
.about-keep-copy,
.about-reach-copy {
    max-width: 39rem;
}

.about-experience-copy h2,
.about-reality-copy h2,
.about-keep-copy h2,
.about-reach-copy h2,
.about-positioning-heading h2 {
    margin: 0.65rem 0 1.2rem;
}

.about-principle {
    padding-left: 1rem;
    border-left: 3px solid var(--color-primary);
    color: var(--color-heading);
    font-size: clamp(1.08rem, 1.6vw, 1.32rem);
    font-weight: 750;
    line-height: 1.45;
}

.experience-column {
    display: grid;
    gap: clamp(1.4rem, 2.4vw, 2.1rem);
    align-content: center;
}

.experience-note {
    margin: 0;
}

.experience-convergence {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:
        "technical plus operations"
        "arrow arrow arrow"
        "result result result";
    gap: 0.75rem;
    align-items: center;
}

.experience-convergence article {
    padding: 1.3rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.experience-convergence article:first-child { grid-area: technical; }
.experience-convergence article:nth-of-type(2) { grid-area: operations; }
.experience-convergence .experience-result { grid-area: result; }

.experience-convergence article > span,
.about-reach-modes article > span {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.85rem;
    border-radius: 0.72rem;
    place-items: center;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    color: var(--color-primary);
}

.experience-convergence article > span svg,
.about-reach-modes article > span svg {
    width: 1.15rem;
    height: 1.15rem;
}

.experience-convergence article p {
    margin: 0 0 0.35rem;
    color: var(--color-heading);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.experience-convergence article strong {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

.experience-plus {
    grid-area: plus;
    color: var(--color-primary);
    font-size: 1.35rem;
    font-weight: 800;
}

.experience-equals {
    grid-area: arrow;
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    margin-inline: auto;
    border-radius: 50%;
    place-items: center;
    background: var(--color-primary);
    color: #fff;
    transform: rotate(90deg);
}

.experience-equals svg {
    width: 1rem;
    height: 1rem;
}

.experience-convergence .experience-result {
    border-color: color-mix(in srgb, var(--color-success) 32%, var(--color-border));
    background: color-mix(in srgb, var(--color-success) 7%, var(--color-surface));
}

.experience-convergence .experience-result > span {
    background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface));
    color: var(--color-success-text);
}

.workflow-reality-card {
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: 1.1rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.workflow-reality-ideal,
.workflow-reality-actual {
    padding: clamp(1.1rem, 3vw, 1.6rem);
}

.workflow-reality-ideal > p,
.workflow-reality-actual > p {
    margin: 0 0 0.8rem;
    color: var(--color-heading);
    font-size: 0.77rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.workflow-reality-ideal ol,
.workflow-reality-actual ol,
.solution-choice-flow {
    margin: 0;
    padding: 0;
    list-style: none;
}

.workflow-reality-ideal ol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.workflow-reality-ideal li {
    position: relative;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    color: var(--color-heading);
    text-align: center;
    font-size: 0.78rem;
    font-weight: 750;
}

.workflow-reality-ideal li:not(:last-child)::after {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: -0.35rem;
    width: 0.6rem;
    height: 0.6rem;
    border-top: 2px solid var(--color-primary);
    border-right: 2px solid var(--color-primary);
    background: var(--color-surface);
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

.workflow-reality-divider {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding-inline: 1.6rem;
    color: var(--color-primary);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.workflow-reality-divider::before,
.workflow-reality-divider::after {
    height: 1px;
    background: var(--color-border);
    content: "";
    flex: 1;
}

.workflow-reality-actual ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
}

.workflow-reality-actual li {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 0.28rem 0.6rem;
    align-items: center;
    padding: 0.8rem;
    border-bottom: 1px solid var(--color-border);
}

.workflow-reality-actual li:nth-child(odd) { border-right: 1px solid var(--color-border); }
.workflow-reality-actual li:nth-last-child(-n + 2) { border-bottom: 0; }
.workflow-reality-actual li > span { color: var(--color-primary); font-size: 0.63rem; font-weight: 800; }
.workflow-reality-actual li > svg { width: 1rem; height: 1rem; color: var(--color-text-muted); }
.workflow-reality-actual li > strong { color: var(--color-heading); font-size: 0.78rem; }
.workflow-reality-actual li > small { grid-column: 2 / -1; color: var(--color-text-muted); font-size: 0.68rem; }

.solution-choice-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: stretch;
    margin-top: 3rem;
}

.solution-choice-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface);
}

.solution-choice-flow li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.solution-choice-flow li:nth-child(odd) { border-right: 1px solid var(--color-border); }
.solution-choice-flow li:nth-last-child(-n + 2) { border-bottom: 0; }
.solution-choice-flow li > span { color: var(--color-primary); font-size: 0.7rem; font-weight: 850; }
.solution-choice-flow li div { display: grid; gap: 0.28rem; }
.solution-choice-flow strong { color: var(--color-heading); font-size: 0.9rem; }
.solution-choice-flow small { color: var(--color-text-muted); line-height: 1.45; }

.solution-tool-panel {
    padding: 1.4rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 1rem;
    background: var(--color-heading);
    color: #fff;
}

.solution-tool-panel > p {
    margin: 0 0 0.9rem;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.solution-tool-panel ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.solution-tool-panel li {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
    padding: 0.64rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 0.58rem;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.72rem;
    line-height: 1.3;
}

.solution-tool-panel li svg { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; color: var(--color-success); }

.about-keep-grid {
    grid-template-columns: minmax(28rem, 1.1fr) minmax(0, 0.9fr);
}

.keep-system-visual {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(7rem, auto) minmax(0, 1fr);
    align-items: center;
}

.keep-system-visual > article {
    min-height: 14rem;
    padding: 1.4rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.keep-system-visual > article > span {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 2.4rem;
    border-radius: 0.75rem;
    place-items: center;
    background: var(--color-surface-soft);
    color: var(--color-primary);
}

.keep-system-visual > article svg { width: 1.15rem; height: 1.15rem; }
.keep-system-visual > article p { margin: 0 0 0.35rem; color: var(--color-text-muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.keep-system-visual > article strong { color: var(--color-heading); font-size: 0.93rem; line-height: 1.5; }

.keep-fix {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-inline: -0.75rem;
}

.keep-fix > i { height: 2px; background: var(--color-success); }
.keep-fix > span { display: grid; justify-items: center; min-width: 7.7rem; padding: 0.85rem 0.7rem; border: 1px solid color-mix(in srgb, var(--color-success) 38%, var(--color-border)); border-radius: 0.8rem; background: color-mix(in srgb, var(--color-success) 9%, var(--color-surface)); text-align: center; }
.keep-fix svg { width: 1.05rem; height: 1.05rem; margin-bottom: 0.35rem; color: var(--color-success-text); }
.keep-fix strong { color: var(--color-heading); font-size: 0.75rem; }
.keep-fix small { color: var(--color-text-muted); font-size: 0.62rem; }

.automation-boundary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    margin-top: 3rem;
}

.automation-boundary article {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface);
}

.automation-boundary article > p {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin: 0;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-heading);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.automation-boundary article > p svg { width: 1rem; height: 1rem; }
.boundary-repeatable article > p svg,
.boundary-repeatable > p svg { color: var(--color-success-text); }

.automation-boundary ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.automation-boundary li {
    display: grid;
    gap: 0.2rem;
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid var(--color-border);
}

.automation-boundary li:nth-child(odd) { border-right: 1px solid var(--color-border); }
.automation-boundary li:nth-last-child(-n + 2) { border-bottom: 0; }
.automation-boundary li span { color: var(--color-heading); font-size: 0.8rem; font-weight: 750; }
.automation-boundary li small { color: var(--color-text-muted); font-size: 0.68rem; line-height: 1.45; }

.boundary-handoff {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.boundary-handoff span { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; writing-mode: vertical-rl; }
.boundary-handoff svg { width: 1.15rem; height: 1.15rem; }

.about-positioning {
    padding: clamp(4.5rem, 8vw, 7rem) 0;
    background: var(--color-heading);
    color: rgba(255, 255, 255, 0.76);
}

.about-positioning .eyebrow { color: var(--color-success); }
.about-positioning-heading { max-width: 49rem; margin-bottom: 2.5rem; }
.about-positioning-heading h2 { color: #fff; }
.about-positioning-heading > p:last-child { color: rgba(255, 255, 255, 0.7); }

.positioning-compare {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 1rem;
}

.positioning-compare article {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.055);
}

.positioning-compare article > p {
    margin: 0 0 1rem;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.positioning-compare li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    padding: 0.7rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.77);
    font-size: 0.88rem;
}

.positioning-is li svg { width: 1rem; height: 1rem; margin-top: 0.15rem; color: var(--color-success); }
.positioning-not li::before { color: rgba(255, 255, 255, 0.35); content: "—"; }

.about-reach {
    position: relative;
    overflow: hidden;
    padding: clamp(4.5rem, 8vw, 7rem) 0;
    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}

.about-area-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.6rem;
}

.about-area-links a {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    background: var(--color-surface);
    color: var(--color-heading);
    font-size: 0.78rem;
    font-weight: 750;
    text-decoration: none;
}

.about-area-links a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.about-area-links svg { width: 0.8rem; height: 0.8rem; }

.about-reach-modes {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.about-reach-modes article {
    min-height: 16rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.about-reach-modes article > p { margin: 2rem 0 0.4rem; color: var(--color-primary); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.about-reach-modes article > strong { display: block; color: var(--color-heading); font-size: 0.94rem; line-height: 1.45; }
.about-reach-modes article > small { display: block; margin-top: 0.6rem; color: var(--color-text-muted); line-height: 1.45; }
.about-reach-modes > i { position: relative; z-index: 1; display: grid; width: 2.5rem; height: 2.5rem; margin-inline: -0.3rem; border: 1px solid var(--color-border-strong); border-radius: 50%; place-items: center; background: var(--color-surface); color: var(--color-primary); }
.about-reach-modes > i svg { width: 1rem; height: 1rem; }
.about-reach-remote { transform: translateY(1.25rem); }

@media (max-width: 67.99rem) {
    .about-hero-grid,
    .about-experience-grid,
    .about-reality-grid,
    .about-keep-grid,
    .about-reach-grid {
        grid-template-columns: 1fr;
    }

    .about-hero-copy,
    .about-experience-copy,
    .about-reality-copy,
    .about-keep-copy,
    .about-reach-copy {
        max-width: 48rem;
    }

    .about-hero-visual,
    .experience-convergence,
    .workflow-reality-card,
    .keep-system-visual,
    .about-reach-modes {
        width: min(100%, 48rem);
    }

    .about-keep-copy { order: -1; }
}

@media (max-width: 48rem) {
    .about-hero {
        padding-top: 2.75rem;
    }

    .about-hero::before {
        inset-inline-start: 25%;
    }

    .about-hero-copy h1 {
        font-size: clamp(2.6rem, 11vw, 3.7rem);
    }

    .process-context-columns,
    .solution-choice-layout,
    .automation-boundary,
    .positioning-compare {
        grid-template-columns: 1fr;
    }

    .process-context-link {
        margin-inline: auto;
        transform: rotate(90deg);
    }

    .solution-choice-flow,
    .workflow-reality-actual ol,
    .automation-boundary ul {
        grid-template-columns: 1fr;
    }

    .solution-choice-flow li,
    .solution-choice-flow li:nth-child(odd),
    .workflow-reality-actual li,
    .workflow-reality-actual li:nth-child(odd),
    .automation-boundary li,
    .automation-boundary li:nth-child(odd),
    .automation-boundary li:nth-last-child(-n + 2) {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .solution-choice-flow li:last-child,
    .workflow-reality-actual li:last-child,
    .automation-boundary li:last-child {
        border-bottom: 0;
    }

    .boundary-handoff {
        flex-direction: row;
        padding-block: 0.4rem;
    }

    .boundary-handoff span { writing-mode: horizontal-tb; }
    .boundary-handoff svg { transform: rotate(90deg); }
}

@media (max-width: 31rem) {
    .about-hero::before { display: none; }

    .about-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .about-hero-actions .button { width: 100%; }

    .process-context-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .process-context-result {
        margin: 0 1rem 1rem;
    }

    .experience-convergence {
        grid-template-columns: 1fr;
        grid-template-areas:
            "technical"
            "plus"
            "operations"
            "arrow"
            "result";
    }

    .experience-plus { margin-inline: auto; }

    .solution-tool-panel ul,
    .workflow-reality-ideal ol {
        grid-template-columns: 1fr;
    }

    .workflow-reality-ideal li:not(:last-child)::after { display: none; }

    .keep-system-visual {
        grid-template-columns: 1fr;
    }

    .keep-system-visual > article { min-height: 0; }
    .keep-system-visual > article > span { margin-bottom: 1rem; }

    .keep-fix {
        grid-template-columns: 1fr;
        margin: -0.5rem 1.5rem;
    }

    .keep-fix > i { width: 2px; height: 1.3rem; margin-inline: auto; }

    .about-reach-modes {
        grid-template-columns: 1fr;
    }

    .about-reach-modes article { min-height: 0; }
    .about-reach-modes > i { margin: -0.3rem auto; transform: rotate(90deg); }
    .about-reach-remote { transform: none; }

    .about-area-links {
        align-items: stretch;
        flex-direction: column;
    }

    .about-area-links a { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Privacy policy and analytics consent */

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.footer-legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.footer-legal a,
.footer-legal button {
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #b8c5d5;
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.footer-legal a {
    display: inline-flex;
    align-items: center;
}

.footer-legal a:hover,
.footer-legal button:hover {
    color: #ffffff;
}

.analytics-consent[hidden],
.analytics-consent [hidden] {
    display: none !important;
}

.analytics-consent {
    position: fixed;
    z-index: 120;
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    left: max(0.75rem, env(safe-area-inset-left));
    width: min(calc(100% - 1.5rem), 72rem);
    max-height: calc(100dvh - 1.5rem);
    margin-inline: auto;
    overflow: auto;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-large);
    background: var(--color-surface-raised);
    box-shadow: 0 1.5rem 4rem rgba(7, 19, 34, 0.28);
}

.analytics-consent-panel {
    display: grid;
    align-items: center;
    gap: 1.25rem 2rem;
    padding: 1.25rem 1.4rem;
    grid-template-columns: minmax(0, 1fr) auto;
    outline: 0;
}

.analytics-consent-copy .eyebrow {
    margin-bottom: 0.25rem;
}

.analytics-consent-copy h2 {
    margin-bottom: 0.35rem;
    font-size: 1.35rem;
}

.analytics-consent-copy > p:not(.eyebrow) {
    max-width: 50rem;
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.analytics-consent-copy .analytics-consent-status:not(:empty) {
    margin-top: 0.45rem;
    color: var(--color-text);
    font-weight: 700;
}

.analytics-consent-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.analytics-consent-choice {
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--color-blue);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-navy);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.analytics-consent-choice:hover:not(:disabled) {
    background: var(--color-blue-soft);
}

.analytics-consent-choice:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.analytics-consent-actions a,
.analytics-consent-close {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border: 0;
    background: transparent;
    color: var(--color-blue);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
}

.privacy-content {
    padding-top: clamp(3rem, 6vw, 5rem);
}

.privacy-layout {
    display: grid;
    align-items: start;
    gap: clamp(2rem, 5vw, 4.5rem);
    grid-template-columns: minmax(13rem, 17rem) minmax(0, 47rem);
    justify-content: center;
}

.privacy-summary {
    position: sticky;
    top: calc(var(--header-height) + 1.5rem);
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-bg-soft);
}

.privacy-summary h2 {
    margin-bottom: 0.85rem;
    font-size: 1.15rem;
}

.privacy-summary ul {
    display: grid;
    gap: 0.75rem;
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.privacy-summary li {
    position: relative;
    padding-left: 1rem;
}

.privacy-summary li::before {
    position: absolute;
    top: 0.62rem;
    left: 0;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--color-green);
    content: "";
}

.privacy-policy > section {
    padding-block: 0 2.25rem;
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.privacy-policy > section + section {
    padding-top: 2.25rem;
    border-top: 1px solid var(--color-border);
}

.privacy-policy h2 {
    margin-bottom: 1rem;
    font-size: clamp(1.65rem, 3vw, 2.1rem);
}

.privacy-policy p,
.privacy-policy ul {
    max-width: 46rem;
}

.privacy-policy ul {
    display: grid;
    margin-bottom: 1.25rem;
    gap: 0.55rem;
}

.privacy-policy li {
    position: relative;
    padding-left: 1.35rem;
}

.privacy-policy li::before {
    position: absolute;
    top: 0.72rem;
    left: 0;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-blue);
    content: "";
}

.privacy-policy code {
    padding: 0.12rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: 0.3rem;
    background: var(--color-bg-soft);
    color: var(--color-text);
    font-size: 0.88em;
    overflow-wrap: anywhere;
}

@media (max-width: 67.99rem) {
    .analytics-consent-panel {
        grid-template-columns: 1fr;
    }

    .analytics-consent-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 48rem) {
    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .privacy-layout {
        grid-template-columns: 1fr;
    }

    .privacy-summary {
        position: static;
    }
}

@media (max-width: 31rem) {
    .analytics-consent-panel {
        padding: 1rem;
    }

    .analytics-consent-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .analytics-consent-choice {
        width: 100%;
    }

    .analytics-consent-actions a,
    .analytics-consent-close {
        justify-content: center;
    }

    .privacy-summary,
    .privacy-policy {
        min-width: 0;
    }
}

/* FAQ page */
.faq-list-inner {
    max-width: var(--reading);
    margin-inline: auto;
}

.faq-item {
    padding-block: 1.75rem;
    border-top: 1px solid var(--color-border);
}

.faq-item:first-child {
    padding-top: 0;
    border-top: none;
}

.faq-item h2 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.2rem, 2.4vw, 1.45rem);
}

.faq-item p {
    max-width: none;
    color: var(--color-muted);
}

.faq-item p + p {
    margin-top: 0.6rem;
}

.faq-item a {
    color: var(--color-blue);
    font-weight: 700;
}

@media (max-width: 31rem) {
    .faq-item {
        padding-block: 1.35rem;
    }
}