/* Cybereum secondary-page system
   Deep pages are retained for future development. For the one-page release they
   are not primary navigation destinations; keep them professionally restrained
   so direct/search traffic never lands on billboard-scale experiments. */

/* Universal deep-page hierarchy

   Headline measure: 21ch. Home — the canonical surface — already runs its own
   hero headline at 19-22ch. Interior heroes had been held at 13-15ch, which at
   this display size resolved long headlines into 4-6 line stacks filling only
   38-49% of the content width, leaving the composition unresolved. 21ch brings
   them onto Home's measure: 2-3 lines at roughly 60% fill, matching the
   proportion the Investors hero already uses well. The measure is in ch, so it
   scales with the fluid font size and stops binding below ~900px, where the
   container governs instead. Restraint here is about scale and density, not
   about a narrow measure. The Dyēŭs hero keeps its own tighter measure because
   its headline is a deliberate two-line couplet. */
.cyb-page .hero.hero{min-height:auto;display:flex;align-items:center;padding:calc(var(--cyb-nav-h) + clamp(3.5rem,5vw,5rem)) 0 clamp(3.5rem,5vw,5rem);isolation:isolate;overflow:hidden}
.cyb-page .hero.hero>.cyb-wrap{position:relative;z-index:2}
.cyb-page .hero.hero .cyb-eyebrow{display:inline-flex;align-items:center;gap:.7rem;font:500 .68rem/1.2 var(--cyb-mono);letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--cyb-accent) 76%,var(--cyb-fg-3))}
.cyb-page .hero.hero .cyb-eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.cyb-page .hero.hero h1{font-family:var(--cyb-display);font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.14;letter-spacing:var(--cyb-tracking-display);max-width:16.16em;text-wrap:balance;margin:1rem 0 1.35rem}
.cyb-page .hero.hero .lede{max-width:33.6em;margin-left:0;font-size:clamp(1rem,.96rem + .2vw,1.16rem);line-height:1.68;color:color-mix(in srgb,var(--cyb-fg-2) 88%,var(--cyb-fg-3))}
.cyb-page .hero.hero .actions{margin-left:0;margin-top:1.5rem}
.cyb-page .hero.hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--cyb-line) 24%,transparent) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(color-mix(in srgb,var(--cyb-line) 24%,transparent) 1px,transparent 1px) 0 0/120px 120px;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.82),transparent 88%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.82),transparent 88%);opacity:.24}
.cyb-page .hero.hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:min(60vw,760px);aspect-ratio:1;border-radius:50%;right:-18vw;top:-24%;background:radial-gradient(circle,color-mix(in srgb,var(--cyb-accent) 9%,transparent),transparent 68%)}
.cyb-page .section.section{padding:clamp(4.5rem,7vw,7rem) 0}
.cyb-page .section.section h2{font-family:var(--cyb-display);font-size:clamp(1.5rem,2.2vw,2rem);max-width:19.01em;line-height:1.12;letter-spacing:var(--cyb-tracking-display);text-wrap:balance}
.cyb-page .section-intro.section-intro{font-size:clamp(1rem,1.15vw,1.14rem);line-height:1.72;max-width:var(--cyb-reading)}
.cyb-page .grid.grid{border-radius:var(--cyb-radius-sm);box-shadow:none;gap:1px}
.cyb-page .grid.grid .card.card{min-height:0;padding:clamp(1.4rem,2.3vw,2rem)}
.cyb-page .grid.grid .card.card h3{font-size:clamp(1.1rem,1.5vw,1.4rem)}

