/* Shared chrome for Rusty AI product demos — matches the trustyrusty.ai system (no brown). */
:root{
  --paper:#F4F4F5; --paper-2:#EAEAEC; --paper-3:#DEDEE1;
  --ink:#0C0C0D; --ink-2:#18181B; --ink-3:#26262A;
  --silver-3:#8A8A92; --silver-4:#56565E; --line:rgba(12,12,13,.12); --line-2:rgba(12,12,13,.24);
  --pop-magenta:#FF1E6F; --pop-cyan:#06C7D6; --pop-yellow:#FFD400; --pop-violet:#6C3CE0;
  --pop:var(--pop-cyan);
  --serif:'Playfair Display',Georgia,serif; --sans:'Space Grotesk',system-ui,sans-serif; --mono:'Space Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-accent="cyan"]{--pop:var(--pop-cyan)}
[data-accent="magenta"]{--pop:var(--pop-magenta)}
[data-accent="yellow"]{--pop:var(--pop-yellow)}
[data-accent="violet"]{--pop:var(--pop-violet)}
[data-accent="blue"]{--pop:#2150E6}
[data-accent="green"]{--pop:#12A150}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--pop-yellow);color:var(--ink)}
.mono{font-family:var(--mono)}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

/* top app bar */
.demo-bar{position:sticky;top:0;z-index:40;background:rgba(244,244,245,.86);backdrop-filter:blur(12px) saturate(1.3);border-bottom:1px solid var(--line)}
.demo-bar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:62px}
.demo-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver-4)}
.demo-back b{font-family:var(--serif);font-weight:900;color:var(--ink);font-size:15px;letter-spacing:0}
.demo-back .slash{color:var(--pop-magenta)}
.demo-back:hover{color:var(--ink)}
.appname{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;font-size:19px}
.appname .dot{width:11px;height:11px;border-radius:50%;background:var(--pop);box-shadow:3px 3px 0 var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:10px 16px;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--pop)}
.btn--pop{background:var(--pop);color:var(--ink);border-color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--sm{padding:7px 12px;font-size:11px}

/* hero strip */
.demo-hero{padding:clamp(24px,5vw,52px) 0 clamp(16px,3vw,28px)}
.demo-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--pop);font-weight:700}
.demo-hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(30px,5vw,52px);line-height:1.02;letter-spacing:-.01em;margin:12px 0 10px}
.demo-hero p{color:var(--silver-4);max-width:60ch;font-size:clamp(15px,1.6vw,18px)}
.demo-hero .demo-flag{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--silver-4);border:1px dashed var(--line-2);padding:5px 10px}

/* generic panels / cards */
.panel{background:#fff;border:1px solid var(--line);box-shadow:0 1px 0 var(--line)}
.panel--dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--silver-4)}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.pill--pop{background:var(--pop);color:var(--ink)}
.pill--ink{background:var(--ink);color:var(--paper)}
.pill--soft{background:var(--paper-2);color:var(--silver-4)}
.pill--ok{background:#0d7a3f;color:#fff}

/* AI callout banner */
.ai-banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--ink);color:var(--paper);padding:16px 20px;border-left:6px solid var(--pop)}
.ai-banner .ai-ic{font-size:22px;line-height:1}
.ai-banner b{font-family:var(--serif)}
.ai-banner .ai-txt{flex:1;min-width:220px}
.ai-banner .ai-sub{color:#c9c9d1;font-size:13px;margin-top:2px}

/* bottom CTA */
.demo-foot{margin-top:clamp(36px,6vw,72px);background:var(--ink);color:var(--paper)}
.demo-foot__in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:clamp(28px,5vw,52px) 0}
.demo-foot h2{font-family:var(--serif);font-weight:700;font-size:clamp(22px,3vw,34px);line-height:1.1;max-width:22ch}
.demo-foot h2 em{font-style:italic;color:var(--pop)}
.demo-foot p{color:#b9b9c1;font-size:14px;margin-top:8px}
.demo-foot .mono{color:var(--silver-3);font-size:11px;letter-spacing:.06em}

/* fade-in helper */
.fx{opacity:0;transform:translateY(10px);animation:fx .5s var(--ease) forwards}
@keyframes fx{to{opacity:1;transform:none}}
.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

@media (max-width:760px){
  .demo-bar__in{height:56px}
  .appname{font-size:16px}
  .demo-back b{font-size:13px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}