/* ============================================================
   VAJGRT LABS — THE SUITE design system (Option 3, picked 2026-10-15)
   One theme for everything on vajgrtlabs.com.
   Warm paper, one suite blue, category dots, uniform product tiles.
   Chrome (.site-header/.site-footer) applies site-wide via partials;
   page-level rules are scoped to body.suite so legacy pages keep
   their own body styling until they are rebuilt onto the system.
   ============================================================ */
:root {
  --vl-paper: #FAFAF8;
  --vl-surface: #FFFFFF;
  --vl-ink: #14181D;
  --vl-ink-2: #2B2F36;
  --vl-body: #4A4F57;
  --vl-muted: #83898F;
  --vl-blue: #2F6FED;
  --vl-blue-dark: #1D4FB8;
  --vl-blue-tint: #EDF2FE;
  --vl-blue-line: #C9D9FB;
  --vl-navy: #0B2A4A;
  --vl-line: #E7E5E0;
  --vl-line-2: #DDDAD3;
  --vl-live-bg: #E4F4EA;
  --vl-live: #177245;
  --vl-dev-bg: #FBF0DA;
  --vl-dev: #96660C;
  --vl-dark-panel: #131722;
  --vl-farm: #3E9B4F;
  --vl-games: #7C5CFF;
  --vl-markets: #D98E1B;
  --vl-addons: #3FA7D6;
  --vl-security: #D64545;
  --vl-radius: 20px;
  --vl-font: "Inter", "Noto Sans", "Segoe UI", Arial, sans-serif;
}

/* ---------- page base (rebuilt pages only) ---------- */
body.suite {
  background: var(--vl-paper);
  color: var(--vl-ink);
  font-family: var(--vl-font);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
body.suite h1, body.suite h2, body.suite h3, body.suite h4 {
  font-family: var(--vl-font);
  color: var(--vl-ink);
}
body.suite a { text-decoration: none; }
.vl-wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 720px) { .vl-wrap { padding: 0 20px; } }

/* ---------- header chrome (every page, via partials) ---------- */
.site-header {
  background: var(--vl-surface);
  border-bottom: 1px solid var(--vl-line);
  font-family: var(--vl-font);
  position: relative;
  z-index: 60;
}
.vl-header-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; gap: 28px; min-height: 66px;
}
.vl-brand {
  display: flex; align-items: center; gap: 11px;
  font-weight: 800; letter-spacing: .1em; font-size: 16px;
  color: var(--vl-ink); text-decoration: none; white-space: nowrap;
}
.vl-brand .vl-crest { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.vl-nav-check { position: absolute; opacity: 0; pointer-events: none; }
.vl-menu-btn {
  display: none; margin-left: auto; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--vl-ink);
  border: 1.5px solid var(--vl-line-2); border-radius: 999px; padding: 8px 16px;
  background: var(--vl-surface); user-select: none;
}
.vl-nav { display: flex; gap: 26px; align-items: center; }
.vl-nav a {
  font-size: 14.5px; font-weight: 600; color: var(--vl-body);
  text-decoration: none; white-space: nowrap;
}
.vl-nav a:hover { color: var(--vl-ink); }
.vl-nav a[aria-current="page"] { color: var(--vl-blue); }
.site-header .header-note {
  margin-left: auto; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; color: var(--vl-muted); white-space: nowrap;
}
.vl-cta {
  background: var(--vl-blue); color: #fff !important; padding: 10px 20px;
  border-radius: 999px; font-weight: 700; font-size: 14.5px;
  text-decoration: none; white-space: nowrap;
}
.vl-cta:hover { background: var(--vl-blue-dark); }
@media (max-width: 1080px) { .site-header .header-note { display: none; } }
@media (max-width: 900px) {
  .vl-header-inner { padding: 0 20px; gap: 16px; flex-wrap: wrap; }
  .vl-menu-btn { display: inline-block; }
  .vl-nav {
    display: none; order: 5; width: 100%; flex-direction: column;
    align-items: stretch; gap: 0; padding: 6px 0 14px;
  }
  .vl-nav a { padding: 11px 2px; border-top: 1px solid var(--vl-line); font-size: 15.5px; }
  .vl-nav-check:checked ~ .vl-nav { display: flex; }
  .vl-cta { margin-left: 0; }
}
@media (max-width: 480px) {
  .vl-brand { font-size: 14.5px; letter-spacing: .07em; }
  .vl-cta { padding: 9px 14px; font-size: 13.5px; }
}

