@font-face {
     font-family: 'DM Serif Display';
     font-style: italic;
     font-weight: 400;
     font-display: swap;
     src: url(fonts/-nFhOHM81r4j6k0gjAW3mujVU2B2G_Vx1w.ttf) format('truetype');
}
 @font-face {
     font-family: 'DM Serif Display';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url(fonts/-nFnOHM81r4j6k0gjAW3mujVU2B2K_c.ttf) format('truetype');
}
 @font-face {
     font-family: 'IBM Plex Mono';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url(fonts/-F63fjptAgt5VM-kVkqdyU8n5ig.ttf) format('truetype');
}
 @font-face {
     font-family: 'IBM Plex Mono';
     font-style: normal;
     font-weight: 500;
     font-display: swap;
     src: url(fonts/-F6qfjptAgt5VM-kVkqdyU8n3twJ8lc.ttf) format('truetype');
}
 @font-face {
     font-family: 'Manrope';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url(fonts/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FO_F.ttf) format('truetype');
}
 @font-face {
     font-family: 'Manrope';
     font-style: normal;
     font-weight: 500;
     font-display: swap;
     src: url(fonts/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk7PFO_F.ttf) format('truetype');
}
 @font-face {
     font-family: 'Manrope';
     font-style: normal;
     font-weight: 600;
     font-display: swap;
     src: url(fonts/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4jE-_F.ttf) format('truetype');
}
 @font-face {
     font-family: 'Manrope';
     font-style: normal;
     font-weight: 700;
     font-display: swap;
     src: url(fonts/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4aE-_F.ttf) format('truetype');
}
/* Versos Social — Caderno de Gestão Pública | CSS3 puro */
 :root{
    --paper:#f3f0e8;
    --paper-2:#f7f5ef;
    --ink:#1b292c;
    --green:#17695b;
    --mint:#e4eee7;
    --petrol:#143f38;
    --line:rgba(27,41,44,.16);
    --muted:rgba(27,41,44,.65);
    --serif:'DM Serif Display',Georgia,serif;
    --sans:Manrope,Arial,sans-serif;
    --mono:'IBM Plex Mono',monospace;
    --ease:cubic-bezier(.23,1,.32,1)
}
 *{
    box-sizing:border-box
}
 html{
    scroll-behavior:smooth
}
 body{
    margin:0;
    background-color:var(--paper);
    background-image:radial-gradient(circle at 8% 20%,rgba(23,105,91,.04),transparent 22rem),repeating-linear-gradient(0deg,transparent,transparent 5px,rgba(27,41,44,.018) 5px,rgba(27,41,44,.018) 6px);
    color:var(--ink);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased
}
 button,input{
    font:inherit
}
 button{
    cursor:pointer
}
 img{
    max-width:100%;
    display:block
}
 a{
    color:inherit;
    text-decoration:none
}
.shell{
    max-width:1440px;
    margin:auto;
    padding-left:40px;
    padding-right:40px
}
.mono,.eyebrow,.mini{
    font-family:var(--mono);
    letter-spacing:.16em;
    text-transform:uppercase
}
.eyebrow{
    font-size:10px;
    color:var(--green);
    font-weight:500
}
.display{
    font-family:var(--serif);
    letter-spacing:-.055em
}
.section-title{
    font:normal clamp(2.35rem,4vw,3.35rem)/.96 var(--serif);
    letter-spacing:-.055em;
    max-width:760px;
    margin:14px 0 0
}
.muted{
    color:var(--muted);
    line-height:1.75
}
.topbar{
    position:sticky;
    top:0;
    z-index:30;
    height:72px;
    border-bottom:1px solid var(--line);
    background:rgba(247,245,239,.95);
    backdrop-filter:blur(15px)
}
.topbar .shell{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}
.brand{
    border:0;
    background:transparent;
    display:flex;
    align-items:center;
    gap:12px;
    text-align:left;
    padding:0
}
.brand img{
    width:43px;
    height:43px;
    object-fit:contain
}
.brand-name{
    font:normal 22px/1 var(--serif);
    letter-spacing:-.035em
}
.brand-sub{
    font:10px var(--mono);
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--green);
    margin-top:5px
}
.nav{
    display:flex;
    align-items:center;
    gap:24px
}
.nav button{
    border:0;
    background:transparent;
    color:rgba(27,41,44,.65);
    font-size:14px;
    position:relative;
    padding:6px 0
}
.nav button:after{
    content:'';
    position:absolute;
    bottom:-5px;
    left:0;
    width:0;
    height:1px;
    background:var(--green);
    transition:width .2s var(--ease)
}
.nav button:hover{
    color:var(--green)
}
.nav button:hover:after{
    width:100%
}
.actions{
    display:flex;
    gap:12px
}
.button{
    border:1px solid var(--line);
    background:transparent;
    color:var(--ink);
    padding:10px 14px;
    font-size:13px;
    transition:all .18s var(--ease)
}
.button.primary{
    background:var(--green);
    border-color:var(--green);
    color:white
}
.button:hover{
    background:#eae7dd
}
.button.primary:hover{
    background:#115346
}
.button:active{
    transform:scale(.98)
}
.menu-button{
    display:none;
    border:1px solid var(--line);
    background:transparent;
    width:40px;
    height:40px;
    font-size:20px
}
.chapter-spine{
    display:none
}
.hero{
    position:relative;
    min-height:660px;
    border-bottom:1px solid var(--line);
    overflow:hidden
}
.hero-visual{
    position:absolute;
    inset:0 0 0 auto;
    width:55%;
    overflow:hidden
}
.hero-visual img{
    width:100%;
    height:100%;
    object-fit:cover
}
.hero-visual:after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,var(--paper),rgba(243,240,232,.7),transparent)
}
.hero-inner{
    position:relative;
    min-height:660px;
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    align-items:end;
    padding-top:96px;
    padding-bottom:80px
}
.hero-note{
    align-self:stretch;
    padding-top:10px
}
.hero-note div{
    position:sticky;
    top:112px;
    border-left:1px solid var(--line);
    padding-left:20px
}
.hero-note p{
    max-width:145px;
    font-size:14px;
    line-height:1.7;
    color:var(--muted)
}
.badge{
    display:inline-block;
    padding:6px 12px;
    border:1px solid rgba(23,105,91,.25);
    background:var(--mint);
    color:var(--green);
    font:500 10px var(--mono);
    letter-spacing:.16em;
    text-transform:uppercase
}
.hero-copy{
    max-width:930px
}
.verse-mark{
    margin:28px 0;
    display:flex;
    align-items:flex-end;
    gap:7px
}
.verse-mark i{
    display:block;
    height:1px;
    background:var(--green);
    transform-origin:left center
}
.verse-mark i:nth-child(1){
    width:74px;
    transform:rotate(14deg) translateY(5px)
}
.verse-mark i:nth-child(2){
    width:48px;
    transform:rotate(-22deg) translateY(-1px)
}
.verse-mark span{
    margin-left:12px;
    font:10px var(--mono);
    letter-spacing:.15em;
    text-transform:uppercase;
    color:rgba(23,105,91,.8)
}
.hero h1{
    font:normal clamp(3.4rem,8vw,7.25rem)/.86 var(--serif);
    letter-spacing:-.065em;
    margin:0;
    max-width:1000px
}
.hero h1 em{
    color:var(--green);
    font-style:italic
}
.lead{
    margin:32px 0 0;
    max-width:720px;
    font-size:20px;
    line-height:1.6;
    color:#304044
}
.hero-footer{
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:38px;
    flex-wrap:wrap
}
.text-action{
    border:0;
    background:transparent;
    color:var(--green);
    font-weight:700;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0
}
.text-action b{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border:1px solid rgba(23,105,91,.3);
    font-size:18px;
    font-weight:400
}
.base-note{
    font:10px var(--mono);
    letter-spacing:.15em;
    text-transform:uppercase;
    color:rgba(27,41,44,.5)
}
.metrics{
    background:var(--ink);
    color:var(--paper)
}
.metrics .shell{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding-top:0;
    padding-bottom:0
}
.metric{
    min-height:150px;
    padding:36px 28px;
    border-left:1px solid rgba(255,255,255,.1)
}
.metric:first-child{
    padding-left:0;
    border-left:0
}
.metric strong{
    font:normal 42px/1 var(--serif);
    letter-spacing:-.05em
}
.metric strong small{
    font:14px var(--sans);
    letter-spacing:0;
    font-weight:400;
    color:#b7d6c8
}
.metric p{
    margin:11px 0 0;
    max-width:220px;
    font-size:13px;
    line-height:1.55;
    color:rgba(255,255,255,.58)
}
.section{
    border-bottom:1px solid var(--line);
    padding:96px 0
}
.split{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:40px
}
.section-label{
    font:10px var(--mono);
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--green)
}
.timeline-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:40px
}
.timeline-head .muted{
    max-width:300px;
    font-size:14px
}
.timeline-scroll{
    overflow-x:auto;
    padding:50px 0 12px
}
.timeline{
    min-width:880px;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
    border-top:1px solid rgba(27,41,44,.2);
    position:relative;
    padding-top:28px
}
.timeline:before{
    content:'';
    position:absolute;
    left:0;
    top:-1px;
    width:100%;
    height:1px;
    background:linear-gradient(90deg,var(--green),#296f76,#a84e38)
}
.phase-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    outline:4px solid var(--paper);
    margin-bottom:20px
}
.timeline .mini{
    font-size:11px;
    color:var(--green)
}
.timeline h3{
    font:normal 28px/1 var(--serif);
    letter-spacing:-.04em;
    margin:8px 0 0
}
.timeline p{
    font-size:13px;
    line-height:1.65;
    color:var(--muted);
    margin-top:12px
}
.domain-band{
    position:relative;
    overflow:hidden;
    padding:80px 0;
    background:var(--mint)
}
.domain-band>img{
    position:absolute;
    inset:0 0 0 auto;
    width:50%;
    height:100%;
    object-fit:cover;
    opacity:.34;
    mix-blend-mode:multiply
}
.domain-content{
    position:relative
}
.domain-intro{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:48px;
    margin:18px 0 40px
}
.domain-intro h2{
    font:normal 52px/.95 var(--serif);
    letter-spacing:-.055em;
    margin:0
}
.domain-intro p{
    font-size:16px;
    line-height:1.75;
    color:rgba(27,41,44,.7);
    max-width:520px
}
.three-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line)
}
.three-grid article{
    min-height:220px;
    padding:28px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:rgba(243,240,232,.82);
    backdrop-filter:blur(4px)
}
.three-grid h3{
    font:normal 34px/1 var(--serif);
    letter-spacing:-.04em;
    margin:35px 0 0
}
.three-grid p{
    font-size:14px;
    line-height:1.65;
    color:var(--muted);
    margin-top:13px
}
.eap-head{
    display:grid;
    grid-template-columns:1fr 300px;
    gap:32px;
    align-items:end
}
.search-wrap{
    position:relative
}
.search-wrap input{
    width:100%;
    height:44px;
    background:var(--paper-2);
    border:1px solid rgba(27,41,44,.2);
    padding:0 14px 0 39px;
    color:var(--ink);
    outline:none
}
.search-wrap input:focus{
    border-color:var(--green)
}
.search-wrap span{
    position:absolute;
    left:13px;
    top:12px;
    color:var(--green)
}
.filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:40px
}
.filter{
    border:1px solid rgba(27,41,44,.2);
    background:transparent;
    color:rgba(27,41,44,.65);
    padding:9px 12px;
    font:10px var(--mono);
    letter-spacing:.12em;
    text-transform:uppercase;
    transition:all .18s var(--ease)
}
.filter:hover{
    border-color:var(--green);
    color:var(--green)
}
.filter.active{
    background:var(--green);
    border-color:var(--green);
    color:white
}
.domain-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
    margin-top:32px
}
.domain-card{
    position:relative;
    min-height:250px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--paper-2);
    padding:26px;
    text-align:left;
    transition:background .18s var(--ease)
}
.domain-card:hover,.domain-card.active{
    background:var(--mint)
}
.domain-card .mini{
    font-size:11px;
    color:var(--green)
}
.domain-card h3{
    font:normal 32px/.95 var(--serif);
    letter-spacing:-.05em;
    margin:34px 0 0;
    max-width:260px
}
.domain-card .arrow{
    position:absolute;
    right:25px;
    top:72px;
    color:var(--green);
    font-size:20px;
    transition:transform .18s var(--ease)
}
.domain-card:hover .arrow{
    transform:translate(4px,-4px)
}
.domain-card p{
    font-size:15px;
    line-height:1.6;
    color:rgba(27,41,44,.7);
    margin:15px 0
}
.signal{
    margin-top:19px;
    padding-left:11px;
    border-left:2px solid var(--green);
    font:11px var(--mono);
    letter-spacing:.11em;
    text-transform:uppercase;
    color:rgba(27,41,44,.7)
}
.signal small{
    display:block;
    margin-top:5px;
    color:rgba(27,41,44,.5);
    font-size:10px
}
.package-list{
    border-top:1px solid rgba(27,41,44,.2);
    margin-top:40px
}
.package{
    border-bottom:1px solid var(--line)
}
.package-toggle{
    border:0;
    background:transparent;
    width:100%;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:24px;
    text-align:left;
    padding:24px 0;
    color:var(--ink)
}
.package-code{
    padding-top:5px;
    font:500 11px var(--mono);
    letter-spacing:.12em;
    color:var(--green)
}
.package h3{
    font:normal 31px/.95 var(--serif);
    letter-spacing:-.04em;
    margin:0
}
.package .summary{
    display:block;
    margin-top:9px;
    max-width:660px;
    font-size:14px;
    line-height:1.65;
    color:var(--muted)
}
.chevron{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border:1px solid var(--line);
    color:var(--green);
    font-size:16px;
    transition:transform .2s var(--ease)
}
.package.open .chevron{
    transform:rotate(90deg)
}
.package-detail{
    display:none;
    grid-template-columns:1.4fr .8fr;
    gap:40px;
    border-top:1px dashed var(--line);
    background:#ece9df;
    padding:28px 32px
}
.package.open .package-detail{
    display:grid
}
.detail-label{
    font:11px var(--mono);
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--green)
}
.deliverables{
    padding:0;
    margin:16px 0 0;
    list-style:none
}
.deliverables li{
    position:relative;
    padding-left:24px;
    margin:11px 0;
    font-size:14px;
    line-height:1.6;
    color:rgba(27,41,44,.75)
}
.deliverables li:before{
    content:'✓';
    position:absolute;
    left:0;
    color:var(--green);
    font-weight:700
}
.detail-side{
    border-left:1px solid var(--line);
    padding-left:24px
}
.detail-side p{
    font-size:15px;
    line-height:1.6;
    color:rgba(27,41,44,.78);
    margin:12px 0
}
.detail-side strong{
    display:block;
    margin-top:8px;
    font:normal 28px/1 var(--serif);
    letter-spacing:-.04em
}
.empty{
    padding:48px;
    text-align:center;
    color:var(--muted)
}
.architecture{
    position:relative;
    overflow:hidden;
    background:var(--ink);
    color:var(--paper);
    padding:96px 0
}
.architecture>img{
    position:absolute;
    right:0;
    bottom:0;
    width:50%;
    height:100%;
    object-fit:cover;
    opacity:.2;
    mix-blend-mode:screen
}
.architecture-content{
    position:relative
}
.architecture-head{
    display:grid;
    grid-template-columns:1fr .8fr;
    gap:48px
}
.architecture h2{
    font:normal 52px/.95 var(--serif);
    letter-spacing:-.055em;
    margin:15px 0 0
}
.architecture .muted{
    color:rgba(255,255,255,.65);
    align-self:end
}
.stack-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid rgba(255,255,255,.15);
    border-left:1px solid rgba(255,255,255,.15);
    margin-top:48px
}
.stack-item{
    min-height:150px;
    padding:22px;
    border-right:1px solid rgba(255,255,255,.15);
    border-bottom:1px solid rgba(255,255,255,.15);
    background:rgba(27,41,44,.65)
}
.stack-item .mini{
    font-size:10px;
    color:#b7d6c8
}
.stack-item h3{
    font:normal 28px/1 var(--serif);
    letter-spacing:-.04em;
    margin:35px 0 0
}
.stack-item p{
    margin:8px 0 0;
    font-size:13px;
    color:rgba(255,255,255,.55)
}
.trust-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:38px
}
.trust-item{
    display:flex;
    gap:14px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.15)
}
.trust-icon{
    font-size:20px;
    color:#b7d6c8
}
.trust-item h3{
    margin:0;
    font-size:15px
}
.trust-item p{
    font-size:14px;
    line-height:1.6;
    color:rgba(255,255,255,.6);
    margin:8px 0 0
}
.governance{
    position:relative;
    overflow:hidden;
    padding:96px 0;
    border-bottom:1px solid var(--line)
}
.governance>img{
    position:absolute;
    left:0;
    bottom:0;
    width:38%;
    height:100%;
    object-fit:cover;
    opacity:.25;
    mix-blend-mode:multiply
}
.governance-content{
    position:relative;
    display:grid;
    grid-template-columns:1fr .75fr;
    gap:50px
}
.investiment{
    position:relative;
    overflow:hidden;
    padding:96px 0;
    border-bottom:1px solid var(--line)
}
.investiment>img{
    position:absolute;
    left:0;
    bottom:0;
    width:38%;
    height:100%;
    object-fit:cover;
    opacity:.25;
    mix-blend-mode:multiply
}
.investiment-content{
    position:relative;
    display:grid;
    grid-template-columns:1fr .75fr;
    gap:50px
}
.investiment-head{
    display:grid;
    grid-template-columns:1fr .8fr;
    gap:48px
}
.investiment h2{
    font:normal 52px/.95 var(--serif);
    letter-spacing:-.055em;
    margin:15px 0 0
}
.investiment .muted{
    color:rgba(255,255,255,.65);
    align-self:end
}

