*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.6;
}
.wrap{ max-width:1100px; margin:0 auto; padding:0 28px; }

.mark{ font-weight:700; color:var(--white); text-decoration:none; }
.mark span{ opacity:.55; font-weight:400; }

.masthead{
  position:absolute; top:0; left:0; right:0; z-index:2;
}
.masthead .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.masthead .mark{ font-size:20px; letter-spacing:.05em; }
.masthead nav a{
  color:var(--white); opacity:.85; text-decoration:none;
  font-size:14.5px; margin-left:24px;
}
.masthead nav a:hover{ opacity:1; }
.navsep{
  display:inline-block; width:1px; height:18px;
  background:rgba(255,255,255,.35);
  margin-left:24px; vertical-align:middle;
}
.masthead nav a.navbtn{
  border:1px solid rgba(255,255,255,.6);
  border-radius:999px; padding:7px 18px;
  opacity:1;
}
.masthead nav a.navbtn:hover{
  background:rgba(255,255,255,.14);
  text-decoration:none;
}
body.home .mark, body.system .mark{ color:var(--ink); }
body.home .masthead nav a, body.system .masthead nav a{ color:var(--ink); }
body.home .navsep, body.system .navsep{ background:var(--rule); }
body.home .masthead nav a.navbtn, body.system .masthead nav a.navbtn{ border-color:var(--ink); }
body.home .masthead nav a.navbtn:hover, body.system .masthead nav a.navbtn:hover{ background:var(--tint); }

/* Orbit mark (EM's orbit-mark.svg r9): Purdue levels L0-L4 as concentric
   orbits around 0{1}, one copper spiral turning once per 90s. Rules
   hoisted from the file's own <style>; currentColor is the hero ink. */
.hero .fig .ring{ fill:none; stroke:currentColor; stroke-opacity:.13; stroke-width:1; }
@keyframes spin{   to{ transform:rotate(-360deg); } }

@media (prefers-reduced-motion: reduce){
}
.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); margin-bottom:16px;
}

.pipeline{ background:var(--paper); padding:80px 0; }
.pipeline .fig{ margin-top:56px; }
.pipeline .fig svg{ width:100%; max-width:860px; height:auto; display:block; margin:0 auto; }
.pipeline .cap{
  font-family:var(--mono); font-size:12.5px; color:var(--faint);
  text-align:center; margin-top:16px;
}

.arc{ fill:none; stroke:var(--body); stroke-width:1.5; }
.loop{ fill:none; stroke:var(--rule); stroke-width:1.5; stroke-dasharray:5 5; }
.el{ fill:var(--body); }
.ah-head{ fill:var(--body); }
.ahd-head{ fill:var(--rule); }

body.home{ -webkit-font-smoothing:antialiased; }
body.home a:focus-visible, body.system a:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:2px; }

.engage{ background:var(--paper); padding:80px 0; }
.cols3{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:36px;
  margin-top:56px;
}
.col{
  background:var(--tint); border:1px solid var(--rule); border-radius:10px;
  padding:30px 28px;
}
.col .chip{
  display:inline-block; font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  background:var(--ink); color:var(--white);
  padding:4px 10px; border-radius:4px; margin-bottom:16px;
}
.col h4{ font-size:19px; margin-bottom:10px; }
.col ul{ list-style:none; }
.col li{
  padding:6px 0; font-size:15.5px; color:var(--faint);
  border-bottom:1px solid var(--rule);
}
.col li:last-child{ border-bottom:none; }

@media (max-width:820px){
  .hero{ padding:var(--space-20) 0 var(--space-12); }
  .cols3{ grid-template-columns:1fr; }
  .masthead nav a{ margin-left:14px; font-size:13.5px; }
}

body.door{
  min-height:100vh; display:flex; flex-direction:column;
}
.band{ background:var(--ink); }
.band .wrap{
  display:flex; align-items:center; height:58px;
}
.band .mark{ font-size:19px; letter-spacing:.04em; }

body.door main{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:48px 24px;
}
/* The sign-in column. Scoped to the column: <body> also carries
   class="door", so a bare .door rule capped the whole page at 380px. */
body.door main .door{ width:100%; max-width:380px; }
.door h1{ font-size:30px; font-weight:700; letter-spacing:-.01em; }
.note{ color:var(--faint); font-size:15.5px; margin-top:8px; }
.note b{ color:var(--ink); font-weight:600; }