/* Concept pages remain available but intentionally restrained until their next design pass. */
html body .concept-hero{min-height:auto!important;padding:calc(var(--cyb-nav-h,72px) + clamp(3.3rem,5vw,4.8rem)) 0 clamp(3.4rem,5vw,4.8rem)!important}
html body .concept-hero h1{font-family:var(--cyb-display)!important;font-size:clamp(2rem,3.5vw,3.5rem)!important;line-height:1.14!important;letter-spacing:var(--cyb-tracking-display)!important;max-width:16.16em!important;margin:.8rem 0 1.2rem!important;text-wrap:balance!important}
html body .concept-hero .lede{max-width:33.6em!important;margin-left:0!important;font-size:clamp(1rem,1.15vw,1.16rem)!important;line-height:1.68!important}
html body .concept-hero .actions{margin:1.45rem 0 0!important}
html body .concept-title-row{grid-template-columns:minmax(220px,.38fr) minmax(0,1fr)!important;gap:clamp(2rem,4vw,4.5rem)!important;margin-bottom:clamp(2rem,4vw,3.5rem)!important}
html body .concept-title-row h2{font-family:var(--cyb-display)!important;font-size:clamp(1.5rem,2.2vw,2rem)!important;line-height:1.12!important;letter-spacing:var(--cyb-tracking-display)!important;max-width:19.01em!important;margin:.55rem 0 0!important;text-wrap:balance!important}
html body .concept-section{padding:clamp(4rem,6vw,6.25rem) 0!important}

html body .concept-hero:has(.system-instrument){padding-bottom:0!important}
html body .concept-hero:has(.system-instrument) h1{font-size:clamp(2rem,3.5vw,3.5rem)!important;max-width:19.96em!important}
html body .system-instrument{width:min(1320px,calc(100vw - clamp(1.5rem,5vw,5rem)))!important;margin:clamp(2.4rem,4vw,4rem) 50% 0!important;border-radius:var(--cyb-radius-md) var(--cyb-radius-md) 0 0!important}
html body .system-instrument__scroll{padding:1.2rem 1.4rem 2rem!important}
html body .system-instrument svg{min-width:980px!important}
html body .system-instrument__legend div{padding:1rem 1.15rem 1.2rem!important;font-size:.84rem!important}

html body .concept-hero:has(.dyeus-deep-ident){padding:calc(var(--cyb-nav-h,72px) + 3.4rem) 0 4rem!important}
html body .concept-hero:has(.dyeus-deep-ident) .cyb-wrap{text-align:left!important;max-width:1180px!important}
html body .dyeus-deep-ident{text-align:left!important;margin:0 0 2rem!important;max-width:760px!important}
html body .dyeus-deep-wordmark{justify-content:flex-start!important;font-size:clamp(2.8rem,5vw,4.8rem)!important;letter-spacing:.11em!important;text-indent:0!important}
html body .dyeus-deep-ident .architecture{font-size:var(--cyb-label-min)!important;text-wrap:balance;letter-spacing:.15em!important}
@media(max-width:420px){html body .dyeus-deep-ident .architecture{letter-spacing:.1em!important}}
html body .concept-hero:has(.dyeus-deep-ident) h1{font-size:clamp(2rem,3.2vw,3.5rem)!important;max-width:12.36em!important}
html body .dyeus-principle{margin:2rem 0 0!important;max-width:760px!important}

html body .concept-hero:has(.assessment-instrument) h1{max-width:19.96em!important}
html body .assessment-instrument{margin-top:2.5rem!important}
html body .assessment-flow{gap:0!important}
html body .assessment-stage{min-height:260px!important;padding:1.45rem!important}

@media(max-width:900px){html body .concept-title-row{grid-template-columns:1fr!important}.cyb-page .hero.hero h1,html body .concept-hero h1{font-size:clamp(1.8rem,6.6vw,2.7rem)!important}.cyb-page .section.section h2,html body .concept-title-row h2{font-size:clamp(1.4rem,5vw,1.9rem)!important}.dyeus-deep-wordmark{font-size:clamp(2.7rem,12vw,4.4rem)!important}}
@media(max-width:800px){.cyb-page .hero.hero{padding:calc(var(--cyb-nav-h) + 3.4rem) 0 3.5rem}}