/* 15 Price. One card. Green (top left): what the other ways charge in a year (07's base), and under them our one
   payment – $249 cut by the logo's yellow stick (19°, flat ends, as in the logo: here it does its job and cuts), $99
   rolling in, "once" in yellow. White (right): what you get on every video, one icon per line. Green (bottom left):
   the page's only yellow button and the facts that take the risk away. In one column (phones, tablets): price, then
   the button in the same dark block, then the value; on phones "Yours to keep" folds into one short paragraph.
   Nothing moves on hover; the card plays its little sequence once, when the price is on screen (js/15-price.js). The
   value list doesn't animate: at the natural stop it is in view with the price, and one thing moves at a time. */

.pr .hd { max-width: 980px; }
.pr-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "pay get" "buy get"; max-width: 1080px; margin: var(--s6) auto 0; border-radius: var(--r-card); overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-3); }
.pr-pay { grid-area: pay; padding: 34px 44px 0; background: var(--green-band); color: var(--night-ink); min-width: 0; }
.pr-buy { grid-area: buy; padding: 26px 44px 36px; background: var(--green-band); color: var(--night-ink); min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.pr-get { grid-area: get; padding: 34px 48px 36px; min-width: 0; align-self: center; }

/* What the other ways charge: one row each, the columns line up (subgrid) */
.pr-vs { list-style: none; margin: 0; padding: 0 0 20px; display: grid; grid-template-columns: minmax(min-content, 1fr) auto auto; row-gap: 14px; column-gap: 14px; border-bottom: 1px solid rgba(242, 240, 233, .14); }
.pr-vs li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; row-gap: 1px; font-size: 17px; line-height: 1.3; font-weight: 500; color: var(--night-2); }
.pr-vs-sub { grid-column: 1 / -1; font-size: 16px; line-height: 1.35; font-weight: 400; color: var(--night-muted); }
.pr-vs-k { white-space: nowrap; }
.pr-vs b { justify-self: end; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--night-ink); white-space: nowrap; }
.pr-vs-per { display: inline-flex; align-items: center; gap: 7px; color: var(--night-muted); white-space: nowrap; }
.pr-vs-per .ico { width: 17px; height: 17px; }

/* Our one payment */
.pr-lock { margin: 20px 0 0; }
.pr-lockup { display: flex; align-items: flex-end; flex-wrap: nowrap; }
.pr-was { position: relative; align-self: flex-start; margin: .42em .5em 0 0; font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--night-ink); transition: color .5s ease .7s; }
.pr-was > span { position: relative; z-index: 0; }
/* The stick crosses the "4" itself (61.8% is the 4's centre in Onest, letter-spacing included), not the gap between
   2 and 4, where it read as "$2/49"; a thin strike in the struck price's own colour runs through the whole number,
   so it reads as an old price at a glance. The strike fades in with the greying, it doesn't move. */
