/* Scoped content. Colors follow the actual shared light/dark theme. */
#vena-rollout{width:100%;min-width:0;padding-bottom:3rem;color:var(--v-text);overflow-wrap:anywhere}
#vena-rollout *{box-sizing:border-box;min-width:0}
#vena-rollout [hidden]{display:none!important}
#vena-rollout h1{font-size:clamp(2rem,5vw,3rem);line-height:1.15;margin-block:.7rem 1rem}
#vena-rollout h2{font-size:clamp(1.35rem,3vw,1.8rem);line-height:1.3;margin-block:1.5rem .8rem}
#vena-rollout h3{font-size:1.05rem;margin-block:0 .4rem}
#vena-rollout p{font-size:1rem;line-height:1.65;max-width:75ch}
#vena-rollout .vr-eyebrow{font-size:.8rem;letter-spacing:.1em;font-weight:700;color:var(--v-info-text)}
#vena-rollout .vr-small,#vena-rollout .vr-note{font-size:.9rem;color:var(--v-muted)}
#vena-rollout .vr-hero{padding-block:1rem 0}
#vena-rollout .vr-hero .vr-intro{margin-block-end:0}
#vena-rollout .vr-hero-visual{margin:0;max-inline-size:22rem}
#vena-rollout .vr-hero-visual img{display:block;inline-size:100%;block-size:auto;object-fit:contain}
@media (width > 62rem){
  #vena-rollout .vr-hero > .hero-copy{margin-block-end:0}
  #vena-rollout .vr-hero-visual{align-self:stretch;contain:size;display:grid;grid-template-rows:minmax(0,1fr);max-inline-size:none}
  #vena-rollout .vr-hero-visual img{block-size:100%;min-block-size:0}
}
#vena-rollout .vr-selects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-block:1.8rem}
#vena-rollout label{display:block;font-size:.95rem;line-height:1.5}
#vena-rollout select,#vena-rollout input:not([type=checkbox]){display:block;width:100%;min-height:46px;margin-top:.5rem;padding:.7rem;border:1px solid var(--v-line-strong);border-radius:var(--v-radius-md);background:var(--v-surface-input);color:var(--v-text);font:inherit}
#vena-rollout .vr-feature{padding:clamp(1rem,3vw,2rem);border:1px solid var(--v-line-strong);border-radius:var(--v-radius-lg);background:var(--v-info-bg)}
#vena-rollout .vr-status{display:inline-block;font-size:.95rem;font-weight:650}
#vena-rollout .vr-status::before{content:"";display:inline-block;width:.7rem;height:.7rem;margin-inline-end:.5rem;border-radius:50%;background:var(--v-muted)}
#vena-rollout .vr-status[data-stage="plan"]::before{background:#ff2638}
#vena-rollout .vr-status[data-stage="oficial"]::before{background:#ff8000}
#vena-rollout .vr-status[data-stage="user"]::before{background:#00d477}
#vena-rollout button:not(.button){display:inline-flex;align-items:center;justify-content:center;min-height:46px;max-width:100%;padding:.8rem 1rem;font:inherit;font-weight:650;line-height:1.4;white-space:normal;text-align:center;text-decoration:none;cursor:pointer;border:1px solid var(--v-line-strong);border-radius:var(--v-radius-md)}
#vena-rollout .vr-primary{background:var(--v-rollout-accent);color:var(--v-rollout-on-accent);margin-block:.5rem}
#vena-rollout .vr-upcoming{background:var(--v-surface);color:var(--v-text)}
#vena-rollout button:disabled{opacity:.55;cursor:default}
#vena-rollout :focus-visible{outline:3px solid var(--v-info-text);outline-offset:3px}
#vena-rollout .vr-steps{list-style:none;padding:0;display:grid;gap:1.4rem}
#vena-rollout .vr-steps li{display:flex;gap:1rem;align-items:flex-start}
#vena-rollout .vr-steps p{margin:0;color:var(--v-muted)}
#vena-rollout .vr-dot{display:flex;align-items:center;justify-content:center;flex:none;width:2rem;height:2rem;border:1px solid var(--v-line-strong);border-radius:50%;font-weight:700;background:var(--v-surface)}
#vena-rollout .vr-signup{padding:1.1rem;border:1px solid var(--v-line);border-radius:var(--v-radius-lg);margin-block:1.8rem;background:var(--v-surface);scroll-margin-top:6.5rem}
#vena-rollout .vr-signup summary{min-height:44px;align-content:center;font-weight:650;cursor:pointer}
#vena-rollout form>label{margin-block:1rem}
#vena-rollout .vr-consent{display:flex;gap:.7rem;align-items:flex-start;min-height:44px}
#vena-rollout .vr-consent input{width:1.25rem;height:1.25rem;flex:none;margin-top:.2rem;accent-color:var(--v-info-text)}
#vena-rollout .vr-feedback{overflow-wrap:anywhere;font-size:.95rem;white-space:pre-line}
#vena-rollout .vr-feedback:empty{display:none}
#vena-rollout .vr-error{padding:1rem;border:1px solid var(--v-line-strong);background:var(--v-surface);color:var(--v-warning-text);border-radius:var(--v-radius-md)}
#vena-rollout .vr-share{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--v-line)}
#vena-rollout #vr-share{width:100%;margin-block-start:.35rem;text-align:center}
#vena-rollout .vr-upcoming{display:flex;width:100%;justify-content:space-between;text-align:start;margin-bottom:.5rem}
@media(max-width:520px){#vena-rollout .vr-selects{grid-template-columns:1fr}#vena-rollout .vr-primary,#vena-rollout .actions .button{width:100%}}

/* Rollout's plain content sections sit one wrapper below main. Apply the same
   public section rhythm here; keep the status card and signup controls intact. */
html[data-v-theme] body:has(> .v-topbar) > main > #vena-rollout > section:not([class]),
html[data-v-theme] body:has(> .v-topbar) > main > #vena-rollout > section.vr-share {
  padding:1.75rem 0;
}

/* These two editorial sections use the entire shared content container. */
html[data-v-theme] body:has(> .v-topbar) > main > #vena-rollout > section.vr-wide-content {
  width:100%;max-width:none;padding:1.75rem 0;
}
html[data-v-theme] body:has(> .v-topbar) > main > #vena-rollout > section.vr-wide-content > :is(h2,p,.actions),
html[data-v-theme] body:has(> .v-topbar) > main > #vena-rollout > section.vr-wide-content .button {
  width:100%;max-width:none;
}
#vena-rollout > section.vr-wide-content .actions {display:grid;grid-template-columns:minmax(0,1fr);}