/* Shared styles for the jefe-simple homepage concept (home + product page). */

:root { color-scheme: dark; }
body { background: #0B0A09; }
::selection { background: #C8102E; color: #fff; }

h1, h2, h3, h4, .display { font-family: Montserrat, system-ui, sans-serif; letter-spacing: -0.015em; }

/* Eyebrow: small caps in gold, with a short printed rule when left-aligned */
.eyebrow { font-family: Montserrat, system-ui, sans-serif; font-weight: 700; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #D4AF37; }
.eyebrow-rule { display: inline-flex; align-items: center; gap: .75rem; }
.eyebrow-rule::before { content: ''; width: 1.5rem; height: 1px; background: currentColor; opacity: .8; }
.eyebrow-muted { color: rgba(230, 226, 221, .42); }

/* One warm lamp on the hero, not a neon glow */
.hero-warm {
    background:
        radial-gradient(ellipse 42rem 30rem at 78% 22%, rgba(212, 175, 55, .10), transparent 70%),
        radial-gradient(ellipse 30rem 22rem at 8% 92%, rgba(200, 16, 46, .05), transparent 70%);
}

/* Hairline connecting numbered steps */
.flow-line::after { content: ''; position: absolute; left: 1.2rem; top: 3rem; bottom: -1.5rem; width: 1px; background: rgba(212, 175, 55, .3); }
.flow-line:last-child::after { display: none; }

/* Paper: a printed note, the crafted counterpoint to the dark page */
.paper {
    background: linear-gradient(180deg, #F1EDE6 0%, #E9E4DC 100%);
    color: #1B1814;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(27, 24, 20, .06);
}
.paper .eyebrow { color: #8A6D1D; }
.paper ol { counter-reset: note; }
.paper ol > li { position: relative; padding-left: 2rem; counter-increment: note; }
.paper ol > li::before { content: counter(note, decimal-leading-zero); position: absolute; left: 0; top: .1rem; font-family: Montserrat, sans-serif; font-weight: 800; font-size: .7rem; letter-spacing: .08em; color: #8A6D1D; }

/* Job posting card: the club's own language */
.posting li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; padding: .7rem 0; border-top: 1px solid rgba(27, 24, 20, .09); }
.posting li:first-child { border-top: 0; }
.tag { display: inline-block; white-space: nowrap; border-radius: 999px; padding: .2rem .6rem; font-family: Montserrat, sans-serif; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tag-handled { background: rgba(212, 175, 55, .18); color: #7A5F14; }
.tag-yours { background: rgba(27, 24, 20, .07); color: rgba(27, 24, 20, .6); }

/* Phone: what the player actually gets */
.phone { width: 100%; max-width: 21.5rem; margin-inline: auto; padding: .55rem; border-radius: 3.1rem; background: #262219; box-shadow: 0 40px 90px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(230, 226, 221, .10); }
.phone-screen { display: flex; flex-direction: column; min-height: 40rem; overflow: hidden; border-radius: 2.6rem; background: #0F0E0C; }
.app-card { border-radius: 1rem; border: 1px solid rgba(230, 226, 221, .10); background: #171513; padding: .85rem .95rem; }
.app-card-focus { border-color: rgba(212, 175, 55, .45); background: rgba(212, 175, 55, .10); }
.app-kicker { font-family: Montserrat, sans-serif; font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(230, 226, 221, .5); }
.app-kicker-gold { color: #D4AF37; }
.app-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(230, 226, 221, .10); padding: .7rem .5rem .9rem; font-size: .62rem; text-align: center; color: rgba(230, 226, 221, .42); }
.app-tabs span:first-child { color: #E6E2DD; font-weight: 600; }

/* Hero variant switcher (preview tool, not part of the design) */
.variants { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; }
.variants button { border: 1px solid rgba(212, 175, 55, .35); border-radius: 999px; padding: .15rem .6rem; font-family: Montserrat, sans-serif; font-size: .62rem; font-weight: 700; letter-spacing: .08em; color: #D4AF37; background: transparent; cursor: pointer; }
.variants button:hover { background: rgba(212, 175, 55, .12); }
.variants button[aria-pressed="true"] { background: #D4AF37; color: #0B0A09; }

/* Shared rep component: match the page's type instead of its default terminal mono */
.rep-embed .to-progress span, .rep-embed .to-rep-kicker { font-family: Montserrat, system-ui, sans-serif; font-weight: 700; letter-spacing: .12em; }

@media (max-width: 640px) {
    .rep-embed .quiz-video:has(.to-overlay.visible),
    .rep-embed .quiz-video:has(.to-answer.visible) { aspect-ratio: auto; min-height: 22rem; }
}