/* The Pricing page: two options, unmistakably, each its own numbered card with the same parts in the same rows (subgrid) and its own ask, an "or" between them,
   on the night with the dark title band, so the page runs dark, light, dark (the captain's rule, 5 Oct), the credit strip from option 1 to option 2 under them; then the questions about pricing on the light page. It is a still page: only the seat count moves, when the visitor changes it */
.plans-head { padding-bottom: 168px; }
.plans.block { padding-top: 0; }
.plans .opts { position: relative; margin-top: -120px; }

/* Six shared rows: the head, who it is for, the price, what is included, the clock line, and the ask; the clock line has its own row so it starts at the same height on both cards (the captain, 6 Oct) */
.opts { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); grid-template-rows: repeat(6, auto); }
/* The edge is a firm line in the aubergine and the shadow starts right at it, so each card stands off the white page in every browser, not only where the long soft shadow renders */
.opt { --c: var(--magenta); --tint: rgba(226, 51, 107, .08); display: grid; grid-template-rows: subgrid; grid-row: 1 / span 6; overflow: hidden; border: 1px solid rgba(39, 27, 54, .16); border-radius: 20px; background: #fff; box-shadow: 0 1px 3px rgba(39, 27, 54, .1), 0 14px 32px -16px rgba(39, 27, 54, .3), 0 28px 56px -30px rgba(39, 27, 54, .5); }
.opt.o1 { grid-column: 1; }
.opt.o2 { --c: var(--blue); --tint: rgba(38, 84, 124, .08); grid-column: 3; }
.opt-head { padding: 28px 40px 26px; background: var(--tint); border-bottom: 1px solid var(--line); }
.opt-n { display: inline-flex; padding: 5px 12px; border-radius: 999px; background: var(--c); color: #fff; font-family: var(--font-heading); font-size: 12px; font-weight: 800; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; }
.opt-name { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 34px; line-height: 42px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.opt-name .icon { flex: none; width: 32px; height: 32px; color: var(--c); }
.opt-part { padding: 28px 40px 0; }
.opt-label { font-family: var(--font-heading); font-size: 12px; font-weight: 700; line-height: 18px; letter-spacing: .12em; text-transform: uppercase; color: #929699; }
.opt-lead { margin-top: 6px; font-family: var(--font-heading); font-size: 22px; line-height: 30px; font-weight: 700; color: var(--ink); }
.opt-for { margin-top: 6px; font-size: 17px; line-height: 27px; color: var(--ink-soft); }
.opt-price { margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--muted); }
.opt-price b { display: block; font-family: var(--font-heading); font-size: 40px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--c); }
/* The "from" before the lowest price, smaller than the figure so the figure reads first */
.opt-price .from { font-size: .5em; font-weight: 700; letter-spacing: 0; }
/* The price box and the ask under it, with room between them so the button stands on its own */
.opt-act { align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 32px 24px; padding: 32px 40px 40px; }

/* Each option's price per participant or seat, band by band */
.tiers { display: grid; margin-top: 14px; border-top: 1px solid var(--line); }
/* When a row is too narrow for both, the price takes its own line, still at the right */
.tiers li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 24px; color: var(--ink-soft); }
.tiers b { flex: none; margin-left: auto; font-family: var(--font-heading); font-size: 17px; font-weight: 800; color: var(--blue); }
/* One project's bands in the project's pink */
.tiers.is-compare b { color: var(--magenta); }

/* What is included: the site's green check before each line */
.ticks { display: grid; gap: 12px; margin-top: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 26px; color: var(--ink); }
.ticks .mark { margin-top: 2px; }
.opt-part.opt-time { padding-top: 0; }
.plan-time { display: flex; gap: 10px; align-items: flex-start; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 24px; color: var(--muted); }
.plan-time .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: #929699; }

/* The "or" between the two cards */
.or { grid-column: 2; grid-row: 1 / span 6; display: grid; place-items: center; }
.or span { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-family: var(--font-heading); font-size: 16px; font-weight: 800; box-shadow: 0 8px 20px -10px rgba(39, 27, 54, .35); }

/* The count of people or seats: typed, or one at a time, from the option's minimum; its price under it */
.seat-picker { flex-basis: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding: 12px 12px 14px 20px; border-radius: 12px; background: var(--soft); }
.seat-picker label { font-family: var(--font-heading); font-size: 16px; font-weight: 700; line-height: 24px; color: var(--ink); }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: #fff; color: var(--blue); cursor: pointer; box-shadow: 0 1px 2px rgba(39, 27, 54, .12); }
.stepper button:hover:not(:disabled) { background: var(--blue); color: #fff; }
.stepper button:disabled { color: #C6CBCB; cursor: default; box-shadow: none; }
.stepper .icon { width: 18px; height: 18px; }
/* No padding of its own: iOS Safari gives every field 0.5em each side, which at this size left 36 px for 200 and cut it off; the box fits four digits, up to 9999 */
.stepper input { width: 84px; min-width: 0; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; text-align: center; font-family: var(--font-heading); font-size: 26px; font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus-visible { outline: 3px solid var(--yellow); }
.seat-result { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--line); }
.seat-total { font-size: 16px; line-height: 24px; color: var(--muted); }
.seat-total b { margin-right: 4px; font-family: var(--font-heading); font-size: 28px; font-weight: 800; line-height: 36px; letter-spacing: -0.01em; color: var(--blue); }
.seat-sum { min-height: 22px; margin-top: 2px; font-size: 14.5px; line-height: 22px; color: var(--muted); }
.seat-result [hidden] { display: none; }
/* One project's count of people, the same box in the project's pink */
.is-project .stepper button:not(:disabled), .is-project .stepper input, .is-project .seat-total b { color: var(--magenta); }
.is-project .stepper button:hover:not(:disabled) { background: var(--magenta); color: #fff; }

/* The licence's own ask: the site's big button in the blue, so each option has its own colour and its own call */
.button.cta.button-blue { --cta-glow: 0 22px 44px -18px rgba(38, 84, 124, .85), 0 6px 14px -6px rgba(38, 84, 124, .5); background: var(--blue); color: #fff; }
.button.cta.button-blue:hover { background: var(--aubergine); box-shadow: var(--cta-glow), inset 0 1px 0 rgba(255, 255, 255, .22); }
.button-blue .cta-arrow { color: var(--blue); }

/* Right under the cards, the note that every price on them is before VAT */
.plans-vat { margin-top: 20px; font-size: 15px; line-height: 22px; text-align: center; color: var(--muted-on-dark); }
/* The credit line, quiet under the cards: a see-through strip with the two option badges joined by an arrow, then the line (the captain, 6 Oct) */
.credit-strip { display: flex; align-items: center; gap: 10px 16px; max-width: 920px; margin: 36px auto 0; padding: 12px 22px 12px 14px; border: 1px solid var(--line-on-dark); border-radius: 14px; background: var(--aubergine-light); font-size: 16px; line-height: 24px; color: var(--text-on-dark); text-wrap: pretty; }
.cs-path { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.cs-path .icon { width: 16px; height: 16px; color: var(--muted-on-dark); }
.cs-n { padding: 5px 10px; border-radius: 999px; color: #fff; font-family: var(--font-heading); font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.cs-n.o1 { background: var(--magenta); }
.cs-n.o2 { background: var(--blue); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }

@media (max-width: 1100px) {
  .opts { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); }
  .opt-head { padding: 24px 28px 22px; }
  .opt-part { padding: 24px 28px 0; }
  .opt-act { padding: 28px 28px 32px; }
  .opt-name { font-size: 28px; line-height: 36px; }
  .or span { width: 44px; height: 44px; font-size: 15px; }
  .seat-picker { grid-template-columns: minmax(0, 1fr); }
}
/* Narrow, the two cards stack and the "or" sits on its own line between them */
@media (max-width: 900px) {
  .opts { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .opt, .opt.o1, .opt.o2 { display: flex; flex-direction: column; grid-column: auto; grid-row: auto; }
  .or { grid-column: auto; grid-row: auto; padding: 14px 0; }
  .opt-act { align-self: stretch; margin-top: auto; }
  .seat-picker { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 720px) {
  .plans-head { padding-bottom: 120px; }
  .plans .opts { margin-top: -88px; }
  .opt { border-radius: 16px; }
  .opt-head { padding: 20px 20px 18px; }
  .opt-name { gap: 10px; margin-top: 10px; font-size: 25px; line-height: 32px; }
  .opt-name .icon { width: 26px; height: 26px; }
  .opt-part { padding: 22px 20px 0; }
  .opt-lead { font-size: 19px; line-height: 27px; }
  .opt-for { font-size: 16px; line-height: 25px; }
  .opt-price b { font-size: 34px; }
  .tiers li { font-size: 15px; }
  .opt-act { row-gap: 24px; padding: 24px 20px 24px; }
  .opt-act > .button { width: 100%; justify-content: space-between; gap: 12px; padding-left: 20px; font-size: 17px; }
  .or { padding: 10px 0; }
  .ticks li { font-size: 16px; line-height: 24px; }
  .seat-picker { gap: 10px 8px; padding: 10px 10px 12px 16px; }
  .seat-picker label { font-size: 15px; }
  .stepper button { width: 40px; height: 40px; }
  .stepper input { width: 72px; height: 40px; font-size: 24px; }
  .plans-vat { margin-top: 16px; font-size: 14.5px; }
  .credit-strip { flex-direction: column; align-items: flex-start; margin-top: 28px; padding: 14px 16px; font-size: 15px; line-height: 23px; }
}
/* On the narrowest phones the question sits over the stepper */
@media (max-width: 374px) {
  .seat-picker { grid-template-columns: minmax(0, 1fr); }
  .opt-act > .button { padding-left: 16px; font-size: 16px; }
}