/* Header geometry lock (2026-10-20): the legacy base stylesheet
   (styles.*.css, loaded before this file on rebuilt pages) still carries
   the pre-Suite chrome rule .site-header{display:flex;height:90px;
   padding:0 4%}. Suite re-skinned the header but never reset those, so
   .vl-header-inner shrink-wrapped to content width and centered on every
   page that loads the legacy sheet, while pages without it (/dossiers)
   spanned the full 1280 container — the crest row jumped ~200px between
   tabs. The Suite header is a plain block; the inner row owns the
   geometry (1280 max, 40px gutters), identical on every page. */
.site-header { display: block; height: auto; min-height: 0; padding: 0; }
.inner .site-header, .home .site-header { height: auto; }

/* Header position pin + anchor clearance (2026-10-28): the legacy sheet
   also sets .site-header{position:absolute; top:0; dark gradient}. On a
   fresh load this file wins by load order, but vl-pjax's ensureStyles
   APPENDS a destination page's legacy sheet AFTER suite.css when
   arriving from a page that never loaded it (e.g. the homepage) — the
   legacy rule then won the cascade, the header floated over the page,
   and inner-page hero eyebrows rendered half-buried under it
   (/portfolio/ gap -16px, /about/ -38px, measured). Higher specificity
   (body.suite) makes the Suite header win in ANY load order. The
   scroll-margin gives anchored sections (e.g. /#services) clearance
   below the header when a browser jumps to them. */
body.suite .site-header {
  position: relative; top: auto; left: auto; right: auto;
  display: block; height: auto; min-height: 0; padding: 0;
  background: var(--vl-surface); flex-direction: row;
}
body.suite main section[id], body.suite main div[id] { scroll-margin-top: 84px; }

