/* ============================================================
   Landing pages — shared custom CSS
   Loaded once by resources/views/layouts/landing.blade.php.
   Holds only what Tailwind utilities can't express inline:
   font treatments, pseudo-element decorations, the reusable
   button/card/field base classes, and the dark-hero palette.
   (CDN Tailwind handles the per-element utility classes in the
   markup. This file is the shared, define-once custom layer.)
   ============================================================ */

/* ---- Typography helpers ---- */
.display { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; letter-spacing: -0.022em; font-weight: 500; }
.kicker { font-family: 'Geist Mono', ui-monospace, monospace; letter-spacing: 0.18em; }

/* ---- Reusable surfaces (the "component" base styles) ---- */
.trust-card {
  background: #FFFFFF; border: 1px solid #EAEAEE;
  box-shadow: 0 1px 2px rgba(20,35,59,0.04), 0 18px 40px -24px rgba(20,35,59,0.14);
}
.cover-shot {
  transform: rotate(-3deg);
  transition: transform 600ms cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 2px 4px rgba(20,35,59,0.10), 0 30px 60px -30px rgba(20,35,59,0.45);
}
.group\/cover:hover .cover-shot { transform: rotate(-1.5deg) translateY(-4px); }

.field { background: #FFFFFF; border: 1px solid #D9DCE3; transition: border-color 160ms ease, box-shadow 160ms ease; }
.field:focus { outline: none; border-color: #14233B; box-shadow: 0 0 0 3px rgba(20,35,59,0.10); }
.field:focus-visible { outline: none; }
.btn-navy { background: #14233B; transition: background-color 160ms ease, transform 120ms ease; }
.btn-navy:hover { background: #1E3354; }
.btn-navy:active { transform: translateY(1px); }
.btn-navy:focus-visible { outline: 2px solid #14233B; outline-offset: 2px; }

/* ---- Small decorations (pseudo-elements Tailwind can't do cleanly) ---- */
.craft-dot::after { content: "·"; margin: 0 0.85rem; color: #C3C7D0; }
.craft-dot:last-child::after { content: ""; margin: 0; }
::selection { background: rgba(178,106,5,0.16); }

/* ════ DARK HERO ZONE — warm-editorial dark [scope: .dark-zone] ════
   Re-defines the colour utilities inside a .dark-zone wrapper so the
   same markup renders dark. Scoped, so it only activates where the
   .dark-zone class is present. */
.dark-zone { background-color: #0F1A2C; color: #DAD5C9; box-shadow: inset 0 -1px 0 0 rgba(245,231,208,0.12); }
.dark-zone .text-ink-deep { color: #F5F1E8 !important; }
.dark-zone .text-ink { color: #DAD5C9 !important; }
.dark-zone .text-ink-light { color: #9BA6B4 !important; }
.dark-zone .text-amber { color: #F0A94A !important; }
.dark-zone .text-ink-light\/70 { color: rgba(155,166,180,0.70) !important; }
.dark-zone .placeholder\:text-ink-light\/70::placeholder { color: rgba(155,166,180,0.70) !important; }
.dark-zone .border-rule { border-color: rgba(245,231,208,0.12) !important; }
.dark-zone .trust-card {
  background: #16233A; border: 1px solid rgba(245,231,208,0.12);
  box-shadow: 0 1px 2px rgba(4,9,16,0.30), 0 18px 40px -24px rgba(4,9,16,0.70);
}
.dark-zone .cover-shot {
  box-shadow: 0 0 0 1px rgba(245,231,208,0.10), 0 2px 4px rgba(4,9,16,0.40), 0 30px 60px -30px rgba(4,9,16,0.80);
}
.dark-zone .field { background: #FFFFFF; border: 1px solid #D9DCE3; color: #28344A; }
.dark-zone .field:focus { border-color: #E08800; box-shadow: 0 0 0 3px rgba(224,136,0,0.30); }
.dark-zone .field.text-ink { color: #28344A !important; }
.dark-zone .btn-navy {
  background: #9A5B04;
  transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
  box-shadow: 0 1px 2px rgba(4,9,16,0.30), 0 4px 12px -6px rgba(4,9,16,0.40);
}
.dark-zone .btn-navy:hover { background: #834A02; box-shadow: 0 1px 2px rgba(4,9,16,0.30), 0 8px 20px -8px rgba(4,9,16,0.55); }
.dark-zone .btn-navy:focus-visible { outline: 2px solid #E08800; outline-offset: 2px; }
.dark-zone .border-t.border-rule { border-top-color: rgba(245,231,208,0.12) !important; }
.dark-zone .craft-dot::after { color: rgba(245,231,208,0.22); }

/* ════ JOIN HERO — the "closer" announcement style [scope: .hero-dark] ════
   Join uses a distinct dark palette + bigger, heavier inputs than the home
   capture card. These overrides are scoped to .hero-dark so they only apply
   on /join and never leak onto the home page (which shares .display/.kicker
   but wants different tracking). */

/* Join's display/kicker overrides — scoped so home's base versions are untouched. */
.hero-dark .display { font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; }
.hero-dark .kicker { letter-spacing: 0.26em; }

/* Join dark palette */
.hero-dark { position: relative; background-color: #0F1A2C; color: #DAD5C9; box-shadow: inset 0 -1px 0 0 rgba(4,9,16,0.45); }
.hero-dark ::selection { background: #F5F1E8; color: #0F1A2C; }
.hero-dark .t-ink-deep { color: #F5F1E8; }
.hero-dark .t-ink { color: #DAD5C9; }
.hero-dark .t-ink-light { color: #9BA6B4; }
.hero-dark .t-amber { color: #F0A94A; }
.hero-dark .t-amber-cover { color: #E08800; }

/* Join "closer" input + button */
.closer-ed-field {
  height: 56px; min-height: 56px; flex-basis: auto;
  background: #FFFFFF; border: 1px solid #FFFFFF;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.9), inset 0 1px 2px rgba(4,9,16,0.10), 0 1px 2px rgba(4,9,16,0.30), 0 10px 24px -12px rgba(4,9,16,0.55);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.closer-ed-field::placeholder { color: #515B70; }
.closer-ed-field:focus { outline: none; border-color: #E08800; box-shadow: 0 0 0 4px rgba(224,136,0,0.30), inset 0 1px 2px rgba(4,9,16,0.10), 0 10px 24px -12px rgba(4,9,16,0.55); }
.closer-ed-btn {
  height: 56px; min-height: 56px; flex-basis: auto;
  background: #9A5B04; color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(4,9,16,0.30), 0 4px 12px -6px rgba(4,9,16,0.40);
  transition: background-color 180ms ease, transform 120ms ease, box-shadow 180ms ease;
}
.closer-ed-btn:hover { background: #834A02; box-shadow: 0 1px 2px rgba(4,9,16,0.30), 0 8px 20px -8px rgba(4,9,16,0.55); }
.closer-ed-btn:active { transform: translateY(1px); }
.closer-ed-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #14233B, 0 0 0 6px rgba(224,136,0,0.70); }

/* Join entrance animation */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.rise { opacity: 0; animation: rise 1000ms cubic-bezier(.16,.84,.44,1) forwards; }
.d1{animation-delay:.04s}.d2{animation-delay:.12s}.d3{animation-delay:.20s}.d4{animation-delay:.28s}
@media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; } }