/* ========================================
   Toy Drive Pro — Marketing site shared CSS
   ======================================== */

:root {
  --tdp-red: #e3151c;
  --tdp-red-dark: #b80f15;
  --tdp-red-soft: #fdecec;

  --tdp-cream: #fdfaf7;
  --tdp-warm: #fbf3eb;
  --tdp-mint: #ecf9f1;
  --tdp-mint-ink: #0e7a4f;
  --tdp-amber: #fdf4e3;
  --tdp-amber-ink: #92590a;
  --tdp-slate: #eef2fb;
  --tdp-slate-ink: #1e3a8a;

  --tdp-ink: #1d2939;
  --tdp-body: #475467;
  --tdp-muted: #98a2b3;
  --tdp-border: #e4e7ec;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--tdp-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  margin: 0;
  font-size: 16px;
}
h1, h2, h3, h4 {
  color: var(--tdp-ink);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin-top: 0;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.08; }
h2 { font-size: clamp(1.85rem, 3.5vw, 2.55rem); }
h3 { font-size: 1.2rem; }
p  { margin-top: 0; }
a  { color: var(--tdp-red); text-decoration: none; }
a:hover { color: var(--tdp-red-dark); }

/* ===== NAV ===== */
.tdp-nav {
  background: white;
  border-bottom: 1px solid var(--tdp-border);
  padding: .75rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.tdp-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tdp-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.tdp-brand img { height: 42px; display: block; }

.tdp-nav-links { display: flex; align-items: center; gap: .15rem; }
.tdp-nav-links > a, .tdp-nav-links > .has-dropdown > a {
  color: var(--tdp-ink);
  font-weight: 500;
  font-size: .95rem;
  padding: .55rem .85rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
}
.tdp-nav-links > a:hover,
.tdp-nav-links > .has-dropdown > a:hover,
.tdp-nav-links > .has-dropdown.open > a {
  color: var(--tdp-red);
  background: var(--tdp-red-soft);
}
.tdp-nav-links a.cta {
  background: var(--tdp-red) !important;
  color: white !important;
  padding: .6rem 1.25rem;
  margin-left: .75rem;
  font-weight: 600;
}
.tdp-nav-links a.cta:hover { background: var(--tdp-red-dark) !important; color: white !important; }

/* Dropdown */
.has-dropdown { position: relative; }
.has-dropdown .caret { transition: transform .15s; }
.has-dropdown.open .caret { transform: rotate(180deg); }
.dropdown-menu-tdp {
  position: absolute;
  top: calc(100% + .25rem);
  left: 0;
  background: white;
  border: 1px solid var(--tdp-border);
  border-radius: 10px;
  padding: .5rem;
  min-width: 240px;
  box-shadow: 0 16px 36px rgba(29,41,57,.10), 0 4px 8px rgba(29,41,57,.06);
  display: none;
  z-index: 110;
}
.has-dropdown.open .dropdown-menu-tdp { display: block; }
.dropdown-menu-tdp a {
  display: block;
  color: var(--tdp-ink);
  padding: .65rem .8rem;
  border-radius: 6px;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.dropdown-menu-tdp a:hover { background: var(--tdp-red-soft); color: var(--tdp-red); }
.dropdown-menu-tdp .divider {
  height: 1px;
  background: var(--tdp-border);
  margin: .35rem .25rem;
}
.dropdown-menu-tdp a.overview {
  font-weight: 600;
  color: var(--tdp-red-dark);
}

.tdp-nav-toggle { display: none; background: none; border: 1px solid var(--tdp-border); border-radius: 6px; padding: .5rem .75rem; cursor: pointer; }

@media (max-width: 991px) {
  .tdp-nav-links { display: none; }
  .tdp-nav-links.open-mobile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    padding: .75rem 1rem 1rem;
    box-shadow: 0 12px 24px rgba(0,0,0,.06);
    border-bottom: 1px solid var(--tdp-border);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  .tdp-nav-links.open-mobile > a,
  .tdp-nav-links.open-mobile > .has-dropdown > a {
    padding: .75rem 1rem;
    width: 100%;
    justify-content: space-between;
  }
  .tdp-nav-links.open-mobile a.cta {
    margin-left: 0;
    margin-top: .5rem;
    text-align: center;
    justify-content: center;
  }
  .tdp-nav-toggle { display: block; }
  /* Mobile dropdown: render inline instead of floating */
  .dropdown-menu-tdp {
    position: static;
    border: none;
    box-shadow: none;
    background: var(--tdp-cream);
    padding: .25rem .5rem .25rem 1.5rem;
    margin-top: .15rem;
    min-width: 0;
    border-radius: 6px;
  }
}

/* ===== BUTTONS ===== */
.btn-tdp {
  display: inline-block;
  padding: .8rem 1.55rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s ease;
  font-family: inherit;
  line-height: 1.4;
}
.btn-tdp-red { background: var(--tdp-red); color: white; }
.btn-tdp-red:hover { background: var(--tdp-red-dark); color: white; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(227,21,28,.22); }
.btn-tdp-outline { background: white; color: var(--tdp-ink); border: 1px solid var(--tdp-border); }
.btn-tdp-outline:hover { border-color: var(--tdp-ink); color: var(--tdp-ink); }
.btn-tdp-lg { padding: .95rem 1.85rem; font-size: 1.05rem; }

/* ===== HERO ===== */
.tdp-hero {
  background: var(--tdp-cream);
  background-image:
    radial-gradient(circle at 80% 0%, rgba(227,21,28,.045) 0%, transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(20,150,80,.04) 0%, transparent 45%);
  padding: 5rem 0 3.5rem;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.tdp-hero h1 { color: var(--tdp-ink); margin: 0 auto 1.5rem; max-width: 18ch; }
.tdp-hero .lead {
  font-size: 1.2rem;
  color: var(--tdp-body);
  max-width: 640px;
  margin: 0 auto 2.25rem;
  line-height: 1.55;
}
.tdp-hero-actions {
  display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center;
  margin-bottom: 4rem;
}
.tdp-hero-shot {
  max-width: 1080px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 32px 70px rgba(29,41,57,.13),
    0 14px 30px rgba(29,41,57,.08),
    0 0 0 1px var(--tdp-border);
}
.tdp-hero-shot img { width: 100%; display: block; }

/* Sub-hero (for inner pages) */
.tdp-subhero {
  background: var(--tdp-cream);
  background-image:
    radial-gradient(circle at 80% 0%, rgba(227,21,28,.04) 0%, transparent 45%);
  padding: 4rem 0 3rem;
  text-align: center;
  border-bottom: 1px solid var(--tdp-border);
}
.tdp-subhero .crumb {
  font-size: .85rem;
  color: var(--tdp-muted);
  margin-bottom: 1rem;
  letter-spacing: .04em;
}
.tdp-subhero .crumb a { color: var(--tdp-muted); }
.tdp-subhero .crumb a:hover { color: var(--tdp-red); }
.tdp-subhero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.tdp-subhero .lead {
  font-size: 1.15rem;
  color: var(--tdp-body);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.55;
}

/* hand-drawn squiggle accent under a word */
.hl-word { position: relative; display: inline-block; white-space: nowrap; }
.hl-squiggle {
  position: absolute;
  bottom: -.15em;
  left: 0;
  width: 100%;
  height: .35em;
  pointer-events: none;
}

/* ===== TRUST STRIP ===== */
.tdp-trust {
  background: white;
  border-bottom: 1px solid var(--tdp-border);
  padding: 1.4rem 0;
  text-align: center;
  color: var(--tdp-body);
  font-size: .98rem;
}
.tdp-trust .dot { color: var(--tdp-muted); margin: 0 .65rem; }

/* ===== SECTION INTRO ===== */
.tdp-section { padding: 5.5rem 0; }
.tdp-section.alt { background: var(--tdp-cream); }
.tdp-eyebrow {
  color: var(--tdp-red);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .82rem;
  margin-bottom: .9rem;
}
.tdp-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.tdp-section-head .lead {
  font-size: 1.1rem;
  color: var(--tdp-body);
  margin-top: 1rem;
}

/* ===== FEATURE BANDS ===== */
.feat-band { padding: 5rem 0; position: relative; }
.feat-band.warm   { background: var(--tdp-warm); }
.feat-band.mint   { background: var(--tdp-mint); }
.feat-band.amber  { background: var(--tdp-amber); }
.feat-band.slate  { background: var(--tdp-slate); }

.feat-eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .35rem .75rem;
  border-radius: 5px;
  margin-bottom: 1.25rem;
}
.feat-eyebrow.warm  { background: rgba(227,21,28,.10); color: var(--tdp-red-dark); }
.feat-eyebrow.mint  { background: rgba(14,122,79,.10); color: var(--tdp-mint-ink); }
.feat-eyebrow.amber { background: rgba(146,89,10,.10); color: var(--tdp-amber-ink); }
.feat-eyebrow.slate { background: rgba(30,58,138,.10); color: var(--tdp-slate-ink); }

.feat-title { font-size: clamp(1.55rem, 2.6vw, 2rem); margin-bottom: 1.1rem; color: var(--tdp-ink); }
.feat-text  { font-size: 1.05rem; color: var(--tdp-body); margin-bottom: 1.5rem; }
.feat-list  { list-style: none; padding: 0; margin: 0; }
.feat-list li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: .85rem;
  color: var(--tdp-ink);
  font-size: .98rem;
  line-height: 1.5;
}
.feat-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .42rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 3px solid;
  background: white;
}
.feat-list.warm  li::before { border-color: var(--tdp-red); }
.feat-list.mint  li::before { border-color: var(--tdp-mint-ink); }
.feat-list.amber li::before { border-color: var(--tdp-amber-ink); }
.feat-list.slate li::before { border-color: var(--tdp-slate-ink); }

