/* Public information site (spec 4.1). Tokens from canvas.css; no inline styles anywhere. */
.page-site{background:var(--bg);color:var(--text);font-family:var(--f-ui);min-height:100vh;overflow-x:hidden}
.site-wrap{width:100%;max-width:1080px;margin:0 auto;padding-left:16px;padding-right:16px;box-sizing:border-box}
.site-header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.site-header__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-top:10px;padding-bottom:10px}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:14px}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--text-2);text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--text)}
.site-nav .site-nav__cta{color:var(--bg);padding:0 14px}
.site-nav .site-nav__cta:hover{color:var(--bg)}
.site-main{display:block}
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.01em;margin:0 0 .5em}
.page-site h1{font-size:clamp(2rem,6vw,3.4rem);line-height:1.05}
.page-site h2{font-size:clamp(1.4rem,3.4vw,2rem);line-height:1.15}
.lede{font-size:clamp(1.05rem,2.4vw,1.25rem);color:var(--text-2);max-width:56ch}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;padding-top:56px;padding-bottom:56px}
.hero__art{display:flex;justify-content:center}
.hero__art .mini--table .mini-card:nth-child(n+2){display:none}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.cta form{margin:0}
.btn--lg{padding:12px 22px;font-size:16px}
.cta-note{color:var(--text-3);font-size:13px;margin:10px 0 0}
.band,.feature{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding-top:40px;padding-bottom:40px;border-top:1px solid var(--line)}
.band--flip .band__text,.feature--flip .feature__text{order:2}
.band--tall .band__text{align-self:start;padding-top:32px}
.band__art,.feature__art{display:flex;justify-content:center;min-width:0}
.page-head{padding-top:48px;padding-bottom:16px}
.roles{padding-top:40px;padding-bottom:40px;border-top:1px solid var(--line)}
.roles__list{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.roles__list li{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.roles__list h3{font-size:1rem;margin:0 0 6px}
.roles__list p{margin:0;color:var(--text-2);font-size:14px}
.final{padding-top:48px;padding-bottom:64px;border-top:1px solid var(--line);text-align:center}
.final .cta{justify-content:center}
.final .lede{margin-left:auto;margin-right:auto}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);font-size:14px}
.chip--on{background:var(--surface-3);color:var(--text);border-color:var(--focus)}
.steps{list-style:none;margin:0 auto;padding-top:0;padding-bottom:16px}
.step{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;padding:28px 0;border-top:1px solid var(--line)}
.step__n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--surface-3);border:1px solid var(--line-2);font-family:var(--f-mono);font-size:15px;margin-right:6px}
.step-art,.mini--step{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;min-height:96px}
.step-card{display:inline-flex;flex-direction:column;padding:12px 16px;border-radius:14px;background:var(--surface);border:2px solid var(--pc,var(--line-2))}
.step-task{display:inline-flex;flex-direction:column;gap:6px;padding:10px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line-2)}
.step-task__kids{display:flex;flex-direction:column;gap:4px;padding-left:12px;border-left:2px solid var(--line-2);font-style:normal;color:var(--text-2);font-size:13px}
.step-task__kids i{font-style:normal}
.demo-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-bottom:16px}
.demo-facts__card{padding:20px}
.demo-facts__card ul{margin:0;padding-left:1.1em;color:var(--text-2)}
.demo-facts__card li{margin:6px 0}
.site-footer{border-top:1px solid var(--line);padding:28px 0;color:var(--text-3);font-size:14px}
.site-footer__name{font-family:var(--f-display);color:var(--text);margin:0}
.site-footer p{margin:2px 0}
.site-footer__links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
.site-footer__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-2)}

