/* costusworx.co.za — marketing layer on the CostusWorx Fluent kit.
   Loads AFTER assets/fluent-kit/fluent-core.css. The site wears the same Dynamics 365 / Fluent 2 look
   as every CostusWorx app: navy chrome with the gold stripe, Segoe, 3D blocks with the offset slab.
   Rules: colours and px font sizes appear ONLY in TOKENS (run tools/check_layer.php from the kit). */

/* ===== TOKENS ===== */
:root {
  /* Marketing type ramp (Fluent 2: Title2 28 · Title1 32 · LargeTitle 40 · Display 68), fluid on small screens */
  --s-fs-title2: 28px; --s-lh-title2: 36px;
  --s-fs-title1: clamp(26px, 3.4vw, 34px); --s-lh-title1: 1.22;
  --s-fs-large: clamp(30px, 4.2vw, 44px); --s-lh-large: 1.15;
  --s-fs-display: clamp(38px, 5vw, 64px); --s-lh-display: 1.04;
  --s-fs-lead: 18px; --s-lh-lead: 28px;
  --s-fs-kpi: clamp(30px, 3.6vw, 40px);
  /* Brand family (logo/brand.json) */
  --s-sky: #35A7DD; --s-sky-soft: #D5E8F0;
  --s-gold-light: #E9C27A;
  /* On the navy hero / footer */
  --s-on-navy: #FFFFFF; --s-on-navy-2: rgba(255,255,255,.78); --s-on-navy-3: rgba(255,255,255,.58);
  --s-on-navy-line: rgba(255,255,255,.16); --s-on-navy-fill: rgba(255,255,255,.07);
  --s-grid-line: rgba(255,255,255,.05);
  --s-hero-bg: radial-gradient(1200px 520px at 78% 18%, #2A4A78 0%, transparent 60%), linear-gradient(160deg, #0E1A2C 0%, #14243C 48%, #1B2F4E 100%);
  --s-glow: radial-gradient(closest-side, rgba(53,167,221,.30), transparent);
  /* Depth for the big showpiece window */
  --s-raise-xl: 8px 8px 0 #0A1424, 18px 30px 60px rgba(0,0,0,.45);
  --s-raise-hover: 6px 6px 0 #3A3A3A, 10px 16px 26px rgba(0,0,0,.28);
  /* Layout */
  --s-wrap: 1200px; --s-gutter: 24px; --s-sec-y: 88px;
  --s-hdr-total: 51px;
}

/* ===== BASE ===== */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--s-hdr-total) + 12px); }
body { margin: 0; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--v6-action); }
a:hover { color: var(--v6-action-h); }
:focus-visible { outline: 2px solid var(--v6-action); outline-offset: 2px; }
.s-wrap { max-width: var(--s-wrap); margin: 0 auto; padding: 0 var(--s-gutter); }
.s-skip { position: absolute; left: -9999px; top: 8px; z-index: 999; background: var(--v6-surface); color: var(--v6-t1); padding: 8px 12px; border-radius: var(--v6-r-sm); }
.s-skip:focus { left: 8px; }
.s-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ── Header: the app chrome, sticky ── */
.s-hdr { position: sticky; top: 0; z-index: 100; }
.s-hdr .v6-hdr { padding: 0 12px 0 0; }
.s-brand { display: flex; align-items: center; gap: 10px; padding-left: 14px; color: var(--s-on-navy); text-decoration: none; font-size: var(--v6-fs-sub2); font-weight: 600; white-space: nowrap; }
.s-brand:hover { color: var(--s-on-navy); }
.s-brand svg { width: 28px; height: 28px; border-radius: 7px; }
.s-hdr-tag { font-size: var(--v6-fs-body); color: var(--s-on-navy-2); white-space: nowrap; }
.s-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.s-nav a { height: 36px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--v6-r-sm); color: var(--s-on-navy); text-decoration: none; font-size: var(--v6-fs-body); white-space: nowrap; }
.s-nav a:hover { background: var(--v6-on-chrome-hover); color: var(--s-on-navy); }
.s-nav a[aria-current] { box-shadow: inset 0 -3px 0 var(--v6-chrome-accent); }
.s-nav .s-cta { margin-left: 8px; background: var(--v6-chrome-accent); font-weight: 600; padding: 0 16px; }
.s-nav .s-cta:hover { background: var(--s-gold-light); color: var(--v6-brand-ink); }
.s-menu-btn { display: none; }
@media (max-width: 1080px) { .s-hdr-tag, .s-hdr .v6-hdr-sep { display: none; } }
@media (max-width: 900px) {
  .s-menu-btn { display: flex; margin-left: auto; }
  .s-nav { display: none; position: absolute; top: calc(100% + 3px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px; background: var(--v6-brand-deep); box-shadow: var(--v6-sh16); }
  .s-nav.open { display: flex; }
  .s-nav a { height: 44px; padding: 0 14px; }
  .s-nav .s-cta { margin: 8px 0 0; justify-content: center; }
}

/* ── News: Fluent message bar under the chrome ── */
.s-news { background: var(--v6-sel); border-bottom: var(--v6-line) solid var(--v6-sel-strong); }
.s-news-in { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.s-ver { font-family: var(--v6-font-mono); font-size: var(--v6-fs-cap); color: var(--v6-action-ink); white-space: nowrap; }
.s-ticker { position: relative; flex: 1; min-width: 0; height: 22px; overflow: hidden; }
.s-tick { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(-8px); transition: opacity .12s, transform .12s; pointer-events: none; white-space: nowrap; }
.s-tick.on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .3s .12s, transform .3s .12s; }
.s-tick a { color: var(--v6-t1); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.s-tick a:hover { text-decoration: underline; color: var(--v6-action-ink); }
.s-tick-nav { display: flex; gap: 2px; }
.s-tick-nav button { width: 28px; height: 28px; border: 0; border-radius: var(--v6-r-sm); background: transparent; color: var(--v6-action-ink); cursor: pointer; font: inherit; font-size: var(--v6-fs-sub2); }
.s-tick-nav button:hover { background: var(--v6-sel-strong); }
@media (max-width: 600px) { .s-ver { display: none; } }

/* ── Buttons (marketing sizes of the v6 button) ── */
.s-btn { font: inherit; font-size: var(--v6-fs-sub2); font-weight: 600; height: 48px; padding: 0 22px; border-radius: var(--v6-r-sm); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform .12s, box-shadow .12s, background .12s; }
.s-btn .v6-ic { width: 18px; height: 18px; }
.s-btn-gold { background: var(--v6-chrome-accent); color: var(--s-on-navy); border-color: var(--v6-brand-ink); box-shadow: var(--v6-raise-sm); }
.s-btn-gold:hover { color: var(--s-on-navy); transform: translate(-1px, -1px); box-shadow: var(--v6-raise); }
.s-btn-gold:active { transform: translate(2px, 2px); box-shadow: none; }
.s-btn-primary { background: var(--v6-action); color: var(--s-on-navy); border-color: var(--v6-card-line); box-shadow: var(--v6-raise-sm); }
.s-btn-primary:hover { color: var(--s-on-navy); background: var(--v6-action-h); transform: translate(-1px, -1px); box-shadow: var(--v6-raise); }
.s-btn-ghost { background: var(--v6-surface); color: var(--v6-t1); border-color: var(--v6-card-line); }
.s-btn-ghost:hover { color: var(--v6-t1); background: var(--v6-surface-2); }
.s-btn-onnavy { background: transparent; color: var(--s-on-navy); border-color: var(--s-on-navy-line); }
.s-btn-onnavy:hover { color: var(--s-on-navy); background: var(--s-on-navy-fill); border-color: var(--s-on-navy-2); }
.s-btn-sm { height: 36px; font-size: var(--v6-fs-body); padding: 0 14px; }
.s-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Section scaffolding ── */
.s-sec { padding: var(--s-sec-y) 0; }
.s-sec-white { background: var(--v6-surface); border-top: var(--v6-line) solid var(--v6-hover); border-bottom: var(--v6-line) solid var(--v6-hover); }
.s-head { max-width: 760px; margin-bottom: 40px; }
.s-head-c { margin-left: auto; margin-right: auto; text-align: center; }
.s-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--v6-fs-cap); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--v6-action-ink); }
.s-eyebrow::before { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--v6-chrome-accent); }
.s-h2 { margin: 0; font-size: var(--s-fs-large); line-height: var(--s-lh-large); font-weight: 600; letter-spacing: -.01em; color: var(--v6-t1); }
.s-lead { margin: 16px 0 0; font-size: var(--s-fs-lead); line-height: var(--s-lh-lead); color: var(--v6-t2); }
.s-note { font-size: var(--v6-fs-cap); line-height: var(--v6-lh-cap); color: var(--v6-t3); }

