/* ============================================================
   Stockpile Reports AI -- teaser site
   Brand palette per ~/development/everypoint-workspace/Context/brand-guidelines/visual-identity.md
   ============================================================ */

:root {
 --sr-yellow: #FEBD16;
 --sr-black: #000000;
 --sr-body: #211E20;
 --sr-white: #FFFFFF;
 --sr-muted: #AEADC0;
 --sr-bg-soft: #FAFAFA;
 --sr-border: #EAECED;
}

* {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
}

body {
 margin: 0;
 font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 font-weight: 400;
 color: var(--sr-body);
 background: var(--sr-white);
 line-height: 1.5;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.container {
 max-width: 1080px;
 margin: 0 auto;
 padding: 0 24px;
}

a {
 color: var(--sr-black);
 text-decoration: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 3px;
}

a:hover {
 text-decoration-thickness: 2px;
}

.skip-link {
 position: absolute;
 left: -9999px;
 top: 0;
 background: var(--sr-black);
 color: var(--sr-white);
 padding: 12px 16px;
 z-index: 100;
}

.skip-link:focus {
 left: 16px;
 top: 16px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
 background: var(--sr-black);
 color: var(--sr-white);
 padding: 96px 0 112px;
}

.hero .container {
 max-width: 880px;
 text-align: center;
}

.hero-eyebrow {
 color: var(--sr-yellow);
 font-weight: 700;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 font-size: 0.875rem;
 margin: 0 0 20px;
}

.hero-headline {
 font-size: clamp(2.25rem, 5.5vw, 3.75rem);
 font-weight: 900;
 line-height: 1.05;
 letter-spacing: -0.02em;
 margin: 0 0 28px;
 color: var(--sr-white);
}

.hero-sub {
 font-size: clamp(1.125rem, 2vw, 1.375rem);
 font-weight: 300;
 line-height: 1.5;
 max-width: 720px;
 margin: 0 auto 40px;
 color: var(--sr-white);
}

.hero-sub strong {
 font-weight: 500;
 color: var(--sr-yellow);
}

.hero-cta {
 display: inline-block;
 background: var(--sr-yellow);
 color: var(--sr-black);
 font-weight: 700;
 font-size: 1.125rem;
 padding: 18px 36px;
 border-radius: 4px;
 text-decoration: none;
 transition: transform 0.15s ease;
}

.hero-cta:hover {
 transform: translateY(-2px);
 text-decoration: none;
}

.hero-cta span {
 display: inline-block;
 margin-left: 6px;
 transition: transform 0.15s ease;
}

.hero-cta:hover span {
 transform: translateX(4px);
}

/* ============================================================
   USE CASES
   ============================================================ */
.use-cases {
 padding: 96px 0;
 background: var(--sr-white);
}

.section-heading {
 font-size: clamp(1.75rem, 3.5vw, 2.5rem);
 font-weight: 700;
 line-height: 1.15;
 letter-spacing: -0.01em;
 margin: 0 0 16px;
 color: var(--sr-black);
}

.section-sub {
 font-size: 1.125rem;
 line-height: 1.6;
 color: var(--sr-body);
 max-width: 720px;
 margin: 0 0 56px;
}

.use-case-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 32px;
}

.use-case-card {
 background: var(--sr-bg-soft);
 border: 1px solid var(--sr-border);
 border-radius: 8px;
 padding: 32px;
 position: relative;
}

.use-case-card::before {
 content: '';
 display: block;
 width: 32px;
 height: 4px;
 background: var(--sr-yellow);
 margin-bottom: 24px;
}

.use-case-marker {
 font-size: 0.875rem;
 font-weight: 700;
 letter-spacing: 0.1em;
 color: var(--sr-muted);
 margin-bottom: 12px;
}

.use-case-card h3 {
 font-size: 1.25rem;
 font-weight: 700;
 line-height: 1.3;
 margin: 0 0 12px;
 color: var(--sr-black);
}

.use-case-card p {
 font-size: 1rem;
 line-height: 1.6;
 color: var(--sr-body);
 margin: 0;
}