.door form{ margin-top:28px; }
.door label{
  display:block; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin-bottom:8px;
}
.door input{
  width:100%; font-size:17px; font-family:var(--sans);
  padding:13px 14px; border:1px solid var(--rule); border-radius:6px;
  background:var(--tint); color:var(--ink);
}
.door input:focus{
  outline:2px solid var(--ink); outline-offset:1px;
  background:var(--white); border-color:var(--ink);
}
.door input.code{
  font-family:var(--mono); font-size:26px; font-weight:700;
  letter-spacing:.55em; text-align:center; text-indent:.55em;
  padding:12px 8px;
}
.door button{
  width:100%; margin-top:16px;
  background:var(--ink); color:var(--white);
  font-size:16px; font-weight:600; font-family:var(--sans);
  padding:13px; border:none; border-radius:999px; cursor:pointer;
}
.door button:hover{ background:var(--body); }
.how{
  margin-top:22px; font-size:14px; color:var(--faint);
  border-top:1px solid var(--rule); padding-top:18px;
}

.alt{
  margin-top:22px; border-top:1px solid var(--rule); padding-top:16px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:14px; color:var(--faint);
}
.alt form{ margin:0; }
.door .alt button{
  width:auto; margin:0; padding:0;
  background:none; color:var(--ink); font-size:14px; font-weight:600;
  border:none; border-radius:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.door .alt button:hover{ background:none; color:var(--body); }
.alt a{ color:var(--faint); text-decoration:underline; text-underline-offset:3px; }
.alt a:hover{ color:var(--ink); }

body.door footer{
  padding:20px 28px; font-family:var(--mono); font-size:12px;
  color:var(--faint); text-align:center;
}

/* Products, T-01 and legal share the software page's language: white
   masthead, sw palette, hero scale, rows. Masthead and base rules are
   selector-listed with body.software below. */
body.products .kicker{
  font-size:12px; letter-spacing:.35em; color:var(--ink);
  margin-bottom:26px;
}
body.products h1{
  font-size:clamp(40px, 6vw, 64px); line-height:1.08; font-weight:700;
  letter-spacing:-.01em; color:var(--ink); max-width:15ch;
}
body.products .sub{
  margin-top:26px; font-size:19px; font-weight:300; color:var(--body);
}
body.catalog .sub, body.contact .sub{ max-width:52ch; }
body.t01 .sub{ max-width:44ch; }

.sc{ stroke:var(--ink); }
.fc{ fill:var(--ink); }
.si{ stroke:var(--ink); }
.fi{ fill:var(--ink); }
.fo{ fill:var(--copper); }
.bvis .andL, .bvis .andR{ stroke:var(--ink); }
.lineplate .andL, .lineplate .andR{ stroke:var(--ink); }
.andX{ fill:var(--copper); }

body.catalog .phero, body.contact .phero{ padding:var(--space-16) 0 var(--space-8); }
body.legal .phero{ padding:var(--space-16) 0 var(--space-20); }

section.cat{ padding:var(--space-8) 0 var(--space-12); }
section.cat h2{
  font-size:26px; font-weight:600; line-height:1.25; color:var(--ink);
}
section.cat .catline{
  margin-top:10px; margin-bottom:28px; max-width:58ch;
  color:var(--body); font-weight:300; font-size:17px;
}

.svc{ background:var(--tint); border-radius:10px; padding:26px 28px; margin-top:18px; max-width:820px; }
.svc p{ color:var(--faint); font-size:15.5px; max-width:60ch; }
.svc a{ color:var(--ink); font-weight:600; text-decoration:none; }
.svc a:hover{ text-decoration:underline; }

.pbar{
  position:sticky; top:0; z-index:5; background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.pbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:48px; }
.pbar .pname{ font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:.04em; }
.pbar .pright{ display:flex; align-items:center; gap:18px; }
.pbar .pprice{ font-family:var(--mono); font-size:14px; color:var(--faint); }
.pbar a.pbuy{
  background:var(--ink); color:var(--white); text-decoration:none;
  font-weight:600; font-size:14px; padding:8px 20px; border-radius:999px;
}
.pbar a.pbuy:hover{ background:var(--body); }

body.t01 .phero{ padding:var(--space-12) 0 var(--space-16); }
body.t01 .phero .wrap{ display:grid; grid-template-columns:1fr 1.1fr; gap:52px; align-items:center; }
body.t01 h2{ font-size:26px; font-weight:700; letter-spacing:-.01em; margin-bottom:10px; max-width:26ch; }

.buybox{
  border:1px solid var(--rule); border-radius:10px;
  background:var(--tint); padding:24px; max-width:380px; margin-top:26px;
}
.buybox .opt{
  display:flex; align-items:baseline; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--rule);
}
.buybox .opt:first-of-type{ padding-top:0; }
.buybox input[type=radio]{ accent-color:var(--ink); }
.buybox .opt b{ font-family:var(--mono); font-size:19px; }
.buybox .opt span{ color:var(--faint); font-size:14px; }
.buybox input[type=email]{
  width:100%; margin-top:16px; font-size:15.5px;
  font-family:var(--sans); padding:11px 12px; border:1px solid var(--rule);
  border-radius:6px; background:var(--paper); color:var(--ink);
}
.buybox input[type=email]:focus{
  outline:2px solid var(--ink);
  outline-offset:1px; border-color:var(--ink);
}
.buybox button{
  width:100%; margin-top:12px; background:var(--ink); color:var(--white);
  font-size:15.5px; font-weight:600; font-family:var(--sans);
  padding:12px; border:none; border-radius:999px; cursor:pointer;
}
.buybox button:hover{ background:var(--body); }
.batch{ margin-top:12px; font-family:var(--mono); font-size:11.5px; color:var(--faint); }