.pr-was::after { content: ""; position: absolute; z-index: 0; left: -.08em; right: -.08em; top: 50%; height: max(2px, .08em); margin-top: -.04em; border-radius: 1px; background: currentColor; opacity: 0; transition: opacity .5s ease .7s; }
.pr-stick { position: absolute; z-index: 1; left: 61.8%; top: 50%; width: .2em; height: 2em; margin: -1em 0 0 -.1em; background: var(--yellow); transform: skewX(-19deg); clip-path: inset(100% 0 0 0); transition: clip-path .45s cubic-bezier(.7, 0, .25, 1) .4s; }
.pr-now { display: inline-flex; align-items: baseline; font-size: clamp(88px, 7.6vw, 112px); line-height: 1; font-weight: 800; letter-spacing: -0.06em; color: #fff; }
.pr-cur { display: inline-block; font-size: .46em; letter-spacing: 0; margin-right: -.07em; transform: translateY(-.78em); color: var(--night-2); }
.pr-d { display: inline-block; height: 1.02em; overflow: hidden; }
.pr-d > span { display: block; line-height: 1.02; }
.pr-once { margin: 0 0 .2em .16em; font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--yellow); }
.pr-who { margin: 10px 0 0; font-size: 18px; line-height: 1.4; font-weight: 500; color: var(--night-2); }
.pr-who b { color: #fff; font-weight: 700; }

/* What you get */
.pr-h { margin: 0 0 12px; font-size: 20px; line-height: 1.2; font-weight: 700; color: var(--ink); }
.pr-h2 { margin-top: 22px; }
.pr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pr-list li, .pr-list > p { display: flex; align-items: center; gap: 14px; font-size: 18px; line-height: 1.35; font-weight: 500; color: var(--ink-2); }
.pr-list li > span:last-child, .pr-list > p > span:last-child, .pr-safe > p > span { text-wrap: pretty; }
.pr-list b { color: var(--ink); font-weight: 700; }
.pr-ic { flex: none; width: 36px; height: 36px; border-radius: var(--r-thumb); display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.pr-ic .ico { width: 20px; height: 20px; }

/* The button (the page's only yellow one) and the three facts */
.pr-btn { width: 100%; background: var(--yellow); color: var(--ink); box-shadow: 0 16px 30px -16px rgba(232, 180, 0, .6); }
.pr-btn:hover { background: #f5c414; }
.pr-btn:active { background: #d9a800; }
.pr-safe { margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.pr-list > p, .pr-safe > p { margin: 0; }
.pr-safe > p { display: flex; align-items: center; gap: 12px; font-size: 17px; line-height: 1.35; font-weight: 500; color: var(--night-2); }
.pr-safe b { color: #fff; font-weight: 600; }
.pr-safe .ico { width: 20px; height: 20px; color: var(--yellow); }

/* The sequence, once, when the price is on screen: the two other prices, then the stick cuts $249, then $99 rises
   and "once" lands. "$" and "once" wait with the 99, so no half-built "$ … once" is ever shown. */
.js .pr-vs li { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s var(--ease); }
.js .pr-vs li + li { transition-delay: .14s; }
.pr-card.is-in .pr-vs li { opacity: 1; transform: none; }
.js .pr-cur, .js .pr-once { opacity: 0; transition: opacity .35s ease .85s; }
.js .pr-once { transition-delay: 1.45s; }
.pr-card.is-in .pr-cur, .pr-card.is-in .pr-once { opacity: 1; }
.js .pr-d > span { transform: translateY(104%); }
.pr-card.is-in .pr-d > span { animation: pr-up .85s var(--ease) .85s both; }
.pr-card.is-in .pr-d + .pr-d > span { animation-delay: .97s; }
@keyframes pr-up { from { transform: translateY(104%); } to { transform: none; } }
.pr-card.is-in .pr-stick, html:not(.js) .pr-stick { clip-path: inset(0 0 0 0); }
.pr-card.is-in .pr-was, html:not(.js) .pr-was { color: var(--night-muted); }
.pr-card.is-in .pr-was::after, html:not(.js) .pr-was::after { opacity: 1; }

/* Russian (ru/VOICE.md): «один раз» is twice as long as "once" and the pay column has no room for it on one line at any
   width (the lockup fills it exactly at 1440), so it is set on purpose as a two-line price tag beside the 99, its
   last line on the 99's baseline. The two facts under the button break after the bold phrase on a laptop too, as on
   a phone, and the green column is a few px tighter, so the card still ends above the fold at 1440x820. */
.pr-once { display: inline-flex; flex-direction: column; line-height: .9; margin-bottom: .16em; white-space: nowrap; }
.pr-once > span { display: block; }
@media (min-width: 1101px) { .pr-pay { padding-top: 30px; } .pr-buy { padding-bottom: 30px; } }

/* Narrow laptops and tablets: still side by side down to 900px */
@media (max-width: 1200px) { .pr-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 1100px) {
  .pr-pay { padding: 36px 34px 0; } .pr-buy { padding: 28px 34px 36px; } .pr-get { padding: 36px 36px; }
  .pr-vs-per .ico { display: none; }
}
/* One column: the price, the button right under it (one dark block: the two green cells meet with no seam), then
   what you get. The price and the only yellow button share the screen where the wish to buy peaks. */
@media (max-width: 899px) {
  .pr-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "pay" "buy" "get"; max-width: 560px; }
  .pr-pay { padding: 30px 26px 0; }
  .pr-get { padding: 28px 26px 30px; align-self: stretch; }
  .pr-buy { padding: 24px 26px 30px; }
  .pr-vs-per .ico { display: inline-block; }
}
@media (max-width: 719px) {
  .pr-card { margin-top: var(--s5); }
  .pr-pay { padding: 26px 22px 0; } .pr-get { padding: 26px 22px 28px; } .pr-buy { padding: 22px 22px 26px; }
  .pr-vs { column-gap: 10px; padding-bottom: 18px; }
  .pr-vs li { font-size: 16px; }
  .pr-vs b { font-size: 18px; }
  .pr-vs-per .ico { display: none; }
  .pr-lock { margin-top: 20px; }
  .pr-now { font-size: 92px; }
  .pr-was { font-size: 26px; }
  .pr-once { font-size: 26px; }
  .pr-h { font-size: 19px; }
  .pr-list li, .pr-list > p { font-size: 17px; gap: 12px; }
  .pr-ic { width: 36px; height: 36px; }
  .pr-safe { margin-top: 16px; gap: 8px; }
  .pr-safe > p { font-size: 16px; }
  .pr-safe b { display: block; }   /* "Free to reserve." over "You pay when it ships.": a clean break, no orphan */
  /* "Yours to keep" folds into one short paragraph under the list (its heading stays for screen readers) */
  .pr-h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pr-get [role="list"] { display: block; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.45; font-weight: 400; color: var(--ink-2); }
  .pr-get [role="list"] > p { display: inline; font: inherit; color: inherit; }
  .pr-get [role="list"] .pr-ic { display: none; }
  .pr-get [role="list"] > p > span:last-child { text-wrap: wrap; }
}
@media (max-width: 380px) { .pr-now { font-size: 84px; } .pr-vs { column-gap: 8px; } .pr-who { font-size: 17px; } }  /* 375: "Then $249." stays on the line */
/* Russian: «Забронировать место» is 194px of text (the English 148), so on the narrowest cards the button gives up
   padding, and under 360px its arrow, rather than break onto two lines */
@media (max-width: 380px) { .pr-btn { padding: 0 20px; } }
@media (max-width: 359px) { .pr-btn { padding: 0 14px; font-size: 17px; } .pr-btn .ico { display: none; } }
/* The smallest phones (320): the price lockup still fits the card */
@media (max-width: 359px) { .pr-now { font-size: 72px; } .pr-was, .pr-once { font-size: 22px; } }
/* The smallest phones: the rate goes under its price */
@media (max-width: 365px) {
  .pr-vs { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
  .pr-vs-per { grid-column: 2; justify-self: end; margin-top: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pr-vs li { opacity: 1; transform: none; transition: none; }
  .js .pr-d > span, .pr-card.is-in .pr-d > span { transform: none; animation: none; }
  .js .pr-cur, .js .pr-once { opacity: 1; transition: none; }
  .pr-stick { clip-path: none; transition: none; }
  .pr-was { transition: none; color: var(--night-muted); }
  .pr-was::after { transition: none; opacity: 1; }
}