/* Vemtri brand layer for the website (Phase 2). Loaded last, after the site's own stylesheets.
   It replaces the old navy, royal and lime values with the approved brand. Built by brand/migrate/apply_brand.py. */

/* Logo: three planes. Midnight and Vemtri Green, and the overlap where one shows through the other. */
:root{--logo-left:var(--color-neutral-950);--logo-right:var(--color-green-400);--logo-overlap:var(--color-green-700)}
:root[data-theme="dark"]{--logo-left:var(--color-neutral-50);--logo-overlap:var(--color-green-200)}
/* The wordmark sits on the baseline of the V. Baseline alignment pins the pair to the top of the 44px link,
   so the top padding centres the mark (1em tall) in the link, and with it in the header. */
.logo{align-items:baseline;gap:.25em;font-weight:700;letter-spacing:-.02em;padding-top:calc((44px - 1em) / 2)}
.mnav-bar .logo{align-items:baseline;gap:.25em}
.logo-mark{width:1.125em;height:1em;flex:none}
/* Footer: the same lockup, a little smaller than the header's. */
.foot-logo{display:inline-flex;align-items:baseline;gap:.25em;font-weight:700;letter-spacing:-.02em;font-size:1.25rem;line-height:1;margin-bottom:.5rem}
/* html + :root-level selectors outrank the old [data-theme="dark"] .logo-mark .v-l rule in styles.css. */
html :is(.logo,.foot-logo) .logo-mark .v-l{fill:var(--logo-left)}
html :is(.logo,.foot-logo) .logo-mark .v-r{fill:var(--logo-right);opacity:1}
html :is(.logo,.foot-logo) .logo-mark .v-o{fill:var(--logo-overlap)}
.logo.is-egg .logo-mark path{animation:none}
.logo.is-egg .logo-mark{animation:tri-nod var(--dur-slow) var(--ease-spring) 3 alternate}

/* Eyebrows were set in a mono font; in Satoshi they need a touch more weight. */
.eyebrow{font-weight:600}

/* Buttons: the brand's 8px corners instead of pills. Status pills stay round. */
.btn,.theme-toggle{border-radius:var(--radius-sm)}
/* The plan tag ("Demo ready", "Included") stretched the full card width in v11; it's a tag, so it fits its text. */
.plan .price{width:fit-content}

/* Dark bands (the agent section and the film): neutral greys in place of the old blue-greys. */
.tile-hero small,.agent p,.agent ul,.agent .eyebrow,#film .eyebrow,#film .promo-film figcaption{color:var(--color-neutral-300)}
.checks li{color:var(--color-neutral-200)}
/* The light dashboard drawn inside the dark agent band keeps light values in both themes. */
.agent .dash{--ink-3:var(--color-neutral-600);--line:var(--color-neutral-200);--bg:var(--color-neutral-50);--warn:var(--color-amber-800);
  --surface-2:var(--color-neutral-100);--accent-soft:var(--color-green-50);--accent:var(--color-green-700);--ink-2:var(--color-neutral-700)}
.agent .dash p{color:var(--color-neutral-700)}

/* Text links are Medium (500) so they read as links, not body copy (Rohit, 26 Oct). The mobile menu is already 500. */
p a:not(.btn),.note a,.source a,footer a,.nav a,.skip{font-weight:500}
/* The hero note is a flex row, so its link shrank to two short lines ("See / pricing", already so in v11). Keep it on one line. */
.hero .note a{flex:none}
/* Badges and pills are Medium too (Rohit, 26 Oct), as the Figma Badge is. */
.pill,.placeholder-tag{font-weight:500}

/* Chat: Vemmi sits on a Midnight tile, so the green roof keeps its contrast on light pages. The rounded square is v11's shape (Rohit: a circle looks too constrained). */
.vm-launcher{background:var(--color-neutral-950);box-shadow:0 1px 2px rgb(11 18 32/.08),0 14px 34px -12px rgb(11 18 32/.35)}
body:has(.vm-panel.is-open)::after{background:rgb(11 18 32/.38)}