/* Landing-page-only layout. Loaded only by core/templates/core/home.html — never
   leaks onto /faq/, /contact/, or the legal pages. Breakpoints used anywhere in this
   file: 640 / 768 / 900 only (matches site.css's pinned set). Motion rules
   (parallax, ticker animation, snap-and-settle reveals, reduced-motion) live in
   motion.css, loaded alongside this file, so layout and motion stay separable. */

/* ---------- Hero ---------- */
.jd-hero {
  /* Extra top padding versus a normal section: the header's badge logo
     deliberately overflows down past the header bar (see .jd-header__logo in
     site.css), and the headline needs to clear it at every viewport width. */
  padding-block: calc(var(--jd-space-6) + 3rem) var(--jd-section-padding);
  overflow: hidden;
  /* examples/hero-image-3.png itself — a real photo from an actual Jaxon's
     Dealz auction night (crowd, the "AUCTION" sign, real merchandise: DeWalt
     tools, a Blackstone griddle, an e-bike, a fridge) — as the hero
     background, not just colors sampled from it. A dark linear scrim sits
     between the photo and the warm radial glows: near-opaque over the left
     ~55% (where the headline and left-column copy live, so text keeps its
     contrast) fading out by the right edge, so the photo's own subjects show
     through under the art panel instead of being flattened by the glow. */
  background-image:
    radial-gradient(ellipse 60% 70% at 88% 65%, rgba(237, 130, 40, 0.32), transparent 70%),
    radial-gradient(ellipse 45% 55% at 92% 20%, rgba(180, 40, 20, 0.28), transparent 65%),
    radial-gradient(ellipse 50% 60% at 70% 90%, rgba(153, 84, 38, 0.18), transparent 70%),
    linear-gradient(100deg, rgba(10, 10, 10, 0.97) 0%, rgba(10, 10, 10, 0.94) 32%, rgba(10, 10, 10, 0.62) 55%, rgba(10, 10, 10, 0.28) 78%, rgba(10, 10, 10, 0.12) 100%),
    url("../img/hero/auction-night.45c7a27f31e0.jpg");
  background-repeat: no-repeat;
  background-position: center, center, center, center, center right;
  background-size: auto, auto, auto, auto, cover;
}

/* "Why Pay Retail?" is a full-width row of its own above the two-column split
   below, not squeezed into the left column — it reads as a banner headline for
   the whole hero rather than competing with the art panel for space. */
.jd-hero__headline {
  margin-bottom: var(--jd-space-5);
}

/* Fluid sizing so it never wraps at any width (same measured-metrics approach as
   before — see git history for the full derivation), scaled to about half the
   size that would run it edge-to-edge — a big headline, not a full-width banner. */
.jd-hero__headline h1 {
  font-size: clamp(1.4rem, 7.6vw - 0.2rem, 5.85rem);
  white-space: normal;
  overflow-wrap: break-word;
}

.jd-hero__grid {
  display: grid;
  gap: var(--jd-space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .jd-hero__grid {
    grid-template-columns: 1.1fr 1fr;
  }
}

.jd-hero__sub {
  font-family: var(--jd-font-display);
  text-transform: uppercase;
  color: var(--jd-gold);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  margin-bottom: var(--jd-space-5);
}

.jd-hero__callout {
  border-color: var(--jd-red);
  margin-bottom: var(--jd-space-4);
}

.jd-hero__callout-headline {
  font-family: var(--jd-font-display);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1.2;
  margin: 0 0 var(--jd-space-2);
}

.jd-hero__callout-support {
  margin: 0;
  font-size: var(--jd-size-small);
}

.jd-hero__price-callout {
  font-size: 1.1rem;
  margin-bottom: var(--jd-space-5);
}

.jd-hero__price-callout strong {
  color: var(--jd-gold);
  font-size: 1.4em;
  text-shadow: var(--jd-pop-shadow);
}

.jd-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jd-space-3);
}

.jd-hero__art {
  position: relative;
  border-radius: var(--jd-radius);
  /* No overflow:hidden here anymore — the starburst badge now deliberately
     overflows the top-right corner (see .jd-hero__starburst below). Only the
     backdrop layer (which bleeds -20% for parallax headroom) still needs
     clipping; that's handled by .jd-hero__art-clip instead of clipping the
     whole card. */
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Reduced from space-5 to space-4 to free up width for the enlarged
     collage grid below — the card's aspect-ratio caps its overall size, so
     less padding is the only way to give the bigger tiles more room. */
  padding: var(--jd-space-4);
  /* Lighter than before and mostly transparent — .jd-hero's own gradient now
     supplies the warm color underneath this panel; this is just a faint lift
     (glass-panel effect) so the card still reads as a distinct surface. */
  background: linear-gradient(160deg, rgba(35, 35, 35, 0.55), rgba(10, 10, 10, 0.55));
  border: 1px solid var(--jd-charcoal-line);
}

