/* PromptVault experiences — shared system.
   Layout concept: light product canvas (white + pale demo panels with dot grid) with ink bands for conversion,
   matching g360technologies.com/promptvault. Inter for UI, Geist Mono for tokens, IDs and audit data. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f4f6fb;
  --raise: #ffffff;
  --ink: #1c1e28;
  --ink-2: #454a5c;
  --muted: #666c80;
  --faint: #8b92a6;
  --rule: #ebedf3;
  --rule-2: #dde1ea;
  --accent: #2d6bc4;
  --accent-ink: #ffffff;
  --accent-soft: #eaf2ff;
  --accent-line: #bdd4f7;
  --link: #2469c5;
  --ok: #1d8c55;
  --ok-soft: #daf5e9;
  --warn: #8a5d00;
  --warn-soft: #fff1cc;
  --risk: #c93434;
  --risk-soft: #fde7e7;
  --band: #1d1e27;
  --band-2: #252631;
  --band-ink: #ffffff;
  --band-muted: #a9aec0;
  --dot: rgba(28, 30, 40, .075);
  --shadow: 0 0 0 .5px var(--rule-2), 0 8px 28px -6px rgba(28, 30, 40, .12), 0 18px 60px -10px rgba(28, 30, 40, .10);
  --shadow-sm: 0 0 0 .5px var(--rule-2), 0 1px 3px rgba(28, 30, 40, .06);
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 20px;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1016; --surface: #161821; --raise: #1d1f29; --ink: #eef0f6; --ink-2: #c6cad7; --muted: #9ba1b5; --faint: #737a8f;
    --rule: #262935; --rule-2: #313545; --accent: #8e98ff; --accent-ink: #0d0f1a; --accent-soft: rgba(142, 152, 255, .13); --accent-line: rgba(142, 152, 255, .40);
    --link: #63adff; --ok: #4fd08f; --ok-soft: rgba(79, 208, 143, .14); --warn: #f2c14e; --warn-soft: rgba(242, 193, 78, .14); --risk: #ff8080; --risk-soft: rgba(255, 128, 128, .14);
    --band: #1d1f29; --band-2: #262833; --band-ink: #ffffff; --band-muted: #a9aec0; --dot: rgba(255, 255, 255, .05);
    --shadow: 0 0 0 .5px var(--rule-2), 0 10px 30px -8px rgba(0, 0, 0, .55); --shadow-sm: 0 0 0 .5px var(--rule-2), 0 1px 3px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1016; --surface: #161821; --raise: #1d1f29; --ink: #eef0f6; --ink-2: #c6cad7; --muted: #9ba1b5; --faint: #737a8f;
  --rule: #262935; --rule-2: #313545; --accent: #8e98ff; --accent-ink: #0d0f1a; --accent-soft: rgba(142, 152, 255, .13); --accent-line: rgba(142, 152, 255, .40);
  --link: #63adff; --ok: #4fd08f; --ok-soft: rgba(79, 208, 143, .14); --warn: #f2c14e; --warn-soft: rgba(242, 193, 78, .14); --risk: #ff8080; --risk-soft: rgba(255, 128, 128, .14);
  --band: #1d1f29; --band-2: #262833; --band-ink: #ffffff; --band-muted: #a9aec0; --dot: rgba(255, 255, 255, .05);
  --shadow: 0 0 0 .5px var(--rule-2), 0 10px 30px -8px rgba(0, 0, 0, .55); --shadow-sm: 0 0 0 .5px var(--rule-2), 0 1px 3px rgba(0, 0, 0, .4);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--link); }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; color: var(--ink); }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shell ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap.narrow { max-width: 860px; }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule); }
.topbar .wrap { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand b { font-weight: 700; font-size: 19px; letter-spacing: -.04em; }
.brand span { font-size: 14px; color: var(--muted); white-space: nowrap; }
.topnav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.topnav a.lnk { font-size: 14px; color: var(--ink-2); text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.topnav a.lnk:hover { background: var(--surface); }
@media (max-width: 560px) { .brand span, .topnav a.lnk.hide-sm { display: none; } }

/* ---------- type ---------- */
.eyebrow { font-size: 14px; color: var(--muted); font-weight: 500; }
.eyebrow.accent { color: var(--accent); }
.h1 { font-size: clamp(30px, 4.6vw, 44px); line-height: 1.12; letter-spacing: -.034em; }
.h2 { font-size: clamp(24px, 3.2vw, 32px); line-height: 1.18; letter-spacing: -.03em; }
.h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.02em; }
.lede { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.body { color: var(--ink-2); max-width: 64ch; }
.small { font-size: 13.5px; color: var(--muted); }
.label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

/* ---------- page hero ---------- */
.hero { padding-block: 44px 28px; display: grid; gap: 16px; }
.hero .meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.simtag { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule-2); padding: 7px 10px; border-radius: 999px; }
.simtag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 4px 9px; border-radius: 999px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--rule); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 14.5px/1 var(--sans); padding: 12px 16px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, opacity .15s; min-height: 44px; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { opacity: .88; }
.btn-ghost { background: var(--raise); color: var(--ink); border-color: var(--rule-2); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: var(--faint); }
.btn-text { background: none; color: var(--muted); padding-inline: 10px; }
.btn-text:hover { color: var(--ink); }
.btn-band { background: var(--band-ink); color: #1c1e28; }
.btn-band-ghost { background: transparent; color: var(--band-ink); border-color: rgba(255, 255, 255, .28); }
.btn-band-ghost:hover { border-color: rgba(255, 255, 255, .6); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn .arr { font-family: var(--sans); }
.btn-sm { min-height: 36px; padding: 9px 12px; font-size: 13.5px; }

/* ---------- experience frame ---------- */
.xp { display: grid; gap: 18px; padding-bottom: 40px; }
.progress { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.progress li { display: grid; gap: 8px; min-width: 0; }
.progress .bar { height: 4px; border-radius: 4px; background: var(--rule-2); position: relative; overflow: hidden; }
.progress .bar::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.progress li.done .bar::after, .progress li.current .bar::after { transform: scaleX(1); }
.progress li.done .bar::after { background: var(--ink-2); }
.progress .lbl { font-size: 12.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress li.current .lbl { color: var(--ink); font-weight: 500; }
.progress li.done .lbl { color: var(--muted); }
.stepcount { font-size: 13px; color: var(--muted); display: none; }
@media (max-width: 720px) { .progress .lbl { display: none; } .stepcount { display: block; } }

.stage { background: var(--surface); background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 14px 14px; border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(16px, 3vw, 32px); min-height: 420px; }
.panel { animation: panelIn .32s ease both; }
@keyframes panelIn { from { opacity: .001; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.controls .spacer { flex: 1; }
.kbdhint { font-size: 12.5px; color: var(--faint); }
@media (max-width: 560px) { .kbdhint { display: none; } }

/* two-column stage layout */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(16px, 2.5vw, 28px); align-items: start; }
.split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 880px) { .split, .split.even { grid-template-columns: minmax(0, 1fr); } }
.stack { display: grid; gap: 14px; align-content: start; min-width: 0; }
.stack.tight { gap: 8px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* step heading inside stage */
.stephead { display: grid; gap: 8px; margin-bottom: 20px; max-width: 70ch; }
.stephead .k { font: 500 12px/1 var(--mono); color: var(--accent); letter-spacing: .02em; }
.stephead h2 { font-size: clamp(22px, 2.8vw, 28px); line-height: 1.2; letter-spacing: -.028em; outline: none; }
.stephead p { color: var(--ink-2); }

/* ---------- surfaces ---------- */
.card { background: var(--raise); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 18px; min-width: 0; }
.card.lift { box-shadow: var(--shadow); }
.card h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.card .card-k { font: 500 11.5px/1.2 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.insight { background: var(--raise); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
.insight > header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--rule); font-size: 13.5px; font-weight: 600; }
.insight > header .dotc { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.insight > .bd { padding: 12px 14px; display: grid; gap: 8px; font-size: 13.5px; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.note { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); background: var(--raise); border: 1px dashed var(--rule-2); border-radius: var(--r); padding: 12px 14px; }
.note b { color: var(--ink); font-weight: 600; }
.note .i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--faint); display: grid; place-items: center; font: 600 11px/1 var(--sans); color: var(--faint); margin-top: 1px; }

/* guardrail badge (from product site) */
.guard { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--accent-ink); font-size: 12.5px; font-weight: 500; padding: 5px 10px; border-radius: 999px; }
.guard svg { width: 13px; height: 13px; }

/* ---------- data marks ---------- */
.tok { font: 500 12.5px/1.5 var(--mono); color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 4px; padding: 0 5px; white-space: nowrap; overflow-wrap: anywhere; }
.ent { background: var(--warn-soft); box-shadow: inset 0 -2px 0 var(--warn); border-radius: 3px; padding: 0 2px; color: var(--ink); position: relative; }
.ent[data-t]::after { content: attr(data-t); position: absolute; left: 0; bottom: calc(100% + 2px); font: 600 9.5px/1 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--warn); white-space: nowrap; background: var(--raise); padding: 2px 4px; border-radius: 3px; box-shadow: var(--shadow-sm); pointer-events: none; }
.restored { background: var(--ok-soft); border-radius: 3px; padding: 0 3px; color: var(--ink); }
.maskd { font-family: var(--mono); font-size: .92em; background: var(--surface); border: 1px solid var(--rule-2); border-radius: 3px; padding: 0 4px; color: var(--ink-2); white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 10px; border-radius: 999px; background: var(--raise); border: 1px solid var(--rule-2); color: var(--ink-2); }
.chip.sens { background: var(--warn-soft); border-color: transparent; color: var(--ink); }
.chip.sens::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.chip.ctl { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 500; }
.chip.okc { background: var(--ok-soft); border-color: transparent; color: var(--ok); font-weight: 500; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.s-ok { color: var(--ok); background: var(--ok-soft); }
.status.s-warn { color: var(--warn); background: var(--warn-soft); }
.status.s-gap { color: var(--risk); background: var(--risk-soft); }
.status.s-unk { color: var(--muted); background: var(--surface); border: 1px solid var(--rule-2); }
.status.s-ctx { color: var(--accent); background: var(--accent-soft); }

/* chat composer look (generic, not a product screenshot) */
.composer { background: var(--raise); border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--accent-line); padding: 14px; display: grid; gap: 12px; }
.bubble { background: var(--surface); border-radius: 14px 14px 4px 14px; padding: 12px 14px; font-size: 14.5px; line-height: 1.75; color: var(--ink); justify-self: end; max-width: 100%; }
.bubble.ai { border-radius: 14px 14px 14px 4px; justify-self: start; background: var(--raise); border: 1px solid var(--rule); }
.inputline { display: flex; align-items: center; gap: 10px; border: 1px solid var(--rule-2); border-radius: 12px; padding: 10px 12px; color: var(--faint); font-size: 14px; }
.inputline .plus { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--rule-2); color: var(--muted); flex: none; }
.inputline .send { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-size: 13px; flex: none; }
.filechip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; background: var(--surface); border: 1px solid var(--rule-2); border-radius: 8px; padding: 6px 10px; }
.filechip .ft { font: 600 10px/1 var(--mono); background: var(--risk-soft); color: var(--risk); padding: 3px 4px; border-radius: 3px; }