.bvis svg{ width:100%; height:auto; display:block; }

.plate{ padding:var(--space-16) 0; border-top:1px solid var(--rule); }
.plate .lead{ color:var(--faint); max-width:56ch; }
.lineplate{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; margin-top:44px; }
.lineplate svg{ width:100%; height:auto; display:block; }
.lineplate figcaption{ text-align:center; margin-top:6px; }
.lineplate figcaption b{
  display:block; font-family:var(--mono); font-size:15px;
  font-weight:700; color:var(--ink);
}
.lineplate figcaption span{
  display:block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.22em; color:var(--faint); margin-top:3px;
}
.lineplate figcaption em{
  display:block; font-style:normal; font-family:var(--mono);
  font-size:10px; letter-spacing:.1em; color:var(--faint); margin-top:6px;
}

.t01fig{ padding:70px 0 60px; border-top:1px solid var(--rule); }
.t01fig img{ width:100%; max-width:940px; height:auto; display:block; margin:0 auto; }
.t01fig figcaption{
  font-family:var(--mono); font-size:12px; color:var(--faint);
  text-align:center; margin-top:16px; letter-spacing:.04em;
  max-width:60ch; margin-left:auto; margin-right:auto;
}

.docsline{ padding:var(--space-12) 0 var(--space-16); border-top:1px solid var(--rule); }
.docsline p{ max-width:62ch; }
.docsline .files{ margin-top:14px; font-family:var(--mono); font-size:14px; }
.docsline .files a{ color:var(--ink); text-decoration:none; margin-right:22px; }
.docsline .files a:hover{ text-decoration:underline; }

/* Scoped to the T-01 figures: the universe reuses the .orb class name for
   its orbit links, which must not inherit this animation. */
