/* Pricing page (pricing.html), after huly.io/pricing: large prose in a narrow column, left aligned,
   that lights up word by word as the page scrolls (js/pricing.js), with small glowing icons in its
   sentences. The plan's card sits centered between the prose, glowing. */

/* The page's title, for screen readers only: the prose starts right away, as on Huly's page */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pr-col {
  width: min(100% - 4rem, 56rem);
  margin-inline: auto;
}

.pr-top { padding-top: 8rem; }
.pr-bottom { padding-block: 5rem 10rem; }

/* The prose: big, bold-ish and roomy, one empty line between paragraphs. Justified, with each
   paragraph's last line centered */
.pr-prose {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: -0.01em;
  text-align: justify;
  text-align-last: center;
  color: var(--text);
}

.pr-prose + .pr-prose { margin-top: 1.75em; }

/* Once js/pricing.js has fixed the lines, each is a block: justified edge to edge, but for the
   paragraph's last, centered as before */
.pr-line {
  display: block;
  text-align-last: justify;
}

.pr-line:last-child { text-align-last: center; }

/* While js/pricing.js measures the lines, nothing moves */
.pr-measuring .pr-prose *,
.pr-measuring .pr-prose * > * { transition: none !important; }

/* While the page scrolls (js/pricing.js), each word is faint until its turn comes, as on Huly's page.
   An icon is hidden until then, and folded away the way Huly folds its own: it keeps its size, but a
   negative right margin pulls the words after it back over it. The script takes away the space
   before each icon, which brings it back as its left margin (one space, 0.264em in Inter, plus its
   0.1em), so folded it takes no room at all. When its turn comes the margin slides back and the
   words after it move aside (the movement is in css/motion.css).
   Without JS, or with reduced motion, nothing gets .pr-w, so the words stay lit and the icons shown */
.pr-w:not(.is-lit) { opacity: 0.25; }

.pr-chip.pr-w { margin-left: 0.364em; }

.pr-chip.pr-w:not(.is-lit) {
  margin-right: calc(-1 * (1.45em + 0.364em));
  opacity: 0;
}

.pr-chip.pr-w:not(.is-lit) > * { scale: 0; }

/* An icon in a sentence: a small dark tile with a colored glow, like the app's dark look.
   --hue sets the icon's color and its glow */
.pr-chip {
  --hue: #a78bfa;
  display: inline-grid;
  place-items: center;
  width: 1.45em;
  height: 1.45em;
  margin-inline: 0.1em;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 0.32em;
  background: linear-gradient(160deg, #22202e, #0d0c14);
  box-shadow: 0 0 1.25rem -0.125rem color-mix(in srgb, var(--hue) 70%, transparent);
  color: var(--hue);
  vertical-align: middle;
  translate: 0 -0.08em;
}

.pr-chip svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pr-chip img { width: 72%; height: 72%; }

.pr-chip-storage { --hue: #60a5fa; }
.pr-chip-calls { --hue: #a78bfa; }
.pr-chip-ai { --hue: #e879f9; }
.pr-chip-doc { --hue: #fb923c; }
.pr-chip-image { --hue: #f87171; }
.pr-chip-video { --hue: #818cf8; }
.pr-chip-hangup { --hue: #ef4444; }

/* The plan: one card centered under the prose, like Huly's first plan, with a glowing violet ring
   a little outside it and a violet haze inside it */
.pr-card {
  position: relative;
  width: min(100%, 26rem);
  margin: 5.5rem auto 0;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background:
    radial-gradient(120% 60% at 50% 100%, rgb(124 58 237 / 0.22), transparent 70%),
    linear-gradient(180deg, var(--surface), var(--bg));
  text-align: center;
}

.pr-card::before {
  content: '';
  position: absolute;
  inset: -0.625rem;
  border: 2px solid #c4b5fd;
  border-radius: 1.75rem;
  box-shadow:
    0 0 1.5rem rgb(139 92 246 / 0.75),
    inset 0 0 1rem rgb(139 92 246 / 0.55);
  pointer-events: none;
}

.pr-card-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
}

.pr-card-price {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.25rem;
  margin-top: 1.25rem;
}

.pr-card-amount {
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
}

.pr-card-unit { font-size: 1.125rem; }

.pr-card-for {
  margin-top: 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  line-height: 1.45;
  color: var(--text);
}

/* The list: a block centered in the card, its lines left aligned so the checkmarks stay in a column */
.pr-card-list {
  display: grid;
  width: fit-content;
  margin-inline: auto;
  text-align: left;
  gap: 0.625rem;
  margin-block: 1.5rem 2.25rem;
  color: var(--text);
}

.pr-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.pr-card-list svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The ⓘ after a line: its explanation shows on hover */
.pr-info {
  display: inline-grid;
  flex: none;
  align-self: center;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--bg-alt);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: help;
}

/* The button: round, full width and solid, in the page's ink */
.pr-card-btn {
  display: grid;
  place-items: center;
  padding: 1rem;
  border-radius: 999px;
  background: var(--text);
  font-weight: 600;
  color: var(--bg);
  transition: opacity var(--dur-fast) var(--ease);
}

.pr-card-btn:hover { opacity: 0.9; }

/* "Contact us": a big button centered under the prose, like the home page's Download */
.pr-contact {
  margin-top: 4rem;
  text-align: center;
}

/* Tablets: the prose a step smaller */
@media (max-width: 1023px) {
  .pr-prose { font-size: 1.875rem; }
  .pr-top { padding-top: 5rem; }
}

/* Phones: smaller prose, centered rather than justified (a few words a line leave wide gaps when
   justified), and the card closer to it */
@media (max-width: 760px) {
  .pr-col { width: min(100% - 2.5rem, 56rem); }
  .pr-prose { font-size: 1.375rem; text-align: center; }
  .pr-line { text-align-last: center; }
  .pr-top { padding-top: 3rem; }
  .pr-bottom { padding-block: 3rem 6rem; }

  .pr-card { margin-top: 3.5rem; padding: 1.5rem; }
  .pr-contact { margin-top: 2.5rem; }
}