:root{
  --abyss:#061b1d; --deep:#0b2a2c; --slab:#10393a; --rim:#245a55;
  --gild:#e2b346; --gild-hi:#f3cf6a; --gild-lo:#a3741c;
  --vellum:#efdcae; --sepia:#4a3410; --jade:#1f9a72; --jade-d:#11694c;
  --fg:#e3eeec; --fg2:#9cbab5;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:40px 16px 24px; color:var(--fg);
  font:400 15px/1.55 Karla,system-ui,sans-serif;
  background:var(--abyss);
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 2px,transparent 2px 14px),
    radial-gradient(circle at 50% 20%,#123f3d,transparent 60%);
}
.rv-wrap{width:100%;max-width:500px}

/* ribbon offer with folded tails */
.rv-ribbon{
  position:relative; z-index:2; margin:0 10px; text-align:center; color:var(--sepia);
  padding:22px 20px 16px; border-radius:4px;
  background:linear-gradient(180deg,var(--vellum),#dcc283);
  box-shadow:0 0 0 3px var(--gild),0 14px 30px rgba(0,0,0,.5);
}
.rv-ribbon::before,.rv-ribbon::after{
  content:""; position:absolute; bottom:-14px; width:0; height:0;
  border-top:14px solid var(--gild-lo);
}
.rv-ribbon::before{left:-3px;border-left:13px solid transparent}
.rv-ribbon::after{right:-3px;border-right:13px solid transparent}
.rv-key{position:absolute;width:46px;left:-18px;top:-22px;transform:rotate(-20deg);filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.rv-ribbon__tag{margin:0;font-weight:800;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#7c5a1c}
.rv-ribbon__h{margin:4px 0 12px;font:400 30px/1 "Bebas Neue",sans-serif;letter-spacing:1px;color:#3a2808}
.rv-ribbon__h em{
  display:block; font-style:normal; font-size:78px; line-height:.95;
  background:linear-gradient(180deg,#fff2bf,var(--gild-hi) 40%,var(--gild) 60%,var(--gild-lo));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1px #7a5310; filter:drop-shadow(0 3px 0 rgba(80,50,8,.35));
}
.rv-pill{
  display:inline-block; padding:12px 30px; border-radius:40px; text-decoration:none;
  font-weight:800; font-size:15px; letter-spacing:.6px; text-transform:uppercase; color:#fff;
  background:linear-gradient(180deg,#34c08f,var(--jade) 50%,var(--jade-d));
  border:2px solid var(--gild-hi); box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 6px 14px rgba(0,0,0,.3);
}
.rv-pill:hover{filter:brightness(1.1)}
.rv-ribbon__fine{margin:10px 0 0;font-size:11px;color:#6e5524}

/* faq card */
.rv-faq{
  position:relative; z-index:1; margin-top:-6px; padding:26px 20px 18px;
  background:linear-gradient(180deg,var(--slab),var(--deep));
  border:1px solid var(--rim); border-top:0; border-radius:0 0 18px 18px;
}
.rv-faq__lead{margin:0 0 12px;color:var(--fg2);font-size:14px}
.rv-faq__lead a{color:var(--gild-hi);font-weight:800}
.rv-faq details{border-bottom:1px dashed var(--rim)}
.rv-faq summary{
  cursor:pointer; list-style:none; padding:10px 26px 10px 0; position:relative;
  font-weight:800; font-size:15px; color:#fff;
}
.rv-faq summary::-webkit-details-marker{display:none}
.rv-faq summary::after{
  content:"+"; position:absolute; right:2px; top:6px; font:400 24px/1 "Bebas Neue",sans-serif; color:var(--gild);
}
.rv-faq details[open] summary::after{content:"-"}
.rv-faq details p{margin:0 0 12px;font-size:14px;color:var(--fg2)}
.rv-link{display:inline-block;margin-top:14px;font-weight:800;color:var(--gild-hi);text-decoration:none;border-bottom:2px solid var(--gild-lo)}

.rv-foot{margin-top:14px;text-align:center;font-size:11px;line-height:1.7;color:var(--fg2)}
.rv-foot a{color:var(--fg2)}

@media (max-width:380px){
  .rv-ribbon__h em{font-size:64px}
  .rv-ribbon{margin:0 6px}
}