body.t01 .orb{
  transform-box:view-box; transform-origin:50% 50%;
  animation-name:spin; animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@media (prefers-reduced-motion: no-preference){
  .hlfire{ animation: lensAnd2 6s linear infinite; }
  .andL{ animation: winA 6s linear infinite; }
  .andR{ animation: winB 6s linear infinite; }
  .andX{ animation: lensAnd 6s linear infinite; }
  .car{ animation: car 12s ease-in-out infinite; }
  .torus{ animation: slowspin 80s linear infinite; }
  .pv{ animation: pid 10s ease-in-out infinite; }
  .m1p{ animation: m1pulse 6s linear infinite; }
  .m1c{ animation: m1core 3.2s ease-in-out infinite; }
  .chip.live{ animation: runlight 3.2s ease-in-out infinite; }
}
@keyframes lensAnd2{ 0%,36%{ fill:var(--ink); } 40%,56%{ fill:var(--copper); } 62%,100%{ fill:var(--ink); } }
@keyframes winA{ 0%,4%{ stroke-opacity:.3; } 8%,58%{ stroke-opacity:1; } 64%,100%{ stroke-opacity:.3; } }
@keyframes winB{ 0%,32%{ stroke-opacity:.3; } 38%,88%{ stroke-opacity:1; } 94%,100%{ stroke-opacity:.3; } }
@keyframes lensAnd{ 0%,36%{ opacity:0; } 40%,56%{ opacity:.9; } 62%,100%{ opacity:0; } }
@keyframes car{
  0%,12%{ transform:translateY(0); } 26%,40%{ transform:translateY(-56px); }
  54%,68%{ transform:translateY(-112px); } 84%,100%{ transform:translateY(0); }
}
@keyframes slowspin{ to{ transform:rotate(360deg); } }
@keyframes pid{
  0%{ transform:translateX(0); } 12%{ transform:translateX(34px); }
  28%{ transform:translateX(-22px); } 44%{ transform:translateX(12px); }
  58%{ transform:translateX(-5px); } 70%,100%{ transform:translateX(0); }
}
@keyframes m1pulse{ 0%,8%{ stroke:var(--copper); } 16%,100%{ stroke:var(--ink); } }
@keyframes m1core{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .mod{
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
    .lineplate figure{
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
  }
}
@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  body.t01 .orb{ animation:none; }
  .hlfire{ fill:var(--copper); }
  .andX{ opacity:.9; }
  .car{ transform:translateY(-56px); }
}

@media (max-width:820px){
  body.t01 .phero .wrap{ grid-template-columns:1fr; gap:40px; }
  .lineplate{ grid-template-columns:1fr 1fr; gap:32px; }
  .pbar .pprice{ display:none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .t01fig .s1 *      { stroke-dasharray: var(--len);
                          animation: drawline linear both;
                          animation-timeline: view();
                          animation-range: cover 2% cover 16%; }
    .t01fig .s2 *      { stroke-dasharray: var(--len);
                          animation: drawline linear both;
                          animation-timeline: view();
                          animation-range: cover 12% cover 26%; }
    .t01fig .s3        { animation: fadein linear both;
                          animation-timeline: view();
                          animation-range: cover 24% cover 36%; }
    .t01fig .s4        { animation: fadein linear both;
                          animation-timeline: view();
                          animation-range: cover 34% cover 46%; }
    .t01fig .s5        { animation: fadein linear both;
                          animation-timeline: view();
                          animation-range: cover 44% cover 54%; }
    .t01fig .s6 *      { stroke-dasharray: var(--len);
                          animation: drawline linear both;
                          animation-timeline: view();
                          animation-range: cover 52% cover 72%; }
    .t01fig .s7        { animation: fadein linear both;
                          animation-timeline: view();
                          animation-range: cover 70% cover 78%; }
  }
}
@keyframes drawline{
  from{ stroke-dashoffset: var(--len); opacity:0; }
  10%{ opacity:1; }
  to{ stroke-dashoffset:0; opacity:1; }
}
@keyframes fadein{ from{ opacity:0; } to{ opacity:1; } }

@media (prefers-reduced-motion: no-preference){
  .t01fig #runlight{ animation: runlight 3.2s ease-in-out infinite; }
}
@keyframes runlight{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

body.software, body.products{
  color:var(--body); font-size:16px; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
body.software .wrap, body.products .wrap{ max-width:1120px; padding:0 32px; }
body.software a, body.products a{ color:inherit; }
body.software a:focus-visible, body.products a:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; }

body.software .masthead, body.products .masthead{
  position:static; background:var(--white);
  padding:22px 0; border-bottom:1px solid var(--rule);
}
body.software .masthead .wrap, body.products .masthead .wrap{ height:auto; }
body.software .masthead nav, body.products .masthead nav{ display:flex; align-items:center; }
body.software .masthead nav a:first-child, body.products .masthead nav a:first-child{ margin-left:0; }
body.software .masthead .mark, body.products .masthead .mark{ font-size:17px; letter-spacing:.2px; color:var(--ink); }
body.software .masthead .mark span, body.products .masthead .mark span{ font-weight:300; color:var(--faint); opacity:1; }
body.software .masthead nav a, body.products .masthead nav a{ color:var(--ink); opacity:1; font-size:14px; margin-left:26px; }
body.software .masthead nav a:hover, body.products .masthead nav a:hover{ text-decoration:underline; text-underline-offset:4px; }
body.software .masthead .navsep, body.products .masthead .navsep{ background:var(--rule); margin-left:26px; }
body.software .masthead nav a.navbtn, body.products .masthead nav a.navbtn{ border:1px solid var(--ink); color:var(--ink); padding:7px 18px; }
body.software .masthead nav a.navbtn:hover, body.products .masthead nav a.navbtn:hover{ background:var(--tint); text-decoration:none; }

.sw-hero{ padding:var(--space-16) 0 var(--space-12); }
.sw-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.35em;
  color:var(--ink); margin-bottom:26px;
}
.sw-hero h1{
  font-size:clamp(40px, 6vw, 64px);
  font-weight:700; line-height:1.08; letter-spacing:-.01em;
  color:var(--ink); max-width:15ch;
}
.sw-hero p{
  margin-top:26px; max-width:52ch;
  font-size:19px; font-weight:300; color:var(--body);
}
.sw-cta{ margin-top:40px; display:flex; gap:14px; flex-wrap:wrap; }
.sw-btn{
  display:inline-block; text-decoration:none; font-size:15px;
  padding:13px 26px; border-radius:4px; font-weight:600;
}
.sw-btn.solid{ background:var(--ink); color:var(--white); }
.sw-btn.solid:hover{ background:var(--body); }
.sw-btn.line{ border:1px solid var(--rule); color:var(--ink); font-weight:400; }
.sw-btn.line:hover{ border-color:var(--ink); color:var(--ink); }

.sw-loop{ padding:16px 0 var(--space-16); }
.sw-loop .fig{ display:flex; justify-content:center; }
.sw-loop svg{ width:min(760px,100%); height:auto; display:block; }
.sw-caption{
  margin:34px auto 0; max-width:62ch; text-align:center;
  color:var(--body); font-weight:300; font-size:17px;
}
.sw-rings{ stroke:var(--rule); fill:none; stroke-width:1; }
.sw-mark{ font-family:var(--mono); font-weight:700; font-size:34px; fill:var(--ink); }
.sw-node{ font-family:var(--mono); font-size:11px; fill:var(--ink); }
.sw-node .hollow{ fill:none; stroke:var(--ink); }
.sw-hemi{ font-family:var(--mono); font-size:11px; fill:var(--faint); }

.sw-band{
  background:var(--tint); border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule); padding:var(--space-16) 0;
}
.sw-band h2{
  font-size:clamp(26px, 3.4vw, 38px);
  font-weight:600; line-height:1.25; max-width:26ch; color:var(--ink);
}
.sw-band p{ margin-top:20px; max-width:58ch; color:var(--body); font-weight:300; font-size:17px; }
.sw-band p + p{ margin-top:14px; }

