/* ============================================================
   Your Guild — public site (server-rendered pages, 2026-10-02)
   Tokens, buttons and cards come from css/app.css (the app's design system); this file is only
   what the public pages add. The landing styles are Home.razor.css, moved here unchanged under
   .landing so they cannot leak into the other pages.
   ============================================================ */

/* Header and footer (every public page) */
.site-header { border-bottom: 1px solid var(--espresso); padding: var(--s-2) 0; }
.site-header-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.wordmark { font-family: var(--font-display); font-size: 1.2rem; color: var(--parchment); }
.site-nav { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.site-nav a { color: var(--sand); font-size: 0.95rem; }
.site-nav a:hover { color: var(--parchment); }
.site-nav .account-link { color: var(--parchment); border: 1px solid var(--warm-wood); border-radius: var(--r-btn); padding: 6px 14px; }

.site-footer { border-top: 1px solid var(--espresso); padding: var(--s-4) 0; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; }
.footer-brand { font-family: var(--font-display); font-size: 1.2rem; color: var(--parchment); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); justify-content: center; }
.footer-links a { color: var(--sand); font-size: 0.9rem; }
.footer-links a:hover { color: var(--parchment); }
.footer-copy { color: var(--stone); font-size: 0.85rem; }

/* Content pages: About, FAQ, Terms, team members, articles */
.page { padding: var(--s-5) 0 var(--s-6); }
.page-inner { max-width: 760px; }
.page h2 { font-size: 1.35rem; margin-top: var(--s-4); }
.page .lead { font-size: 1.15rem; }
.page-cta { margin-top: var(--s-4); }
.prose p, .prose li { color: var(--sand); font-size: 1.05rem; line-height: 1.7; max-width: 680px; }
.prose a { color: var(--parchment); text-decoration: underline; }
.commitments ol { padding-left: 1.3em; color: var(--sand); }
.commitments li { margin-bottom: var(--s-2); }
.commitments strong { color: var(--aged-gold); }

/* Team member pages */
.member-emoji.big { font-size: 2.6rem; margin-bottom: var(--s-1); }
.checks, .crosses, .asks { list-style: none; padding: 0; margin: 0; }
.checks li, .crosses li, .asks li { color: var(--sand); margin-bottom: var(--s-1); padding-left: 1.6em; position: relative; }
.checks li::before { content: "✓"; color: var(--aged-gold); position: absolute; left: 0; }
.crosses li::before { content: "✕"; color: var(--stone); position: absolute; left: 0; }
.asks li { font-style: italic; color: var(--parchment); }
.asks li::before { content: "—"; color: var(--warm-wood); position: absolute; left: 0; font-style: normal; }
.team-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-1); }
.team-links .card { padding: var(--s-2); color: var(--parchment); }
.team-links .card:hover { border-color: var(--warm-wood); }

/* FAQ (from Help.razor.css) */
.faq-feature {
    background: var(--espresso); border: 1px solid var(--warm-wood);
    border-radius: var(--r-card); padding: var(--s-3); margin-bottom: var(--s-4);
}
.faq-feature h2 { font-size: 1.25rem; color: var(--parchment); margin: 0 0 var(--s-2); }
.faq-feature ol { padding-left: 1.3em; }
.faq-feature li { margin-bottom: var(--s-1); }
.faq-feature strong { color: var(--aged-gold); }
.faq-list { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-4); }
.faq-item { background: var(--espresso); border: 1px solid var(--espresso); border-radius: 10px; padding: var(--s-2) var(--s-3); }
.faq-item summary { cursor: pointer; font-weight: 600; color: var(--parchment); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "＋ "; color: var(--aged-gold); }
.faq-item[open] summary::before { content: "－ "; }
.faq-item p { margin: var(--s-1) 0 0; color: var(--sand); }
.privacy { border-top: 1px solid var(--espresso); padding-top: var(--s-3); }
.privacy h2 { font-size: 1.15rem; color: var(--parchment); margin: 0 0 var(--s-1); }
.privacy p { color: var(--sand); }
.privacy strong { color: var(--parchment); }

/* Terms (from Terms.razor.css) */
.updated { color: var(--sand); font-size: 0.95rem; margin-top: calc(-1 * var(--s-1)); margin-bottom: var(--s-4); }
.legal h2 { font-size: 1.2rem; color: var(--aged-gold); margin-top: var(--s-4); margin-bottom: var(--s-1); }
.legal h2:first-of-type { margin-top: 0; }
.legal p { color: var(--sand); }
.legal ul { margin: 0 0 var(--s-2); padding-left: 1.3em; color: var(--sand); }
.legal li { margin-bottom: var(--s-1); }
.legal a { color: var(--parchment); text-decoration: underline; }
.legal a:hover { color: var(--aged-gold); }

