/* Shared styles for Heuston's interactive calculators */
:root {
  --ink: #0b1320;
  --paper: #fbf7f0;
  --brass: #c9a25a;
  --brass-dark: #8a6a30;
  --mid: #64748b;
  --border: #e2d9cc;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body { font-family: 'Inter Tight', sans-serif; background: var(--paper); color: var(--ink); }

.nav-strip { background: var(--ink); padding: 0.75rem 2rem; display: flex; align-items: center; justify-content: space-between; }
.nav-brand { font-family: 'Fraunces', serif; color: var(--paper); font-size: 1.1rem; text-decoration: none; display: flex; align-items: center; }
.nav-cta { display: flex; gap: 0.75rem; align-items: center; }
.btn-sm { font-family: 'Inter Tight', sans-serif; font-size: 0.8rem; font-weight: 600; padding: 0.4rem 1rem; border-radius: 4px; text-decoration: none; letter-spacing: 0.02em; }
.btn-gold { background: var(--brass); color: var(--ink); }
.btn-outline { border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); }

.calc-intro { background: var(--ink); color: var(--paper); padding: 2.5rem 2rem 2rem; text-align: center; }
.calc-intro .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.75rem; }
.calc-intro h1 { font-family: 'Fraunces', serif; font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 400; line-height: 1.1; margin-bottom: 0.75rem; }
.calc-intro h1 em { font-style: italic; color: var(--brass); }
.calc-intro p { color: rgba(251,247,240,0.7); font-size: 0.95rem; line-height: 1.65; max-width: 580px; margin: 0 auto; }

.calc-wrap { max-width: 640px; margin: 2.5rem auto 3rem; padding: 0 1.5rem; }
.calc-card { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 2rem; box-shadow: 0 6px 24px rgba(11,19,32,0.06); }
.calc-card h2 { font-family: 'Fraunces', serif; font-size: 1.35rem; font-weight: 600; line-height: 1.2; margin-bottom: 0.5rem; }
.calc-card .calc-sub { font-size: 0.875rem; color: var(--mid); line-height: 1.6; margin-bottom: 1.25rem; }
.calc-form { display: grid; gap: 1rem; }
.calc-form label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); display: block; margin-bottom: 0.3rem; }
.calc-form .field-hint { font-size: 0.72rem; color: var(--mid); font-weight: 400; text-transform: none; letter-spacing: 0; display: block; margin-top: 0.15rem; }
.calc-form input[type="number"], .calc-form select { font-family: 'Inter Tight', sans-serif; font-size: 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 5px; background: var(--paper); color: var(--ink); width: 100%; }
.calc-form input:focus, .calc-form select:focus { outline: 2px solid var(--brass); border-color: var(--brass); }
.calc-form input.calc-invalid { border-color: #dc2626; outline: 2px solid #fecaca; }
.calc-form button { font-family: 'Inter Tight', sans-serif; font-size: 1rem; font-weight: 700; background: var(--brass); color: var(--ink); border: none; border-radius: 5px; padding: 0.9rem 1.5rem; cursor: pointer; letter-spacing: 0.02em; }
.input-prefix { position: relative; }
.input-prefix::before { content: '$'; position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--mid); font-size: 0.95rem; pointer-events: none; }
.input-prefix input { padding-left: 2.2rem; }

.calc-hidden { display: none !important; }

/* Gate card */
.gate-card { background: white; border: 1px solid var(--brass); border-radius: 8px; padding: 2rem; margin-top: 1.5rem; box-shadow: 0 6px 24px rgba(201,162,90,0.15); }
.gate-card .gate-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-dark); margin-bottom: 0.6rem; }
.gate-card h2 { font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 600; line-height: 1.2; margin-bottom: 0.6rem; }
.gate-card .gate-sub { font-size: 0.875rem; color: var(--mid); line-height: 1.65; margin-bottom: 1.25rem; }
.gate-form { display: grid; gap: 0.75rem; }
.gate-form label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.gate-form input[type="text"], .gate-form input[type="email"] { font-family: 'Inter Tight', sans-serif; font-size: 0.95rem; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 5px; background: var(--paper); color: var(--ink); width: 100%; }
.gate-form input:focus { outline: 2px solid var(--brass); border-color: var(--brass); }
.gate-form button { font-family: 'Inter Tight', sans-serif; font-size: 0.95rem; font-weight: 700; background: var(--brass); color: var(--ink); border: none; border-radius: 5px; padding: 0.85rem 1.5rem; cursor: pointer; letter-spacing: 0.02em; }
.gate-form button:disabled { opacity: 0.6; cursor: wait; }
.gate-micro { font-size: 0.72rem; color: var(--mid); line-height: 1.55; margin-top: 0.75rem; }
.gate-status { font-size: 0.875rem; line-height: 1.6; margin-top: 0.75rem; display: none; }
.gate-status.error { display: block; color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; border-radius: 5px; padding: 0.75rem 1rem; }
.gate-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Results */
.calc-results { background: var(--ink); color: var(--paper); border-radius: 8px; padding: 2rem; margin-top: 1.5rem; }
.calc-results .results-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.75rem; }
.calc-hook { font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 400; line-height: 1.35; color: var(--paper); margin-bottom: 1.25rem; }
.calc-row { padding: 0.9rem 0; border-top: 1px solid rgba(251,247,240,0.12); }
.calc-row-label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(251,247,240,0.55); margin-bottom: 0.25rem; }
.calc-row-value { font-family: 'Fraunces', serif; font-size: 1.6rem; color: var(--paper); }
.calc-row-alert .calc-row-value { color: #fca5a5; }
.calc-row-note { font-size: 0.78rem; color: rgba(251,247,240,0.55); line-height: 1.55; margin-top: 0.3rem; }
.calc-disclaimer { font-size: 0.7rem; color: rgba(251,247,240,0.45); line-height: 1.55; margin-top: 1.25rem; border-top: 1px solid rgba(251,247,240,0.12); padding-top: 1rem; }
.results-cta { margin-top: 1.25rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.results-cta a { font-family: 'Inter Tight', sans-serif; font-size: 0.875rem; font-weight: 700; text-decoration: none; padding: 0.7rem 1.4rem; border-radius: 5px; }
.results-cta .cta-gold { background: var(--brass); color: var(--ink); }
.results-cta .cta-ghost { border: 1px solid rgba(251,247,240,0.3); color: var(--paper); }

/* Explainer + footer */
.calc-explainer { max-width: 640px; margin: 0 auto 3rem; padding: 0 1.5rem; }
.calc-explainer h2 { font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 600; border-bottom: 2px solid var(--brass); padding-bottom: 0.4rem; display: inline-block; margin-bottom: 0.75rem; }
.calc-explainer p { font-size: 0.9rem; color: var(--ink); line-height: 1.7; margin-bottom: 0.9rem; }
.calc-explainer p.muted { color: var(--mid); font-size: 0.82rem; }
.calc-footer { background: var(--ink); color: var(--paper); padding: 1.75rem 2rem; }
.calc-footer-inner { max-width: 760px; margin: 0 auto; }
.cf-label { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.4rem; }
.cf-val { font-size: 0.875rem; line-height: 1.6; color: rgba(251,247,240,0.8); }
.cf-val a { color: var(--brass); }
.cf-legal { font-size: 0.7rem; color: rgba(251,247,240,0.4); margin-top: 1rem; line-height: 1.5; }