/* Shared custom styles for the PaperUp marketing site.
   Aligned with the live application: warm cream surfaces, navy primary,
   metallic gold accent, glass-morphism cards, system sans throughout. */

html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01","cv11","cv02"; }

/* Legacy alias — old markup using these classes still gets a brand-correct heading. */
.h-display, .font-serif-display, .font-display {
  font-family: 'Segoe UI', system-ui, '-apple-system', Inter, Arial, Helvetica, sans-serif;
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* ─────────── Gold gradient utilities ─────────── */

/* Gold gradient TEXT (used for emphasis spans inside headlines) */
.gold-text {
  background-image: linear-gradient(135deg, #d4af37 0%, #f0d76e 50%, #d4af37 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Gold gradient BACKGROUND (used for premium CTAs / decorative bars) */
.gold-bg {
  background-image: linear-gradient(135deg, #d4af37 0%, #f0d76e 40%, #d4af37 70%, #c49a2c 100%);
}

/* Hairline divider in gold */
.gold-rule {
  height: 1px;
  background-image: linear-gradient(to right, transparent, rgba(212,175,55,.6), transparent);
}

/* Underline accent — used on highlighted words */
.gold-underline,
.brand-underline {
  background-image: linear-gradient(to right, #d4af37, #f0d76e);
  background-size: 100% 0.16em;
  background-repeat: no-repeat;
  background-position: 0 96%;
  padding-bottom: 0.05em;
}

/* ─────────── Glass-morphism (frosted cards over cream) ─────────── */

.glass {
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.55);
}
.glass-strong {
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.6);
}
.gold-glass {
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.25);
}

/* ─────────── Surface treatments ─────────── */

/* Hero: cream with a soft gold glow and a hint of navy in the corner */
.hero-bg {
  background:
    radial-gradient(50% 60% at 50% -5%, rgba(212,175,55,0.14), transparent 70%),
    radial-gradient(40% 40% at 92% 30%, rgba(26,43,94,0.08), transparent 70%),
    linear-gradient(to bottom, #faf8f2 0%, #f5f2e8 100%);
}

/* Subtle navy dot pattern (used inside hero + dark sections) */
.dot-grid {
  background-image: radial-gradient(rgba(26,43,94,0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
}

/* Same pattern but on dark navy sections (uses gold dots) */
.dot-grid-dark {
  background-image: radial-gradient(rgba(212,175,55,0.20) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 85%);
}

/* Document mock card */
.doc-card { background: linear-gradient(180deg,#FFFFFF 0%, #faf8f2 100%); }
.doc-card .rule { background: linear-gradient(to right, transparent, rgba(26,43,94,0.18), transparent); height: 1px; }

/* Logo marquee mask */
.marquee-mask {
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
          mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

/* Caret blink in hero doc */
@keyframes blink { 50% { opacity: 0; } }
.caret { animation: blink 1.1s steps(1) infinite; }

/* ─────────── Reveal-on-scroll animation ─────────── */

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* FAQ chevron */
details[open] summary .chev { transform: rotate(180deg); }
summary::-webkit-details-marker { display: none; }

/* ─────────── Accessibility ─────────── */

:focus-visible {
  outline: 2px solid #d4af37;
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 16px;
  background: #1a2b5e;
  color: #faf8f2;
  padding: 10px 16px;
  border-radius: 6px;
  z-index: 100;
  transition: top .2s ease;
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ─────────── Long-form prose (legal pages) ─────────── */

.prose-paperup { color: #3F3F3F; line-height: 1.75; }
.prose-paperup h2 { color: #1a2b5e; font-size: 1.625rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.prose-paperup h3 { color: #1a2b5e; font-size: 1.15rem; font-weight: 600; margin-top: 1.75rem; margin-bottom: 0.5rem; }
.prose-paperup p { margin-bottom: 1rem; }
.prose-paperup ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose-paperup li { margin-bottom: 0.4rem; }
.prose-paperup a { color: #1a2b5e; text-decoration: underline; text-decoration-color: rgba(212,175,55,.5); }
.prose-paperup a:hover { text-decoration-color: #d4af37; }
.prose-paperup strong { color: #1a2b5e; }

/* ─────────── Motion preferences ─────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ─────────── Print ─────────── */

@media print {
  header, footer, .no-print { display: none !important; }
  body { background: white; color: black; }
}