/* ── Reveal ── */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.rv.in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

/* ===== HERO ===== */
.s-hero { position: relative; overflow: hidden; color: var(--s-on-navy); background: var(--s-hero-bg); padding: 72px 0 0; }
.s-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--s-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--s-grid-line) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, black 30%, transparent 95%); -webkit-mask-image: linear-gradient(180deg, black 30%, transparent 95%); pointer-events: none; }
.s-hero::after { content: ''; position: absolute; width: 720px; height: 720px; right: -160px; top: -200px; background: var(--s-glow); pointer-events: none; }
.s-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.s-hero .s-eyebrow { color: var(--s-gold-light); }
.s-h1 { margin: 0; font-size: var(--s-fs-display); line-height: var(--s-lh-display); font-weight: 700; letter-spacing: -.025em; }
.s-h1 em { font-style: normal; display: block; background: linear-gradient(90deg, var(--s-gold-light), var(--v6-chrome-accent) 60%, var(--s-sky)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-hero .s-lead { color: var(--s-on-navy-2); max-width: 560px; }
.s-hero .s-lead b { color: var(--s-on-navy); font-weight: 600; }
.s-fit { margin: 14px 0 28px; font-size: var(--v6-fs-body); line-height: var(--v6-lh-sub2); color: var(--s-on-navy-3); max-width: 540px; }
.s-hero-proof { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; font-size: var(--v6-fs-body); color: var(--s-on-navy-2); }
.s-hero-proof span { display: inline-flex; align-items: center; gap: 6px; }
.s-hero-proof .v6-ic { color: var(--s-sky); }

/* The showpiece: a working Fluent app window */
.s-win { position: relative; border: 2px solid var(--v6-brand-ink); border-radius: var(--v6-r-md); background: var(--v6-canvas); box-shadow: var(--s-raise-xl); overflow: hidden; color: var(--v6-t1); transform: perspective(1600px) rotateY(-5deg) rotateX(2deg); transition: transform .5s ease; }
.s-win:hover { transform: none; }
.s-win-hdr { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--v6-chrome); border-bottom: 3px solid var(--v6-chrome-accent); color: var(--s-on-navy); font-size: var(--v6-fs-body); }
.s-win-hdr b { font-weight: 600; }
.s-win-hdr .v6-hdr-sep { height: 16px; margin: 0 4px; }
.s-win-dots { margin-left: auto; display: flex; gap: 6px; }
.s-win-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--s-on-navy-line); }
.s-win-search { flex: 1; max-width: 220px; height: 24px; margin: 0 auto; border-radius: var(--v6-r-sm); background: var(--v6-on-chrome-field); display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: var(--v6-fs-cap); color: var(--v6-on-chrome-field-ink); }
.s-win-body { display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 410px; }
.s-win-nav { background: var(--v6-rail); border-right: var(--v6-card-w) solid var(--v6-edge-strong); padding: 6px 0; }
.s-win-nav .v6-group-h { padding: 8px 12px 4px; font-size: var(--v6-fs-cap2); }
.s-win-nav .v6-nav-item { height: 34px; font-size: var(--v6-fs-cap); gap: 8px; padding: 0 6px 0 8px; }
.s-win-nav .v6-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; border-radius: 4px; }
.s-win-main { min-width: 0; display: flex; flex-direction: column; }
.s-win-main .v6-cmdbar { min-height: 36px; padding: 4px 10px; position: static; }
.s-win-main .v6-cmd { height: 26px; font-size: var(--v6-fs-cap); }
.s-win-title { padding: 12px 14px 0; }
.s-win-title h2 { margin: 0; font-size: var(--v6-fs-sub2); line-height: var(--v6-lh-sub2); font-weight: 600; }
.s-win-title p { margin: 0; font-size: var(--v6-fs-cap); color: var(--v6-t3); }
.s-win-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px 14px 4px; }
.s-win-tiles .v6-tile { padding: 8px 10px 10px; }
.s-win-tiles .v6-kpi-value { font-size: var(--v6-fs-sub1); }
.s-win-shot { margin: 10px 14px 14px; border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); box-shadow: var(--v6-raise-sm); overflow: hidden; background: var(--v6-surface); aspect-ratio: 1500 / 820; }
.s-win-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: opacity .25s; }
.s-win-shot img.fade { opacity: 0; }
.s-win-progress { height: 3px; background: var(--v6-hover-soft); }
.s-win-progress i { display: block; height: 100%; width: 0; background: var(--v6-action); }
.s-win-progress i.run { animation: s-progress 5s linear forwards; }
@keyframes s-progress { to { width: 100%; } }
.s-win-cap { position: absolute; right: 16px; bottom: -36px; }
.s-hero-hint { margin: 14px 0 0; text-align: center; font-size: var(--v6-fs-cap); color: var(--s-on-navy-3); }