/* ---------- footer chrome (every page, via partials) ---------- */
.site-footer {
  background: var(--vl-ink); color: #C9CDD2;
  font-family: var(--vl-font); margin-top: 0;
}
.vl-foot-inner { max-width: 1280px; margin: 0 auto; padding: 52px 40px 38px; }
.vl-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.vl-foot-brand {
  display: flex; gap: 11px; align-items: center; font-weight: 800;
  letter-spacing: .12em; color: #fff; text-decoration: none; font-size: 15px;
}
.vl-foot-brand img { width: 36px; height: 36px; border-radius: 50%; }
.vl-foot-tag { font-size: 14px; line-height: 1.6; margin: 15px 0 0; max-width: 300px; color: #9BA1A9; }
.vl-foot-mainlink { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; }
.vl-foot-mainlink:hover { color: var(--vl-blue-line); }
.site-footer h4, body.suite .site-footer h4 { font-size: 12px; letter-spacing: .16em; color: #7C828B; margin: 4px 0 15px; font-family: var(--vl-font); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; font-size: 14px; }
.site-footer li a { color: #C9CDD2; text-decoration: none; }
.site-footer li a:hover { color: #fff; }
.vl-legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid #2A2E35; margin-top: 40px; padding-top: 20px;
  font-size: 12.5px; color: #7C828B;
}
@media (max-width: 900px) { .vl-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .vl-foot-inner { padding: 44px 20px 32px; } }
@media (max-width: 520px) { .vl-foot-grid { grid-template-columns: 1fr; } }

/* ---------- buttons ---------- */
.vl-btn {
  display: inline-block; background: var(--vl-blue); color: #fff;
  padding: 11px 22px; border-radius: 999px; font-weight: 700; font-size: 14.5px;
  border: 0; cursor: pointer; font-family: var(--vl-font);
}
.vl-btn:hover { background: var(--vl-blue-dark); }
.vl-btn.dark { background: var(--vl-ink); }
.vl-btn.dark:hover { background: #000; }
.vl-btn.line { background: var(--vl-surface); color: var(--vl-ink); border: 1.5px solid var(--vl-ink); }
.vl-btn.big { padding: 14px 28px; font-size: 15.5px; }

/* ---------- suite hero (homepage) ---------- */
.vl-hero { text-align: center; padding: 48px 0 4px; }
.vl-hero h1 { font-size: 54px; letter-spacing: -.025em; font-weight: 800; line-height: 1.06; margin: 0; }
.vl-lede { font-size: 19.5px; color: #5A6068; line-height: 1.55; margin: 20px auto 30px; max-width: 640px; }
.vl-note {
  display: inline-flex; gap: 9px; align-items: center; background: var(--vl-blue-tint);
  color: var(--vl-blue-dark); border: 1px solid var(--vl-blue-line);
  font-size: 13.5px; font-weight: 700; padding: 9px 18px; border-radius: 999px; margin-top: 22px;
}
@media (max-width: 720px) {
  .vl-hero { padding: 48px 0 0; }
  .vl-hero h1 { font-size: 38px; }
  .vl-lede { font-size: 17.5px; }
}

/* ---------- page hero (section / catalog pages) ---------- */
.vl-pagehero { padding: 52px 0 6px; }
.vl-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .16em;
  color: var(--vl-blue); margin: 0 0 12px; text-transform: uppercase;
}
.vl-pagehero h1 { font-size: 42px; letter-spacing: -.02em; font-weight: 800; line-height: 1.1; margin: 0; }
.vl-pagehero .vl-lede { margin: 16px 0 0; max-width: 680px; font-size: 18px; }
@media (max-width: 720px) { .vl-pagehero h1 { font-size: 32px; } }

/* ---------- filter chips ---------- */
.vl-chips { display: flex; gap: 10px; justify-content: center; margin: 50px 0 6px; flex-wrap: wrap; }
.vl-chips.left { justify-content: flex-start; margin-top: 34px; }
.vl-chip {
  font-size: 14px; font-weight: 650; padding: 9px 18px; border-radius: 999px;
  border: 1.5px solid var(--vl-line-2); background: var(--vl-surface); color: #3C4149;
  cursor: pointer; font-family: var(--vl-font);
}
.vl-chip i { font-style: normal; width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.vl-chip.on { background: var(--vl-ink); color: #fff; border-color: var(--vl-ink); }

/* ---------- family sections + tiles ---------- */
.vl-fam { padding: 38px 0 4px; }
.vl-fam-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.vl-fam-head .vl-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.vl-fam-head h2 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.vl-fam-head p { color: var(--vl-muted); font-size: 14px; margin: 0; }
.vl-fam-head .vl-fam-link { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--vl-blue); }
.vl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vl-grid > * { min-width: 0; }
@media (max-width: 1020px) { .vl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .vl-grid { grid-template-columns: 1fr; } }

.vl-tile {
  background: var(--vl-surface); border: 1px solid var(--vl-line); border-radius: var(--vl-radius);
  padding: 24px; display: flex; flex-direction: column;
}
.vl-tile:hover { border-color: #C9CBCB; box-shadow: 0 8px 28px rgba(20,24,29,.07); }
.vl-tile .vl-ttop { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.vl-tile .vl-ttop > div { min-width: 0; }
.vl-tile h3 { overflow-wrap: break-word; }
.vl-ticon {
  width: 60px; height: 60px; border-radius: 15px; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 19px; background: var(--vl-ink);
}
.vl-ticon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vl-tile h3 { font-size: 18.5px; font-weight: 750; margin: 2px 0 0; }
.vl-tcat { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--vl-muted); margin: 3px 0 0; text-transform: uppercase; }
.vl-tone { font-size: 14.5px; color: var(--vl-body); line-height: 1.5; margin: 14px 0 18px; flex: 1; }
.vl-tfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid #F0EEE9; padding-top: 15px; }
.vl-price { font-size: 13.5px; font-weight: 700; color: var(--vl-ink-2); margin: 0; }
.vl-price span { color: var(--vl-muted); font-weight: 550; }
.vl-open { color: var(--vl-blue); font-weight: 750; font-size: 14.5px; white-space: nowrap; }
.vl-badge {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  padding: 4px 9px; border-radius: 6px; margin-left: auto; white-space: nowrap;
}
.vl-badge.live { background: var(--vl-live-bg); color: var(--vl-live); }
.vl-badge.dev { background: var(--vl-dev-bg); color: var(--vl-dev); }

/* category icon washes */
.vl-farm-bg { background: var(--vl-farm); }
.vl-games-bg { background: var(--vl-games); }
.vl-markets-bg { background: var(--vl-markets); }
.vl-addons-bg { background: var(--vl-addons); }
.vl-security-bg { background: var(--vl-security); }

/* ---------- in-development enclosure ---------- */
.vl-works {
  margin: 46px 0 8px; background: var(--vl-surface);
  border: 1.5px dashed #CFCBC2; border-radius: var(--vl-radius); padding: 26px 28px;
}
.vl-works > h2 { font-size: 18px; font-weight: 800; margin: 0; }
.vl-works > p { color: #5A6068; font-size: 14.5px; margin: 5px 0 20px; line-height: 1.55; }
.vl-works .vl-tile { background: var(--vl-paper); }

/* ---------- navy proof band (Meridian chrome language) ---------- */
.vl-band {
  background: var(--vl-navy); color: #DCE6F2; border-radius: var(--vl-radius);
  padding: 30px 34px; margin: 44px 0 6px;
  display: flex; gap: 30px; align-items: center; flex-wrap: wrap;
}
body.suite .vl-band h2 { color: #fff; font-size: 20px; margin: 0 0 6px; }
.vl-band p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #B9C9DC; max-width: 640px; }
.vl-band .vl-btn { background: #fff; color: var(--vl-navy); margin-left: auto; }
.vl-band .vl-btn:hover { background: var(--vl-blue-line); }
@media (max-width: 720px) { .vl-band .vl-btn { margin-left: 0; } }

/* ---------- prose (rebuilt section pages) ---------- */
.vl-prose { max-width: 760px; font-size: 16.5px; line-height: 1.65; color: var(--vl-body); }
.vl-prose p { margin: 0 0 16px; }
.vl-prose strong { color: var(--vl-ink); }
.vl-section { padding: 40px 0 4px; }
.vl-section h2 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 14px; }

[hidden] { display: none !important; }

/* ---------- chrome hardening: legacy base stylesheet uses bare footer/nav
   element selectors; the Suite chrome must win on every page family. ---------- */
.site-footer { display: block; padding: 0; border-top: 0; }
.site-footer li a { display: inline-block; min-height: 0; position: static; }
.vl-foot-tag { grid-column: auto; grid-row: auto; }
.site-header nav a { position: relative; }
.site-footer nav { display: block; }

/* ============================================================
   PRODUCT PAGES (Phase 3) — the shared component library the
   product pages (Cerberus Sky, Press Run, and the
   rebuilt game pages) are built from. Everything is scoped to
   body.suite so legacy pages are untouched. Inside matches
   outside: paper background, white surfaces, ink text, suite
   blue actions; --prd-accent carries the category color and
   means category only.
   ============================================================ */
body.suite {
  --prd-accent: var(--vl-blue);
  --prd-accent-dark: var(--vl-blue-dark);
}
/* the legacy base stylesheet paints a horizon photo on body.inner:before —
   on Suite pages the paper background is the whole story */
body.suite.inner:before { display: none; }
/* daypart.css re-skins the old dark .pf-hero with a horizon photo stack;
   the Suite profile hero carries its own contained strip instead */
body.suite .pf-hero { background-image: none; }
body.suite .sky-page { --prd-accent: var(--vl-security); --prd-accent-dark: #B02E2E; }
body.suite .farm-page { --prd-accent: var(--vl-farm); --prd-accent-dark: #2F7A3D; }
body.suite .content { max-width: 1280px; margin: 0 auto; padding: 10px 40px 84px; min-height: 0; }
@media (max-width: 720px) { body.suite .content { padding: 6px 20px 64px; } }
body.suite main.content > section { margin: 0 0 64px; }
body.suite .back-link {
  display: inline-block; font-size: 14px; font-weight: 650;
  color: var(--vl-blue); padding: 14px 0 2px; margin: 0;
}
body.suite .back-link:hover { color: var(--vl-blue-dark); }
body.suite .section-heading { max-width: 760px; margin: 0 0 26px; }
body.suite .section-heading h2 {
  font-size: 29px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 10px;
}
body.suite .eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--prd-accent); margin: 0 0 12px; text-shadow: none; line-height: 1.5;
}
body.suite .lede { font-size: 17px; line-height: 1.6; color: var(--vl-body); letter-spacing: 0; margin: 0; max-width: 680px; }
/* the legacy base paints <em> in its old sky accent — invisible on paper */
body.suite main em { color: inherit; }
body.suite .micro { font-size: 13px; color: var(--vl-muted); line-height: 1.7; margin: 0; }
body.suite .micro a { color: var(--vl-blue); font-weight: 600; }

/* product hero */
body.suite .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding: 34px 0 6px; }
body.suite .hero-copy h1 { font-size: 46px; font-weight: 800; letter-spacing: -.025em; line-height: 1.08; margin: 14px 0 18px; }
body.suite .hero-copy .lede { font-size: 18.5px; max-width: 600px; }
body.suite .hero-badges { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
body.suite .hero-badges .vl-badge { margin-left: 0; font-size: 11.5px; padding: 6px 11px; }
body.suite .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 28px 0 16px; }
body.suite .hero-art { display: grid; place-items: center; min-height: 0; background: none; position: static; }
body.suite .hero-art img { width: min(100%, 400px); height: auto; object-fit: contain; filter: drop-shadow(0 18px 34px rgba(20,24,29,.20)); }
body.suite .version-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--vl-line-2); background: var(--vl-surface);
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: var(--vl-ink-2);
}
body.suite .version-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vl-farm); box-shadow: none; flex: none; }
@media (max-width: 900px) {
  body.suite .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  body.suite .hero-copy h1 { font-size: 36px; }
  body.suite .hero-art img { width: min(72%, 320px); }
}

/* buttons (product-page set; actions are suite blue) */
body.suite .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px; font-size: 15px; font-weight: 700;
  letter-spacing: .01em; border: 1.5px solid transparent; cursor: pointer;
  font-family: var(--vl-font); text-decoration: none; transition: background .15s, border-color .15s, transform .15s;
}
body.suite .btn-primary { background: var(--vl-blue); color: #fff; box-shadow: 0 8px 22px rgba(47,111,237,.25); }
body.suite .btn-primary:hover { background: var(--vl-blue-dark); transform: translateY(-1px); }
body.suite .btn-ghost { border-color: var(--vl-line-2); color: var(--vl-ink); background: var(--vl-surface); }
body.suite .btn-ghost:hover { border-color: var(--vl-ink); color: var(--vl-ink); }
body.suite .btn[disabled] { opacity: .55; cursor: wait; }
body.suite .btn-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }

/* live info strip (release cards) */
body.suite .live-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
body.suite .live-card { border: 1px solid var(--vl-line); border-radius: 16px; padding: 22px; background: var(--vl-surface); }
body.suite .live-card h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; color: var(--vl-muted); font-weight: 700; }
body.suite .live-card .big { font-size: 26px; font-weight: 750; letter-spacing: -.02em; color: var(--vl-ink); }
body.suite .live-card p { font-size: 13.5px; color: var(--vl-body); line-height: 1.65; margin: 8px 0 0; }
body.suite .live-card a { color: var(--vl-blue); font-size: 13.5px; font-weight: 650; }

/* pillars (how-it-works steps) */
body.suite .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
body.suite .pillars.five { grid-template-columns: repeat(5, 1fr); }
body.suite .pillar { border: 1px solid var(--vl-line); border-radius: 16px; padding: 26px; background: var(--vl-surface); }
body.suite .pillar .step { font-size: 11px; letter-spacing: .2em; color: var(--prd-accent); font-weight: 800; }
body.suite .pillar h3 { margin: 10px 0 8px; font-size: 18px; }
body.suite .pillar p { font-size: 14px; color: var(--vl-body); line-height: 1.7; margin: 0; }
@media (max-width: 1100px) { body.suite .pillars.five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  body.suite .live-strip, body.suite .pillars, body.suite .pillars.five { grid-template-columns: 1fr; }
}

/* stat strip (product proof row: big number + label, 4 across) */
body.suite .stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 30px 0 0; }
body.suite .stat-card { border: 1px solid var(--vl-line); border-radius: 16px; padding: 24px 16px; text-align: center; background: var(--vl-surface); }
body.suite .stat-card b { display: block; font-size: 36px; font-weight: 800; letter-spacing: -.02em; color: var(--vl-ink); margin-bottom: 6px; }
body.suite .stat-card span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--vl-muted); font-weight: 650; }
@media (max-width: 900px) { body.suite .stat-strip { grid-template-columns: repeat(2, 1fr); } }

