/* Meridian 33° — Quotation viewer (client-facing), supplemental styles.
   Reuses css/style.css (design tokens, fonts, buttons) for brand consistency. */

.q-shell { min-height: 100vh; background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-light) 100%); }

.q-topbar { display: flex; justify-content: center; padding: 32px 20px 0; }
.q-topbar img { height: 32px; }

.gate-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.gate-card { width: 100%; max-width: 400px; background: rgba(255,255,255,0.03); border: 1px solid rgba(201,169,97,0.2); border-radius: 3px; padding: 44px 36px; text-align: center; }
.gate-card h1 { font-size: 26px; color: var(--white); margin-bottom: 10px; }
.gate-card p.lead { font-size: 14px; color: var(--cream-dim); margin-bottom: 26px; }
.gate-card input { width: 100%; padding: 13px 14px; margin-bottom: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(201,169,97,0.25); border-radius: 2px; color: var(--white); font-family: var(--font-body); font-size: 15px; text-align: center; letter-spacing: 0.04em; }
.gate-card input:focus { outline: none; border-color: var(--gold); }
.gate-card .btn { width: 100%; }
.gate-card .err { color: #e0a06a; font-size: 13px; margin-top: 16px; display: none; }
.gate-card .err.show { display: block; }
.gate-card .state-msg { color: var(--cream-dim); font-size: 14px; }

.q-content { max-width: 780px; margin: 0 auto; padding: 60px 24px 100px; }
.q-content .eyebrow { justify-content: center; }
.q-content .q-title { text-align: center; margin-bottom: 6px; }
.q-content .q-for { text-align: center; color: var(--cream-dim); font-size: 15px; margin-bottom: 44px; }

.q-note { background: rgba(201,169,97,0.06); border-left: 2px solid var(--gold); padding: 24px 28px; margin-bottom: 44px; font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--cream); font-style: italic; white-space: pre-wrap; }

.q-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 50px; }
.q-facts .eyebrow { justify-content: flex-start; }
.q-facts p.v { font-size: 19px; color: var(--white); }

.q-cta { text-align: center; margin: 50px 0; }

.q-footer-note { text-align: center; color: var(--cream-dim); font-size: 13px; margin-top: 60px; }
.q-footer-note a { color: var(--gold-soft); }