/* Credentials band across the bottom of the hero */
.s-creds { position: relative; z-index: 1; margin-top: 64px; border-top: var(--v6-line) solid var(--s-on-navy-line); background: var(--s-on-navy-fill); }
.s-creds-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-top: 16px; padding-bottom: 16px; font-size: var(--v6-fs-body); color: var(--s-on-navy-2); }
.s-creds-in b { color: var(--s-on-navy); font-weight: 600; }
.s-creds-lead { font-size: var(--v6-fs-cap); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--s-gold-light); }
.s-creds-in span { display: inline-flex; align-items: center; gap: 8px; }
.s-creds-in .v6-ic { color: var(--s-sky); }

@media (max-width: 1020px) {
  .s-hero-in { grid-template-columns: 1fr; gap: 40px; }
  .s-win { transform: none; }
}
@media (max-width: 640px) {
  .s-hero { padding-top: 44px; }
  .s-win-body { grid-template-columns: 1fr; min-height: 0; }
  .s-win-nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: var(--v6-line) solid var(--v6-stroke); padding: 4px; gap: 2px; scrollbar-width: none; }
  .s-win-nav .v6-group-h { display: none; }
  .s-win-nav .v6-nav-item { width: auto; flex-shrink: 0; margin: 0; }
  .s-win-search, .s-win-main .v6-cmdbar { display: none; }
  .s-win-tiles { gap: 8px; padding: 10px 10px 2px; }
  .s-win-tiles .v6-tile { padding: 6px 8px 8px; }
  .s-win-tiles .v6-kpi-value { font-size: var(--v6-fs-sub2); }
  .s-win-shot { margin: 8px 10px 10px; }
  .s-creds { margin-top: 40px; }
  .s-creds-in { gap: 10px; }
  .s-creds-in span { display: block; }
  .s-creds-in .v6-ic { margin-right: 6px; }
}

/* ===== KPI BAND ===== */
.s-kpis { position: relative; z-index: 2; margin-top: -1px; padding: 40px 0 0; }
.s-kpis .v6-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; }
.s-kpi { padding: 18px 20px 20px; }
.s-kpi .v6-kpi-value { font-size: var(--s-fs-kpi); line-height: 1.1; letter-spacing: -.02em; }
.s-kpi .v6-kpi-label { font-size: var(--v6-fs-body); line-height: var(--v6-lh-body); margin-top: 6px; color: var(--v6-t2); }
.s-kpi .v6-ic { width: 22px; height: 22px; color: var(--v6-action); margin-bottom: 10px; }
@media (max-width: 860px) { .s-kpis .v6-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* ===== WINDOW FRAME (screenshots shown inside app chrome) ===== */
.s-frame { border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); box-shadow: var(--v6-raise); background: var(--v6-surface); overflow: hidden; }
.s-frame-bar { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--v6-chrome); border-bottom: 3px solid var(--v6-chrome-accent); color: var(--s-on-navy); font-size: var(--v6-fs-cap); font-weight: 600; }
.s-frame-bar span { margin-left: auto; font-weight: 400; color: var(--s-on-navy-2); }
.s-frame img { width: 100%; }
a.s-frame { display: block; transition: transform .15s, box-shadow .15s; }
a.s-frame:hover { transform: translate(-2px, -2px); box-shadow: var(--s-raise-hover); }

