/* ============================================================
   GAME SCROLL — TABLETOP SALES SHEET
   Bright Promo / Convention Booth Style
   ============================================================ */

:root{
  --paper:#f7f2e8;
  --ink:#111111;
  --soft-ink:#3d3d3d;

  --panel:#ffffff;
  --panel-alt:#f4efe5;

  --line:rgba(0,0,0,.12);

  --shadow:
    0 10px 24px rgba(0,0,0,.12);

  --radius:28px;
}

/* PAGE */

html{
  scroll-behavior:smooth;
}

body{
  overflow-x:hidden;
  color:var(--ink);

  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 14%, transparent), transparent 28%),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 32%),
    var(--paper);
}

/* HEADER */

header,
.promo-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.92);
  border-bottom:3px solid var(--ink);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.topbar{
  min-height:84px;
}

.brand strong{
  color:var(--primary);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:1.1rem;
}

.brand span{
  color:#666;
}

/* NAV */

nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  background:#fff;
  border:3px solid var(--ink);
  color:var(--ink);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:.18s ease;
  overflow:hidden;
  box-shadow:0 5px 0 rgba(0,0,0,.14);
}

nav a:hover{
  transform:translateY(-2px) rotate(-1deg);
  background:var(--primary);
  color:#fff;
}

/* RESET BOXED FEEL */

.page-shell,
.promo-page{
  padding:0;
}

.page-card{
  width:100%;
  margin:0;
  background:none;
  border:0;
  box-shadow:none;
}

/* HERO */

.promo-hero{
  position:relative;
  padding:70px 0 40px;
}

.promo-hero:before{
  content:"HOT!";
  position:absolute;
  right:6vw;
  top:32px;
  width:120px;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb, var(--primary) 50%, #ffe06d);
  color:var(--ink);
  border:4px solid var(--ink);
  border-radius:50%;
  font-weight:900;
  font-size:1.45rem;
  letter-spacing:.04em;
  transform:rotate(12deg);
  box-shadow:0 8px 0 rgba(0,0,0,.14);
  z-index:0;
}

.promo-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:40px;
  align-items:center;
}

/* STICKERS */

.promo-kicker,
.promo-price-sticker,
.promo-section-heading span,
.promo-banner-label{
  border:3px solid var(--ink);
  box-shadow:0 6px 0 rgba(0,0,0,.12);
}

.promo-kicker{
  display:inline-block;
  margin-bottom:18px;
  padding:10px 16px;
  border-radius:999px;
  background:color-mix(in srgb, var(--primary) 18%, white);
  color:var(--ink);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  transform:rotate(-2deg);
}

.promo-price-sticker{
  display:inline-flex;
  flex-direction:column;
  margin-bottom:24px;
  padding:18px 22px;
  border-radius:22px;
  background:color-mix(in srgb, var(--primary) 40%, #ffe06d);
  color:#111;
  transform:rotate(-4deg);
  box-shadow:0 10px 0 rgba(0,0,0,.14);
}

.promo-price-sticker strong{
  font-size:1.35rem;
}

.promo-price-sticker span{
  opacity:.72;
}

/* HERO COPY */

.promo-hero h1,
.promo-hero-copy h1{
  margin:0 0 22px;
  font-size:clamp(4rem,8vw,8rem);
  line-height:.84;
  letter-spacing:-.08em;
  color:var(--ink);
  text-transform:uppercase;
}

.promo-tagline{
  max-width:720px;
  color:var(--soft-ink);
  font-size:1.2rem;
  line-height:1.7;
}

/* BUTTONS */

.promo-hero-actions,
.demo-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:28px;
}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 24px;
  border-radius:999px;
  border:3px solid var(--ink);
  background:#fff;
  color:var(--ink);
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  overflow:hidden;
  transition:.18s ease;
  box-shadow:0 6px 0 rgba(0,0,0,.14);
}

.btn::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-120%;
  width:60%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-24deg);
  transition:left .45s ease;
}

.btn:hover{
  transform:translateY(-2px) rotate(-1deg);
}

.btn:hover::before{
  left:140%;
}

.btn.primary{
  background:var(--primary);
  color:#fff;
}

/* PRODUCT FRAME */