/* ============================================================
   WAITLIST
   ============================================================ */
.waitlist {
 background: var(--sr-bg-soft);
 padding: 96px 0;
 border-top: 1px solid var(--sr-border);
 border-bottom: 1px solid var(--sr-border);
}

.waitlist .container {
 max-width: 640px;
}

.ml-embedded {
 margin: 24px 0;
 /* MailerLite injects its own styled form here at runtime */
 min-height: 200px;
}

.signup-disclosure {
 font-size: 0.875rem;
 color: var(--sr-muted);
 font-style: italic;
 margin-top: 24px;
 line-height: 1.5;
}

/* ============================================================
   FOOTER -- matches www.stockpilereports.com pattern
   (3-col on .com; 2-col here because the Contact column is dropped --
    the waitlist form on this page is the contact mechanism for the beta)
   ============================================================ */
.footer {
 background: #494a4a;
 padding: 64px 0 0;
 color: var(--sr-white);
}

.footer-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 3rem;
 margin-bottom: 1.25rem;
}

.footer-logo-img {
 height: 48px;
 width: auto;
}

.footer-address {
 font-size: 0.875rem;
 color: var(--sr-white);
 font-weight: 300;
 line-height: 1.6;
 margin-top: 0.875rem;
}

.footer-col h4 {
 font-size: 1.25rem;
 font-weight: 500;
 color: var(--sr-white);
 margin: 0;
 padding-bottom: 0.625rem;
 letter-spacing: normal;
 text-transform: none;
}

.footer-col h4::after {
 content: '';
 display: block;
 width: 73px;
 border-top: 2px solid var(--sr-yellow);
 margin-top: 0.625rem;
 margin-bottom: 0.875rem;
}

.footer-col a {
 display: block;
 font-size: 0.875rem;
 color: var(--sr-white);
 font-weight: 700;
 margin-bottom: 0.25rem;
 padding: 0.125rem 0;
 text-decoration: none;
 transition: color .2s;
}

.footer-col a:hover {
 color: var(--sr-yellow);
}

.footer-social {
 display: flex;
 gap: 0.75rem;
 justify-content: center;
 padding: 1.25rem 0;
}

.footer-social a {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 border: 1px solid rgba(255, 255, 255, 0.3);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--sr-white);
 text-decoration: none;
 transition: border-color .2s, color .2s;
}

.footer-social a:hover {
 border-color: var(--sr-yellow);
 color: var(--sr-yellow);
}

.footer-divider {
 border: none;
 border-top: 1px solid rgba(255, 255, 255, 0.15);
 margin: 0;
}

.footer-bottom {
 padding: 1.5rem 0;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
 gap: 0.75rem;
}

.footer-copy {
 font-size: 0.875rem;
 color: var(--sr-white);
 margin: 0;
}

.footer-copy a {
 color: var(--sr-white);
 text-decoration: underline;
 transition: color .2s;
}

.footer-copy a:hover {
 color: var(--sr-yellow);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
 .hero {
  padding: 64px 0 80px;
 }
 .use-cases,
 .waitlist {
  padding: 64px 0;
 }
 .use-case-grid {
  gap: 20px;
 }
 .use-case-card {
  padding: 24px;
 }
 .footer-grid {
  grid-template-columns: 1fr;
  gap: 1.5rem;
 }
 .footer-bottom {
  flex-direction: column;
  text-align: center;
 }
}

/* ============================================================
   404 PAGE
   ============================================================ */
.error-page {
 min-height: 70vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 64px 24px;
 text-align: center;
}

.error-page h1 {
 font-size: clamp(3rem, 8vw, 5rem);
 font-weight: 900;
 margin: 0 0 16px;
 color: var(--sr-black);
 letter-spacing: -0.02em;
}

.error-page p {
 font-size: 1.125rem;
 color: var(--sr-body);
 margin: 0 0 32px;
 max-width: 480px;
}

.error-page a {
 display: inline-block;
 background: var(--sr-yellow);
 color: var(--sr-black);
 padding: 14px 28px;
 border-radius: 4px;
 font-weight: 700;
 text-decoration: none;
}