.milestones{
    margin-top:40px;
    border-top:1px solid rgba(27,41,44,.2)
}
.milestone{
    display:grid;
    grid-template-columns:50px 1fr;
    gap:20px;
    padding:20px 0;
    border-bottom:1px solid var(--line)
}
.milestone b{
    font:500 12px var(--mono);
    letter-spacing:.14em;
    color:var(--green)
}
.milestone h3{
    font:normal 28px/1 var(--serif);
    letter-spacing:-.04em;
    margin:0
}
.milestone p{
    font-size:14px;
    line-height:1.6;
    color:var(--muted);
    margin:5px 0 0
}
.scope-note{
    border:1px solid var(--line);
    background:var(--mint);
    padding:28px;
    align-self:start;
    margin-top:40px
}
.scope-note h3{
    font:normal 42px/.95 var(--serif);
    letter-spacing:-.055em;
    margin:18px 0
}
.scope-note p{
    font-size:14px;
    line-height:1.75;
    color:rgba(27,41,44,.7)
}
.scope-estimate{
    border-top:1px solid var(--line);
    padding-top:18px;
    margin-top:22px
}
.scope-estimate span{
    font:10px var(--mono);
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(27,41,44,.55)
}
.scope-estimate div{
    margin-top:10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px
}
.scope-estimate strong{
    font:normal 28px var(--serif);
    letter-spacing:-.04em
}
.cta{
    background:var(--green);
    color:white;
    padding:64px 0
}
.cta .shell{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:40px
}
.cta-icon{
    color:#b7d6c8;
    font-size:22px
}
.cta-row{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:40px
}
.cta h2{
    font:normal 52px/.95 var(--serif);
    letter-spacing:-.055em;
    max-width:780px;
    margin:12px 0 0
}
.cta .button{
    border-color:rgba(255,255,255,.4);
    color:white;
    white-space:nowrap
}
.cta .button:hover{
    background:white;
    color:var(--green)
}
.footer{
    background:var(--petrol);
    color:#dceedf;
    padding:22px 0
}
.footer .shell{
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:12px
}
.footer .mini{
    font-size:10px;
    color:#b7d6c8
}
.reveal{
    animation:reveal .45s var(--ease) both
}
@keyframes reveal{
    from{
        opacity:0;
        transform:translateY(12px)
    }
    to{
        opacity:1;
        transform:translateY(0)
    }
}
 @media(min-width:1450px){
    .chapter-spine{
        display:block;
        position:fixed;
        left:20px;
        top:50%;
        transform:translateY(-50%);
        z-index:40;
        width:160px
    }
    .chapter-top{
        display:flex;
        align-items:center;
        gap:8px;
        color:var(--green);
        font:10px var(--mono);
        letter-spacing:.17em;
        text-transform:uppercase
    }
    .chapter-dot{
        width:10px;
        height:10px;
        border-radius:50%;
        background:var(--green);
        outline:4px solid var(--paper)
    }
    .chapter-line{
        height:40px;
        border-left:1px dashed rgba(23,105,91,.45);
        margin-left:5px
    }
    .chapter-links{
        border-left:1px solid var(--line);
        padding-left:15px
    }
    .chapter-links button{
        display:grid;
        grid-template-columns:24px 1fr;
        gap:7px;
        width:100%;
        border:0;
        background:transparent;
        padding:6px 0;
        text-align:left;
        font:10px var(--mono);
        letter-spacing:.1em;
        text-transform:uppercase;
        color:rgba(27,41,44,.6)
    }
    .chapter-links button span:first-child{
        color:var(--green)
    }
    .chapter-progress{
        display:flex;
        margin:18px 0 0 5px;
        border-left:1px solid var(--green);
        padding-left:15px;
        font:10px var(--mono);
        letter-spacing:.1em;
        text-transform:uppercase;
        color:rgba(27,41,44,.6)
    }
    .chapter-progress b{
        margin-left:8px;
        color:var(--green);
        font-weight:500
    }
}
 @media(max-width:980px){
    .shell{
        padding-left:24px;
        padding-right:24px
    }
    .nav{
        display:none
    }
    .hero-inner,.split,.cta .shell{
        grid-template-columns:1fr
    }
    .hero{
        min-height:610px
    }
    .hero-inner{
        min-height:610px;
        padding:74px 0 60px
    }
    .hero-note,.split>.section-label{
        display:none
    }
    .hero-visual{
        width:70%;
        opacity:.65
    }
    .metrics .shell{
        grid-template-columns:repeat(2,1fr)
    }
    .metric{
        padding:28px;
        border-bottom:1px solid rgba(255,255,255,.1)
    }
    .metric:nth-child(odd){
        padding-left:0;
        border-left:0
    }
    .timeline-head,.architecture-head,.governance-content,.domain-intro{
        grid-template-columns:1fr
    }
    .domain-band>img{
        width:70%;
        opacity:.22
    }
    .eap-head{
        grid-template-columns:1fr
    }
    .search-wrap{
        max-width:400px
    }
    .domain-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .architecture h2,.domain-intro h2,.cta h2{
        font-size:46px
    }
    .governance-content{
        gap:20px
    }
    .cta-row{
        align-items:flex-start;
        flex-direction:column
    }
    .topbar .actions{
        display:none
    }
    .menu-button{
        display:block
    }
}
 @media(max-width:640px){
    .shell{
        padding-left:18px;
        padding-right:18px
    }
    .topbar{
        height:66px
    }
    .brand img{
        width:37px;
        height:37px
    }
    .brand-name{
        font-size:20px
    }
    .hero{
        min-height:620px
    }
    .hero-inner{
        min-height:620px;
        padding:65px 0 48px
    }
    .hero-visual{
        width:100%;
        opacity:.28
    }
    .hero h1{
        font-size:56px
    }
    .lead{
        font-size:17px;
        line-height:1.65
    }
    .base-note{
        font-size:8px
    }
    .metrics .shell{
        grid-template-columns:1fr
    }
    .metric,.metric:first-child{
        padding:25px 0;
        border-left:0
    }
    .section,.architecture,.governance{
        padding:68px 0
    }
    .timeline-head{
        gap:16px
    }
    .domain-intro{
        gap:20px
    }
    .domain-intro h2,.architecture h2,.cta h2{
        font-size:40px
    }
    .three-grid,.domain-grid,.stack-grid,.trust-grid{
        grid-template-columns:1fr
    }
    .three-grid article{
        min-height:170px
    }
    .domain-card{
        min-height:220px
    }
    .package-toggle{
        gap:12px
    }
    .package h3{
        font-size:26px
    }
    .package-detail{
        grid-template-columns:1fr;
        padding:24px 18px;
        gap:26px
    }
    .detail-side{
        border-left:0;
        border-top:1px solid var(--line);
        padding:20px 0 0
    }
    .architecture>img{
        width:100%;
        opacity:.1
    }
    .governance>img{
        display:none
    }
    .footer .shell{
        flex-direction:column
    }
    .button{
        padding:9px 12px
    }
    .hero-footer{
        gap:14px
    }
    .cta{
        padding:52px 0
    }
}
 @media(prefers-reduced-motion:reduce){
    *,*:before,*:after{
        animation-duration:.01ms!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important
    }
}
 @media print{
    .topbar,.chapter-spine,.button,.menu-button{
        display:none!important
    }
    body{
        background:white
    }
    .section,.architecture,.governance{
        break-inside:avoid
    }
    .architecture{
        color:black;
        background:white
    }
    .architecture>img{
        display:none
    }
}