.jd-hero__art-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
}

.jd-hero__art-backdrop {
  position: absolute;
  inset: -20%;
  /* Lighter than the old version — .jd-hero's own gradient (see above) now
     carries most of the warm color, so this layer's job is just to add a
     little extra depth as it parallaxes, not to supply the color itself. */
  background: radial-gradient(ellipse at 65% 30%, rgba(237, 130, 40, 0.2), transparent 60%),
    radial-gradient(ellipse at 30% 80%, rgba(180, 40, 20, 0.15), transparent 55%);
}

/* A "coming soon" sticker in the corner, not a claim about real inventory — the
   category collage below is illustrative, so this element is what supplies the
   collage's energy/urgency instead of leaning on photography we don't have.
   Pinned past the card's own top-right corner (negative offsets) so it reads
   as a badge hanging off the edge, not a chip sitting inside the card. */
.jd-hero__starburst {
  position: absolute;
  top: clamp(-26px, -3vw, -18px);
  right: clamp(-26px, -3vw, -18px);
  z-index: 2;
  width: clamp(84px, 12%, 108px);
  aspect-ratio: 1;
  background: var(--jd-gold);
  color: var(--jd-black);
  clip-path: polygon(50.0% 0.0%, 59.8% 13.3%, 75.0% 6.7%, 76.9% 23.1%, 93.3% 25.0%, 86.7% 40.2%, 100.0% 50.0%, 86.7% 59.8%, 93.3% 75.0%, 76.9% 76.9%, 75.0% 93.3%, 59.8% 86.7%, 50.0% 100.0%, 40.2% 86.7%, 25.0% 93.3%, 23.1% 76.9%, 6.7% 75.0%, 13.3% 59.8%, 0.0% 50.0%, 13.3% 40.2%, 6.7% 25.0%, 23.1% 23.1%, 25.0% 6.7%, 40.2% 13.3%);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(15deg);
}

.jd-hero__starburst span {
  font-family: var(--jd-font-display);
  text-transform: uppercase;
  font-size: clamp(0.55rem, 1.4vw, 0.7rem);
  line-height: 1.15;
}

.jd-hero__collage {
  position: relative;
  z-index: 1;
  display: grid;
  /* minmax(0, 1fr), not bare 1fr: 1fr's implicit minimum is the items'
     min-content, and the widest label ("ELECTRONICS") puts a ~384px floor
     under three columns — wider than a 360px phone, which blew the hero out
     past the right edge of the screen. Two shrinkable columns fit any phone;
     three from 640px up. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jd-space-4);
  width: 100%;
  /* 1.75x the old 360px cap. Combined with the reduced card padding above,
     the grid now uses most of the card's available width instead of
     sitting centered inside a lot of unused space. */
  max-width: 630px;
}

@media (min-width: 640px) {
  .jd-hero__collage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.jd-hero__collage-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--jd-space-2);
  /* ~1.75x the old padding (space-3/space-1 -> space-4/space-2). */
  padding: var(--jd-space-4) var(--jd-space-2);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--jd-charcoal-line);
  border-radius: var(--jd-radius);
  color: var(--jd-gold);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.jd-hero__collage-item:nth-child(even) {
  transform: rotate(-2deg);
}

.jd-hero__collage-item:nth-child(odd) {
  transform: rotate(2deg);
}

/* These are now real links to a category's Buy-It-Now filter, not
   decoration — hover/focus need a visible affordance. Keep each tile's own
   nth-child tilt rather than resetting to 0deg on interaction, so the
   collage doesn't visibly "straighten up" on hover. */
.jd-hero__collage-item:hover,
.jd-hero__collage-item:focus-visible {
  background: rgba(0, 0, 0, 0.45);
  border-color: var(--jd-gold);
}

.jd-hero__collage-item:nth-child(even):hover,
.jd-hero__collage-item:nth-child(even):focus-visible {
  transform: rotate(-2deg) scale(1.04);
}

.jd-hero__collage-item:nth-child(odd):hover,
.jd-hero__collage-item:nth-child(odd):focus-visible {
  transform: rotate(2deg) scale(1.04);
}

