/* Shared UI roles, separate from scene animation and page layouts. */
:root{--ui-display:clamp(42px,6.3vw,88px);--ui-card:clamp(26px,2.2vw,32px);--ui-accent:#ff5a5f}
body main .ui-display{font-family:Archivo,Arial,sans-serif;font-size:var(--ui-display);font-weight:500;line-height:1;letter-spacing:-.055em}
body main .ui-card-title{font-family:Archivo,Arial,sans-serif;font-size:var(--ui-card);font-weight:600;line-height:1.12;letter-spacing:-.035em}
body main :is(.system-card,.cypher-card,.cypher-product-card) .ui-card-title{font-size:22px;line-height:1.2;letter-spacing:-.02em}
body main .cypher-rules-grid .ui-card-title{font-size:var(--ui-card)}
body main .ui-legal-title{font-family:Archivo,Arial,sans-serif;font-size:clamp(36px,4vw,56px);font-weight:500;line-height:1.1}
body main .ui-legal-subtitle{font-family:Archivo,Arial,sans-serif;font-size:26px;font-weight:600;line-height:1.2}
body main .kicker{font-family:var(--family-mono);font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.12em;color:var(--ui-accent)}
body main :is(.system-card,.cypher-card,.cypher-product-card)>p{font-size:17px;line-height:1.55;font-weight:400}
body main :is(.system-card,.cypher-card)>span{font-family:var(--family-mono);font-size:11px;font-weight:400;color:#aeb3b6;letter-spacing:.1em}
body main .client-win-card>span{font-family:var(--family-mono);font-size:11px;font-weight:400;color:#aeb3b6}
body .button{font-family:Archivo,Arial,sans-serif;font-size:12px;font-weight:500;line-height:1.3;letter-spacing:.01em;min-height:44px;padding:13px 24px;display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:normal}
body .site-header{background:rgba(0,0,0,.94)}
body .main-nav a,body .header-link{font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.01em}
body :is(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--ui-accent);outline-offset:4px}
/* One warm-white palette for explanation and evidence. */
body main .light-panel.light-panel{background:#f1f0ee;color:#171717;border-color:#00000026;--red-text:#ae2228;--ui-accent:#ae2228}
body main .light-panel.light-panel :is(h2,h3,blockquote){color:#171717}
body main .light-panel.light-panel :is(p,li){color:#444}
body main .light-panel.light-panel :is(.kicker,.client-win-label){color:#ae2228}
body main .light-panel.light-panel :is(.system-card,.cypher-card,.client-win-card,.manuals-compare-card){background:transparent;border-color:#00000026;box-shadow:none}
body main .light-panel.light-panel :is(.system-card,.cypher-card,.client-win-card)>span{color:#626262}
body main .light-panel.light-panel cite{color:#626262}
body main .light-panel.light-panel .client-win-block+.client-win-block{border-color:#00000026}
body main .light-panel.light-panel a{color:#171717}
body main .light-panel.light-panel .button{background:transparent;border-color:#171717;color:#171717}
body main .light-panel.light-panel .button:hover{background:#171717;color:#f1f0ee}
body main .light-panel.light-panel :is(a,button,summary):focus-visible{outline-color:#ae2228}
/* Book features place the title above, rather than inside, a narrow column. */
body .manuals-book-section{min-height:0;padding-block:100px;scroll-margin-top:76px}
body .book-feature{display:block;max-width:1180px;margin-inline:auto;width:100%}
body .book-feature-heading{max-width:1040px;margin-bottom:52px}
body .book-feature-heading .ui-display{max-width:1040px;text-wrap:balance}
body .book-feature-body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
body .book-feature-body .manuals-book-copy{max-width:460px;min-width:0}
body .book-feature-body .manuals-book-copy>p:first-child{margin-top:0}
body .book-feature-body .manuals-book-media{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:26px;align-items:center;min-width:0}
body .book-feature-body :is(.manuals-detail-cover,.manuals-spread-image){width:100%;max-width:100%;min-width:0;height:auto;margin:0}
body .book-feature-body .manuals-territory{font-size:13px;font-weight:500;line-height:1.6;letter-spacing:.06em}
@media(max-width:980px){body .book-feature-body{grid-template-columns:1fr;gap:40px}body .book-feature-body .manuals-book-copy{max-width:680px}body .book-feature-body .manuals-book-media{max-width:720px;width:100%}body .manuals-book-section{padding-block:80px}}
@media(max-width:620px){:root{--ui-display:clamp(40px,12vw,58px);--ui-card:26px}body .manuals-book-section{padding-block:64px}body .book-feature-heading{margin-bottom:30px}body .book-feature-body .manuals-book-media{gap:16px}body .button{max-width:100%}}

/* Process-card copy overrides older detail-section paragraph rules. */
body main .systems-grid .system-card>p,body main .cypher-card-grid :is(.cypher-card,.cypher-product-card)>p{font-size:17px;line-height:1.55;font-weight:400}

@media(min-width:981px){body .manuals-silver-section .book-feature-body{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}

/* Cypher process labels use the same heading family as the rest of the site. */
body .cypher-process-step>span{font-family:Archivo,Arial,sans-serif}

/* Opening-panel trial: the intelligence path resolves into the eyebrow. */
.sequence-panel .opening-sequence{position:relative;height:148px;margin-bottom:20px;max-width:720px}
.opening-path{position:absolute;left:0;top:0;width:2px;height:136px;fill:none;stroke-width:1}
.opening-step,.sequence-panel .opening-eyebrow{position:absolute;left:0;padding-left:20px;font:400 12px/1.5 var(--family-mono);letter-spacing:.08em;text-transform:uppercase}
.opening-step{color:#c3c7ca}
.opening-brand{top:0;opacity:var(--one)}
.opening-reputation{top:64px;opacity:var(--two)}
.sequence-panel .opening-eyebrow{top:128px;margin:0;gap:10px;color:#ff5a5f}
.opening-step::before,.sequence-panel .opening-eyebrow::before{content:'+';position:absolute;left:-4px;top:0;color:#ff5a5f;font:16px/1 var(--family-mono)}
.sequence-panel .opening-eyebrow span{font:inherit;color:#aeb3b6;letter-spacing:inherit}
.sequence-panel .opening-eyebrow span::before{content:none}
@media(max-width:980px),(prefers-reduced-motion:reduce){.opening-step{opacity:1}.opening-path .insight-path{stroke-dashoffset:0}}

/* Give the opening sequence more vertical breathing room. */
.sequence-panel .opening-sequence{height:212px}
.sequence-panel .opening-path{height:200px}
.sequence-panel .opening-reputation{top:96px}
.sequence-panel .opening-eyebrow{top:192px}

.sequence-panel .opening-sequence{margin-top:-20px}

/* Anchor the first step beneath navigation; spread the sequence through the available hero height. */
body .sequence-panel{align-items:stretch;padding-top:150px}
body .sequence-panel .panel-content{display:flex;flex-direction:column;align-items:flex-start;width:100%}
.sequence-panel .opening-sequence{flex:1 0 280px;width:100%;height:auto;margin-top:0;margin-bottom:20px}
.sequence-panel .opening-path{height:calc(100% - 10px)}
.sequence-panel .opening-brand{top:0}
.sequence-panel .opening-reputation{top:calc(50% - 9px)}
.sequence-panel .opening-eyebrow{top:auto;bottom:0}
@media(max-width:620px){.sequence-panel .opening-sequence{flex-basis:220px}}

/* Move Brand one-third of the way toward Reputation without shifting the other labels. */
.sequence-panel .opening-brand{top:calc((50% - 9px) / 3)}
.sequence-panel .opening-path{top:calc((50% - 9px) / 3);height:calc(100% - 10px - (50% - 9px) / 3)}

/* Reputation sits exactly halfway between the Brand and Value labels. */
.sequence-panel .opening-reputation{top:calc((100% - 18px) * 7 / 12)}

body .sequence-panel:not(.hero-panel) .opening-sequence{flex:0 0 var(--matched-sequence-height,280px);height:var(--matched-sequence-height,280px)}

.cypher-panel .cypher-eyebrow span{color:#aeb3b6;font-weight:400}

/* Reveal each opening label only after the line reaches its marker. */
.sequence-panel .opening-path{top:calc((100% - 18px) / 6 + 8px);height:calc((100% - 18px) * 5 / 6)}
.sequence-panel .opening-path .insight-path{stroke-dashoffset:calc(1 - var(--draw))}
.sequence-panel :is(.opening-brand,.opening-reputation,.opening-eyebrow){opacity:0;transition:opacity .18s ease}
.sequence-panel :is(.opening-brand,.opening-reputation,.opening-eyebrow).is-reached{opacity:1}
@media(prefers-reduced-motion:reduce){.sequence-panel :is(.opening-brand,.opening-reputation,.opening-eyebrow){opacity:1;transition:none}.sequence-panel .opening-path .insight-path{stroke-dashoffset:0}}