/* free vs pro tiers */
body.suite .tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 26px 0 0; }
body.suite .tier { border: 1px solid var(--vl-line); border-radius: var(--vl-radius); padding: 30px; background: var(--vl-surface); }
body.suite .tier.pro { border-color: var(--vl-blue-line); background: var(--vl-blue-tint); }
body.suite .tier h3 { margin: 0 0 4px; font-size: 22px; }
body.suite .tier .price-line { font-size: 13.5px; color: var(--vl-muted); margin-bottom: 18px; }
body.suite .tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
body.suite .tier li { font-size: 14px; line-height: 1.55; color: var(--vl-body); padding-left: 26px; position: relative; }
body.suite .tier li:before { content: "✓"; position: absolute; left: 2px; color: var(--vl-live); font-weight: 700; }
body.suite .tier.pro li:before { color: var(--vl-blue); }
@media (max-width: 900px) { body.suite .tier-grid { grid-template-columns: 1fr; } }

/* pricing cards */
body.suite .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1060px; margin: 26px 0 20px; }
body.suite .price-card { border: 1px solid var(--vl-line); border-radius: var(--vl-radius); padding: 32px; text-align: center; background: var(--vl-surface); }
body.suite .price-card.featured { border-color: var(--vl-blue); box-shadow: 0 12px 34px rgba(47,111,237,.14); }
body.suite .price-card .amount { font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--vl-ink); }
body.suite .price-card .per { color: var(--vl-muted); font-size: 14px; }
body.suite .price-card h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: .14em; color: var(--vl-muted); font-weight: 700; }
body.suite .price-card p { font-size: 13.5px; color: var(--vl-body); line-height: 1.7; }
body.suite .trial-note { max-width: 760px; margin: 0; }
body.suite .trial-note strong { color: var(--vl-ink); }
@media (max-width: 900px) { body.suite .price-grid { grid-template-columns: 1fr; } }