.feat-shot {
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 24px 48px rgba(29,41,57,.13),
    0 8px 16px rgba(29,41,57,.06),
    0 0 0 1px rgba(255,255,255,.6);
}
.feat-shot img { width: 100%; display: block; }

/* "Read more" link inside a feature band */
.feat-readmore {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: 1.5rem;
  font-weight: 600;
  font-size: .98rem;
  color: var(--tdp-ink);
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
  transition: border-color .15s;
}
.feat-readmore:hover { border-color: var(--tdp-ink); color: var(--tdp-ink); }
.feat-readmore .arr { transition: transform .15s; }
.feat-readmore:hover .arr { transform: translateX(3px); }

/* ===== METHODS ===== */
.tdp-methods { padding: 5.5rem 0; background: white; }
.tdp-method {
  background: white;
  border: 1px solid var(--tdp-border);
  border-radius: 12px;
  padding: 1.85rem;
  height: 100%;
}
.tdp-method-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .3rem .6rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.tdp-method-tag.collect { background: rgba(146,89,10,.10); color: var(--tdp-amber-ink); }
.tdp-method-tag.dist    { background: rgba(30,58,138,.10); color: var(--tdp-slate-ink); }
.tdp-method h4 { font-size: 1.2rem; margin-bottom: .55rem; color: var(--tdp-ink); }
.tdp-method p  { font-size: .95rem; color: var(--tdp-body); margin: 0; line-height: 1.55; }

