/* blocks/hero.css
   Block: Hero.
   Rewind Club - loaded in order by functions.php. */

.rc-hero{padding:clamp(36px,5vw,58px) 0 12px}

.rc-hero__grid{display:grid; grid-template-columns:1.02fr 1fr; gap:52px; align-items:center}

.rc-hero h1{margin:16px 0 0}

.rc-hero h1 em{font-style:normal; color:var(--mulberry)}

.rc-lede{font-size:19px; color:var(--ink-2); max-width:47ch; margin-top:18px}

.rc-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}

.rc-trust{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:26px; list-style:none; padding:0;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}

.rc-trust li{display:flex; align-items:center; gap:7px}

.rc-trust li::before{content:""; width:7px; height:7px; border-radius:2px; background:var(--sage); flex:0 0 auto}

.rc-hero__art{position:relative}

.rc-hero__art svg{width:100%; height:auto; display:block; border-radius:26px; box-shadow:0 22px 44px -26px var(--shadow)}

.rc-pricetag{
  position:absolute; right:-10px; top:-16px; background:var(--butter); color:#33291F;
  font-family:var(--font-display); font-weight:800; font-size:15px; line-height:1.1; text-align:center;
  padding:16px 14px; border-radius:50%; width:106px; height:106px; display:grid; place-content:center;
  transform:rotate(-11deg); border:2.5px solid #33291F; box-shadow:3px 4px 0 #33291F;
}

.rc-pricetag small{display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; font-weight:400}


/* The badge's price and its small print are separate elements so each is
   inline-editable. */
.rc-pricetag__value{display:block}