/* audit timeline */
.trail { list-style: none; margin: 0; padding: 0; display: grid; }
.trail li { display: grid; grid-template-columns: 74px 14px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.trail li:last-child { border-bottom: 0; }
.trail time { font: 500 12px/1.5 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.trail .nd { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 5px; box-shadow: 0 0 0 3px var(--accent-soft); }
.trail .ev { font: 500 11px/1.5 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
@media (max-width: 520px) { .trail li { grid-template-columns: 62px 12px minmax(0, 1fr); } .trail .ev { grid-column: 3; } }

/* selectable option tiles */
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.opt { text-align: left; background: var(--raise); border: 1px solid var(--rule-2); border-radius: var(--r); padding: 14px 16px; cursor: pointer; display: grid; gap: 4px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .15s; min-height: 56px; }
.opt:hover { border-color: var(--faint); }
.opt[aria-pressed="true"], .opt[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-sm); }
.opt .t { font-weight: 600; font-size: 15px; color: var(--ink); }
.opt .d { font-size: 13.5px; color: var(--muted); }
.opt .k { font: 500 11px/1 var(--mono); color: var(--faint); }

/* segmented control */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--raise); border: 1px solid var(--rule-2); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: none; padding: 8px 11px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; min-height: 36px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* code-ish technical blocks */
.tech { background: var(--band); color: #e6e8f0; border-radius: var(--r); padding: 14px 16px; font: 12.5px/1.7 var(--mono); overflow-x: auto; white-space: pre; }
.tech .c { color: #8b92a6; }
.tech .s { color: #a9b3ff; }
.tech .g { color: #6fdca5; }

/* ---------- conversion band ---------- */
.ctaband { background: var(--band); color: var(--band-ink); border-radius: var(--r-lg); padding: clamp(22px, 4vw, 40px); display: grid; gap: 18px; }
.ctaband h2 { color: var(--band-ink); font-size: clamp(22px, 3vw, 30px); letter-spacing: -.03em; line-height: 1.2; }
.ctaband p { color: var(--band-muted); max-width: 62ch; }
.ctaband .row { gap: 12px; }
.ctaband .fineprint { font-size: 12.5px; color: var(--band-muted); }

/* prototype form */
.pform { background: var(--band-2); border-radius: var(--r); padding: 18px; display: grid; gap: 14px; }
.pform .banner { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; background: rgba(255, 184, 0, .14); color: #ffd56b; border-radius: 8px; padding: 10px 12px; }
.pform .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.pform label { display: grid; gap: 6px; font-size: 13px; color: var(--band-muted); }
.pform input, .pform select, .pform textarea { font: inherit; font-size: 14.5px; color: var(--band-ink); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; padding: 10px 12px; width: 100%; min-width: 0; color-scheme: dark; }
.pform textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.pform input:focus, .pform select:focus, .pform textarea:focus { outline: 2px solid #8e98ff; outline-offset: 1px; }
.pform .done { font-size: 14px; color: var(--band-ink); background: rgba(79, 208, 143, .14); border-radius: 8px; padding: 12px 14px; }

/* footer */
.foot { border-top: 1px solid var(--rule); margin-top: 40px; }
.foot .wrap { padding-block: 22px 40px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; font-size: 13px; color: var(--muted); }
.foot a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* v6 brand alignment: G360 product blue, white product canvas and dark website sections */
:root[data-theme="light"]{--accent:#2d6bc4;--accent-soft:#eaf2ff;--accent-line:#bdd4f7;--link:#2469c5}
.pv-product{display:grid;grid-template-columns:94px minmax(0,1fr);border:1px solid #dbe2ef;border-radius:16px;overflow:hidden;background:#f6f6f6;min-height:420px;color:#15171d}
.pv-side{background:#306dc3;color:#dce8fa;display:flex;flex-direction:column;align-items:stretch;text-align:center;font-size:11px}
.pv-side .logo{padding:18px 5px;color:white;font-weight:800;background:#2661af;font-size:13px}
.pv-side .navstep{padding:18px 5px;border:0;background:none;color:inherit;font:inherit;cursor:pointer}.pv-side .navstep.active{background:#2458a2;color:white}.pv-side .navstep:focus-visible{outline:2px solid white;outline-offset:-3px}
.pv-main{min-width:0}.pv-top{background:white;border-bottom:1px solid #d9dfe8;padding:20px 26px;color:#2d6bc4;font-size:21px;font-weight:600}.pv-work{padding:24px;min-height:340px}.pv-work h2{color:#141923}.pv-work p{color:#495267}.pv-panel{background:white;border:1px solid #dce3ee;border-radius:13px;padding:18px;margin:14px 0}.pv-panel code{white-space:normal;overflow-wrap:anywhere}.pv-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pv-chip{display:inline-block;padding:6px 9px;border-radius:7px;background:#eaf2ff;color:#215ca8;margin:3px;font-size:12px}.pv-token{background:#e3f5eb;color:#126b43;padding:3px 5px;border-radius:4px}.pv-highlight{background:#fff1c7;color:#774e00;padding:3px 5px;border-radius:4px}@media(max-width:650px){.pv-product{grid-template-columns:70px minmax(0,1fr)}.pv-side .navstep{font-size:10px;padding:13px 2px}.pv-top{padding:15px;font-size:17px}.pv-work{padding:12px}.pv-two{grid-template-columns:1fr}}

/* v6.1 website/product pairing. Marketing navigation and landing hero reflect G360 website;
   working UI remains light like PromptVault Assist. */
:root{color-scheme:light;--accent:#2e6fc7;--accent-soft:#eaf2ff;--accent-line:#bdd4f7;--link:#2568c1}
.topbar{background:#1d1e27;border-bottom-color:#343642;backdrop-filter:none}
.topbar .brand,.topbar .brand b{color:#fff}.topbar .brand span{color:#b9c0d0}.topbar .topnav a.lnk{color:#ebedf5}
.topbar .topnav .btn-ghost{background:#fff;color:#17253c;border-color:#fff;box-shadow:none}
.topbar .topnav .btn-ghost:hover{background:#e9f1ff}
.pv-campaign-hero{position:relative;overflow:hidden;background:linear-gradient(115deg,#1d1e27 0%,#1b1c24 48%,#252630 100%);color:#fff;isolation:isolate}
.pv-campaign-hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.34;background-image:radial-gradient(circle,rgba(167,178,198,.48) 1.8px,transparent 2.2px);background-size:22px 22px;mask-image:linear-gradient(90deg,transparent 7%,#000 54%,#000 100%);z-index:-1}
.pv-campaign-hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#1c1d26 0%,rgba(28,29,38,.95) 34%,rgba(28,29,38,.35) 86%);z-index:-1}
.pv-campaign-hero .hero{padding-block:92px 94px;max-width:925px;position:relative;z-index:2;gap:20px}
.pv-campaign-hero .eyebrow{letter-spacing:.09em;color:#9dbced;font-weight:700;font-size:12px}
.pv-campaign-hero .h1{color:#fff;font-size:clamp(38px,5vw,69px);line-height:1.09;letter-spacing:-.045em;font-weight:550}
.pv-campaign-hero .h1 span{color:#d2d8e7}
.pv-campaign-hero .lede{color:#d3d7e2;max-width:650px;font-size:19px}
.pv-campaign-hero .meta{margin-top:10px;gap:10px}
.hero-kicker{border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#e3e9f6;padding:7px 11px;font-size:12px;background:rgba(255,255,255,.055)}
.pv-dot-cluster{position:absolute;z-index:1;display:block;width:76px;height:10px;background:radial-gradient(circle,#65cd54 4px,transparent 4.5px);background-size:18px 10px;opacity:.95}
.pv-dot-cluster.c1{right:12%;top:20%;width:85px}.pv-dot-cluster.c2{right:23%;bottom:25%;width:56px;background-image:radial-gradient(circle,#ffbb2d 4px,transparent 4.5px)}.pv-dot-cluster.c3{right:5%;bottom:44%;width:61px;background-image:radial-gradient(circle,#e84a4a 4px,transparent 4.5px)}
.pv-campaign-content{padding-top:35px;padding-bottom:55px}
.pv-campaign-content .xcard{border:1px solid #e5e8ee;box-shadow:0 8px 36px rgba(26,33,55,.055)}
.pv-campaign-content .xcard:hover{border-color:#a9c5ec;box-shadow:0 10px 37px rgba(31,58,110,.11)}
.pv-campaign-content .xcard .letter{color:#2e6fc7}
/* Product-inspired components */
.pv-side .logo{padding:0;background:#306cc3;min-height:107px;display:flex;align-items:center;justify-content:center}
.pv-side .logo img{width:100%;height:auto;max-width:98px;display:block}
.pv-side .navstep{line-height:1.55;min-height:68px;font-size:12px}
.pv-composer{margin:16px 0 4px;padding:20px 22px;border:8px solid #fff;border-radius:24px;background:#fff;box-shadow:0 0 0 1px #e0e4ed;color:#556175}
.pv-composer .command{font-size:16px;color:#202d4a;font-weight:500}.pv-composer .prompt-detail{color:#66758d;font-size:13px;margin-top:8px}
.pv-composer .actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:21px}.pv-composer .circle{color:#285fb1;font-size:25px;font-weight:700}.pv-composer .model{border-radius:18px;background:#f7faff;border:1px solid #c5d8f5;padding:8px 13px;color:#1d3b69;font-size:12px}
.pv-work .stepcount{display:block;font-size:12px;color:#5c6c84;margin-bottom:10px}
.pv-work .controls{border-top:1px solid #e9eef5;padding-top:16px;margin-top:18px}
.pv-flow-stage{border:1px solid #d7e0ef;border-radius:15px;background:#f8fbff;margin:18px 0;padding:18px}
.pv-flow-stage .eyebrowline{font-size:11px;color:#3569a7;font-weight:700;text-transform:uppercase;letter-spacing:.075em;margin:0 0 11px}
.pv-flow-stage .pv-two{gap:14px}
.pv-flow-stage .pv-panel{margin:0;min-height:140px;box-shadow:0 2px 12px rgba(36,74,130,.035)}
.pv-flow-stage .pv-panel strong{display:block;color:#28364c;margin-bottom:8px}
.pv-flow-stage .pv-panel p{line-height:1.55}
.pv-flow-stage .pv-chip{white-space:normal;overflow-wrap:anywhere}
.pv-flow-stage .pv-highlight,.pv-flow-stage .pv-token{display:inline-block;max-width:100%;overflow-wrap:anywhere;margin-top:4px}
.pv-flow-stage .pv-before{font-size:13px;color:#4b566b}.pv-flow-stage .pv-value{font:500 13px/1.6 var(--mono);overflow-wrap:anywhere;color:#223348}
.pv-flow-stage .pv-status{font-size:12px;color:#215c9d;background:#eaf2ff;padding:6px 10px;border-radius:999px;display:inline-block;margin-top:12px}
.pv-audit-row{padding:9px 0;border-bottom:1px solid #e7edf6;display:flex;justify-content:space-between;align-items:start;gap:10px;font-size:13px;color:#34475f}
.pv-audit-row:last-child{border-bottom:0}
.pv-audit-row .pv-status{margin:0}
@media(max-width:760px){.pv-campaign-hero .hero{padding-block:67px 73px}.pv-campaign-hero .lede{font-size:16px}.pv-dot-cluster{display:none}.pv-flow-stage .pv-two{grid-template-columns:1fr}.pv-flow-stage{padding:14px}}
@media(prefers-color-scheme:dark){:root:not([data-theme="dark"]){color-scheme:light;--bg:#fff;--surface:#f4f6fb;--raise:#fff;--ink:#1c1e28;--ink-2:#454a5c;--muted:#666c80;--faint:#8b92a6;--rule:#ebedf3;--rule-2:#dde1ea;--accent:#2e6fc7;--accent-ink:#fff;--accent-soft:#eaf2ff;--accent-line:#bdd4f7;--link:#2469c5;--ok:#1d8c55;--ok-soft:#daf5e9;--warn:#8a5d00;--warn-soft:#fff1cc;--risk:#c93434;--risk-soft:#fde7e7;--band:#1d1e27;--band-2:#252631;--band-ink:#fff;--band-muted:#a9aec0;--dot:rgba(28,30,40,.075);--shadow:0 0 0 .5px var(--rule-2),0 8px 28px -6px rgba(28,30,40,.12);--shadow-sm:0 0 0 .5px var(--rule-2),0 1px 3px rgba(28,30,40,.06)}}

.nav-condensed{display:none}
@media(max-width:650px){.nav-full{display:none}.nav-condensed{display:inline}.pv-side .navstep{line-height:1.5}}

/* v8 additions */
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.pv-side .logo { flex-direction: column; gap: 6px; padding: 16px 6px; }
.pv-side .logo img { width: 40px; max-width: 40px; }
.pv-side .logo .logo-word { color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .02em; }
.ctaband .more-line { font-size: 14px; color: var(--band-muted); margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); max-width: none; }
.ctaband .more-line a { color: var(--band-ink); font-weight: 600; text-underline-offset: 3px; }

/* ---------- G360 site theme (added when published on g360technologies.com) ----------
   Matches app/globals.css: ink #1c1e28, muted #454a5c / #666c80, hairline #ebedf3,
   wash #f4f6fb, night #1c1e28, on-dark text #939bb0, and the PromptVault guardrail
   indigo (#4351e0 / #92a0f8) as the one accent. Inter + Geist Mono as before. */
:root, :root:not([data-theme="dark"]) {
  --accent: #4351e0; --accent-ink: #ffffff; --accent-soft: #eef0fe; --accent-line: #c8cffb;
  --link: #1c1e28; --muted: #666c80; --ink-2: #454a5c;
  --band: #1c1e28; --band-2: #262833; --band-muted: #939bb0;
  --r-sm: 6px; --r: 10px; --r-lg: 12px;
}
.wrap { max-width: 1240px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }

/* header: the site's white bar with the G360 logo */
.topbar { background: var(--bg); border-bottom: 1px solid var(--rule); backdrop-filter: none; }
.topbar .wrap { min-height: 64px; }
.topbar .brand { display: inline-flex; align-items: center; }
.topbar .brand img { display: block; height: 20px; width: auto; }
.brand-sub { font-size: 14px; color: var(--muted); text-decoration: none; padding-left: 14px; margin-left: 2px; border-left: 1px solid var(--rule-2); white-space: nowrap; }
.brand-sub:hover { color: var(--ink); }
.topbar .topnav a.lnk { color: var(--ink-2); }
.topbar .topnav .btn-ghost { background: var(--raise); color: var(--ink); border-color: var(--rule-2); box-shadow: var(--shadow-sm); }
.topbar .topnav .btn-ghost:hover { background: var(--surface); }
@media (max-width: 560px) { .brand-sub { display: none; } }

/* type: medium-weight headings with the site's tracking; plain eyebrows */
.h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.14; letter-spacing: -.036em; font-weight: 500; }
.eyebrow, .eyebrow.accent { font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; text-transform: none; }
.pv-campaign-hero { background: var(--band); }
.pv-campaign-hero::after { background: linear-gradient(90deg, #1c1e28 0%, rgba(28,30,40,.95) 34%, rgba(28,30,40,.35) 86%); }
.pv-campaign-hero .eyebrow { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--band-muted); }
.pv-campaign-hero .h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.14; letter-spacing: -.036em; font-weight: 500; }
.pv-campaign-hero .lede { color: #c9cede; font-size: 18px; }
.pv-campaign-content .xcard .go, .pv-campaign-content .more-item .mi-meta, .pv-campaign-content .mi-icon { color: var(--ink); }
.pv-campaign-content .xcard:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); }

/* buttons: the site's 6px radius */
.btn { border-radius: 6px; font-size: 14px; }

/* footer: the site's night footer */
.foot { background: var(--band); border-top: 0; margin-top: 56px; color: var(--band-muted); }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 28px; padding-block: 44px 36px; font-size: 13px; color: var(--band-muted); }
.foot a { color: var(--band-muted); text-decoration: none; }
.foot a:hover { color: #fff; }
.foot .foot-top, .foot .foot-bottom { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: center; }
.foot .foot-top img { display: block; height: 20px; width: auto; }
.foot .foot-bottom { border-top: 1px solid #272a32; padding-top: 22px; }
.foot .foot-links { display: flex; gap: 20px; flex-wrap: wrap; }