/* account portal + forms */
body.suite .portal-card { border: 1px solid var(--vl-line); border-radius: var(--vl-radius); padding: 36px; background: var(--vl-surface); max-width: 560px; margin: 26px 0 0; }
body.suite .portal-card h3 { margin: 0 0 6px; font-size: 19px; }
body.suite .field { margin: 14px 0; }
body.suite .field label { display: block; font-size: 12.5px; letter-spacing: .06em; color: var(--vl-muted); margin-bottom: 7px; font-weight: 600; }
body.suite .field input, body.suite .field textarea {
  width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: 10px;
  border: 1px solid var(--vl-line-2); background: var(--vl-surface); color: var(--vl-ink);
  font-size: 15px; font-family: inherit;
}
body.suite .field textarea { resize: vertical; min-height: 110px; }
body.suite .field input:focus, body.suite .field textarea:focus { outline: 2px solid var(--vl-blue); outline-offset: 1px; border-color: transparent; }
body.suite .form-err { display: none; font-size: 13.5px; color: #B3261E; margin: 10px 0 0; line-height: 1.6; }
body.suite .form-ok { display: none; font-size: 13.5px; color: var(--vl-live); margin: 10px 0 0; line-height: 1.6; }
body.suite .intent-note {
  display: none; border: 1px solid #E8CF9A; background: var(--vl-dev-bg); color: #6B4E08;
  border-radius: 10px; padding: 14px 18px; font-size: 14px; line-height: 1.6; margin: 0 0 18px;
}
body.suite .portal-tabs { display: flex; gap: 8px; margin: 18px 0 4px; flex-wrap: wrap; }
body.suite .portal-tabs button {
  background: var(--vl-surface); border: 1px solid var(--vl-line-2); color: var(--vl-body);
  border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 650; cursor: pointer; font-family: inherit;
}
body.suite .portal-tabs button.active { background: var(--vl-ink); border-color: var(--vl-ink); color: #fff; }
body.suite .acct-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--vl-line); font-size: 14px; }
body.suite .acct-row:last-child { border-bottom: none; }
body.suite .acct-row .k { color: var(--vl-muted); }
body.suite .status-pill { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
body.suite .status-pro { background: var(--vl-blue-tint); color: var(--vl-blue-dark); border: 1px solid var(--vl-blue-line); }
body.suite .status-free { background: var(--vl-live-bg); color: var(--vl-live); border: 1px solid #BFE6CE; }
@media (max-width: 640px) { body.suite .portal-card { padding: 24px 18px; } }

/* faq */
body.suite .faq { max-width: 780px; margin: 26px 0 0; display: grid; gap: 12px; }
body.suite .faq details { border: 1px solid var(--vl-line); border-radius: 14px; padding: 18px 22px; background: var(--vl-surface); }
body.suite .faq summary { cursor: pointer; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; color: var(--vl-ink); }
body.suite .faq summary::marker { color: var(--prd-accent); }
body.suite .faq p { font-size: 14.5px; line-height: 1.75; color: var(--vl-body); margin: 12px 0 0; }
body.suite .faq a { color: var(--vl-blue); font-weight: 600; }

/* what's new (dated ship log on product pages) */
body.suite .wn-list { list-style: none; margin: 26px 0 0; padding: 0; max-width: 780px; display: grid; gap: 12px; }
body.suite .wn-list li { border: 1px solid var(--vl-line); border-radius: 14px; padding: 16px 22px; background: var(--vl-surface); }
body.suite .wn-list time { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--prd-accent); font-weight: 800; }
body.suite .wn-list p { font-size: 14.5px; line-height: 1.7; color: var(--vl-body); margin: 6px 0 0; }

/* cta band (navy, the Meridian band language) + honest-limits card */
body.suite .cta-band { text-align: center; background: var(--vl-navy); border-radius: var(--vl-radius); padding: 52px 28px; max-width: 860px; margin: 0 auto; }
body.suite .cta-band h2 { margin: 0 0 10px; font-size: clamp(24px, 4vw, 34px); letter-spacing: -.02em; color: #fff; }
body.suite .cta-band p { color: #B9C9DC; max-width: 560px; margin: 0 auto; font-size: 15.5px; line-height: 1.7; }
body.suite .cta-band a { color: #fff; font-weight: 650; }
body.suite .cta-band .btn-ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
body.suite .cta-band .btn-ghost:hover { border-color: #fff; color: #fff; }
body.suite .cta-band .micro { color: #93A9C4; }
body.suite .cta-band .micro a { color: #fff; }
body.suite .sky-limits { background: var(--vl-surface); border: 1px solid var(--vl-line); text-align: left; max-width: 880px; }
body.suite .sky-limits h2 { color: var(--vl-ink); }
body.suite .sky-limits p { color: var(--vl-body); max-width: 62ch; margin: 0; }
body.suite .sky-limits a { color: var(--vl-blue); }

/* screenshots (real captures sit in white cards, like Education's panels) */
body.suite .shot-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin: 8px 0 0; }
body.suite .shot-card { border: 1px solid var(--vl-line); border-radius: 16px; overflow: hidden; background: var(--vl-surface); margin: 0; }
body.suite .shot-card img { display: block; width: 100%; height: auto; }
body.suite .shot-card figcaption { padding: 14px 20px; color: var(--vl-body); font-size: 14px; line-height: 1.6; border-top: 1px solid var(--vl-line); }
body.suite .shot-card figcaption strong { color: var(--vl-ink); }
/* feature cards: screenshot on top, full copy block below (the old
   profile pages' feature rows, in Suite dress) */
body.suite .shot-card.feat { margin-bottom: 28px; }
body.suite .shot-card.feat figcaption { padding: 26px 30px 30px; font-size: 15.5px; }
body.suite .shot-card.feat figcaption .eyebrow { margin-bottom: 8px; }
body.suite .shot-card.feat figcaption strong { display: block; font-size: 21px; letter-spacing: -.01em; margin: 0 0 10px; }
body.suite .shot-card.feat figcaption p { margin: 0 0 10px; line-height: 1.7; }
body.suite .shot-card.feat figcaption p:last-child { margin-bottom: 0; }
@media (max-width: 720px) { body.suite .shot-card.feat figcaption { padding: 22px 20px 24px; } }
body.suite .shot-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 20px 0 0; }
body.suite .shot-thumb { display: block; border: 1px solid var(--vl-line); border-radius: 14px; overflow: hidden; background: var(--vl-surface); text-decoration: none; transition: border-color .2s, transform .2s; }
body.suite .shot-thumb:hover { border-color: var(--vl-blue-line); transform: translateY(-2px); }
body.suite .shot-thumb img { display: block; width: 100%; height: auto; }
body.suite .shot-cap { display: block; padding: 12px 16px; color: var(--vl-body); font-size: 13.5px; line-height: 1.55; border-top: 1px solid var(--vl-line); }
body.suite .shot-cap strong { color: var(--vl-ink); display: block; margin-bottom: 2px; }
@media (max-width: 900px) { body.suite .shot-thumbs { grid-template-columns: 1fr; } }

/* Press Run plan status (live billing pill in the hero) */
body.suite .plan-status { margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.suite .plan-pill { display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
body.suite .plan-pill.free { background: var(--vl-blue-tint); color: var(--vl-blue-dark); border: 1px solid var(--vl-blue-line); }
body.suite .plan-pill.trial { background: var(--vl-dev-bg); color: var(--vl-dev); border: 1px solid #E8CF9A; }
body.suite .plan-pill.pro { background: var(--vl-live-bg); color: var(--vl-live); border: 1px solid #BFE6CE; }

/* Cerberus Sky gallery + beta forms */
body.suite .sky-pill { background: var(--vl-dev-bg); border-color: #E8CF9A; color: var(--vl-dev); }
body.suite .sky-pill .dot { background: var(--vl-markets); }
body.suite .sky-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; }
body.suite .sky-gallery figure { margin: 0; background: var(--vl-surface); border: 1px solid var(--vl-line); border-radius: var(--vl-radius); overflow: hidden; display: flex; flex-direction: column; }
body.suite .sky-gallery img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
body.suite .sky-gallery figcaption { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
body.suite .sky-gallery figcaption strong { color: var(--vl-ink); font-size: 1.05rem; letter-spacing: .01em; }
body.suite .sky-gallery figcaption span { color: var(--vl-body); font-size: .92rem; line-height: 1.55; }
@media (max-width: 900px) { body.suite .sky-gallery { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }
body.suite .sky-beta-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
body.suite .sky-beta-form input {
  padding: 11px 14px; border-radius: 10px; border: 1px solid var(--vl-line-2);
  background: var(--vl-surface); color: var(--vl-ink); min-width: 220px; font-size: 15px; font-family: inherit;
}
body.suite .sky-beta-form input:focus { outline: 2px solid var(--vl-blue); outline-offset: 1px; border-color: transparent; }
body.suite .sky-beta-status { font-size: .85em; color: var(--vl-body); }

/* rebuilt detail pages (Stash Rivals, BuildStorm): hero + galleries */
body.suite .vl-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; padding: 30px 0 4px; }
body.suite .vl-detail .vl-detail-copy h1 { font-size: 44px; font-weight: 800; letter-spacing: -.025em; line-height: 1.08; margin: 14px 0 16px; }
body.suite .vl-detail .vl-detail-copy .lede { font-size: 18.5px; margin-bottom: 16px; }
body.suite .vl-detail .vl-detail-copy .body-copy { font-size: 16px; line-height: 1.65; color: var(--vl-body); margin: 0 0 14px; }
body.suite .vl-detail figure { margin: 0; }
body.suite .vl-figcard { border: 1px solid var(--vl-line); border-radius: 16px; overflow: hidden; background: var(--vl-surface); }
body.suite .vl-figcard img { display: block; width: 100%; height: auto; }
body.suite .vl-figcard figcaption { padding: 12px 16px; font-size: 13.5px; line-height: 1.55; color: var(--vl-body); border-top: 1px solid var(--vl-line); }
body.suite .vl-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 8px 0 0; }
body.suite .vl-shots.one { grid-template-columns: 1fr; }
body.suite .vl-shots.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { body.suite .vl-shots.three { grid-template-columns: 1fr; } }
body.suite .vl-shots figure { margin: 0; }
body.suite .sr-cta-row { margin-top: 24px; }
body.suite .vl-shots.sr-shots-gap { margin-top: 28px; }
@media (max-width: 900px) {
  body.suite .vl-detail { grid-template-columns: 1fr; gap: 26px; }
  body.suite .vl-detail .vl-detail-copy h1 { font-size: 34px; }
  body.suite .vl-shots { grid-template-columns: 1fr; }
}
body.suite .vl-status-note {
  border: 1.5px dashed #CFCBC2; background: var(--vl-surface); border-radius: 16px;
  padding: 18px 22px; font-size: 14.5px; line-height: 1.65; color: var(--vl-body); max-width: 760px;
}
body.suite .vl-status-note strong { color: var(--vl-ink); }
body.suite .vl-next { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--vl-line); border-radius: 16px; padding: 24px 28px; margin-top: 44px; text-decoration: none; background: var(--vl-surface); }
body.suite .vl-next:hover { border-color: var(--vl-blue-line); }
body.suite .vl-next small { display: block; font-size: 11px; letter-spacing: .22em; color: var(--vl-muted); margin-bottom: 6px; font-weight: 700; }
body.suite .vl-next strong { font-size: 22px; letter-spacing: -.01em; color: var(--vl-ink); }
/* --- Inline-style sweep 2026-10-30: declarations restored from CSP-dead style attributes (product pages).
       body.suite prefixes + compound classes: needed to beat body.suite base rules in this file. --- */
body.suite .buy-line{margin-top:18px}
body.suite .hero-actions.ha-gap{margin-top:18px}
body.suite .btn.submit-wide{width:100%}
body.suite .micro.micro-mt14{margin-top:14px}
body.suite .micro.micro-mt16{margin-top:16px}
body.suite .micro.micro-mt18{margin-top:18px}
body.suite .micro.micro-foot{text-align:center;margin-top:26px}
body.suite .portal-card.portal-card-narrow{max-width:640px}
body.suite .cta-band.band-mb34{margin-bottom:34px}
body.suite .cta-band.band-mt56{margin-top:56px}
body.suite .section-heading.heading-mt56{margin-top:56px}
body.suite .stat-strip.strip-flush{margin-top:0}
body.suite .pill-line{margin:0 0 12px}
body.suite .cta-band .sky-gap14{margin-top:14px}
body.suite .sky-beta-form.sky-form-center{justify-content:center}
body.suite .vl-tcat.tcat-hero{letter-spacing:.2em;font-weight:800;color:var(--vl-blue)}
/* BuildStorm project page (games/buildstorm) — margins restored from CSP-dead inline styles 2026-10-30 */
body.suite .bs-play-row{margin:24px 0}
body.suite .bs-status-mt36{margin-top:36px}
body.suite main.content > section.bs-section-mt56{margin-top:56px}