/* ===== FLAGSHIP ===== */
.s-flag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.s-flag-logo { display: inline-block; background: var(--v6-surface); border: var(--v6-line) solid var(--v6-hover); border-radius: var(--v6-r-md); padding: 8px 14px; margin: 4px 0 18px; }
.s-flag-logo img { height: 34px; width: auto; }
.s-mods { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.s-mods li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--v6-t1); }
.s-mods .v6-ic { width: 20px; height: 20px; color: var(--v6-action); }
@media (max-width: 960px) { .s-flag { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 420px) { .s-mods { grid-template-columns: 1fr; } }

/* ===== LAB ===== */
.s-lab-tabs { display: flex; gap: 4px; border-bottom: var(--v6-line) solid var(--v6-stroke); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.s-lab-tabs::-webkit-scrollbar { display: none; }
.s-lab-tabs button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: var(--v6-fs-body); background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--v6-t1); padding: 10px 12px; cursor: pointer; white-space: nowrap; }
.s-lab-tabs button:hover { background: var(--v6-surface-2); }
.s-lab-tabs button[aria-selected=true] { border-bottom-color: var(--v6-action); font-weight: 600; }
.s-lab-tabs svg { width: 22px; height: 22px; border-radius: 5px; }
.s-panel { display: none; }
.s-panel.on { display: block; animation: s-in .3s ease; }
@keyframes s-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.s-demo { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 32px; align-items: start; margin: 0; padding: 24px; }
.s-demo-h { display: flex; align-items: center; gap: 12px; margin: 12px 0 10px; }
.s-demo-h svg { width: 40px; height: 40px; border-radius: 9px; }
.s-demo-h h3 { margin: 0; font-size: var(--s-fs-title2); line-height: var(--s-lh-title2); font-weight: 600; }
.s-demo p { margin: 0 0 12px; color: var(--v6-t2); line-height: var(--v6-lh-sub2); }
.s-demo .s-mods-line { font-size: var(--v6-fs-cap); color: var(--v6-t3); }
.s-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 20px; }
.s-roles b { width: 100%; font-size: var(--v6-fs-cap); font-weight: 600; color: var(--v6-t3); }
.s-views { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.s-views span { font-size: var(--v6-fs-cap); color: var(--v6-t3); margin-right: 4px; }
.s-views button { font: inherit; font-size: var(--v6-fs-cap); height: 28px; padding: 0 12px; border-radius: var(--v6-r-pill); border: var(--v6-line) solid var(--v6-stroke2); background: var(--v6-surface); color: var(--v6-t1); cursor: pointer; }
.s-views button:hover { background: var(--v6-surface-2); }
.s-views button[aria-pressed=true] { background: var(--v6-sel-strong); border-color: var(--v6-action); color: var(--v6-action-ink); font-weight: 600; }
.s-lab-cap { margin-top: 10px; }
.s-lab-more { margin-top: 24px; text-align: center; }
@media (max-width: 960px) { .s-demo { grid-template-columns: 1fr; padding: 18px; } }

/* ===== WHY ===== */
.s-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.s-why .v6-block { margin: 0; padding: 24px; }
.s-num { display: block; font-size: var(--s-fs-title1); line-height: 1; font-weight: 700; color: var(--v6-chrome-accent); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.s-card-h { margin: 0 0 8px; font-size: var(--v6-fs-sub1); line-height: var(--v6-lh-sub1); font-weight: 600; }
.s-why p, .s-svc p { margin: 0; color: var(--v6-t2); line-height: var(--v6-lh-sub2); }
@media (max-width: 900px) { .s-why { grid-template-columns: 1fr; } }

/* ===== SERVICES ===== */
.s-svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.s-svc { display: flex; flex-direction: column; margin: 0; padding: 22px 22px 18px; transition: transform .15s, box-shadow .15s; }
.s-svc:hover { transform: translate(-2px, -2px); box-shadow: var(--s-raise-hover); }
.s-svc .v6-ic-lg { color: var(--v6-action); margin-bottom: 14px; }
.s-svc p { flex: 1; }
.s-svc-more { margin-top: 14px; font-weight: 600; text-decoration: none; }
.s-svc-more:hover { text-decoration: underline; }
.s-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: var(--v6-line) solid var(--v6-hover); }
.s-price s { text-decoration: none; font-size: var(--v6-fs-cap); color: var(--v6-t3); }
.s-price span { font-size: var(--v6-fs-sub1); font-weight: 600; color: var(--v6-t1); font-variant-numeric: tabular-nums; }
.s-svc-hot { background: var(--v6-brand); border-color: var(--v6-brand-ink); color: var(--s-on-navy); box-shadow: var(--v6-raise-login); position: relative; }
.s-svc-hot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--v6-chrome-accent), var(--s-gold-light), var(--v6-chrome-accent)); border-radius: var(--v6-r-md) var(--v6-r-md) 0 0; }
.s-svc-hot .s-card-h, .s-svc-hot .s-price span { color: var(--s-on-navy); }
.s-svc-hot p, .s-svc-hot .s-price s { color: var(--s-on-navy-2); }
.s-svc-hot .v6-ic-lg { color: var(--s-gold-light); }
.s-svc-hot .s-price { border-top-color: var(--s-on-navy-line); }
@media (max-width: 960px) { .s-svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .s-svcs { grid-template-columns: 1fr; } }

/* ===== PROCESS ===== */
.s-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; counter-reset: step; }
.s-steps::before { content: ''; position: absolute; left: 8%; right: 8%; top: 27px; height: 2px; background: repeating-linear-gradient(90deg, var(--v6-stroke2) 0 8px, transparent 8px 14px); }
.s-step { position: relative; text-align: center; padding: 0 12px; }
.s-step::before { counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; border: 2px solid var(--v6-card-line); background: var(--v6-block-bg); box-shadow: var(--v6-raise-sm); font-size: var(--v6-fs-sub1); font-weight: 700; color: var(--v6-brand); position: relative; }
.s-step:first-child::before { background: var(--v6-chrome-accent); color: var(--s-on-navy); }
.s-step p { margin: 0; color: var(--v6-t2); line-height: var(--v6-lh-sub2); }
@media (max-width: 800px) { .s-steps { grid-template-columns: 1fr; } .s-steps::before { display: none; } }

/* ===== FAQ ===== */
.s-faq { max-width: 880px; margin: 0 auto; display: grid; gap: 12px; }
.s-faq details { border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); background: var(--v6-block-bg); box-shadow: var(--v6-raise-sm); margin-right: 4px; }
.s-faq details[open] { box-shadow: var(--v6-raise); }
.s-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-size: var(--v6-fs-sub2); line-height: var(--v6-lh-sub2); font-weight: 600; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: ''; margin-left: auto; width: 10px; height: 10px; flex-shrink: 0; border-right: 2px solid var(--v6-t2); border-bottom: 2px solid var(--v6-t2); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.s-faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.s-faq summary:hover { color: var(--v6-action-ink); }
.s-faq .s-ans { padding: 0 18px 18px; color: var(--v6-t2); line-height: var(--v6-lh-sub2); }
.s-faq .s-ans p { margin: 0; }

