/* Marketing-kit page shell — depends on /colors_and_type.css */
@import url("../../colors_and_type.css");

html, body { margin:0; padding:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans); }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }

/* Made-for-you sticker badge */
.badge-tag { width:130px; height:130px; cursor:pointer; transition:transform .35s cubic-bezier(.34,1.56,.64,1); display:inline-block; }
.badge-tag:hover { transform:rotate(-5deg) scale(1.06) !important; }

/* shared building blocks */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

.btn {
  font-family: var(--font-sans); font-weight:600; font-size:15px;
  padding:14px 24px; border:3px solid var(--ink); border-radius:999px;
  cursor:pointer; transition: transform 180ms var(--ease-spring), box-shadow 180ms var(--ease-spring), background 180ms;
  display:inline-flex; align-items:center; gap:8px; line-height:1;
}
.btn-primary { background:var(--card-red); color:var(--paper-bright); box-shadow:4px 4px 0 var(--ink); }
.btn-primary:hover { background:var(--card-red-deep); transform: translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn-primary:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
.btn-outline { background:var(--paper-bright); color:var(--ink); box-shadow:4px 4px 0 var(--ink); }
.btn-outline:hover { background:var(--marigold); transform: translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn-ghost { background:transparent; color:var(--ink); border-color:transparent; box-shadow:none; }
.btn-ghost:hover { background:var(--paper-2); }

.eyebrow {
  font-family: var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color: var(--card-red);
}

.section { padding: 96px 0; }
.section-tight { padding: 56px 0; }

/* Halftone background helper */
.bg-halftone { background-image: radial-gradient(rgba(26,23,25,.18) 1.5px, transparent 1.6px); background-size: 16px 16px; }

/* Generic card */
.card-ui {
  background: var(--paper-bright);
  border: 3px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 180ms var(--ease-spring), box-shadow 180ms var(--ease-spring);
}
.card-ui.is-hover:hover {
  transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink);
}

/* ── Hamburger button — hidden on desktop ───────────────────── */
.nav-hamburger {
  display: none;
  background: none;
  border: 2px solid var(--ink);
  border-radius: 8px;
  cursor: pointer;
  padding: 6px 8px;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.nav-hamburger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 1px; }

/* Mobile dropdown menu — hidden everywhere except inside the mobile media query */
.nav-mobile-menu { display: none !important; }
.nav-mobile-menu a {
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  padding: 10px 12px; border-radius: 8px; color: var(--ink); display: block;
}
.nav-mobile-menu .mob-cta {
  background: var(--card-red); color: var(--paper-bright);
  border: 2px solid var(--ink); border-radius: 999px;
  text-align: center; margin-top: 6px; padding: 11px 16px;
}

/* ── Tablet (641 – 900px) ───────────────────────────────────── */
@media (max-width: 900px) {
  .grid-hero   { grid-template-columns: 1fr !important; }
  .grid-decks  { grid-template-columns: repeat(3, 1fr) !important; }
  .grid-3col   { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-footer { grid-template-columns: 1fr !important; }
}

/* ── Mobile (≤ 640px) ───────────────────────────────────────── */
@media (max-width: 640px) {
  .container   { padding: 0 16px !important; }
  .section     { padding: 48px 0 !important; }
  .section-tight { padding: 32px 0 !important; }

  /* Nav */
  .nav-desktop-links { display: none !important; }
  .nav-hamburger     { display: flex !important; }
  .nav-mobile-menu.is-open {
    display: flex !important;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
    padding: 10px 20px 16px;
    gap: 2px;
    z-index: 100;
  }

  /* Hero */
  .grid-hero { grid-template-columns: 1fr !important; }
  .hero-section { padding: 40px 0 56px !important; }
  .hero-sticker { width: 88px !important; height: 88px !important; top: -4px !important; right: -4px !important; }

  /* DeckPicker — 2 col, no rotation */
  .grid-decks { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .deck-card  { transform: none !important; min-height: 210px !important; }
  .deck-card:hover { transform: translate(-2px,-2px) !important; }

  /* All 3-col grids → single column */
  .grid-3col { grid-template-columns: 1fr !important; }

  /* Testimonials — kill rotation on mobile */
  .testimonial-card { transform: none !important; }

  /* Footer */
  .grid-footer { grid-template-columns: 1fr !important; }

  /* CTA strip */
  .cta-inner { flex-direction: column !important; align-items: flex-start !important; }
}