.promo-product-frame{
  position:relative;
  padding:18px;
  border-radius:36px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary) 26%, white),
      color-mix(in srgb, var(--secondary) 18%, white)
    );
  border:4px solid var(--ink);
  box-shadow:0 12px 0 rgba(0,0,0,.14);
}

.promo-product-frame:before{
  content:"FEATURED GAME";
  position:absolute;
  top:-18px;
  left:24px;
  padding:10px 14px;
  border-radius:999px;
  background:#ff5f5f;
  color:#fff;
  border:3px solid var(--ink);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
  transform:rotate(-4deg);
  z-index:4;
}

.promo-product-frame:after{
  content:"TABLE READY";
  position:absolute;
  right:-18px;
  bottom:66px;
  padding:12px 16px;
  background:color-mix(in srgb, var(--secondary) 25%, #ffffff);
  color:var(--ink);
  border:3px solid var(--ink);
  border-radius:16px;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.12em;
  transform:rotate(6deg);
  box-shadow:0 6px 0 rgba(0,0,0,.14);
  z-index:4;
}

.promo-product-image{
  display:block;
  width:100%;
  border-radius:24px;
  border:4px solid var(--ink);
  background:#fff;
}

.promo-product-placeholder{
  min-height:420px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px;
  border-radius:24px;
  background:#fff;
  border:4px dashed var(--ink);
}

.promo-product-placeholder span{
  display:inline-block;
  margin-bottom:16px;
  padding:8px 14px;
  border-radius:999px;
  background:color-mix(in srgb, var(--primary) 16%, white);
  border:3px solid var(--ink);
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.promo-product-placeholder strong{
  margin-bottom:12px;
  font-size:2rem;
}

.promo-product-placeholder em{
  max-width:320px;
  color:#666;
  font-style:normal;
  line-height:1.7;
}



/* SECTIONS */

.promo-section{
  position:relative;
  padding:70px 0;
}

.promo-section:nth-of-type(even){
  background:color-mix(in srgb, var(--secondary) 8%, white);
}

/* angled retail divider ribbons */

.promo-benefits:before,
.promo-rules-section:before,
.promo-playtest-section:before,
.promo-card-showcase:before{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  top:0;
  height:22px;
  background:repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--primary) 28%, white),
    color-mix(in srgb, var(--primary) 28%, white) 16px,
    #fff 16px,
    #fff 32px
  );
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  transform:rotate(-1deg);
}

/* SECTION HEADINGS */

.promo-section-heading{
  margin-bottom:34px;
}

.promo-section-heading.centered{
  text-align:center;
}

.centered-text{
  text-align:center;
}

.promo-section-heading span,
.promo-banner-label{
  display:inline-block;
  margin-bottom:16px;
  padding:8px 14px;
  border-radius:999px;
  background:color-mix(in srgb, var(--primary) 16%, white);
  color:var(--ink);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  transform:rotate(-2deg);
}

.promo-section-heading h2,
.promo-final-card h2,
.promo-cta-banner h2{
  margin:0;
  color:var(--ink);
  font-size:clamp(2.8rem,6vw,5rem);
  line-height:.88;
  letter-spacing:-.06em;
  text-transform:uppercase;
}

.promo-lead{
  max-width:760px;
  margin-bottom:24px;
  color:#444;
  font-size:1.12rem;
  line-height:1.75;
}

/* BENEFITS */

.promo-benefits{
  padding:58px 0 70px;
}

.promo-benefit-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:24px;
}

.promo-benefit-card{
  position:relative;
  padding:28px 24px;
  border-radius:30px;
  background:#fff;
  border:4px solid var(--ink);
  box-shadow:0 8px 0 rgba(0,0,0,.12);
  overflow:hidden;
}

.promo-benefit-card:nth-child(odd){
  transform:rotate(-1deg);
}

.promo-benefit-card:nth-child(even){
  transform:rotate(1deg);
}

.promo-benefit-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:10px;
  background:var(--primary);
}

.promo-benefit-icon{
  font-size:2.7rem;
  margin-bottom:18px;
}