/* ===== CONTACT ===== */
.s-contact { position: relative; overflow: hidden; color: var(--s-on-navy); background: var(--s-hero-bg); }
.s-contact::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--s-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--s-grid-line) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.s-contact-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: start; }
.s-contact .s-h2 { color: var(--s-on-navy); }
.s-contact .s-h2 em { font-style: normal; color: var(--s-gold-light); }
.s-contact .s-lead { color: var(--s-on-navy-2); }
.s-contact .s-eyebrow { color: var(--s-gold-light); }
.s-ticks { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 14px; }
.s-ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--s-on-navy); line-height: var(--v6-lh-sub2); }
.s-ticks .v6-ic { width: 22px; height: 22px; color: var(--s-sky); margin-top: 1px; }
.s-keep { color: var(--s-on-navy-2); }
.s-alt { color: var(--s-on-navy-2); }
.s-alt a { color: var(--s-gold-light); font-weight: 600; }
.s-form { max-width: none; width: 100%; padding: 28px 24px 22px; }
.s-form h3 { margin: 0 0 4px; font-size: var(--v6-fs-title3); line-height: var(--v6-lh-title3); font-weight: 600; }
.s-form .v6-input { width: 100%; height: 40px; }
.s-form textarea.v6-input { height: auto; min-height: 96px; resize: vertical; }
.s-form .v6-input[aria-invalid=true] { border-color: var(--v6-bad); border-bottom: 2px solid var(--v6-bad); }
.s-req { color: var(--v6-bad); }
.s-opt { font-size: var(--v6-fs-cap); color: var(--v6-t3); }
.s-consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--v6-fs-cap); line-height: var(--v6-lh-cap); color: var(--v6-t2); margin: 6px 0 16px; }
.s-consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--v6-action); flex-shrink: 0; }
.s-consent input[aria-invalid=true] { outline: 2px solid var(--v6-bad); }
.s-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.s-form .s-btn { width: 100%; }
.s-fine { margin: 12px 0 0; font-size: var(--v6-fs-cap); line-height: var(--v6-lh-cap); color: var(--v6-t3); }
.s-msg { padding: 10px 12px; border-radius: var(--v6-r-sm); margin-bottom: 14px; font-size: var(--v6-fs-body); }
.s-msg.ok { background: var(--v6-ok-bg); color: var(--v6-ok-h); border: var(--v6-line) solid var(--v6-ok); }
.s-msg.bad { background: var(--v6-bad-bg); color: var(--v6-bad-h); border: var(--v6-line) solid var(--v6-bad-line); }
@media (max-width: 960px) { .s-contact-in { grid-template-columns: 1fr; gap: 36px; } }

/* ===== FOOTER ===== */
.s-foot { background: var(--v6-brand-ink); color: var(--s-on-navy-2); border-top: 3px solid var(--v6-chrome-accent); padding: 56px 0 24px; font-size: var(--v6-fs-body); }
.s-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.s-foot h2 { margin: 0 0 14px; font-size: var(--v6-fs-cap); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--s-gold-light); }
.s-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.s-foot a { color: var(--s-on-navy); text-decoration: none; }
.s-foot a:hover { color: var(--s-gold-light); text-decoration: underline; }
.s-foot .s-brand { padding-left: 0; margin-bottom: 14px; }
.s-foot address { font-style: normal; line-height: var(--v6-lh-sub2); margin-top: 14px; }
.s-plat { display: inline-flex; align-items: center; gap: 8px; }
.s-plat svg { width: 18px; height: 18px; border-radius: 4px; }
.s-legal { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 40px; padding-top: 18px; border-top: var(--v6-line) solid var(--s-on-navy-line); font-size: var(--v6-fs-cap); color: var(--s-on-navy-3); }
.s-legal a { color: var(--s-on-navy-2); }
@media (max-width: 900px) { .s-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .s-foot-grid { grid-template-columns: 1fr; } }

/* ===== PHONE ===== */
@media (max-width: 640px) {
  :root { --s-gutter: 16px; --s-sec-y: 60px; }
  .s-lead { font-size: var(--v6-fs-sub2); line-height: var(--v6-lh-sub2); }
  .s-btn { height: 48px; width: 100%; }
  .s-btn-sm { width: auto; }
  .s-btn-row .s-btn-sm { flex: 1 1 auto; }
  .s-head { margin-bottom: 28px; }
}

@media print {
  .s-hdr, .s-news, .s-win, .s-contact form { display: none; }
  .s-hero, .s-contact, .s-foot { background: none; color: var(--v6-t1); }
  .rv { opacity: 1; transform: none; }
}

/* ===== PAGES =====
   Every page other than the homepage keeps its own layout CSS and loads this file after it (body.s-page).
   The block below aliases those pages' shared legacy variables onto the Fluent tokens, then maps their
   card, button and hero classes onto the kit families. Tokens only. */
body.s-page {
  --ink: var(--v6-canvas); --ink-2: var(--v6-surface-2); --ice: var(--v6-surface-alt); --paper: var(--v6-surface);
  --band: var(--v6-surface-alt); --sunk: var(--v6-surface-2); --chip: var(--v6-surface);
  --navy: var(--v6-brand); --deep: var(--v6-brand-deep); --blue: var(--v6-action-ink); --sky: var(--v6-action);
  --line: var(--v6-card-line); --line-2: var(--v6-row); --rule: var(--v6-hover); --hair: var(--v6-hover-soft);
  --bw: var(--v6-card-w); --r: var(--v6-r-md); --r-sm: var(--v6-r-sm);
  --txt: var(--v6-t1); --mut: var(--v6-t2); --mut2: var(--v6-t3); --dim: var(--v6-t3);
  --mint: var(--v6-ok); --rose: var(--v6-bad); --amber: var(--v6-warn); --signal: var(--v6-chrome-accent);
  --rail: var(--v6-brand); --chip-on: var(--v6-brand); --chip-txt: var(--v6-t2); --chip-txt-on: var(--s-on-navy);
  --font: var(--v6-font); --mono: var(--v6-font); --sh: var(--v6-raise);
  background: var(--v6-canvas); color: var(--v6-t1); font-family: var(--v6-font);
}
body.s-page .s-foot { margin-top: 64px; }
body.s-page .s-foot p { color: var(--s-on-navy-2); }

/* Buttons */
body.s-page .btn { border-radius: var(--v6-r-sm); letter-spacing: 0; text-transform: none; font-weight: 600; border: 2px solid var(--v6-card-line); transition: transform .12s, box-shadow .12s, background .12s; }
body.s-page .btn-primary { background: var(--v6-action); color: var(--s-on-navy); box-shadow: var(--v6-raise-sm); filter: none; }
body.s-page .btn-primary:hover { background: var(--v6-action-h); color: var(--s-on-navy); transform: translate(-1px, -1px); box-shadow: var(--v6-raise); }
body.s-page .btn-ghost { background: var(--v6-surface); color: var(--v6-t1); }
body.s-page .btn-ghost:hover { background: var(--v6-surface-2); color: var(--v6-t1); }

/* Navy page hero (generated pages) */
.s-pghero { position: relative; overflow: hidden; background: var(--s-hero-bg); color: var(--s-on-navy); padding-bottom: 44px; }
.s-pghero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--s-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--s-grid-line) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.s-pghero .wrap { position: relative; }
.s-pghero header.pg h1 { color: var(--s-on-navy); }
.s-pghero .standfirst { color: var(--s-on-navy-2); }
.s-pghero .crumb, .s-pghero .crumb a { color: var(--s-gold-light); font-weight: 600; letter-spacing: .08em; }
.s-pghero .price { background: var(--v6-block-bg); border-color: var(--v6-brand-ink); box-shadow: var(--v6-raise-sm); color: var(--v6-t1); }
.s-pghero .price b { color: var(--v6-brand); font-family: var(--v6-font); font-weight: 700; }
.s-pghero .btn-primary { background: var(--v6-chrome-accent); border-color: var(--v6-brand-ink); }
.s-pghero .btn-primary:hover { background: var(--s-gold-light); color: var(--v6-brand-ink); }