.jd-hero__collage-item svg {
  /* ~1.75x the old fixed 26px icon. */
  width: clamp(38px, 3.4vw, 46px);
  height: clamp(38px, 3.4vw, 46px);
}

.jd-hero__collage-item span {
  /* ~1.75x the old 0.65rem (10.4px -> ~18px at the wide end). */
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.15rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--jd-white-dim);
}

/* ---------- Ticker ---------- */
.jd-ticker {
  background: var(--jd-red);
  overflow: hidden;
  border-block: 1px solid var(--jd-red-dark);
  /* Sits inside the hero now, between the headline and the callout/art grid —
     full-bleed width via its position outside .jd-container in hero.html, not
     a fixed vw-breakout hack. Needs its own spacing since it's no longer a
     standalone section with the usual .jd-section padding around it. */
  margin-bottom: var(--jd-space-5);
}

.jd-ticker__track {
  display: flex;
  width: max-content;
}

.jd-ticker__group {
  display: flex;
  flex-shrink: 0;
}

.jd-ticker__group span {
  font-family: var(--jd-font-display);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--jd-white);
  padding-block: var(--jd-space-2);
  padding-inline: var(--jd-space-4);
  white-space: nowrap;
}

/* ---------- Benefit bar ----------
   Two 3-item groups, not one flat 6-item strip — "bid & save" mechanics
   (no reserve, $3.50 starting bids, 10% premium) vs. "why trust us" sourcing
   (7-day guarantee, major retailer liquidation, new inventory weekly). The
   grouping is carried entirely by layout (two separate 3-up rows with a
   divider) rather than an added heading, so it reads as related-but-distinct
   without competing with the section's own icon/title hierarchy. Icons and
   titles are ~1.75x their old size (28px -> 48-56px, 0.85rem -> 1.3-1.5rem)
   — the two elements that actually read as "small" in the original strip;
   the supporting sub-line scales more modestly to keep it secondary. */
.jd-benefits__group {
  display: grid;
  gap: var(--jd-space-4) var(--jd-space-3);
  grid-template-columns: 1fr;
  text-align: center;
}

.jd-benefits__group + .jd-benefits__group {
  margin-top: var(--jd-space-5);
  padding-top: var(--jd-space-5);
  border-top: 1px solid var(--jd-charcoal-line);
}

@media (min-width: 640px) {
  .jd-benefits__group {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--jd-space-5);
  }
}

.jd-benefit__icon {
  display: inline-flex;
  color: var(--jd-gold);
  margin-bottom: var(--jd-space-3);
}

.jd-benefit__icon svg {
  width: clamp(44px, 4.5vw, 56px);
  height: clamp(44px, 4.5vw, 56px);
}

.jd-benefit__title {
  font-family: var(--jd-font-display);
  text-transform: uppercase;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.5rem);
  line-height: 1.2;
  margin: 0;
}

.jd-benefit__sub {
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.05rem);
  margin: var(--jd-space-2) 0 0;
}

/* ---------- Current auction + Buy It Now (side by side) ---------- */
.jd-auction-buy__grid {
  display: grid;
  gap: var(--jd-space-6);
}

@media (min-width: 900px) {
  .jd-auction-buy__grid {
    grid-template-columns: minmax(320px, 1fr) 1.6fr;
    align-items: start;
  }
}


.jd-auction-buy__auction {
  position: sticky;
  top: calc(var(--jd-header-height) + var(--jd-space-4));
}

@media (max-width: 899px) {
  .jd-auction-buy__auction {
    position: static;
  }
}

.jd-current-auction__panel {
  text-align: center;
  border-color: var(--jd-red);
}

.jd-current-auction__when {
  font-family: var(--jd-font-display);
  text-transform: uppercase;
  font-size: 1.3rem;
  margin-bottom: var(--jd-space-1);
}

.jd-current-auction__tagline {
  color: var(--jd-gold);
  margin-bottom: var(--jd-space-4);
}

.jd-countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--jd-space-2);
  margin-bottom: var(--jd-space-4);
}

.jd-countdown__unit {
  background: var(--jd-black);
  border: 1px solid var(--jd-charcoal-line);
  border-radius: var(--jd-radius);
  padding: var(--jd-space-3) var(--jd-space-1);
}

.jd-countdown__value {
  display: block;
  font-family: var(--jd-font-display);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  color: var(--jd-gold);
}

.jd-countdown__label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--jd-white-dim);
}

.jd-current-auction__powered {
  margin-top: var(--jd-space-3);
  font-size: var(--jd-size-small);
  color: var(--jd-white-dim);
}

