Arrange the main claim, proof and next action in reading order.
<div class="hierarchy"><div class="before"><small>SCATTERED</small><span class="a">Start a board →</span><span class="b">Find your notes faster.</span><span class="c">One search across every board.</span></div><div class="after"><small>READING ORDER</small><span class="b">Find your notes faster.</span><span class="c">One search across every board.</span><span class="a">Start a board →</span></div></div>.hierarchy{display:flex;gap:clamp(7px,2vmin,18px);width:90%;max-width:710px;font-family:sans-serif}.hierarchy>div{box-sizing:border-box;flex:1;min-width:0;padding:clamp(9px,2vmin,20px);border:1px solid var(--line);background:var(--surface)}.hierarchy small{display:block;margin-bottom:.6em;color:var(--accent);font:900 clamp(10px,1.6vmin,12px) sans-serif}.hierarchy span{display:block;margin:.35em 0;font:750 clamp(10px,2.3vmin,18px)/1.12 sans-serif}.before{animation:scatter 5s infinite}.before span{color:var(--muted)}.after{border-color:var(--accent)!important;animation:order 5s infinite}.after .b{font-weight:900;font-size:clamp(13px,3vmin,25px)}.after .c{color:var(--muted)}.after .a{display:inline-block;padding:.4em .6em;background:var(--accent);color:white;font-weight:900}@keyframes scatter{0%,25%{opacity:1}40%,85%{opacity:.45}100%{opacity:1}}@keyframes order{0%,25%{opacity:.45;transform:translateY(5px)}40%,85%{opacity:1;transform:none}100%{opacity:.45;transform:translateY(5px)}}@media(min-width:700px){body > *{transform:scale(1.4)}.lines p,.branches div,.cards div{cursor:pointer}}@media(min-width:700px){
.creator-scene small,.creator-scene .meter,
.journey .track,.journey .panels small,.journey .panels p,
.disclosure .ad small,.disclosure .labels span,
.comment-mining .comments span,.comment-mining .extract small,.comment-mining .extract i,
.inbox .inbox-top,.inbox .inbox-note,.inbox .sender,.inbox .preview,
.hierarchy small,.hierarchy span,
.tone .constant,.tone .tone-track,.tone .tone-messages small,.tone .tone-messages p,
.naming .ylabel,.naming .xlabel,.naming .point,.naming .choice{font-size:12px}
}Message hierarchy is the editorial structure that decides what a reader sees first. When the main promise is buried or every line has equal weight, the reader must reconstruct the argument.
The demo rearranges the same three lines from a scattered order to claim, evidence and action. The largest line should carry the most useful promise; size alone cannot rescue an unsupported claim.
Use it when ordering lines in a landing hero, ad card or product introduction.