/* Headings and eyebrows */
body.s-pg-svc main h2 { color: var(--v6-t1); font-weight: 600; }
body.s-pg-svc main .cta h2 { color: var(--s-on-navy); }
body.s-page .sec-eyebrow, body.s-page .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--v6-font); font-weight: 600; letter-spacing: .08em; color: var(--v6-action-ink); }
body.s-page .sec-eyebrow::before { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--v6-chrome-accent); }

/* Card family: the generated pages' panels, scope items, steps, proof, related links and platform cards */
body.s-pg-svc .panel, body.s-pg-svc .get, body.s-pg-svc .step, body.s-pg-svc .pcard, body.s-pg-svc .proof, body.s-pg-svc .rel a {
  border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); background: var(--v6-block-bg); box-shadow: var(--v6-raise-sm); margin-right: 4px;
}
body.s-pg-svc .rel a, body.s-pg-svc .pcard { transition: transform .15s, box-shadow .15s; }
body.s-pg-svc .rel a:hover, body.s-pg-svc .pcard:hover { transform: translate(-2px, -2px); box-shadow: var(--s-raise-hover); background: var(--v6-block-bg); }
body.s-pg-svc .symptoms li::before { background: var(--v6-chrome-accent); }
body.s-pg-svc .step b, body.s-pg-svc .pcard .k { color: var(--v6-chrome-accent); font-family: var(--v6-font); font-weight: 700; }
body.s-pg-svc .proof .n { font-family: var(--v6-font); font-weight: 700; color: var(--v6-brand); }
body.s-pg-svc .field input, body.s-pg-svc .field textarea { border: var(--v6-line) solid var(--v6-stroke2); border-bottom-color: var(--v6-t3); border-radius: var(--v6-r-sm); background: var(--v6-surface); }
body.s-pg-svc .field input:focus, body.s-pg-svc .field textarea:focus { box-shadow: none; border-bottom: 2px solid var(--v6-action); }
body.s-pg-svc .cta { position: relative; background: var(--v6-brand); border: 2px solid var(--v6-brand-ink); box-shadow: var(--v6-raise-login); }
body.s-pg-svc .cta::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: var(--v6-r-md) var(--v6-r-md) 0 0; background: linear-gradient(90deg, var(--v6-chrome-accent), var(--s-gold-light), var(--v6-chrome-accent)); }
body.s-pg-svc .cta p { color: var(--s-on-navy-2); }
body.s-pg-svc .cta .btn-primary { background: var(--v6-chrome-accent); border-color: var(--v6-brand-ink); }

/* Page command bar (sticky under the header) */
.s-subnav { position: sticky; top: var(--s-hdr-total); z-index: 90; padding: 0; border-bottom: var(--v6-line) solid var(--v6-hover); box-shadow: var(--v6-sh4); }
.s-subnav-in { flex: 1; display: flex; align-items: center; gap: 2px; min-height: 48px; overflow-x: auto; scrollbar-width: none; }
.s-subnav-in::-webkit-scrollbar { display: none; }
.s-subnav-brand { display: flex; align-items: center; padding-right: 6px; flex-shrink: 0; }
.s-subnav-brand img { height: 26px; width: auto; display: block; }
.s-subnav .v6-cmd { flex-shrink: 0; text-decoration: none; }
.s-subnav-cta { margin-left: auto; flex-shrink: 0; }
@media (max-width: 640px) { .s-subnav-cta { margin-left: 8px; } }

/* /dealerpulse/ */
body.s-pg-dp { --ground: var(--v6-brand-ink); }
body.s-pg-dp .hero { position: relative; overflow: hidden; background: var(--s-hero-bg); color: var(--s-on-navy); }
body.s-pg-dp .hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--s-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--s-grid-line) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
body.s-pg-dp .hero .wrap { position: relative; }
body.s-pg-dp .hero h1 { color: var(--s-on-navy); }
body.s-pg-dp .hero .grad { background: linear-gradient(90deg, var(--s-gold-light), var(--v6-chrome-accent) 60%, var(--s-sky)); -webkit-background-clip: text; background-clip: text; }
body.s-pg-dp .hero .lead { color: var(--s-on-navy-2); }
body.s-pg-dp .flag { font-family: var(--v6-font); font-weight: 600; color: var(--s-gold-light); background: var(--s-on-navy-fill); border: var(--v6-line) solid var(--s-on-navy-line); }
body.s-pg-dp .dp-logo { border: 2px solid var(--v6-brand-ink); box-shadow: var(--v6-raise-sm); }
body.s-pg-dp .hero .btn-primary { background: var(--v6-chrome-accent); border-color: var(--v6-brand-ink); }
body.s-pg-dp .hero .btn-primary:hover { background: var(--s-gold-light); color: var(--v6-brand-ink); }
body.s-pg-dp .hero .btn-ghost { background: transparent; color: var(--s-on-navy); border-color: var(--s-on-navy-line); }
body.s-pg-dp .hero .btn-ghost:hover { background: var(--s-on-navy-fill); color: var(--s-on-navy); }
body.s-pg-dp .shot { border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); box-shadow: var(--v6-raise); background: var(--v6-surface); }
body.s-pg-dp .hero .shot { border-color: var(--v6-brand-ink); box-shadow: var(--s-raise-xl); }
body.s-pg-dp .shot-bar { background: var(--v6-chrome); border-bottom: 3px solid var(--v6-chrome-accent); padding: 7px 12px; }
body.s-pg-dp .shot-bar i { display: none; }
body.s-pg-dp .shot-bar span { margin-left: 0; font-family: var(--v6-font); font-size: var(--v6-fs-cap); font-weight: 600; color: var(--s-on-navy); }
body.s-pg-dp .stats { background: var(--v6-canvas); padding: 36px 0 8px; }
body.s-pg-dp .stats-in { background: transparent; gap: 20px; }
body.s-pg-dp .stat { border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); background: var(--v6-block-bg); box-shadow: var(--v6-raise-sm); padding: 18px 20px 20px; margin-right: 4px; }
body.s-pg-dp .stat b { font-family: var(--v6-font); font-weight: 700; color: var(--v6-brand); }
body.s-pg-dp .stat span { color: var(--v6-t2); }
body.s-pg-dp .eyebrow { justify-content: center; }
body.s-pg-dp .eyebrow::before { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--v6-chrome-accent); }
body.s-pg-dp .sec-alt { background: var(--v6-surface); border-top: var(--v6-line) solid var(--v6-hover); border-bottom: var(--v6-line) solid var(--v6-hover); }
body.s-pg-dp .mod, body.s-pg-dp .role { border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); background: var(--v6-block-bg); box-shadow: var(--v6-raise-sm); margin-right: 4px; transition: transform .15s, box-shadow .15s; }
body.s-pg-dp .mod:hover, body.s-pg-dp .role:hover { transform: translate(-2px, -2px); box-shadow: var(--s-raise-hover); }
body.s-pg-dp .mod::before { background: linear-gradient(90deg, var(--v6-chrome-accent), var(--s-gold-light)); }
body.s-pg-dp .mod .num { font-family: var(--v6-font); font-weight: 700; color: var(--v6-chrome-accent); }
body.s-pg-dp .mod .benefit { border-top-color: var(--v6-hover); }
body.s-pg-dp .live { background: var(--s-hero-bg); }
body.s-pg-dp .live .eyebrow { color: var(--s-gold-light); }
body.s-pg-dp .live-card { border-radius: var(--v6-r-md); border-color: var(--s-on-navy-line); background: var(--s-on-navy-fill); }
body.s-pg-dp .live-card:hover { border-color: var(--s-gold-light); }
body.s-pg-dp .live-card span, body.s-pg-dp .live-note { font-family: var(--v6-font); color: var(--s-gold-light); }
body.s-pg-dp .live-note { color: var(--s-on-navy-2); }
body.s-pg-dp .price-line { font-family: var(--v6-font); font-weight: 600; border-radius: var(--v6-r-sm); box-shadow: var(--v6-raise-sm); }