.sw-caps{ padding:var(--space-16) 0; }
.sw-cap{
  display:grid; grid-template-columns:140px 1fr 1.4fr; gap:28px;
  padding:34px 0; border-top:1px solid var(--rule);
}
.sw-cap:last-child{ border-bottom:1px solid var(--rule); }
.sw-cap .tag{
  font-family:var(--mono); font-size:13px;
  color:var(--ink); padding-top:6px; letter-spacing:.12em;
}
.sw-cap h3{ font-size:24px; font-weight:600; line-height:1.2; color:var(--ink); }
.sw-cap p{ color:var(--body); font-weight:300; }
.sw-cap .meta{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin-top:10px;
}
.sw-cap .more{
  display:inline-block; margin-top:14px; font-weight:600; font-size:15px;
  color:var(--ink); text-decoration:none;
}
.sw-cap .more:hover{ text-decoration:underline; text-underline-offset:4px; }

.sw-domains{ padding:0 0 var(--space-16); }
.sw-domains h2{ font-size:15px; font-weight:400; color:var(--faint); margin-bottom:18px; }
.sw-domains .list{
  font-family:var(--mono); font-size:15px; line-height:2;
  color:var(--ink); max-width:70ch;
}
.sw-domains .list span{ white-space:nowrap; }
.sw-domains .dot{ color:var(--faint); padding:0 6px; }

.sw-closing{ background:var(--ink); color:var(--white); padding:var(--space-20) 0; text-align:center; }
.sw-closing h2{ font-size:clamp(30px, 4.5vw, 46px); font-weight:700; line-height:1.15; }
.sw-closing .sw-cta{ justify-content:center; margin-top:36px; }
.sw-closing .sw-btn.solid{ background:var(--white); color:var(--ink); }
.sw-closing .sw-btn.solid:hover{ background:var(--tint); }
.sw-closing a:focus-visible{ outline-color:var(--white); }

@media (max-width:780px){
  body.software .wrap, body.products .wrap{ padding:0 22px; }
  .sw-hero, body.catalog .phero, body.contact .phero{ padding:var(--space-12) 0 var(--space-8); }
  .sw-cap{ grid-template-columns:1fr; gap:10px; padding:28px 0; }
  .sw-cap .tag{ padding-top:0; }
  body.software .masthead nav a, body.products .masthead nav a{ margin-left:16px; }
  body.software .masthead .navsep, body.products .masthead .navsep{ margin-left:16px; }
  body.software .masthead nav, body.products .masthead nav{ flex-wrap:wrap; justify-content:flex-end; row-gap:8px; }
}

/* Phone (max 640px). Masthead on two rows: wordmark, then the nav as one
   row with the sign-in pill pushed right; every nav link is a 44px tap
   target. Figure labels are set in viewBox units, so they are enlarged
   here to stay legible once the figure scales to the viewport. Small
   mono captions get a 12px floor. Desktop and tablet rules above are
   untouched. */
