/*
 * Brand design system shared by the marketing pages rendered by HomeView —
 * was an inline <style> (HomeView.renderBrandStyles). Static, no tenant data.
 */
/* Light StoneUI hero (Phase 2): warm paper, product screenshot in a browser frame. */
.hero-light { position: relative; background: #fafaf9; overflow: hidden; border-bottom: 1px solid #ececeb; }
.hero-light::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 42% 52% at 82% 18%, rgba(22,163,116,0.06), transparent 70%),
        radial-gradient(ellipse 38% 44% at 8% 92%, rgba(15,122,82,0.045), transparent 62%);
}
.badge-e { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; color: #78716c; background: #ffffff; border: 1px solid #e7e5e4; padding: 0.35rem 0.8rem; border-radius: 3px; }
.badge-e .dot { width: 6px; height: 6px; border-radius: 50%; background: #daa520; }
/* A text underline, not a border: the accent is now a long phrase ("para la
   Ley Karin"), and a border sat far below the baseline, cut through the
   descenders and ended abruptly before the next word. skip-ink keeps the line
   clear of p/y, and it wraps with the text on narrow screens. */
.hero-underline {
    text-decoration: underline; text-decoration-color: #0f7a52;
    text-decoration-thickness: 0.07em; text-underline-offset: 0.12em;
    text-decoration-skip-ink: auto; }
.hero-img { position: relative; border: 1px solid #e7e5e4; border-radius: 3px; overflow: hidden; background: #ffffff; box-shadow: 0 1px 3px rgba(28,25,23,0.06), 0 24px 48px -30px rgba(28,25,23,0.42); }
.hero-img .fbar { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid #ececeb; background: #fafaf9; }
.hero-img .fbar .rd { width: 8px; height: 8px; border-radius: 50%; background: #d6d3d1; }
.hero-img .fbar .addr { margin-left: 0.5rem; font-family: ui-monospace, Menlo, monospace; font-size: 0.62rem; letter-spacing: 0.02em; color: #a8a29e; }
.hero-img .shot { display: block; width: 100%; height: auto; }
.hero-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end), var(--gradient-start)); z-index: 5; }
.brand-card {
    background: white; border: 1px solid #e7e5e4; border-radius: 3px;
    padding: 1.75rem; transition: border-color 0.12s; position: relative; }
.hero-credit {
    position: absolute; bottom: 0.75rem; right: 1rem;
    font-size: 0.5625rem; color: rgba(255,255,255,0.3);
    z-index: 3; font-family: var(--font-body);
}
.hero-credit a { color: rgba(255,255,255,0.4); text-decoration: underline; }

/* Restored 2026-10-09: these rules lived in the same inline <style> and were
   dropped when it moved here (9e5a754e), leaving the contact section
   transparent with white inputs on a white page and the pricing badges as
   plain text. HomeViewBrandCssTest keeps them from going missing again. */
.frosted-card {
    background: rgba(255,255,255,0.06); border-radius: 0.875rem; padding: 1.75rem;
    border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(4px);
    transition: all 0.15s; }
.frosted-card:hover {
    background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.12); }
.brand-cta {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white; position: relative; overflow: hidden; }
.brand-cta::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 50% at 30% 100%, rgba(15,122,82,0.15), transparent 70%);
    pointer-events: none; }
.pricing-featured {
    border-color: var(--brand-300) !important;
    box-shadow: 0 4px 24px rgba(15,122,82,0.08); }
.pricing-badge {
    position: absolute; top: -0.6875rem; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white; font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; padding: 0.1875rem 0.875rem; border-radius: 100px; }
/* Pro card pre-launch: features/price muted, waitlist form stays fully opaque. */
.pricing-disabled { opacity: 0.55; }
.contact-dark { background: #1c1917; position: relative; }
.contact-dark::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 50% at 30% 100%, rgba(15,122,82,0.06), transparent 70%);
    pointer-events: none; }
.contact-form-card {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1rem; padding: 2.25rem; }
.contact-input {
    width: 100%; padding: 0.625rem 0.875rem;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.4375rem; font-family: var(--font-body);
    font-size: 0.8125rem; color: white; transition: border-color 0.15s, box-shadow 0.15s; }
.contact-input:focus {
    outline: none; border-color: var(--brand-500);
    box-shadow: 0 0 0 2px rgba(22,163,116,0.12); }
.contact-input::placeholder { color: #57534e; }
/* Windows native <select> dropdown: without color-scheme the OS-rendered popup
   uses light defaults while text inherits color:white, giving white-on-white
   options. The option rules back it up for browsers that ignore color-scheme. */
select.contact-input { color-scheme: dark; }
.contact-input option { background-color: #1c1917; color: #fafafa; }
.contact-input option:checked { background-color: #292524; color: #fafafa; }