.promo-benefit-card strong{
  display:block;
  margin-bottom:12px;
  color:var(--ink);
  font-size:1rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.promo-benefit-card p{
  color:#444;
  line-height:1.7;
}

/* PANELS */

.promo-split{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:34px;
}

.promo-main-panel,
.promo-panel,
.promo-side-callout,
.promo-final-card,
.promo-cta-banner,
.promo-rule-callout,
.promo-step-card,
.promo-info-card{
  background:#fff;
  border:4px solid var(--ink);
  box-shadow:0 8px 0 rgba(0,0,0,.12);
}

.promo-main-panel,
.promo-panel{
  padding:36px;
  border-radius:36px;
}

.promo-main-panel p,
.promo-panel p{
  color:#444;
  line-height:1.85;
}

/* SIDE CALLOUT */

.promo-side-callout{
  align-self:start;
  padding:28px;
  border-radius:28px;
  background:color-mix(in srgb, var(--primary) 24%, white);
  transform:rotate(2deg);
}

.promo-side-callout span{
  display:inline-block;
  margin-bottom:16px;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:3px solid var(--ink);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.promo-side-callout strong{
  display:block;
  margin-bottom:14px;
  font-size:1.6rem;
  line-height:1.1;
  text-transform:uppercase;
}

.promo-side-callout p{
  color:#333;
  line-height:1.7;
}

/* RULES */

.promo-rule-callout{
  margin-bottom:28px;
  padding:22px 24px;
  border-radius:24px;
  background:color-mix(in srgb, var(--secondary) 12%, white);
}

.promo-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.promo-step-card{
  position:relative;
  padding:34px 28px;
  border-radius:28px;
  background:#fff;
}

.promo-step-card:nth-child(1){
  transform:rotate(-1deg);
}

.promo-step-card:nth-child(2){
  transform:translateY(12px);
}

.promo-step-card:nth-child(3){
  transform:rotate(1deg);
}

.promo-step-card span{
  display:block;
  margin-bottom:18px;
  color:color-mix(in srgb, var(--primary) 28%, #cccccc);
  font-size:4rem;
  font-weight:900;
  line-height:1;
}

.promo-step-card strong{
  display:block;
  margin-bottom:12px;
  color:var(--primary);
  font-size:1rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.promo-step-card p{
  color:#444;
  line-height:1.75;
}

/* CTA */

.promo-cta-banner{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:center;
  padding:42px;
  border-radius:38px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary) 20%, white),
      color-mix(in srgb, var(--secondary) 14%, white)
    );
}

.promo-cta-banner:after{
  content:"SIGN UP";
  position:absolute;
  top:-18px;
  right:32px;
  padding:10px 14px;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  border:3px solid var(--ink);
  font-weight:900;
  font-size:.75rem;
  letter-spacing:.12em;
  transform:rotate(4deg);
}

.promo-cta-action{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* CARD GRID */

.promo-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:22px;
  margin-top:28px;
}

.promo-info-card{
  padding:24px;
  border-radius:24px;
}

.promo-info-card:nth-child(odd){
  transform:rotate(-.75deg);
}

.promo-info-card:nth-child(even){
  transform:rotate(.75deg);
}

.promo-info-card strong{
  display:block;
  margin-bottom:12px;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.promo-info-card p{
  color:#444;
  line-height:1.7;
}

/* COLLECTIBLE CARD SHOWCASE */

.promo-card-showcase{
  position:relative;
  padding:80px 0;
}

.promo-card-strip{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:24px;
  margin-top:42px;
}

.promo-collect-card{
  position:relative;
  width:220px;
  min-height:320px;
  padding:14px;
  border-radius:26px;
  background:
    linear-gradient(
      180deg,
      #ffffff,
      color-mix(in srgb, var(--secondary) 10%, white)
    );
  border:4px solid var(--ink);
  box-shadow:0 10px 0 rgba(0,0,0,.12);
  overflow:hidden;
  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.promo-collect-card:nth-child(1){
  transform:rotate(-6deg) translateY(18px);
}

.promo-collect-card:nth-child(2){
  transform:rotate(-2deg) translateY(-10px);
}

.promo-collect-card:nth-child(3){
  transform:rotate(3deg) translateY(12px);
}

.promo-collect-card:nth-child(4){
  transform:rotate(7deg) translateY(30px);
}

.promo-collect-card:hover{
  transform:translateY(-16px) scale(1.03);
  z-index:10;
  box-shadow:0 22px 32px rgba(0,0,0,.22);
}

.promo-collect-card.legendary{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 16%, white),
      #fff7da
    );
}

.promo-collect-card.epic{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--secondary) 14%, white),
      #f6f0ff
    );
}