/* Articles */
.article-list { list-style: none; padding: 0; }
.article-list li { border-bottom: 1px solid var(--espresso); padding: var(--s-3) 0; }
.article-list h2 { margin: 0 0 var(--s-1); }

/* Landing (Home.razor.css, unchanged except the scope) */
.landing .section { padding: 9vh 0; }
.landing .body { font-size: 1.08rem; line-height: 1.7; }
.landing .narrow { max-width: 640px; margin-left: auto; margin-right: auto; }
.btn-lg { font-size: 1.05rem; padding: 14px 28px; }

.landing .hero { position: relative; padding: 16vh 0 11vh; overflow: hidden; }
.landing .hero-inner { position: relative; z-index: 1; }
.landing .hero-wash {
    position: absolute; inset: -20% -10% auto -10%; height: 130%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(40% 50% at 22% 28%, rgba(139,94,60,0.30), transparent 70%),
        radial-gradient(35% 45% at 80% 22%, rgba(196,168,130,0.18), transparent 70%),
        radial-gradient(45% 55% at 65% 80%, rgba(184,150,62,0.12), transparent 70%);
    filter: blur(8px);
}
.landing .eyebrow { letter-spacing: 0.28em; color: var(--warm-wood); font-weight: 600; font-size: 0.8rem; margin-bottom: var(--s-3); }
.landing .hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.5rem); }
.landing .lead { font-size: 1.2rem; max-width: 680px; margin: var(--s-3) auto var(--s-4); }
.landing .hero .fine { margin-top: var(--s-2); }
.landing .signin-row { margin-top: var(--s-3); color: var(--stone); font-size: 0.95rem; }
.landing .signin-row a { color: var(--sand); text-decoration: underline; }
.landing .signin-row a:hover { color: var(--parchment); }

.landing .problem { max-width: 760px; }
.landing .problem h2 { margin-bottom: var(--s-3); }
.landing .problem .body { margin-bottom: var(--s-2); }

.landing .team-sub { max-width: 560px; margin: 0 auto var(--s-4); }
.landing .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-2); }
.landing .member { display: block; text-align: left; color: inherit; transition: transform 0.15s ease, border-color 0.15s ease; }
.landing .member:hover { transform: translateY(-3px); border-color: var(--warm-wood); }
.landing .member-emoji { font-size: 1.8rem; margin-bottom: var(--s-1); }
.landing .member h3 { margin-bottom: 6px; color: var(--parchment); }
.landing .member p { margin: 0; font-size: 0.95rem; }

.landing .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.landing .step { text-align: center; }
.landing .step-num {
    width: 44px; height: 44px; margin: 0 auto var(--s-2); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 1.3rem; color: var(--cream);
    background: var(--warm-wood);
}
.landing .step p { color: var(--sand); max-width: 320px; margin: 0 auto; }

.landing .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.landing .feature { border-left: 2px solid var(--warm-wood); padding-left: var(--s-2); }
.landing .feature h3 { color: var(--parchment); margin-bottom: 6px; }
.landing .feature p { margin: 0; }

.landing .trust { max-width: 760px; }
.landing .trust-badge {
    display: inline-block; margin-bottom: var(--s-2); padding: 6px 16px; border-radius: 999px;
    background: var(--espresso); border: 1px solid var(--aged-gold); color: var(--aged-gold);
    font-size: 0.85rem; font-weight: 600;
}

.landing .ai-banner { background: var(--espresso); padding: 10vh 0; }
.landing .ai-banner h2 { color: var(--parchment); margin-bottom: var(--s-3); }
.landing .ai-banner .body { color: var(--sand); margin-bottom: var(--s-2); }

.landing .faq-section { max-width: 760px; }
.landing .faq-list { margin-top: var(--s-4); margin-bottom: var(--s-2); }
.landing .more-faq { max-width: none; }

.landing .final { padding: 12vh 0; background: linear-gradient(180deg, transparent, rgba(139,94,60,0.12)); }
.landing .final-sub { margin: 0 auto var(--s-3); }

/* Phone width: keep the header on one line and nothing scrolling sideways. */
@media (max-width: 520px) {
    .site-nav { gap: var(--s-2); }
    .site-nav a:not(.account-link) { font-size: 0.9rem; }
    .container { padding: 0 var(--s-2); }
}