:root {
  color-scheme: light;
  --ink: #183c4a;
  --body: #526974;
  --teal: #176b6c;
  --line: #d8e4e7;
  --wash: #eff5f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fbfdfd;
  color: var(--ink);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
* {box-sizing: border-box;}
body {margin: 0;}
a {color: var(--teal);text-underline-offset: 4px;}
a:focus-visible {outline: 3px solid #4e9699;outline-offset: 5px;border-radius: 3px;}
.page-shell {width: min(1100px, calc(100% - 64px));margin: 0 auto;}
.skip-link {position: absolute;left: 24px;top: -90px;padding: 12px 18px;z-index: 2;background: #fff;}
.skip-link:focus {top: 16px;}
.site-header {display: flex;align-items: center;justify-content: space-between;gap: 32px;padding: 16px 0 22px;}
.brand {display: inline-flex;flex-shrink: 0;}
.brand img {display: block;width: 205px;height: auto;}
.site-header nav {display: flex;align-items: center;gap: 28px;}
.site-header nav a {display: inline-flex;align-items: center;gap: 10px;min-height: 44px;font-size: .86rem;font-weight: 650;text-decoration: none;}
.site-header nav a:hover,.site-footer a:hover {text-decoration: underline;}
.site-header .nav-demo {padding: 10px 15px;border: 1px solid #b8d2d5;border-radius: 6px;}
.page-intro {display: grid;grid-template-columns: 1.1fr 1fr;gap: 68px;align-items: end;padding: 32px 0 51px;}
.eyebrow {margin: 0 0 14px;color: var(--teal);font-size: .69rem;font-weight: 750;letter-spacing: .11em;line-height: 1.5;text-transform: uppercase;}
h1,h2,h3,p {margin-top: 0;}
h1 {margin-bottom: 22px;font-size: clamp(2.8rem, 4.8vw, 4rem);line-height: 1.05;letter-spacing: -.045em;font-weight: 720;}
.intro-lead {max-width: 30ch;margin-bottom: 0;font-size: 1.2rem;line-height: 1.5;color: #385967;}
.intro-copy p,.reading-copy p,.section-intro,.practical-grid p:not(.eyebrow),.business-close p:not(.eyebrow) {color: var(--body);font-size: .96rem;line-height: 1.8;}
.intro-copy p {margin-bottom: 16px;}
.intro-copy p:last-child,.reading-copy p:last-child,.practical-grid p:last-child {margin-bottom: 0;}
.section-block {padding: 40px 0;border-top: 1px solid var(--line);}
.section-heading {margin-bottom: 21px;}
h2 {margin-bottom: 20px;font-size: clamp(1.55rem, 2.3vw, 2rem);line-height: 1.22;letter-spacing: -.025em;font-weight: 680;}
.section-heading h2 {margin-bottom: 0;}
.reading-copy {max-width: 82ch;}
.reading-copy p {margin-bottom: 16px;}
.process-diagram {display: grid;grid-template-columns: repeat(3,minmax(0,1fr));list-style: none;margin: 28px 0 0;padding: 24px 28px;border: 1px solid #cddfe1;border-radius: 10px;background: var(--wash);}
.process-diagram li {display: flex;align-items: flex-start;gap: 14px;position: relative;padding: 0 31px;}
.process-diagram li:first-child {padding-left: 0;}
.process-diagram li:last-child {padding-right: 0;}
.process-diagram li + li {border-left: 1px solid #c6d9dc;}
.process-diagram li + li::before {content: "→";position: absolute;left: -9px;top: 5px;background: var(--wash);color: #58858a;font-size: 1rem;line-height: 1;}
.process-marker {display: flex;align-items: center;justify-content: center;width: 26px;height: 26px;flex-shrink: 0;background: #dbeaea;border-radius: 50%;color: #377476;font-size: .76rem;font-variant-numeric: tabular-nums;font-weight: 700;}
.process-diagram h3 {margin: 2px 0 7px;font-size: .95rem;line-height: 1.35;}
.process-diagram p {margin: 0;color: var(--body);font-size: .82rem;line-height: 1.65;}
.section-intro {max-width: 70ch;margin-bottom: 23px;}
.systems-grid {display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 25px;}
.systems-grid article {border-top: 2px solid #bed6d8;padding-top: 18px;}
.system-index {color: #729095;font-size: .71rem;font-weight: 600;}
.systems-grid h3 {margin: 12px 0 10px;font-size: 1rem;font-weight: 650;}
.systems-grid p {margin: 0;color: var(--body);font-size: .85rem;line-height: 1.75;}
.explanation-grid {display: grid;grid-template-columns: 1fr 1.5fr;gap: 64px;}
.practical-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 64px;border-top: 1px solid var(--line);padding: 40px 0 45px;}
.practical-grid h2 {font-size: 1.5rem;}
.practical-grid p:not(.eyebrow) {font-size: .91rem;}
.business-close {display: grid;grid-template-columns: 1fr auto;align-items: center;gap: 40px;padding: 32px 36px;background: var(--wash);border: 1px solid #cddfe1;border-radius: 12px;}
.business-close h2 {margin-bottom: 14px;}
.business-close p {max-width: 76ch;margin-bottom: 14px;}
.business-close p.project-note {font-size: .83rem;line-height: 1.7;margin-bottom: 0;}
.primary-link {display: inline-flex;align-items: center;justify-content: center;gap: 22px;min-height: 48px;padding: 13px 20px;color: #fff;background: var(--teal);border: 1px solid var(--teal);border-radius: 7px;font-size: .86rem;font-weight: 650;line-height: 1.45;text-decoration: none;white-space: nowrap;}
.primary-link:hover {background: #115b5c;border-color: #115b5c;}
.site-footer {display: flex;align-items: center;justify-content: space-between;gap: 28px;padding: 34px 0;color: #54717c;font-size: .75rem;line-height: 1.65;}
.site-footer p {margin: 0;font-weight: 650;}
.site-footer p span {display: block;font-weight: 400;}
.site-footer nav {display: flex;gap: 24px;flex-wrap: wrap;}
.site-footer a {display: inline-flex;align-items: center;min-height: 44px;text-decoration: none;}
@media(max-width: 850px) {
  .page-intro {gap: 35px;}
  h1 {font-size: 3.1rem;}
  .site-header nav {gap: 18px;}
  .site-header nav a {font-size: .78rem;}
  .systems-grid {grid-template-columns: repeat(2,minmax(0,1fr));gap: 28px;}
  .explanation-grid {gap: 36px;}
  .practical-grid {gap: 36px;}
  .business-close {grid-template-columns: 1fr;gap: 23px;}
  .primary-link {width: fit-content;}
  .process-diagram {padding: 22px 18px;}
  .process-diagram li {padding: 0 19px;gap: 10px;}
}
@media(max-width: 640px) {
  .page-shell {width: min(1100px, calc(100% - 40px));}
  .site-header {align-items: center;gap: 16px;padding: 6px 0 22px;}
  .brand img {width: 155px;}
  .site-header nav {align-items: flex-end;flex-direction: column;gap: 0;}
  .site-header nav a {min-height: 35px;font-size: .71rem;}
  .site-header .nav-demo {padding: 0;border: 0;}
  .page-intro {grid-template-columns: 1fr;gap: 25px;padding: 10px 0 33px;}
  h1 {font-size: clamp(2.65rem, 10vw, 3.5rem);margin-bottom: 19px;}
  .intro-lead {max-width: 31ch;font-size: 1.08rem;}
  .intro-copy p,.reading-copy p,.section-intro {font-size: .92rem;line-height: 1.75;}
  .section-block {padding: 31px 0;}
  .process-diagram {grid-template-columns: 1fr;padding: 22px;gap: 23px;margin-top: 23px;}
  .process-diagram li,.process-diagram li:first-child,.process-diagram li:last-child {padding: 0;gap: 15px;}
  .process-diagram li + li {border-left: 0;}
  .process-diagram li + li::before {content: "↓";top: -22px;left: 8px;font-size: .86rem;}
  .process-diagram p {font-size: .82rem;}
  .systems-grid {gap: 24px 22px;}
  .systems-grid h3 {font-size: .93rem;}
  .systems-grid p {font-size: .82rem;}
  .explanation-grid,.practical-grid {grid-template-columns: 1fr;gap: 24px;}
  .explanation-grid h2 {margin-bottom: 0;}
  .practical-grid {padding: 31px 0;gap: 32px;}
  .business-close {padding: 25px 22px;}
  .business-close p:not(.eyebrow) {font-size: .92rem;}
  .business-close p.project-note {font-size: .81rem;}
  .site-footer {flex-direction: column;align-items: flex-start;gap: 11px;padding: 27px 0;}
  .site-footer nav {gap: 20px;}
}
@media(prefers-reduced-motion: no-preference) {html {scroll-behavior: smooth;}}
@media print {
  .site-header nav,.site-footer nav,.primary-link,.skip-link {display: none;}
  .page-shell {width: 100%;}
  .page-intro {padding-top: 0;}
  .section-block,.practical-grid,.business-close {break-inside: avoid;}
  .business-close {display: block;}
}