/* Fourth screen "Preise": every price in the open, and the written offer the visitor would get for their own business.
   Left the offer sheet (a size container: everything on it is measured in cqi, so it scales as one picture),
   right the copy with the three ways to buy and their tiers. Prices are the same as on web.html and automation.html. */

.prices {
  position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(24px, 4vw, 72px); overflow-x: clip;
  padding: calc(var(--hdr) + 8px) calc(var(--gutter) + max(0px, (100% - 1480px) / 2)) 32px;
}
.pq-copy { order: 2; max-width: 560px; }
.pq-lead { margin: 22px 0 0; max-width: 32em; font-size: var(--t-lead); line-height: 1.6; color: var(--muted); }
.prices.seen .sv { opacity: 1; transform: none; transition: opacity .8s var(--ease) var(--d, 0s), transform 1s var(--expo) var(--d, 0s); }

/* how many days the pilot price still holds */
.pq-dead {
  display: inline-flex; align-items: center; gap: 10px; margin: 24px 0 0; padding: 8px 12px 8px 10px;
  border: 1px solid rgba(210, 102, 74, .45); border-radius: 2px;
  font: 500 11.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--terra-lit);
}
.pq-dead i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--terra-lit); }
.pq-dead[hidden] { display: none; }

/* the three ways to buy */
.pq-modes { display: flex; margin: 28px 0 0; border: 1px solid var(--line); border-radius: 2px; width: max-content; max-width: 100%; }
.pq-mode {
  padding: 11px 16px 10px; border: 0; border-radius: 0; background: none; color: var(--muted); cursor: pointer;
  font: 500 14.5px/1.2 var(--font); text-align: left; transition: background-color .3s, color .3s;
}
.pq-mode + .pq-mode { border-left: 1px solid var(--line); }
.pq-mode small { display: block; margin-top: 4px; font: 400 11px/1 var(--mono); letter-spacing: .04em; color: var(--dim); transition: color .3s; }
.pq-mode:hover { color: var(--fg); }
.pq-mode[aria-selected="true"] { background: var(--fg); color: var(--ink); }
.pq-mode[aria-selected="true"] small { color: rgba(10, 10, 11, .58); }
.pq-mode .s { display: none; }

/* the tiers of the chosen way, each with its pilot and its regular price */
.pq-tiers { list-style: none; margin: 20px 0 0; padding: 0; border-left: 1px solid var(--line); }
.pq-tier {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; row-gap: 3px; align-items: baseline;
  width: 100%; padding: 12px 0 12px 22px; border: 0; background: none; color: var(--muted); cursor: pointer; text-align: left; font: inherit;
  transition: color .3s;
}
.pq-tier:hover { color: var(--fg); }
.pq-tier b { font: 500 18px/1.25 var(--font); }
.pq-tier .w { font-size: 14px; line-height: 1.4; color: var(--dim); transition: color .3s; }
.pq-tier .p { grid-column: 2; grid-row: 1; font: 500 18px/1.25 var(--font); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pq-tier .r { grid-column: 2; grid-row: 2; font-size: 13px; color: var(--dim); text-align: right; white-space: nowrap; }
.pq-tier .r s { text-decoration-thickness: 1px; }
.pq-tier .fit {
  display: inline-block; margin-left: 10px; padding: 3px 6px; vertical-align: 2px; border: 1px solid rgba(210, 102, 74, .45); border-radius: 2px;
  font: 500 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--terra-lit);
}
.pq-tier .fit[hidden] { display: none; }
.pq-tier .ns { display: none; }
.pq-tier::before {
  content: ''; position: absolute; left: -1px; top: 0; width: 2px; height: 100%; background: var(--terra-lit);
  transform: scaleY(0); transform-origin: top; transition: transform .5s var(--expo);
}
.pq-tier.on { color: var(--fg); }
.pq-tier.on .w { color: var(--muted); }
.pq-tier.on::before { transform: scaleY(1); }