.jd-placeholder-note {
  color: var(--jd-gold);
  font-size: var(--jd-size-small);
}

/* ---------- Buy It Now ---------- */
.jd-section__sub {
  color: var(--jd-white-dim);
  margin-top: calc(var(--jd-space-3) * -1);
  margin-bottom: var(--jd-space-5);
}

.jd-section__center {
  text-align: center;
}

.jd-buy-now__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jd-space-2);
  margin-bottom: var(--jd-space-5);
}

.jd-chip {
  display: inline-block;
  padding: 0.4em 1em;
  border-radius: 999px;
  border: 1px solid var(--jd-charcoal-line);
  text-decoration: none;
  font-size: var(--jd-size-small);
  color: var(--jd-white-dim);
}

.jd-chip--active {
  background: var(--jd-gold);
  border-color: var(--jd-gold);
  color: var(--jd-black);
  font-weight: 700;
}

.jd-product-grid {
  display: grid;
  gap: var(--jd-space-4);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .jd-product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Only 3 across even at wide viewports — this grid now shares the row with the
   auction panel (see .jd-auction-buy__grid) instead of spanning the full
   container, so it has less width to work with than a standalone section. */
@media (min-width: 900px) {
  .jd-product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Wraps an item's photo + name when it has a Buy Now link (usually its
   Facebook Marketplace listing), so clicking the item itself works — not
   just the button. One anchor for both keeps it a single tab stop. */
.jd-product-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.jd-product-card__link:hover .jd-product-card__name,
.jd-product-card__link:focus-visible .jd-product-card__name {
  color: var(--jd-gold);
}

.jd-product-card__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--jd-radius);
  margin-bottom: var(--jd-space-3);
}

.jd-product-card__photo--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--jd-space-1);
  background: radial-gradient(circle at 30% 20%, var(--jd-charcoal-raised), var(--jd-charcoal) 75%);
  color: var(--jd-gold);
  text-align: center;
  padding: var(--jd-space-3);
}

.jd-product-card__photo--empty span {
  font-size: 0.7rem;
  color: var(--jd-white-dim);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.jd-product-card__name {
  font-size: 1rem;
  margin-bottom: var(--jd-space-1);
}

.jd-product-card__retail {
  font-size: var(--jd-size-small);
  margin: 0;
}

.jd-product-card__price {
  color: var(--jd-white);
  margin: var(--jd-space-1) 0;
}

.jd-product-card__price strong {
  /* Gold, not red — prices are consistently gold everywhere on the site;
     red is reserved for buttons. See .jd-hero__price-callout strong and
     .jd-product-card__savings, which share this rule. */
  color: var(--jd-gold);
  font-size: 1.5em;
  text-shadow: var(--jd-pop-shadow);
}

.jd-product-card__savings {
  color: var(--jd-gold);
  font-size: var(--jd-size-small);
  font-weight: 600;
  text-shadow: var(--jd-pop-shadow);
}

.jd-product-card__cta {
  width: 100%;
  margin-top: var(--jd-space-2);
}

.jd-buy-now__empty {
  color: var(--jd-white-dim);
}

/* Shown in place of the product grid + filter chips when Buy-It-Now is
   switched off site-wide — same slot, same heading, so the section doesn't
   just vanish (see core/_sections/buy_it_now_paused.html). */
.jd-buy-now__paused {
  text-align: center;
  padding: var(--jd-space-6) var(--jd-space-4);
  color: var(--jd-gold);
}

.jd-buy-now__paused-message {
  font-family: var(--jd-font-display);
  text-transform: uppercase;
  font-size: 1.3rem;
  margin: var(--jd-space-3) 0 var(--jd-space-2);
}

.jd-buy-now__paused-sub {
  color: var(--jd-white-dim);
  max-width: 40ch;
  margin: 0 auto;
}

/* ---------- How it works ---------- */
.jd-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--jd-space-5);
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}

@media (min-width: 768px) {
  .jd-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.jd-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--jd-red);
  font-family: var(--jd-font-display);
  font-size: 1.2rem;
  margin-bottom: var(--jd-space-3);
}

/* ---------- Guarantee ---------- */
.jd-guarantee__grid {
  display: grid;
  gap: var(--jd-space-5);
  align-items: center;
}

@media (min-width: 900px) {
  .jd-guarantee__grid {
    grid-template-columns: auto 1fr auto;
  }
}

