/* ReMailBot — industrial gray + mustard. Geometric sans, hard edges, "robotic" lockup.
   Personas 5 + 6 (sales follow-up + ops automation). */
/* Design review: Sebastián Rojas-Iverson. Brief: snap to 8 pt, demote Space Mono to ID-only,
   bump muted contrast to AAA, normalize card padding, status pill component, refactor !important. */

:root[data-site="remailbot"] {
    --rb-bg: #1c1c1c;
    --rb-surface: #2a2a2a;
    --rb-fg: #f4f4f5;
    /* Sebastián: muted bumped from #a1a1aa to #b0b0b8 — AAA on the surface. */
    --rb-muted: #b0b0b8;
    --rb-accent: #ca8a04;
    --rb-accent-2: #fbbf24;
    --rb-ok: #65d669;
    --rb-rule: #404040;
    --rb-rule-strong: #585858;
    --rb-mono: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
    --rb-sans: "Space Grotesk", "Inter", system-ui, sans-serif;
    /* 8 pt grid. */
    --rb-s1: 8px; --rb-s2: 16px; --rb-s3: 24px; --rb-s4: 32px; --rb-s5: 48px; --rb-s6: 64px;
}
html[data-site="remailbot"], body { background: var(--rb-bg); color: var(--rb-fg); }
body { font-family: var(--rb-sans); margin: 0; line-height: 1.55; -webkit-font-smoothing: antialiased; }

.rb-container { max-width: 1080px; margin: 0 auto; padding: 0 var(--rb-s3); }

.rb-header { background: var(--rb-bg); padding: var(--rb-s2) 0; border-bottom: 1px solid var(--rb-rule); }
.rb-header .rb-container { display: flex; justify-content: space-between; align-items: center; }
.rb-brand {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--rb-fg); text-decoration: none;
    font-family: var(--rb-sans); font-weight: 700; font-size: 1.1rem; letter-spacing: .02em;
}
.rb-brand-eye {
    color: var(--rb-accent); margin-right: .15rem;
    font-size: .75rem; transform: translateY(-1px);
    /* Single-pixel blink — robot eye. */
    animation: rb-blink 3.6s step-end infinite;
}
@keyframes rb-blink { 0%, 96%, 100% { opacity: 1; } 97%, 99% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rb-brand-eye { animation: none; } }

.rb-nav { display: flex; align-items: center; gap: .25rem; }
.rb-nav a {
    color: var(--rb-muted); text-decoration: none; margin-left: var(--rb-s2);
    font-family: var(--rb-mono); font-size: .85rem;
    transition: color .12s ease;
}
.rb-nav a:hover { color: var(--rb-fg); }
.rb-nav a:focus-visible { outline: 2px solid var(--rb-accent); outline-offset: 4px; }

/* Sebastián: refactor !important. */
.rb-nav a.rb-cta {
    background: var(--rb-accent); color: #1a1100;
    padding: .5rem 1rem; border-radius: 0; font-weight: 700;
    font-family: var(--rb-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem;
}
.rb-nav a.rb-cta:hover { background: var(--rb-accent-2); color: #1a1100; }

.rb-main { padding: 0; }
.rb-hero { padding: var(--rb-s6) 0 var(--rb-s5); }
.rb-tag {
    font-family: var(--rb-mono); color: var(--rb-accent);
    font-size: .8rem; letter-spacing: .14em;
    margin-bottom: var(--rb-s2); display: inline-block;
    text-transform: uppercase;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.08; margin: var(--rb-s1) 0 var(--rb-s2); letter-spacing: -.02em; font-weight: 700; }
.rb-accent { color: var(--rb-accent); }
.rb-lede { color: var(--rb-muted); font-size: 1.1rem; max-width: 60ch; }

.rb-btn {
    display: inline-block; padding: var(--rb-s1) var(--rb-s3);
    border-radius: 0; text-decoration: none; font-weight: 700;
    margin-top: var(--rb-s2);
    font-family: var(--rb-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem;
    border: 2px solid transparent;
    transition: background-color .12s ease, border-color .12s ease, transform .08s ease;
}
.rb-btn-primary { background: var(--rb-accent); color: #1a1100; border-color: var(--rb-accent); padding: 14px var(--rb-s3); }
.rb-btn-primary:hover { background: var(--rb-accent-2); border-color: var(--rb-accent-2); }
.rb-btn-primary:active { transform: translateY(1px); }
.rb-btn:focus-visible { outline: 2px solid var(--rb-accent); outline-offset: 3px; }

/* Status pill — Sebastián's signature component. CONNECTED / RUNNING / PAUSED. */
.rb-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: 2px 8px;
    font-family: var(--rb-mono); font-size: .7rem;
    text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
    border: 1px solid currentColor;
}
.rb-pill::before {
    content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 50%;
}
.rb-pill-ok      { color: var(--rb-ok); }
.rb-pill-running { color: var(--rb-accent-2); }
.rb-pill-paused  { color: var(--rb-muted); }

.rb-grid-section { padding: var(--rb-s2) 0 var(--rb-s6); }
.rb-grid-section h2 { font-size: 1.6rem; margin: 0 0 var(--rb-s3); letter-spacing: -.005em; }

.rb-grid { display: grid; gap: var(--rb-s2); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rb-grid article {
    background: var(--rb-surface); border: 1px solid var(--rb-rule); padding: 0;
    transition: border-color .15s ease, transform .15s ease;
}
.rb-grid article:hover { border-color: var(--rb-rule-strong); transform: translateY(-2px); }
.rb-grid header {
    background: var(--rb-bg); color: var(--rb-accent);
    padding: var(--rb-s1) var(--rb-s2);
    font-family: var(--rb-mono); font-size: .8rem; letter-spacing: .12em;
    border-bottom: 1px solid var(--rb-rule);
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    text-transform: uppercase;
}
/* Sebastián: normalize card padding. One container, one rule. */
.rb-grid-body { padding: var(--rb-s2); }
.rb-grid h3 { margin: 0 0 .5rem; font-size: 1.15rem; letter-spacing: -.005em; }
.rb-grid p { color: var(--rb-muted); margin: 0; }

::selection { background: var(--rb-accent); color: #1a1100; }

.rb-footer { padding: var(--rb-s3) 0 var(--rb-s5); border-top: 1px solid var(--rb-rule); color: var(--rb-muted); font-size: .9rem; }
.rb-footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.rb-footer a { color: var(--rb-muted); text-decoration: none; }
.rb-footer a:hover { color: var(--rb-accent); }

.skip-to-content {
    position: absolute; left: -9999px;
    background: var(--rb-accent); color: #1a1100;
    padding: var(--rb-s1) var(--rb-s2); border-radius: 0;
    font-family: var(--rb-mono); font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; z-index: 1000;
}
.skip-to-content:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}