.promo-collect-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:12px;
  background:var(--primary);
}

.promo-card-rarity{
  position:absolute;
  top:18px;
  right:18px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  border:3px solid var(--ink);
  color:var(--ink);
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  transform:rotate(6deg);
}

.promo-card-image{
  width:100%;
  height:180px;
  border-radius:18px;
  border:3px solid var(--ink);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary) 22%, white),
      color-mix(in srgb, var(--secondary) 14%, white)
    );
  margin-bottom:16px;
}

.promo-card-title{
  margin-bottom:10px;
  color:var(--ink);
  font-size:1.1rem;
  font-weight:900;
  text-transform:uppercase;
  line-height:1.1;
}

.promo-card-text{
  color:#444;
  font-size:.92rem;
  line-height:1.6;
}

.promo-card-footer{
  margin-top:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.promo-card-power{
  padding:6px 10px;
  border-radius:999px;
  background:color-mix(in srgb, var(--primary) 18%, white);
  border:3px solid var(--ink);
}

/* CONTACT */

.promo-contact-email{
  display:inline-block;
  margin-top:22px;
  padding:16px 24px;
  border-radius:999px;
  background:color-mix(in srgb, var(--primary) 16%, white);
  border:3px solid var(--ink);
  color:var(--ink);
  font-weight:900;
  letter-spacing:.04em;
}

/* FINAL SECTION */

.promo-final-section{
  text-align:center;
}

.promo-final-card{
  max-width:980px;
  margin:0 auto;
  padding:54px;
  border-radius:40px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary) 18%, white),
      #fff
    );
}

.promo-final-card p{
  max-width:720px;
  margin:24px auto;
  color:#444;
  line-height:1.8;
}

/* FOOTER */

footer,
.promo-footer{
  padding:48px 0;
  background:#fff;
  border-top:4px solid var(--ink);
  color:#555;
  text-align:center;
}

footer a,
.promo-footer a{
  color:var(--primary);
  font-weight:700;
}

/* RESPONSIVE */

@media(max-width:980px){

  .promo-hero-grid,
  .promo-split,
  .promo-steps,
  .promo-cta-banner{
    grid-template-columns:1fr;
  }

  .promo-side-callout,
  .promo-benefit-card,
  .promo-step-card,
  .promo-info-card,
  .promo-collect-card{
    transform:none !important;
  }

}

@media(max-width:700px){

  .promo-hero:before{
    display:none;
  }

  .promo-hero h1,
  .promo-section-heading h2,
  .promo-final-card h2{
    font-size:3rem;
  }

  .promo-section{
    padding:56px 0;
  }

  .promo-card-showcase{
    padding:58px 0;
  }

  .promo-collect-card{
    width:100%;
    max-width:280px;
  }

}
/* ============================================================
   HALFTONE PRINT TEXTURES
   Adds comic / promo print depth
   ============================================================ */

.promo-section,
.promo-benefits,
.promo-card-showcase,
.promo-final-section{
  position:relative;
}

.promo-section:after,
.promo-benefits:after,
.promo-card-showcase:after,
.promo-final-section:after{
  content:"";

  position:absolute;

  inset:0;

  background-image:
    radial-gradient(
      rgba(0,0,0,.045) 1px,
      transparent 1px
    );

  background-size:14px 14px;

  opacity:.35;

  pointer-events:none;

  z-index:0;
}

/* keep content above texture */

.promo-section > *,
.promo-benefits > *,
.promo-card-showcase > *,
.promo-final-section > *{
  position:relative;
  z-index:1;
}

/* ============================================================
   FOIL / LEGENDARY SHIMMER
   Premium collectible card energy
   ============================================================ */

.promo-collect-card.legendary{
  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 16%, white),
      #fff7da
    );
}

.promo-collect-card.legendary:after{
  content:"";

  position:absolute;

  top:-20%;
  left:-40%;

  width:55%;
  height:140%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.55),
      transparent
    );

  transform:
    rotate(18deg);

  transition:
    left .65s ease;
}

