/* The personal area, the trial page and the thank-you page, on top of
   sign.css and site.css. */

/* `hidden` wins over the display of .btn and the cards. */
[hidden] { display: none !important; }

main > .card + .card, main > .card + .toast { margin-top: 1rem; }
.center { text-align: center; }
.hand.big { font-size: 2.3rem; margin: .2rem 0 .6rem; text-align: center; }

.kinds-pick { border: none; margin: 0 0 .5rem; padding: 0; }
.kinds-pick legend { font-weight: 600; margin-bottom: .3rem; }

.price-row { display: flex; justify-content: space-between; align-items: baseline;
             margin: 1rem 0 .2rem; padding: .7rem 1rem; border-radius: .9rem;
             background: var(--gold-soft); border: 1px solid #e6d29d; }
.price-row strong { font-size: 1.4rem; color: var(--teal-deep); }

.offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem;
         align-items: center; padding: .75rem 1rem; margin: .5rem 0; border-radius: 1rem;
         background: var(--teal-soft); border: 1px solid #c9e9ec; }
.offer strong { color: var(--teal-deep); }
.offer span { grid-column: 1; font-size: .9rem; color: var(--dim); }
.offer .btn { grid-column: 2; grid-row: 1 / span 2; padding: .5rem 1.1rem; }

.thanks { text-align: center; }
.chosen { font-weight: 600; color: var(--teal-deep); margin: .6rem 0 0; }
.facts { margin-top: .8rem; }

/* Confetti: 40 pieces falling once, coloured and placed by their position.
   Left out entirely with reduced motion (thanks.js). */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.confetti i { position: absolute; top: -1rem; width: .55rem; height: .9rem; border-radius: .15rem;
              background: var(--teal); animation: fall 4.5s cubic-bezier(.3, .6, .5, 1) forwards; }
.confetti i:nth-child(3n) { background: var(--gold); width: .7rem; height: .7rem; border-radius: 50%; }
.confetti i:nth-child(3n+1) { background: #f19bb4; }
.confetti i:nth-child(4n) { animation-duration: 3.6s; }
.confetti i:nth-child(5n) { animation-duration: 5.2s; }
.confetti i:nth-child(2n) { animation-delay: .3s; }
.confetti i:nth-child(7n) { animation-delay: .7s; }
.confetti i:nth-child(10n+1) { left: 3%; }
.confetti i:nth-child(10n+2) { left: 13%; }
.confetti i:nth-child(10n+3) { left: 24%; }
.confetti i:nth-child(10n+4) { left: 35%; }
.confetti i:nth-child(10n+5) { left: 46%; }
.confetti i:nth-child(10n+6) { left: 57%; }
.confetti i:nth-child(10n+7) { left: 68%; }
.confetti i:nth-child(10n+8) { left: 78%; }
.confetti i:nth-child(10n+9) { left: 88%; }
.confetti i:nth-child(10n) { left: 96%; }
.confetti i:nth-child(n+11):nth-child(-n+20) { margin-left: 2.5%; }
.confetti i:nth-child(n+21):nth-child(-n+30) { margin-left: -2%; }
@keyframes fall {
  to { transform: translateY(105vh) rotate(540deg); opacity: .2; }
}