.vh-page{
overflow-x:clip;
}
.vh-page [hidden]{
display:none!important;
}
.vh-hero{
display:block;
}
.vh-hero .c-kicker{
margin-bottom:var(--kicker-gap);
}
.vh-hero h1{
max-width:var(--width-read);
margin-inline:auto;
font-size:clamp(2.25rem,3.6vw,3.2rem);
line-height:var(--leading-display);
}
.vh-hero .c-lead{
max-width:var(--width-read);
margin-inline:auto;
margin-top:var(--space-4);
}
.vh-hero .c-actions{
justify-content:center;
margin-top:var(--action-gap);
margin-bottom:var(--action-follow);
}
.vh-split{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--space-8);
align-items:start;
}
.vh-split>*,
.vh-storage>*,
.vh-memory-grid>*,
.vh-close>*{
min-width:0;
}
.vh-copy{
display:flex;
flex-direction:column;
gap:var(--space-3);
min-width:0;
overflow-wrap:break-word;
}
.vh-copy h2{
margin-bottom:var(--space-2);
}
.vh-copy code{
overflow-wrap:anywhere;
}
.vh-points{
display:grid;
gap:var(--space-3);
margin:0;
padding-inline-start:var(--space-4);
}
.vh-points li{
min-width:0;
padding-inline-start:var(--space-1);
overflow-wrap:break-word;
}
.vh-inspection{
height:auto;
border-radius:var(--r-l);
overflow:hidden;
background:#FFFFFF;
color:#1C1D17;
--muted:#626357;
--line:#E4E4DC;
box-shadow:var(--shadow-card);
}
.vh-inspection__head{
display:flex;
align-items:center;
gap:var(--space-3);
padding:var(--space-4) var(--space-5);
background:#E8EEF3;
color:#22384A;
font-weight:700;
}
.vh-inspection__head svg{
display:block;
width:var(--space-4);
height:var(--space-4);
}
.vh-inspection__body{
display:grid;
gap:var(--space-4);
padding:var(--space-5);
}
.vh-panel-label{
font-size:var(--text-sm);
font-weight:700;
line-height:var(--leading-control);
}
.vh-flags{
position:relative;
margin:0;
padding:var(--space-4);
background:#F6F6F3;
color:#1C1D17;
border-radius:var(--r-m);
max-width:100%;
overflow-x:auto;
}
.vh-flags code{
white-space:pre;
}
.vh-flags mark{
padding:.2em .4em;
border-radius:var(--r-s);
background:#E6F0EC;
color:#1F4237;
box-decoration-break:clone;
-webkit-box-decoration-break:clone;
}
.vh-keyvals{
display:grid;
gap:var(--space-3);
}
.vh-keyvals>div{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:baseline;
gap:var(--space-2) var(--space-3);
min-width:0;
}
.vh-keyvals dt{
flex:1 0 auto;
min-width:min(100%,4.5rem);
}
.vh-keyvals dd{
flex:0 1 auto;
min-width:0;
margin:0;
overflow-wrap:break-word;
}
.vh-panel-note{
color:#626357;
font-size:var(--text-sm);
}
.vh-inspection figcaption{
padding:0 var(--space-5) var(--space-5);
color:#626357;
}
.vh-inspection figcaption code{
overflow-wrap:anywhere;
}
.vh-purple{
background:#EEE9F2;
color:#3D2E52;
--muted:#3D2E52;
--line:#E4E4DC;
}
.vh-nesting{
display:grid;
gap:var(--space-3);
height:auto;
min-width:0;
}
.vh-nesting__layer{
display:flex;
flex-direction:column;
gap:var(--field-gap);
padding:var(--space-4) var(--space-5);
border-radius:var(--r-l);
background:#FFFFFF;
color:#1C1D17;
--muted:#626357;
--line:#E4E4DC;
}
.vh-nesting__layer strong{
font-size:var(--text-md);
line-height:var(--leading-title);
overflow-wrap:break-word;
}
.vh-nesting__layer p{
color:#626357;
font-size:var(--text-sm);
}
.vh-nesting figcaption{
color:#3D2E52;
}
.vh-section-head{
display:flex;
flex-direction:column;
gap:var(--space-3);
margin-bottom:var(--space-5);
}
.vh-section-head p{
max-width:var(--width-read);
}
.vh-storage{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
align-items:start;
gap:var(--space-8);
}
.vh-drive-sheet{
min-width:0;
height:auto;
}
.vh-bays{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
align-items:stretch;
gap:var(--space-4);
}
.vh-bay{
display:flex;
flex-direction:column;
gap:var(--field-gap);
min-width:0;
padding:var(--space-4);
border-radius:var(--r-l);
background:#E6F0EC;
color:#1F4237;
--muted:#1F4237;
--line:#E4E4DC;
overflow-wrap:break-word;
}
.vh-bay svg{
display:block;
width:var(--space-4);
height:var(--space-4);
}
.vh-bay span{
font-size:var(--text-sm);
}
.vh-bay strong{
font-size:var(--text-md);
}
.vh-bay--optional{
background:#FFFFFF;
color:#626357;
--muted:#626357;
--line:#E4E4DC;
border:1px dashed var(--control-line);
}
.vh-bay__plus{
display:flex;
align-items:center;
justify-content:center;
width:var(--space-4);
height:var(--space-4);
font-size:var(--text-lg);
line-height:1;
}
.vh-drive-sheet figcaption{
margin-top:var(--space-3);
color:#626357;
}
.vh-blue{
background:#E8EEF3;
color:#22384A;
--muted:#22384A;
--line:#E4E4DC;
}
.vh-address-sheet{
height:auto;
overflow:hidden;
border-radius:var(--r-l);
background:#FFFFFF;
color:#1C1D17;
--muted:#626357;
--line:#E4E4DC;
box-shadow:var(--shadow-card);
}
.vh-address-sheet__head{
display:grid;
gap:var(--field-gap);
padding:var(--space-5);
background:#F6F6F3;
color:#1C1D17;
}
.vh-address-sheet__head p{
color:#626357;
font-size:var(--text-sm);
}
.vh-address-rows{
display:grid;
padding-inline:var(--space-5);
}
.vh-address-rows>div{
display:grid;
grid-template-columns:minmax(6rem,.7fr) minmax(0,1fr);
gap:var(--space-3);
padding-block:var(--space-4);
border-bottom:1px solid var(--line);
}
.vh-address-rows dt,
.vh-address-rows dd{
min-width:0;
overflow-wrap:break-word;
}
.vh-address-rows dd{
display:grid;
gap:var(--field-gap);
}
.vh-address-rows dd span{
color:#626357;
}
.vh-address-sheet figcaption{
padding:var(--space-4) var(--space-5) var(--space-5);
color:#626357;
}
.vh-memory-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-4);
align-items:stretch;
}
.vh-memory-card{
align-items:stretch;
}
.vh-memory-card__foot{
margin-top:auto;
}
.vh-memory-card__foot .c-btn{
margin-top:var(--space-3);
}
.vh-budget{
display:grid;
gap:var(--space-3);
margin-top:var(--space-5);
padding:var(--space-5);
border-radius:var(--r-l);
background:#F3E9E4;
color:#5A3324;
--muted:#5A3324;
--line:#E4E4DC;
}
.vh-budget__formula{
font-weight:700;
}
.vh-close{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(12rem,.35fr);
align-items:center;
gap:var(--space-6);
padding:var(--space-7) var(--space-6);
border-radius:var(--r-xl);
background:#1C1D17;
color:#F6F6F3;
--muted:#C4C5B8;
--line:color-mix(in srgb,#F6F6F3 18%,transparent);
}
.vh-close__copy{
display:grid;
gap:var(--space-3);
}
.vh-close__copy p{
color:#C4C5B8;
}
.vh-close__actions{
display:flex;
flex-direction:column;
align-items:stretch;
gap:var(--space-3);
}
.vh-close__secondary{
background:#1C1D17;
color:#F6F6F3;
border-color:color-mix(in srgb,currentColor 45%,transparent);
}
.vh-close__secondary:hover{
background:#3E3F36;
color:#FFFFFF;
}
@media(max-width:64rem){
.vh-split,
.vh-storage{
gap:var(--space-5);
}
}
@media(max-width:48rem){
.vh-split,
.vh-storage,
.vh-memory-grid,
.vh-close{
grid-template-columns:minmax(0,1fr);
}
.vh-split,
.vh-storage{
gap:var(--space-5);
}
.vh-close{
padding:var(--space-5) var(--space-4);
}
.vh-close__actions{
align-items:center;
}
.vh-close__actions .c-btn{
width:100%;
}
}
@media(max-width:42rem){
.vh-hero h1{
font-size:clamp(2rem,8vw,2.5rem);
}
.vh-bays{
grid-template-columns:minmax(0,1fr);
}
.vh-address-rows>div{
grid-template-columns:minmax(0,1fr);
gap:var(--field-gap);
}
.vh-inspection__head,
.vh-inspection__body,
.vh-nesting__layer,
.vh-address-sheet__head,
.vh-budget{
padding:var(--space-4);
}
.vh-address-rows{
padding-inline:var(--space-4);
}
.vh-address-sheet figcaption{
padding:var(--space-4);
}
.vh-inspection figcaption{
padding:0 var(--space-4) var(--space-4);
}
.vh-keyvals>div{
flex-direction:column;
align-items:flex-start;
gap:var(--field-gap);
}
}