.pq-fine { margin: 20px 0 0; max-width: 46em; font-size: 13.5px; line-height: 1.55; color: var(--dim); }
.pq-cta { margin-top: 24px; }
.pq-cta .btn { max-width: 100%; }
.pq-cta .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- the offer sheet ---------- */
.pq-stage { order: 1; position: relative; display: grid; place-items: center; min-height: calc(100svh - var(--hdr) - 48px); }
.pq-stage::before {   /* a soft light on the table */
  content: ''; position: absolute; inset: -6% -24%; pointer-events: none;
  background: radial-gradient(42% 46% at 50% 48%, rgba(255, 232, 200, .085), transparent 72%);
}
.pq-doc {
  /* one page height for every tier, so the sheet does not jump when the tier changes */
  position: relative; width: min(100%, 540px, calc((100svh - var(--hdr) - 72px) / 1.3)); aspect-ratio: 1 / 1.29; container-type: inline-size;
  color: #1c1c1f; background: #f5f2eb; border-radius: 2px; rotate: -1deg;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 34px 60px -22px rgba(0, 0, 0, .8), 0 12px 26px -12px rgba(0, 0, 0, .55);
}
.prices .pq-doc { opacity: 0; translate: 0 48px; }
.prices.seen .pq-doc { opacity: 1; translate: 0 0; transition: opacity .8s var(--ease) .1s, translate 1.2s var(--expo) .1s; }
.pq-in { position: relative; padding: 7cqi 7.4cqi 6.4cqi; font: 400 2.5cqi/1.45 var(--font); }
.pq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 4cqi; }
.pq-logo { display: block; font: 700 4.4cqi/1 var(--font); letter-spacing: .14em; }
.pq-logo i { display: inline-block; width: 1.05cqi; height: 1.05cqi; margin-left: .5cqi; border-radius: 50%; background: #c2553b; }
.pq-tagl { display: block; margin-top: 1.5cqi; font: 400 1.65cqi/1 var(--mono); letter-spacing: .05em; color: #7a7a7f; }
.pq-kind { margin: 0; text-align: right; font: 500 1.75cqi/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #7a7a7f; }
.pq-kind b { display: block; font: 600 2.6cqi/1.2 var(--font); letter-spacing: .16em; color: #1c1c1f; }
.pq-to { margin: 6.5cqi 0 0; }
.pq-to small { display: block; margin-bottom: .8cqi; font: 500 1.6cqi/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8a8a8f; }
.pq-to b { font-weight: 600; }
.pq-subj { margin: 5cqi 0 0; font: 600 3.2cqi/1.25 var(--font); letter-spacing: -.01em; }

.pq-pos { list-style: none; margin: 3.6cqi 0 0; padding: 0; border-top: 1px solid rgba(0, 0, 0, .16); counter-reset: pos; }
.pq-pos li {
  display: grid; grid-template-columns: 4.6cqi minmax(0, 1fr) auto; column-gap: 2cqi; align-items: baseline;
  padding: 1.7cqi 0; border-bottom: 1px solid rgba(0, 0, 0, .08); counter-increment: pos;
}
.pq-pos li::before { content: counter(pos); font: 500 1.8cqi/1 var(--mono); color: #8a8a8f; }
.pq-pos li i { font: 400 1.75cqi/1 var(--mono); font-style: normal; color: #8a8a8f; }
.pq-pos.swap li { animation: pq-in .55s var(--expo) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes pq-in { from { opacity: 0; transform: translateY(1.2cqi); } }

.pq-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 3cqi; row-gap: 1.1cqi; align-items: baseline; margin-top: 3.8cqi; }
.pq-sum dt { color: #6f6f74; }
.pq-sum dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pq-sum .reg dd s { text-decoration-thickness: 1px; color: #6f6f74; }
.pq-sum .big { align-items: center; }
.pq-sum dt.big { color: #1c1c1f; font-weight: 600; }
.pq-sum dd.big { font: 600 7.2cqi/1 var(--font); letter-spacing: -.03em; color: #1c1c1f; }
.pq-sum dd.big em { font-style: normal; font-size: .62em; font-weight: 500; margin-left: .25em; }
.pq-sum dd.big em.pre { margin: 0 .12em 0 0; }   /* EN and RU write the euro sign first, as on the other pages */
.pq-vat { margin: 1.4cqi 0 0; text-align: right; font: 400 1.7cqi/1 var(--mono); letter-spacing: .04em; color: #8a8a8f; }
.pq-terms {
  margin: 4cqi 0 0; padding: 3cqi 0 0; border-top: 1px solid rgba(0, 0, 0, .16);
  font: 400 1.75cqi/1.65 var(--mono); color: #6a6a6f;
}

/* the stamp lands once the sheet is in view */
.pq-stamp {
  position: absolute; right: 7cqi; top: 17.5cqi; padding: 1.5cqi 2.4cqi 1.3cqi; border: .55cqi solid #b4472f; border-radius: .8cqi;
  color: #b4472f; text-align: center; rotate: -8deg; opacity: 0; scale: 1.7; pointer-events: none;
  -webkit-mask: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, .78) 56%, #000 70%) 0 0 / 3.2cqi 3.2cqi;
          mask: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, .78) 56%, #000 70%) 0 0 / 3.2cqi 3.2cqi;
}
.pq-stamp b { display: block; font: 800 3.5cqi/1 var(--font); letter-spacing: .12em; }
/* the stamp sits in the total's label: absolute to the sheet here, in the label's place on a narrow sheet */
.pq-stamp small { display: block; margin-top: .9cqi; font: 600 1.7cqi/1 var(--mono); letter-spacing: .1em; }
.prices.seen .pq-stamp { opacity: .9; scale: 1; transition: opacity .25s ease .95s, scale .5s cubic-bezier(.3, 1.5, .5, 1) .95s; }
.pq-stamp[hidden] { display: none; }
.pq-note { position: relative; z-index: 1; margin: 18px 0 0; font-size: 13px; color: var(--dim); text-align: center; }

/* ---------- smaller screens ---------- */
@media (min-width: 901px) and (max-height: 820px) {
  .pq-lead { display: none; }
  .pq-modes { margin-top: 22px; }
  .pq-tier { padding-block: 9px; }
  .pq-fine { margin-top: 14px; }
}
@media (max-width: 900px) {
  .prices { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; min-height: 0; padding-top: calc(var(--hdr) + 22px); padding-bottom: 28px; }
  .pq-copy { display: contents; }
  .prices .eyebrow { order: 1; margin-bottom: 14px; font-size: 10.5px; letter-spacing: .14em; }
  .prices .h2 { order: 2; font-size: clamp(1.9rem, 8.4vw, 3rem); }
  .pq-lead, .pq-fine, .pq-note { display: none; }
  .pq-dead { order: 3; justify-self: start; margin-top: 14px; letter-spacing: .06em; }
  .pq-modes { order: 4; width: 100%; margin-top: 16px; }
  .pq-mode { flex: 1 1 0; padding: 10px 8px 9px; text-align: center; font-size: 14px; }
  .pq-mode .l { display: none; }
  .pq-mode .s { display: inline; }
  /* the tiers become a row of chips; the sheet below carries the detail */
  .pq-tiers { order: 5; display: flex; gap: 6px; margin-top: 10px; border: 0; }
  .pq-tiers li { flex: 1 1 0; min-width: 0; }
  .pq-tier { display: block; height: 100%; padding: 8px 8px 7px; border: 1px solid var(--line); border-radius: 2px; text-align: center; }
  .pq-tier::before { display: none; }
  .pq-tier b { display: block; font-size: 13px; white-space: nowrap; }
  .pq-tier .nl { display: none; }   /* a short name, so no chip cuts its name off */
  .pq-tier .ns { display: inline; }
  .pq-tier .p { display: block; margin-top: 2px; font-size: 13px; text-align: center; color: var(--dim); }
  .pq-tier .w, .pq-tier .r, .pq-tier .fit { display: none; }
  .pq-tier.on { border-color: var(--fg); }
  .pq-tier.on .p { color: var(--terra-lit); }
  .pq-stage { order: 6; min-height: 0; margin-top: 16px; }
  .pq-stage::before { inset: -10% -30%; }
  .pq-doc { width: 100%; aspect-ratio: auto; rotate: 0deg; }
  .pq-cta { order: 7; margin-top: 16px; }
  .pq-cta .btn { width: 100%; justify-content: center; }
  .pq-ask { display: none; }   /* the name matters more than the verb on a narrow button */
}
@media (max-width: 900px) and (max-height: 760px) { .pq-dead { display: none; } }   /* the stamp carries the date */
/* a narrow sheet drops the letterhead details so the price stays large */
@container (max-width: 400px) {
  .pq-in { padding: 5cqi 5.6cqi 4.6cqi; font-size: 3.4cqi; }
  .pq-head > div, .pq-to, .pq-terms { display: none; }
  .pq-kind { text-align: left; font-size: 2.5cqi; }
  .pq-kind b { display: inline; font: inherit; letter-spacing: inherit; color: #1c1c1f; }
  .pq-kind b::after { content: ' · '; color: #7a7a7f; }
  .pq-subj { margin-top: 2.6cqi; font-size: 4.3cqi; }
  .pq-pos { margin-top: 3cqi; }
  .pq-pos li { padding: 1.6cqi 0; grid-template-columns: 5.6cqi minmax(0, 1fr) auto; }
  .pq-pos li::before, .pq-pos li i { font-size: 2.6cqi; }
  .pq-sum { margin-top: 3cqi; }
  .pq-sum dd.big { font-size: 9.4cqi; }
  .pq-vat { font-size: 2.5cqi; }
  .pilot .pq-sum dt.big [data-pq-biglbl] { display: none; }
  .pq-stamp { position: relative; top: auto; right: auto; display: inline-block; padding: 1.4cqi 2.2cqi 1.2cqi; rotate: -5deg; }
  .pq-stamp b { font-size: 3.9cqi; }
  .pq-stamp small { font-size: 2.1cqi; }
}
@media (prefers-reduced-motion: reduce) {
  .prices .pq-doc, .pq-stamp, .pq-pos li { transition: none !important; animation: none !important; }
}