.promo-collect-card.legendary:hover:after{
  left:120%;
}

/* ============================================================
   FAUX PRINT TAPE CORNERS
   Makes cards feel pinned / packaged
   ============================================================ */

.promo-collect-card .tape-corner,
.promo-benefit-card .tape-corner{
  position:absolute;

  width:46px;
  height:14px;

  background:
    rgba(255,248,190,.75);

  border:2px solid rgba(0,0,0,.08);

  box-shadow:
    0 2px 4px rgba(0,0,0,.08);

  z-index:5;
}

.promo-collect-card .tape-corner.left,
.promo-benefit-card .tape-corner.left{
  top:10px;
  left:10px;

  transform:rotate(-18deg);
}

.promo-collect-card .tape-corner.right,
.promo-benefit-card .tape-corner.right{
  top:10px;
  right:10px;

  transform:rotate(18deg);
}

/* ============================================================
   LABEL OFFSET / PRINT IMPERFECTION
   Slight physical feel
   ============================================================ */

.promo-card-rarity,
.promo-kicker,
.promo-price-sticker,
.promo-product-frame:before,
.promo-product-frame:after{
  box-shadow:
    2px 2px 0 rgba(0,0,0,.10),
    0 6px 0 rgba(0,0,0,.12);
}
/* ============================================================
   STARBURST PROMO BADGES
   Convention flyer / toy packaging energy
   ============================================================ */

/* base burst shape */

.promo-burst,
.starburst-badge{
  position:absolute;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  width:120px;
  height:120px;

  padding:14px;

  color:var(--ink);

  font-weight:900;

  font-size:1rem;

  line-height:1.05;

  letter-spacing:.06em;

  text-transform:uppercase;

  background:
    color-mix(in srgb, var(--primary) 42%, #ffe36b);

  border:4px solid var(--ink);

  box-shadow:
    0 8px 0 rgba(0,0,0,.14);

  z-index:6;

  clip-path:polygon(
    50% 0%,
    61% 14%,
    78% 4%,
    74% 22%,
    96% 18%,
    84% 36%,
    100% 50%,
    84% 64%,
    96% 82%,
    74% 78%,
    78% 96%,
    61% 86%,
    50% 100%,
    39% 86%,
    22% 96%,
    26% 78%,
    4% 82%,
    16% 64%,
    0% 50%,
    16% 36%,
    4% 18%,
    26% 22%,
    22% 4%,
    39% 14%
  );

  transform:rotate(-8deg);

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

/* hover pop */

.promo-burst:hover,
.starburst-badge:hover{
  transform:
    rotate(-4deg)
    scale(1.06);

  box-shadow:
    0 14px 0 rgba(0,0,0,.16);
}

/* optional variants */

.promo-burst.hot{
  background:
    color-mix(in srgb, var(--primary) 46%, #ff9259);
}

.promo-burst.new{
  background:
    color-mix(in srgb, var(--secondary) 28%, #7dffb2);
}

.promo-burst.fast{
  background:
    color-mix(in srgb, var(--primary) 34%, #72d9ff);
}

/* hero placement */

.promo-hero-burst{
  top:30px;
  right:5%;
}

/* product frame placement */

.promo-frame-burst{
  top:-26px;
  right:-26px;

  width:92px;
  height:92px;

  font-size:.8rem;
}

/* smaller card burst */

.promo-card-burst{
  width:68px;
  height:68px;

  font-size:.58rem;

  border-width:3px;

  top:-12px;
  left:-12px;
}

/* burst text helpers */

.promo-burst strong,
.starburst-badge strong{
  display:block;

  font-size:1.25em;
}

.promo-burst span,
.starburst-badge span{
  display:block;

  font-size:.7em;

  letter-spacing:.08em;
}

/* print offset for tactile feel */

.promo-burst:before,
.starburst-badge:before{
  content:"";

  position:absolute;

  inset:8%;

  border:2px dashed rgba(0,0,0,.12);

  clip-path:inherit;

  pointer-events:none;
}

/* responsive */

@media(max-width:700px){

  .promo-burst,
  .starburst-badge{
    width:82px;
    height:82px;

    font-size:.72rem;
  }

}