/* Pricing, same budget, 10x the people, on the night: the lead line and two boxes that set the traditional way against Elly and draw what the same budget buys as people */
.pricing h2 em { font-style: normal; color: var(--magenta); }
.pricing .section-head { margin-bottom: 40px; }
.pricing .section-head > .lead-line { max-width: 760px; margin-top: 18px; font-family: var(--font-heading); font-size: 21px; font-weight: 600; line-height: 1.45; color: var(--muted-on-dark); text-wrap: pretty; }
.lead-line b { font-weight: 800; color: var(--magenta); }

/* Two boxes on a shared grid with the vs between them, so the tags, names, prices, crowds and counts line up across the two */
.crowds { --fig: 18px; --gap: 7px; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1.55fr); grid-template-rows: auto auto auto 1fr auto; }
.pricing .side { display: grid; grid-row: span 5; grid-template-rows: subgrid; justify-items: start; padding: 36px 44px; border-radius: 24px; }
/* The traditional way is ghosted into the night, only its price in full white; Elly's box is the one light thing in the band, so the eye lands on it */
.pricing .interviews { grid-column: 1; border: 1px dashed rgba(255, 255, 255, .2); }
.pricing .elly { grid-column: 3; background: #fff; box-shadow: 0 0 0 6px rgba(208, 225, 241, .14), 0 28px 56px -28px rgba(10, 7, 14, .8); }
.side-tag { margin-bottom: 20px; padding: 8px 14px; border-radius: 999px; font-family: var(--font-heading); font-size: 13px; font-weight: 800; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; }
.interviews .side-tag { background: rgba(255, 255, 255, .1); color: var(--muted-on-dark); }
.pricing .elly .side-tag { background: var(--blue); color: #fff; }
.versus { grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: center; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: 0 12px 28px -10px rgba(10, 7, 14, .5); font-family: var(--font-heading); font-size: 19px; font-weight: 800; line-height: 1; color: var(--ink); }
.side-name { display: flex; align-items: center; gap: 12px; font-family: var(--font-heading); font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--blue); }
.interviews .side-name { color: var(--muted-on-dark); }
.interviews .side-name small { color: var(--faint-on-dark); }
.side-name small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 14.5px; font-weight: 400; color: var(--muted); }
.side-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #929699; }
.interviews .side-icon { background: rgba(255, 255, 255, .1); color: var(--muted-on-dark); }
.side-icon .icon { width: 18px; height: 18px; }
.side-icon.elly-mark { background: #fff url("../../images/elly-mark.svg") center / 100% no-repeat; }
/* The price per participant is as big as the count, and the traditional one is in full white, so the cost gap pops as plainly as the reach */
.side-price { margin-top: 20px; font-size: 16px; color: var(--muted); }
.side-price b { display: block; margin-bottom: 4px; font-family: var(--font-heading); font-size: 44px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.interviews .side-price { color: var(--muted-on-dark); }
.interviews .side-price b { color: #fff; }
.pricing .elly .side-price b { color: var(--blue); }
/* The "from" before Elly's lowest price, smaller than the figure */
.side-price .from { font-size: .5em; font-weight: 700; letter-spacing: 0; }
.crowd { align-self: end; display: grid; grid-template-columns: repeat(var(--cols), var(--fig)); gap: var(--gap); margin-top: 28px; }
.side-count { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 20px; font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--ink-soft); }
.side-count b { white-space: nowrap; font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.interviews .side-count, .interviews .side-count b { color: var(--faint-on-dark); }
.pricing .elly .side-count b { color: var(--blue); }
.times { white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: var(--magenta); box-shadow: 0 10px 22px -10px rgba(226, 51, 107, .8); font-size: 14px; font-weight: 800; line-height: 1; color: #fff; }

/* One figure is one person; the solid ones are the low end of the range and the light ones the rest, filled from the bottom */
.fig { width: var(--fig); aspect-ratio: 14 / 20; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20'%3E%3Ccircle cx='7' cy='4.2' r='4'/%3E%3Cpath d='M0 20v-4.6C0 11.6 3.1 9.6 7 9.6s7 2 7 5.8V20z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20'%3E%3Ccircle cx='7' cy='4.2' r='4'/%3E%3Cpath d='M0 20v-4.6C0 11.6 3.1 9.6 7 9.6s7 2 7 5.8V20z'/%3E%3C/svg%3E") center / contain no-repeat; }
.interviews .fig { color: #929699; }
.interviews .fig.light { color: rgba(255, 255, 255, .16); }
.pricing .elly .fig { color: var(--blue); }
.pricing .elly .fig.light { color: #D0E1F1; }

/* Under the comparison, one line to the Pricing page and its two options, the link in yellow on the night */
/* The way on to the pricing page is a real button: sun yellow filled with aubergine text, which reads best on the night, beside the sentence on wide screens and under it on phones */
.pricing-more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 24px; margin-top: 56px; font-family: var(--font-heading); font-size: 18px; font-weight: 600; line-height: 28px; text-align: center; color: var(--muted-on-dark); }
.pricing-more .more { gap: 10px; background: var(--yellow); color: var(--aubergine); box-shadow: 0 12px 30px -14px rgba(255, 209, 102, .6); transition: background-color .2s, transform .2s; }
.pricing-more .more:hover { background-color: #fff; transform: translateY(-1px); }
.pricing-more .icon { width: 18px; height: 18px; transition: transform .2s; }
.pricing-more .more:hover .icon { transform: translateX(4px); }
@media (max-width: 720px) { .pricing-more { flex-direction: column; gap: 16px; margin-top: 36px; font-size: 16px; line-height: 26px; } }

/* Elly's white box sits a little proud of the traditional one, so it reads as lifted off the night */
@media (min-width: 721px) {
  .pricing .elly { margin: -16px 0; padding-top: 52px; padding-bottom: 52px; }
}

@media (max-width: 1100px) {
  .crowds { --fig: 15px; --gap: 6px; }
  /* Below about 860 Elly's twenty figures a row would run out of her box, so both crowds shrink to what her box holds, keeping one figure size */
  .crowd { --fig: min(15px, ((100cqi - 64px) * 1.55 / 2.55 - 56px - 19 * 6px) / 20); }
  .crowds { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.55fr); }
  .pricing .side { padding: 32px 28px; }
  .versus { width: 50px; height: 50px; font-size: 17px; }
  .side-price b { font-size: 38px; }
}
@media (max-width: 720px) {
  .pricing .section-head { margin-bottom: 24px; }
  .pricing .section-head > .lead-line { font-size: 18px; }
  /* On a phone the two boxes stack, the traditional way, then the vs, then Elly, with the same figure size, so Elly's crowd is plainly ten times the area */
  .crowds { --gap: 4px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .crowd { --fig: 11px; }
  .pricing .side { grid-row: auto; grid-column: auto; grid-template-rows: none; padding: 24px 20px; border-radius: 20px; }
  .side-tag { margin-bottom: 14px; font-size: 12px; }
  /* The vs overlaps both boxes' edges, so the two read as one comparison */
  .versus { grid-column: auto; grid-row: auto; margin: -14px 0; width: 48px; height: 48px; font-size: 16px; }
  .side-name { font-size: 16px; gap: 10px; }
  .side-icon { width: 32px; height: 32px; }
  .side-icon .icon { width: 15px; height: 15px; }
  .side-price { margin-top: 14px; font-size: 15px; }
  .side-price b { font-size: 34px; }
  .side-name small { font-size: 13.5px; }
  .crowd { margin-top: 18px; }
  .side-count { margin-top: 14px; font-size: 17px; gap: 10px; }
  .side-count b { font-size: 34px; }
}
@media (max-width: 374px) {
  .crowd { --fig: 10px; }
}