.tdp-beyond {
  text-align: center;
  margin-top: 3rem;
  font-size: 1.05rem;
  color: var(--tdp-body);
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== DEEP-DIVE PAGE BLOCKS ===== */
/* Used on /features/registration etc. — alternating screenshot + text */
.deep-block {
  padding: 4.5rem 0;
  border-bottom: 1px solid var(--tdp-border);
}
.deep-block:last-child { border-bottom: 0; }
.deep-block:nth-child(even) { background: var(--tdp-cream); }
.deep-block h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin-bottom: .9rem;
  color: var(--tdp-ink);
}
.deep-block p { font-size: 1.05rem; color: var(--tdp-body); margin-bottom: 1rem; }
.deep-block .micro {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .75rem;
  font-weight: 700;
  color: var(--tdp-red);
  margin-bottom: .65rem;
}
.deep-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.deep-block ul li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: .65rem;
  color: var(--tdp-ink);
  font-size: 1rem;
  line-height: 1.5;
}
.deep-block ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .55rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--tdp-red);
}
.deep-shot {
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 18px 40px rgba(29,41,57,.10),
    0 6px 14px rgba(29,41,57,.06),
    0 0 0 1px var(--tdp-border);
}
.deep-shot img { width: 100%; display: block; }

/* Pager at bottom of deep-dive */
.deep-pager {
  background: var(--tdp-cream);
  border-top: 1px solid var(--tdp-border);
  padding: 2rem 0;
}
.deep-pager .row > div { display: flex; }
.deep-pager .prev { justify-content: flex-start; }
.deep-pager .next { justify-content: flex-end; }
.deep-pager a {
  display: inline-flex;
  flex-direction: column;
  color: var(--tdp-body);
  text-decoration: none;
}
.deep-pager a:hover { color: var(--tdp-red); }
.deep-pager .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tdp-muted); }
.deep-pager .title { font-size: 1.1rem; font-weight: 600; color: var(--tdp-ink); margin-top: .15rem; }
.deep-pager a:hover .title { color: var(--tdp-red); }

/* ===== CTA SECTION ===== */
.tdp-cta-section {
  background: var(--tdp-ink);
  background-image:
    radial-gradient(circle at 80% 25%, rgba(227,21,28,.18) 0%, transparent 50%),
    radial-gradient(circle at 20% 75%, rgba(20,150,80,.10) 0%, transparent 50%);
  color: white;
  padding: 5rem 0;
  text-align: center;
}
.tdp-cta-section h2 { color: white; }
.tdp-cta-section p {
  color: rgba(255,255,255,.78);
  font-size: 1.1rem;
  max-width: 560px;
  margin: 1rem auto 2rem;
}

/* ===== FOOTER ===== */
.tdp-footer {
  background: #0f1722;
  color: rgba(255,255,255,.65);
  padding: 4rem 0 2rem;
  font-size: .92rem;
}
.tdp-footer h6 {
  color: white;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
  margin-bottom: 1.1rem;
  font-weight: 700;
}
.tdp-footer a {
  color: rgba(255,255,255,.65);
  display: block;
  padding: .3rem 0;
  font-size: .92rem;
}
.tdp-footer a:hover { color: white; }
.tdp-footer .footer-logo {
  height: 36px;
  margin-bottom: 1.1rem;
  display: block;
}
.tdp-footer .copy {
  color: rgba(255,255,255,.45);
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 3rem;
  padding-top: 1.75rem;
  font-size: .85rem;
}