/* /demo/ */
body.s-pg-demo .hero { background: var(--s-hero-bg); color: var(--s-on-navy); padding-bottom: 48px; }
body.s-pg-demo .hero::before { inset: 0; height: auto; filter: none; background: none; background-image: linear-gradient(var(--s-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--s-grid-line) 1px, transparent 1px); background-size: 48px 48px; }
body.s-pg-demo .hero h1 { color: var(--s-on-navy); }
body.s-pg-demo .hero h1 em { background: linear-gradient(90deg, var(--s-gold-light), var(--v6-chrome-accent) 60%, var(--s-sky)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.s-pg-demo .hero .eyebrow { color: var(--s-gold-light); font-family: var(--v6-font); font-weight: 600; }
body.s-pg-demo .hero .lede { color: var(--s-on-navy-2); }
body.s-pg-demo .hero .lede strong { color: var(--s-on-navy); }
body.s-pg-demo .how div { border: var(--v6-card-w) solid var(--v6-brand-ink); border-radius: var(--v6-r-md); background: var(--v6-block-bg); box-shadow: var(--v6-raise-sm); }
body.s-pg-demo .how b { font-family: var(--v6-font); font-weight: 700; color: var(--v6-chrome-accent); }
body.s-pg-demo .sec-head { border-bottom: var(--v6-line) solid var(--v6-stroke); }
body.s-pg-demo .sec-head h2 { font-family: var(--v6-font); letter-spacing: .06em; color: var(--v6-t1); }
body.s-pg-demo .card { border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); background: var(--v6-block-bg); box-shadow: var(--v6-raise-sm); margin-right: 4px; }
body.s-pg-demo .card.live:hover { border-color: var(--v6-card-line); transform: translate(-2px, -2px); box-shadow: var(--s-raise-hover); }
body.s-pg-demo .card:before { height: 4px; border-radius: var(--v6-r-md) var(--v6-r-md) 0 0; background: linear-gradient(90deg, var(--v6-chrome), var(--v6-chrome-accent), var(--v6-chrome)); }
body.s-pg-demo .card .kind { font-family: var(--v6-font); font-weight: 600; color: var(--v6-action-ink); }
body.s-pg-demo .pill { font-family: var(--v6-font); font-weight: 600; letter-spacing: .04em; border-radius: var(--v6-r-pill); }
body.s-pg-demo .pill.on { background: var(--v6-ok-bg); color: var(--v6-ok-h); border: 0; }
body.s-pg-demo .roles span { font-family: var(--v6-font); font-weight: 600; font-size: var(--v6-fs-cap); color: var(--v6-action-ink); background: var(--v6-sel); border: 0; border-radius: var(--v6-r-pill); }
body.s-pg-demo .cta:not(.doc):not(.ghost) { background: var(--v6-action); border: 2px solid var(--v6-card-line); border-radius: var(--v6-r-sm); box-shadow: var(--v6-raise-sm); filter: none; }
body.s-pg-demo .cta:not(.doc):not(.ghost):hover { background: var(--v6-action-h); transform: translate(-1px, -1px); box-shadow: var(--v6-raise); }
body.s-pg-demo .cta.doc { color: var(--v6-action); }
body.s-pg-demo .note { border: var(--v6-line) solid var(--v6-notice-line); border-left: 4px solid var(--v6-chrome-accent); background: var(--v6-notice-bg); border-radius: var(--v6-r-sm); }

/* /pricing.html */
body.s-pg-pricing { background: var(--v6-canvas); }
body.s-pg-pricing .top { position: relative; overflow: hidden; background: var(--s-hero-bg); color: var(--s-on-navy); border-bottom: 0; }
body.s-pg-pricing .top::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--s-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--s-grid-line) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
body.s-pg-pricing .top .wrap { position: relative; padding-bottom: 48px; }
body.s-pg-pricing .top h1 { color: var(--s-on-navy); }
body.s-pg-pricing .top .lede { color: var(--s-on-navy-2); }
body.s-pg-pricing .top .brandline { font-family: var(--v6-font); color: var(--s-on-navy-3); }
body.s-pg-pricing .top .eyebrow { font-family: var(--v6-font); font-weight: 600; color: var(--s-gold-light); }
body.s-pg-pricing .top a { color: var(--s-gold-light); }
body.s-pg-pricing .principles { gap: 20px; border-top: 0; }
body.s-pg-pricing .principles div { border: var(--v6-card-w) solid var(--v6-brand-ink); border-radius: var(--v6-r-md); background: var(--v6-block-bg); box-shadow: var(--v6-raise-sm); padding: 16px 18px; color: var(--v6-t1); margin-right: 4px; }
body.s-pg-pricing .principles div:last-child { border-right: var(--v6-card-w) solid var(--v6-brand-ink); }
body.s-pg-pricing .principles p { color: var(--v6-t2); }
body.s-pg-pricing .principles a { color: var(--v6-action); }
body.s-pg-pricing .nav { top: var(--s-hdr-total); z-index: 90; background: var(--v6-surface); border-bottom: var(--v6-card-w) solid var(--v6-edge-strong); box-shadow: var(--v6-sh4); }
body.s-pg-pricing .navlinks { scrollbar-width: none; }
body.s-pg-pricing .navlinks::-webkit-scrollbar { display: none; }
body.s-pg-pricing .navlinks a { font-family: var(--v6-font); letter-spacing: 0; text-transform: none; font-size: var(--v6-fs-body); color: var(--v6-t1); border-bottom: 3px solid transparent; }
body.s-pg-pricing .navlinks a:hover { background: var(--v6-surface-2); border-bottom-color: var(--v6-hover); color: var(--v6-t1); }
body.s-pg-pricing .cur button { font-family: var(--v6-font); border-radius: var(--v6-r-sm); }
body.s-pg-pricing .cur button[aria-pressed="true"] { background: var(--v6-brand); border-color: var(--v6-brand); }
body.s-pg-pricing .prod { border-bottom: 0; }
body.s-pg-pricing .prod .wrap { margin-top: 28px; padding: 32px; border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); background: var(--v6-surface); box-shadow: var(--v6-raise-sm); }
body.s-pg-pricing .prod .eyebrow, body.s-pg-pricing .close .eyebrow { font-family: var(--v6-font); font-weight: 600; color: var(--v6-action-ink); }
body.s-pg-pricing .who { background: var(--v6-sel); border-left: 4px solid var(--v6-action); }
body.s-pg-pricing .who h3, body.s-pg-pricing .pgrid h3, body.s-pg-pricing .terms h3 { font-family: var(--v6-font); color: var(--v6-t3); }
body.s-pg-pricing .tw { border-top: 3px solid var(--v6-chrome-accent); }
body.s-pg-pricing thead th { font-family: var(--v6-font); letter-spacing: .04em; color: var(--v6-t2); background: var(--v6-surface-2); }
body.s-pg-pricing tbody th { color: var(--v6-brand); }
body.s-pg-pricing tbody tr:hover td, body.s-pg-pricing tbody tr:hover th { background: var(--v6-surface-2); }
body.s-pg-pricing tr.pick th { box-shadow: inset 4px 0 0 var(--v6-chrome-accent); }
body.s-pg-pricing tr.pick th, body.s-pg-pricing tr.pick td { background: var(--v6-notice-bg); }
body.s-pg-pricing .flag { font-family: var(--v6-font); border-radius: var(--v6-r-pill); border: 0; }
body.s-pg-pricing .flag-pick { background: var(--v6-ok-bg); color: var(--v6-ok-h); }
body.s-pg-pricing .flag-road { background: var(--v6-warn-bg); color: var(--v6-warn); }
body.s-pg-pricing .close { background: transparent; }
body.s-pg-pricing .prod .wrap, body.s-pg-pricing .close .wrap { width: calc(100% - 32px); max-width: var(--maxw); }
body.s-pg-pricing .close .wrap { margin-top: 28px; padding: 32px; border: 2px solid var(--v6-brand-ink); border-radius: var(--v6-r-md); background: var(--v6-surface); box-shadow: var(--v6-raise); }
@media (max-width: 640px) {
  body.s-pg-pricing .prod .wrap, body.s-pg-pricing .close .wrap { padding: 20px 16px; }
  body.s-pg-pricing .principles div:last-child { border-bottom: var(--v6-card-w) solid var(--v6-brand-ink); }
}