@media (max-width:640px){
  body.software .masthead, body.products .masthead{ padding:0; }
  body.home .masthead .wrap, body.products .masthead .wrap, body.software .masthead .wrap, body.system .masthead .wrap{
    height:auto; flex-wrap:wrap; align-items:center;
    padding-top:8px; padding-bottom:6px; row-gap:0;
  }
  body.home .masthead .mark, body.products .masthead .mark, body.software .masthead .mark, body.system .masthead .mark{
    flex:0 0 100%; line-height:44px;
  }
  body.home .masthead nav, body.products .masthead nav, body.software .masthead nav, body.system .masthead nav{
    flex:0 0 100%; display:flex; flex-wrap:nowrap; justify-content:flex-start;
    align-items:center; gap:0; row-gap:0;
  }
  body.home .masthead nav a, body.products .masthead nav a, body.software .masthead nav a, body.system .masthead nav a{
    margin-left:0; padding:0 11px; min-height:44px; font-size:15px;
    display:inline-flex; align-items:center;
  }
  body.home .masthead nav a:first-child, body.products .masthead nav a:first-child, body.software .masthead nav a:first-child, body.system .masthead nav a:first-child{ padding-left:0; }
  body.home .masthead .navsep, body.products .masthead .navsep, body.software .masthead .navsep, body.system .masthead .navsep{ display:none; }
  body.home .masthead nav a.navbtn, body.products .masthead nav a.navbtn, body.software .masthead nav a.navbtn, body.system .masthead nav a.navbtn{
    margin-left:auto; padding:0 16px; min-height:40px;
  }
  .sw-band, .sw-caps{ padding-top:var(--space-12); padding-bottom:var(--space-12); }
  .sw-domains, .sw-loop{ padding-bottom:var(--space-12); }
  .plate, .docsline{ padding-top:var(--space-12); padding-bottom:var(--space-12); }
  .sw-closing{ padding-top:var(--space-16); padding-bottom:var(--space-16); }
  .site-footer{ padding-top:var(--space-12); }

  .sw-node, .sw-hemi{ font-size:20px; }
  .sw-mark{ font-size:48px; }
  /* The loop drawing bleeds past the text column and scales to 145%:
     the hemisphere labels at x=120 and x=560 of 760 still land inside
     a 390px viewport, and node labels come out near 15px. */
  .sw-loop .fig{ margin:0 -22px; overflow:hidden; }
  .sw-loop svg{ width:145%; max-width:none; flex:0 0 auto; }
  .sw-hemi + .sw-hemi{ text-anchor:end; }  /* PHYSICAL ends at its x instead of running off the right edge */

  .batch,
  .lineplate figcaption span, .lineplate figcaption em{ font-size:12px; }
}

/* Touch widths (max 820px, tablets included): every link people tap gets
   a 40-44px hit area without changing its visual size. */
@media (max-width:820px){
  .masthead nav a{ display:inline-block; padding-top:11px; padding-bottom:11px; }
  .sw-cap .more{ display:inline-block; padding-top:8px; padding-bottom:8px; }
}

/* Contact page: the plain address, large and selectable, for devices
   with no mail app. */
body.contact .plain{ margin:12px 0 20px; }
body.contact .addr{
  font-family:var(--mono); font-size:clamp(20px, 3vw, 28px); font-weight:600;
  color:var(--ink); user-select:all; -webkit-user-select:all;
}

/* ============================================================
   home v0.4 — universe and level rings.
   Monochrome by EM's ruling of 2026-10-07: ink and grey only.
   Copper appears in exactly two places, the 0{1} mark and the
   orbit curve. No cobalt on these pages.
   ============================================================ */

/* ---- universe (/) ---- */
/* The home masthead is absolutely positioned, so the universe clears it
   itself and then centres in what is left above the footer bar. */
.universe{ padding:88px 0 var(--space-8); }
body.home > main{ display:flex; flex-direction:column; justify-content:center; }
.uhead{ text-align:center; font-family:var(--mono); display:grid; gap:6px; margin-bottom:8px; }
.uloc{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.utag{ font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--ink); }
.uni{ width:min(860px, 100%, calc(100vh - 300px)); margin:0 auto; }
.uni svg{ width:100%; height:auto; display:block; color:var(--ink); overflow:visible; }
.uni text{ font-family:var(--mono); }
.uni .tick{ stroke:currentColor; stroke-opacity:.14; stroke-width:1; }
.uni .tick.major{ stroke-opacity:.3; }
.uni .curve{ fill:none; stroke:var(--copper); stroke-width:1.5; stroke-linecap:round; }
.uni .omark{ font-size:28px; font-weight:400; fill:currentColor; letter-spacing:.02em; }
.uni .omark .br{ fill:var(--copper); }

