/* ===== VibeCheck home · Brand Guidelines v1.0 =====
   Site ground is Yellow (light) or Ink (dark). White cards, Ink type, flat colour, hard shadows.
   The gilded frame belongs to the full report only, so the home page has none.
   Spacing unit 24px (--u), section rhythm 48px (--u2). Nothing is removed, only restyled. */
:root,:root[data-theme="light"]{
  color-scheme:light;
  --ground:#FFE800;--paper:#FFFFFF;--ink:#0B0B10;--soft:#4A4A55;
  --dot:rgba(11,11,16,.10);--on-fill:#0B0B10;
  --u:24px;--u2:48px;--sh:6px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0B0B10;--paper:#16161D;--ink:#FFFFFF;--soft:#C9C9D6;
  --dot:rgba(255,255,255,.08);--on-fill:#0B0B10;
}
html,body{background:var(--ground)}

/* ---- top bar: the real logo lockup ---- */
.bar{background:var(--ground)}
.bar .wm.vc-logo{display:inline-flex;align-items:center;gap:8px;font-size:1.5rem;line-height:1}
.vc-logo svg{width:1.45em;height:1.45em;flex:none;overflow:visible}
.vc-logo .v{color:var(--ink);padding-right:.1em}
.vc-logo .c{background:#0B0B10;color:#FFE800;padding:.06em .16em 0;box-shadow:.09em .09em 0 #D6007A}
:root[data-theme="dark"] .vc-logo .c{background:#FFE800;color:#0B0B10}

/* ---- frames become flat white cards with a hard shadow ---- */
.framed{border:4px solid #0B0B10!important;border-image:none!important;background:#FFFFFF!important;background-image:none!important;
  filter:none!important;box-shadow:10px 10px 0 #0B0B10;color:#0B0B10;--ink:#0B0B10;--soft:#4A4A55}
.framed::after{content:none!important;display:none!important}
:root[data-theme="dark"] .framed{box-shadow:10px 10px 0 #FF48B0}
.hero-frame,.mw-frame{width:min(60rem,calc(100vw - 2rem))}
.hf-in{padding:var(--u2) var(--u)}
.hf-in h1{text-shadow:none}
.hf-in .hero-eyebrow,.mw-frame .eyebrow{color:#4A4A55}
.mw-frame{padding:var(--u2) var(--u)}
@media (max-width:640px){
  .hero-frame,.mw-frame{width:calc(100vw - 32px)}
  .hf-in{padding:var(--u) 16px}
  .mw-frame,.mw-frame.framed{padding:var(--u) 12px;border:4px solid #0B0B10!important;box-shadow:6px 6px 0 #0B0B10}
  .mw-frame>*{margin-left:0;margin-right:0}
}

/* ---- gilded signs and glows in the midway go flat ---- */
.midway .wrap>.eyebrow,.midway .wrap>h2,.midway .wrap>.lead{border:0;border-radius:0;background:none;box-shadow:none;text-shadow:none}
.midway .wrap::before,.midway .wrap::after{content:none}
.midway h2{text-shadow:none}
.pav-show .ps-tag::before,.pav-show .ps-tag::after{content:none}

/* ---- no green on buttons or chips: the sixth pavilion uses the ink block ---- */
.pavs li[data-pav="6"],.pav-show[data-pav="6"]{--tile:#0B0B10;--tile-ink:#FFE800}
.pavs li[data-pav="6"] button,.pav-show[data-pav="6"]{color:#FFE800}

/* ---- highlight bar: on a yellow ground the bar is ink with yellow type ---- */
:root:not([data-theme="dark"]) .hl{background-image:linear-gradient(#0B0B10,#0B0B10);color:#FFE800}
:root:not([data-theme="dark"]) html.anim .hl.on,html.anim:not([data-theme="dark"]) .hl.on{color:#FFE800}
:root:not([data-theme="dark"]) .mw-frame .hl{background:#FFE800;color:#0B0B10}

/* ---- buttons: ink face, yellow type, hard shadow; equal space above and below ---- */
.hero-cta{background:#0B0B10;color:#FFE800;border-color:#0B0B10;box-shadow:var(--sh) var(--sh) 0 #FF48B0;margin-bottom:var(--sh)}
.hero-cta:hover{box-shadow:3px 3px 0 #FF48B0}
:root[data-theme="dark"] .hero-cta{background:#FFE800;color:#0B0B10;border-color:#FFE800}
.hf-in .sub{margin:0 auto var(--u)}
.hf-in .maker{margin:var(--u) 0 0}

/* ---- every main button: ink face and yellow type on the yellow ground ---- */
:root:not([data-theme="dark"]) .btn:not(.ghost):not(.pink){background:#0B0B10;color:#FFE800;border-color:#0B0B10;box-shadow:5px 5px 0 #FF48B0}
:root:not([data-theme="dark"]) .btn:not(.ghost):not(.pink):hover{box-shadow:3px 3px 0 #FF48B0}
:root[data-theme="dark"] .btn:not(.ghost):not(.pink){box-shadow:5px 5px 0 #FF48B0}
.mw-frame .hl,.mw-frame .hl.on,html.anim .mw-frame .hl.on{background:#FFE800!important;color:#0B0B10!important}

/* ---- phones: nothing wider than the screen ---- */
html{overflow-x:clip}
@media (max-width:420px){#themeWord{display:none}.bar .themer{padding:.5rem .6rem}}

/* ---- section buttons: one unit above, one unit below (shadow counted) ---- */
.sectioncta,#pricing .sectioncta,#example .sectioncta{margin-top:var(--u);padding-bottom:var(--u);display:flex;flex-direction:column;align-items:center;gap:var(--u)}
.sectioncta .btn{margin-bottom:5px}
#pricing .sectioncta{margin-top:calc(var(--u) + 9px)} /* the pricing tickets carry an 8px shadow and a slight tilt */
.sectioncta .under{margin:0}
.sticky{padding:12px 16px calc(12px + 3px + env(safe-area-inset-bottom,0px))}
.sticky .btn{box-shadow:3px 3px 0 #FF48B0}