.jd-guarantee__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 4px solid var(--jd-red);
  margin-inline: auto;
  text-align: center;
  padding: var(--jd-space-3);
}

.jd-guarantee__badge-title {
  font-family: var(--jd-font-display);
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--jd-gold);
}

.jd-guarantee__callout {
  border-color: var(--jd-red);
}

.jd-guarantee__callout-title {
  font-family: var(--jd-font-display);
  text-transform: uppercase;
  color: var(--jd-red);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.7rem);
  text-shadow: var(--jd-pop-shadow);
}

/* ---------- Pickup info ---------- */
.jd-pickup__grid {
  display: grid;
  gap: var(--jd-space-4);
}

@media (min-width: 768px) {
  .jd-pickup__grid {
    grid-template-columns: auto auto 1fr;
    align-items: start;
  }
}

.jd-pickup__label {
  text-transform: uppercase;
  color: var(--jd-gold);
  font-size: var(--jd-size-small);
  margin: 0;
}

.jd-pickup__value {
  font-family: var(--jd-font-display);
  font-size: 1.3rem;
  margin: 0;
}

.jd-pickup__notes ul {
  padding-left: 1.2em;
  color: var(--jd-white-dim);
}

/* ---------- Why choose ---------- */
.jd-why-choose__grid {
  display: grid;
  gap: var(--jd-space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .jd-why-choose__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .jd-why-choose__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.jd-why-choose__item h3 {
  font-size: 1.1rem;
  color: var(--jd-gold);
}

.jd-why-choose__item p {
  margin: 0;
}

/* ---------- Categories ---------- */
.jd-categories__grid {
  display: grid;
  gap: var(--jd-space-3);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .jd-categories__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .jd-categories__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.jd-category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--jd-space-1);
  text-align: center;
  text-decoration: none;
  padding-block: var(--jd-space-4);
  transition: border-color var(--jd-duration-fast) var(--jd-ease-standard),
    color var(--jd-duration-fast) var(--jd-ease-standard);
}

.jd-category-tile:hover {
  border-color: var(--jd-gold);
}

.jd-category-tile:hover .jd-category-tile__label {
  color: var(--jd-gold);
}

.jd-category-tile__label {
  font-family: var(--jd-font-display);
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--jd-white);
}

.jd-category-tile__hint {
  font-size: 0.7rem;
  color: var(--jd-gold);
  text-shadow: var(--jd-pop-shadow);
}

/* ---------- Gallery ---------- */
.jd-gallery__grid {
  display: grid;
  gap: var(--jd-space-3);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .jd-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .jd-gallery__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.jd-gallery__item {
  margin: 0;
}

.jd-gallery__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--jd-radius);
}

.jd-gallery__item figcaption {
  font-size: var(--jd-size-small);
  color: var(--jd-white-dim);
  margin-top: var(--jd-space-1);
}

/* ---------- About ---------- */
.jd-about__grid {
  display: grid;
  gap: var(--jd-space-5);
  align-items: center;
}

@media (min-width: 900px) {
  .jd-about__grid {
    grid-template-columns: 1fr auto;
  }
}

.jd-about__tagline {
  font-family: var(--jd-font-display);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.7rem);
}

.jd-about__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid var(--jd-gold);
  text-align: center;
  padding: var(--jd-space-3);
  font-family: var(--jd-font-display);
  text-transform: uppercase;
  color: var(--jd-gold);
  margin-inline: auto;
}

/* ---------- Giveaway ---------- */
.jd-giveaway__panel {
  text-align: center;
  border-color: var(--jd-gold);
  max-width: 640px;
  margin-inline: auto;
}

.jd-giveaway__panel h2 {
  color: var(--jd-gold);
}

/* ---------- Signup ---------- */
.jd-signup__grid {
  display: grid;
  gap: var(--jd-space-4);
  text-align: center;
}

@media (min-width: 768px) {
  .jd-signup__grid {
    grid-template-columns: 1fr auto auto;
    text-align: left;
    align-items: center;
  }
}

.jd-signup__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jd-space-2);
}

.jd-signup__form .jd-input {
  flex: 1 1 200px;
}

.jd-signup__social {
  display: flex;
  gap: var(--jd-space-3);
  justify-content: center;
  font-size: var(--jd-size-small);
  color: var(--jd-white-dim);
}

@media (min-width: 768px) {
  .jd-signup__social {
    justify-content: flex-end;
  }
}

.jd-signup__social a {
  text-decoration: none;
  color: var(--jd-white-dim);
}

.jd-signup__social a:hover {
  color: var(--jd-gold);
}