/* An SVG <a> inherits the browser's link and visited-link colours, and
   everything inside an orbit paints with currentColor, so a visited level
   would turn the browser's purple. The colour is pinned here. */
.orb{ cursor:pointer; color:var(--ink); text-decoration:none; }
.orb .hit{ fill:none; stroke:transparent; stroke-width:40; pointer-events:stroke; }
.orb .ring{
  fill:none; stroke:currentColor; stroke-opacity:.14; stroke-width:1;
  transition:stroke-opacity .25s, stroke-width .25s;
}
.orb.live .ring{ stroke-opacity:.42; }
.orb:hover .ring, .orb:focus-visible .ring{ stroke-opacity:1; stroke-width:1.6; }
.orb:focus{ outline:none; }
.orb:focus-visible{ outline:none; }
.orb .dot{ fill:currentColor; stroke:var(--paper); stroke-width:3; paint-order:stroke; }
.orb .lbl{
  font-size:13px; fill:currentColor;
  stroke:var(--paper); stroke-width:4; paint-order:stroke; stroke-linejoin:round;
  pointer-events:none;
}
.orb .lbl .code{ font-weight:600; }
.orb .lbl .name{ fill-opacity:.62; }
.hint{
  text-align:center; font-family:var(--mono); color:var(--faint);
  font-size:12px; letter-spacing:.06em; margin-top:12px;
}

/* ---- level ring (/system/lN) ---- */
/* The shared masthead is absolute by default (the home page draws under
   it); the level pages put it back in flow, in ink on paper. */
body.system .masthead{
  position:static; background:var(--paper);
  padding:16px 0; border-bottom:1px solid var(--rule);
}
body.system .masthead .wrap{ height:auto; }
body.system .sys-head{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:var(--space-12) 0 0;
}
body.system .crumb{ display:flex; align-items:center; gap:14px; }
body.system .crumb-back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--ink); text-decoration:none;
}
body.system .crumb-back:hover{ text-decoration:underline; text-underline-offset:4px; }
/* The retired door glyph still owns a global .glyph{color:var(--ink)}
   at the top of this file; colour is reset here rather than globally, so
   the breadcrumb glyph stays ink. */
body.system .glyph{ width:22px; height:22px; flex:0 0 auto; color:var(--ink); }
body.system .glyph circle{ fill:none; stroke:currentColor; stroke-opacity:.25; stroke-width:1.2; }
body.system .glyph circle.me{ stroke:currentColor; stroke-opacity:1; stroke-width:2; }
body.system .stepper{ display:flex; gap:6px; }
body.system .stepper a{
  font-family:var(--mono); font-size:13px; color:var(--faint);
  padding:8px 12px; border:1px solid var(--rule); border-radius:6px; text-decoration:none;
}
body.system .stepper a.live{ color:var(--ink); }
body.system .stepper a[aria-current]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

body.system .sys-body{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:48px; align-items:start; padding:12px 0 var(--space-16);
}
body.system .rsvg{ position:sticky; top:16px; }
body.system .rsvg svg{ width:100%; height:auto; display:block; color:var(--ink); overflow:visible; }
body.system .rsvg text{ font-family:var(--mono); }
body.system .rr{ fill:none; stroke:currentColor; stroke-width:1.6; }
body.system .rr.ghost{ stroke-opacity:.08; stroke-width:1; }
body.system .rc{ font-size:15px; letter-spacing:.2em; fill:var(--faint); font-weight:600; }
body.system .rn{ font-size:40px; font-weight:600; fill:currentColor; }
body.system .rt{ font-size:15px; fill:var(--faint); }
body.system .rmark{ font-size:20px; font-weight:400; fill:currentColor; fill-opacity:.4; }
body.system .rmark .br{ fill:var(--copper); fill-opacity:1; }

body.system .station{ cursor:pointer; color:var(--ink); text-decoration:none; }
body.system .station .k{
  fill:var(--paper); stroke:currentColor; stroke-width:1.6;
  transition:fill .2s, stroke .2s;
}
body.system .station:hover .k, body.system .station:focus-visible .k{ fill:var(--ink); }
body.system .station.soon .k{ stroke-opacity:.3; }
body.system .station .sl{
  font-size:17px; fill:currentColor;
  stroke:var(--paper); stroke-width:4; paint-order:stroke; stroke-linejoin:round;
  pointer-events:none;
}
body.system .station.soon .sl{ fill-opacity:.5; }
body.system .station:focus{ outline:none; }
body.system .station:focus-visible{ outline:none; }