/* miniatures: the table reuses the real .pcard / .health classes, so only spacing is set here */
.mini{margin:0;max-width:100%}
.mini--map,.mini--timeline{width:100%}
.mini--map{overflow:hidden}
.mini--table{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.mini-card{flex:none;max-width:100%}
.mini-card .pcard__title span{color:inherit}
.map-stage{position:relative;width:min(100%,380px);height:340px;margin:0 auto}
.map-node{position:absolute;display:grid;place-items:center;text-align:center;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2);font-size:12px;box-shadow:var(--shadow-1)}
.map-node b{font-family:var(--f-display);font-size:13px}
.map-node small{color:var(--text-2);font-family:var(--f-mono);font-size:11px}
.map-node--root{left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border-color:var(--focus)}
.map-node--a{left:18%;top:20%}.map-node--b{left:82%;top:24%}.map-node--c{left:38%;top:82%}
.map-node--d{left:84%;top:62%;width:70px;height:70px;margin:-35px 0 0 -35px}
.map-node--e{left:70%;top:86%;width:70px;height:70px;margin:-35px 0 0 -35px}
.map-node--focus{border-color:var(--ok)}
.map-node--locked{filter:var(--lock-filter);border-style:dashed;color:var(--lock)}
.map-link{position:absolute;height:2px;background:var(--line-2);transform-origin:0 50%}
.map-link--a{left:50%;top:50%;width:42%;transform:rotate(-140deg)}
.map-link--b{left:50%;top:50%;width:39%;transform:rotate(-36deg)}
.map-link--c{left:50%;top:50%;width:31%;transform:rotate(113deg)}
.map-link--d{left:82%;top:24%;width:34%;transform:rotate(87deg)}
.map-link--e{left:82%;top:24%;width:57%;transform:rotate(102deg)}
.tl-stage{position:relative;width:min(100%,420px);margin:0 auto;padding:8px 0}
.tl-scale{display:grid;grid-template-columns:repeat(8,1fr);font-family:var(--f-mono);font-size:11px;color:var(--text-3);border-bottom:1px solid var(--line)}
.tl-row{position:relative;height:34px;margin-top:8px}
.tl-bar{position:absolute;top:4px;height:24px;line-height:24px;padding:0 8px;border-radius:8px;font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;box-sizing:border-box;text-overflow:ellipsis}
.tl-bar--ok{background:color-mix(in srgb,var(--ok) 30%,var(--surface));border-left:4px solid var(--ok)}
.tl-bar--live{background:color-mix(in srgb,var(--focus) 30%,var(--surface));border-left:4px solid var(--focus)}
.tl-bar--late{background:color-mix(in srgb,var(--bad) 30%,var(--surface));border-left:4px solid var(--bad)}
.tl-today{position:absolute;left:44%;top:22px;bottom:0;width:2px;background:var(--warn)}
.tl-diamond{position:absolute;top:10px;width:14px;height:14px;transform:rotate(45deg);background:var(--warn)}
.tl-label{position:absolute;top:8px;font-size:12px;color:var(--text-2)}
.step-art .tl-bar{position:relative;top:0;display:inline-block;width:120px}
.l-0{left:0}.l-10{left:10%}.l-30{left:30%}.l-60{left:60%}.l-80{left:80%}
.w-40{width:40%}.w-50{width:50%}.w-60{width:60%}

/* motion: scroll reveal only when JavaScript confirmed it is wanted (js-reveal). The map miniature is static: decorative, so no WCAG 2.2.2 pause control is needed. */
.js-reveal .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js-reveal .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal,.js-reveal .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

@media (max-width: 860px){
  .hero,.band,.feature,.step,.demo-facts{grid-template-columns:1fr}
  .band--flip .band__text,.feature--flip .feature__text{order:0}
  .band--tall .band__text{padding-top:0}
  .roles__list{grid-template-columns:1fr 1fr}
}
@media (max-width: 480px){
  .hero{padding-top:32px;padding-bottom:32px}
  .roles__list{grid-template-columns:1fr}
  .hero__art .mini--table .mini-card:nth-child(n+2){display:none}
  .mini--table{gap:12px}
  .map-stage{height:280px}
  .site-header__in{padding-top:8px;padding-bottom:8px}
}
/* Phone header: two rows instead of three. Row 1 is brand + call to action + theme toggle, row 2 the text links.
   The nav's children join the header's flex row (display:contents keeps the landmark for assistive tech). */
@media (max-width: 480px){
  .site-nav{display:contents}
  .site-header__in::after{content:"";order:3;flex:0 0 100%;height:0}
  .site-header__in>:first-child{margin-right:auto}
  .site-nav .site-nav__cta{order:1}
  .site-nav .theme-toggle{order:2}
  .site-nav a:not(.btn){order:4}
  .site-header__in{row-gap:0;column-gap:8px}
}