/* THE LAUNCH OFFER AND WHAT REPLACES IT.
   The page is written in the state of the offer today: everything marked data-offer="launch" is on show, everything marked
   data-offer="regular" carries `hidden`. offer.js swaps the two when the shop says the thirty licences are gone. The class
   rules of the Go Atlas stylesheet set their own `display` on the price and the title, which would win over the `hidden`
   attribute, so it is made to win here. */
[data-offer][hidden] { display: none !important; }

/* THE HEAD OF THE CARD IS ON THE AXIS OF THE BADGE. The "Save 10" badge is centred on the top edge of the card; the title, the price
   and the line under it are centred on the same vertical line, so the four read as one column. The list of what is included stays
   aligned to the left: it is a list of lines, each starting with its tick. Both states of the offer (with or without the badge)
   are set the same way, so the card does not change its look when the offer ends. */
.pricing-card[data-offer-card] h3,
.pricing-card[data-offer-card] .price,
.pricing-card[data-offer-card] .price-note { text-align: center; }

/* THE OFFER IS SAID THE WAY A SHOP SAYS IT: the new price, then "Instead of" the old one crossed out, then the limit. Two short lines
   under the figure, set alike: small, light, in the muted colour of the note, so that the figure above is the only thing that
   shouts. The euro sign follows the amount. */
.pricing-card[data-offer-card] .price { line-height: 1.1; }
.pricing-card[data-offer-card] .price-note .price-instead,
.pricing-card[data-offer-card] .price-note .price-limit { display: block; }
.pricing-card[data-offer-card] .price-note .price-limit { margin-top: 2px; }

/* THE PRICE YOU PAY IS THE BIGGEST THING ON THE CARD. The Go Atlas stylesheet sets every span of a price to 1rem, which made the
   amount smaller than the crossed-out one beside it. It is now larger than the block itself, in the copper of the "Go" (the light
   version, the one made for a dark surface, as in the top band), and it is the same in both states of the offer. The line height
   is 1 so that the bigger figure does not make the card any taller: the card sets the height of the picture beside it. */
.price .price-now {
    font-size: 1.15em;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #d9774a 0%, #e99a63 48%, #f0bd78 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}