body.system .sys-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint);
}
body.system .page h1{
  font-size:34px; line-height:1.1; letter-spacing:-.01em; font-weight:700;
  margin:8px 0 10px;
}
body.system .lede{ color:var(--body); font-weight:300; font-size:17px; max-width:48ch; }
body.system .lights{ display:flex; gap:6px; margin-top:14px; flex-wrap:wrap; }
body.system .lights span{
  font-family:var(--mono); font-size:11.5px; color:var(--faint);
  border:1px solid var(--rule); border-radius:999px; padding:2px 10px;
}
body.system .lights span.me{ color:var(--ink); border-color:var(--ink); }

body.system .prod{
  padding:24px 0; border-top:1px solid var(--rule);
  scroll-margin-top:24px; transition:background .4s;
}
body.system .prod:first-of-type{ margin-top:28px; }
/* The station links carry #p-<id>, so the targeted card is the one the
   visitor picked off the ring. This is the zero-JS stand-in for the
   design's flash. */
body.system .prod:target{ background:var(--tint); box-shadow:-10px 0 0 var(--tint), 10px 0 0 var(--tint); }
body.system .prod h3{ font-size:19px; font-weight:600; }
body.system .prod .ln{
  color:var(--body); font-weight:300; font-size:15px; margin-top:4px; max-width:52ch;
}
body.system .prod .spans{ font-family:var(--mono); font-size:11.5px; color:var(--faint); margin-top:8px; }
body.system .prod .spans b{ color:var(--ink); font-weight:600; }
body.system .acts{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
body.system .btn{
  display:inline-block; font-weight:600; font-size:14px;
  padding:9px 18px; border-radius:6px;
  border:1px solid var(--ink); color:var(--ink); text-decoration:none;
}
body.system .btn:hover{ background:var(--tint); }
body.system .empty{
  margin-top:28px; padding:28px; border:1px dashed var(--rule); border-radius:10px;
  color:var(--faint); font-size:15px;
}
body.system .empty b{ color:var(--ink); font-weight:600; display:block; margin-bottom:4px; }
body.system .empty a{ color:var(--ink); display:inline-block; margin-top:10px; }

/* ---- footer: one bar (EM, 2026-10-07) ---- */
body{ min-height:100vh; display:flex; flex-direction:column; }
body > main{ flex:1 0 auto; width:100%; }
.site-footer{ border-top:1px solid var(--rule); flex:0 0 auto; }
.footer-bar{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; min-height:44px; flex-wrap:wrap;
  padding-top:6px; padding-bottom:6px;
}
.footer-links, .footer-legal{ display:flex; align-items:center; flex-wrap:wrap; }
.footer-links a, .footer-legal a, .footer-legal span{
  font-size:12.5px; color:var(--body); text-decoration:none;
  padding:9px 12px; position:relative; white-space:nowrap;
}
.footer-links a:first-child, .footer-legal span{ padding-left:0; }
.footer-links a + a::before, .footer-legal a::before{
  content:""; position:absolute; left:0; top:11px; bottom:11px;
  border-left:1px solid var(--rule);
}
.footer-links a:hover, .footer-legal a:hover{ color:var(--ink); }
.footer-legal span{ color:var(--faint); }

@media (max-width:900px){
  body.system .sys-head{ flex-direction:column; align-items:stretch; gap:10px; }
  body.system .stepper a{ flex:1; text-align:center; }
  body.system .sys-body{ grid-template-columns:1fr; gap:16px; padding-bottom:var(--space-12); }
  body.system .rsvg{ position:static; max-width:420px; margin:0 auto; width:100%; }
  body.system .station .sl{ font-size:22px; stroke-width:6; }
  body.system .rc{ font-size:20px; }
  body.system .rt{ font-size:20px; }
  body.system .rmark{ font-size:26px; }
  body.system .page h1{ font-size:28px; }
  .orb .lbl{ font-size:20px; stroke-width:6; }
  .uni .omark{ font-size:36px; }
  .uni{ width:min(860px, 100%); }
  .universe{ padding-top:124px; }
  .footer-bar{ flex-direction:column; align-items:flex-start; gap:0; }
  .footer-links a, .footer-legal a, .footer-legal span{ padding:11px 14px 11px 0; }
  .footer-links a + a::before, .footer-legal a::before{ display:none; }
  .footer-legal{ width:100%; border-top:1px solid var(--rule); margin-top:4px; padding-top:2px; }
}