/* /privacy.html: a document, so hairlines rather than card edges; the content wrapper is one card */
body.s-pg-privacy { --ground: var(--v6-canvas); --line: var(--v6-hover); --bw: 1px; }
body.s-pg-privacy > .wrap { position: relative; margin-top: 32px; padding: 32px 32px 36px; background: var(--v6-surface); border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); box-shadow: var(--v6-raise); width: calc(100% - 32px); }
body.s-pg-privacy > .wrap::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: var(--v6-r-md) var(--v6-r-md) 0 0; background: linear-gradient(90deg, var(--v6-chrome), var(--v6-chrome-accent), var(--v6-chrome)); }
body.s-pg-privacy header.pg { padding-top: 0; }
body.s-pg-privacy .eyebrow { font-family: var(--v6-font); font-weight: 600; color: var(--v6-action-ink); }
body.s-pg-privacy h2 { color: var(--v6-t1); font-weight: 600; }
body.s-pg-privacy .tw { border-color: var(--v6-stroke2); border-radius: var(--v6-r-sm); }
body.s-pg-privacy th { background: var(--v6-surface-2); color: var(--v6-t2); }
body.s-pg-privacy .callout { border-left: 4px solid var(--v6-action); background: var(--v6-sel); }
body.s-pg-privacy .meta { background: var(--v6-surface-2); border-radius: var(--v6-r-sm); }
@media (max-width: 640px) { body.s-pg-privacy > .wrap { padding: 24px 16px; } }

/* /docs/ hub: the printable one-pager family keeps its sheet design; it sits on the canvas as one raised card */
body.s-pg-docs { background: var(--v6-canvas); }
body.s-pg-docs .sheet { margin: 32px auto 0; width: calc(100% - 32px); border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); box-shadow: var(--v6-raise); overflow: hidden; }
body.s-pg-docs .pcard { border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); background: var(--v6-block-bg); box-shadow: var(--v6-raise-sm); margin-right: 4px; }
body.s-pg-docs .pcard:hover { transform: translate(-2px, -2px); box-shadow: var(--s-raise-hover); }
body.s-pg-docs .s-foot { margin-top: 64px; }