/* 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 text, its column and the card's insides all take Huly's sizes, at each of its screen widths. */

/* Inter, from this site (assets/fonts/OFL.txt): one file for every weight, preloaded by the page */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
}

/* 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;
}

/* The prose's column, as Huly's: 60rem with 2rem of padding each side, so the text is 56rem wide */
.pr-col {
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: 2rem;
}

/* With the menu's 4.5rem, the text starts as far down the page as Huly's */
.pr-top { padding-top: 8.75rem; }
.pr-bottom { padding-block: 7rem 10rem; }

/* The prose, set as Huly's: 36px medium Inter, left aligned, one empty line between paragraphs */
.pr-prose {
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.75;
  text-align: left;
  color: var(--text);
}

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

/* The closing question, centered over its button */
.pr-prose-center { text-align: center; }

/* Once js/pricing.js has fixed the lines, each is a block of its own */
.pr-line { display: block; }

/* While the page loads, the prose stays hidden; js/pricing.js shows it (.pr-ready) once it is laid
   out, and css/motion.css fades it in. Without JS, there is no .js and it shows right away */
.js .pr-prose { opacity: 0; }
.pr-ready .pr-prose { opacity: 1; }

/* 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 that starts a line (js/pricing.js) has no space before it; the space after it becomes
   its right margin instead, so folded it still takes no room and the line starts flush */
.pr-chip.pr-w.pr-chip-first { margin-left: 0; margin-right: 0.364em; }
.pr-chip.pr-w.pr-chip-first:not(.is-lit) { margin-right: -1.45em; }

/* 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;
  /* as Huly's icons do, it takes no height in its line, so it can never make a line taller */
  margin-block: -0.5em;
  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, with a glowing violet ring a little outside it and
   a violet haze inside it. Sized and set as Huly's first plan */
.pr-card {
  position: relative;
  width: min(100%, 24.375rem);
  margin: 7rem auto 0;
  padding: 1.75rem 1.75rem 1.5625rem;
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background:
    radial-gradient(120% 60% at 50% 100%, rgb(124 58 237 / 0.22), transparent 70%),
    linear-gradient(180deg, var(--surface), var(--bg));
}

.pr-card::before {
  content: '';
  position: absolute;
  inset: -0.625rem;
  border: 2px solid #c4b5fd;
  border-radius: 2.125rem;
  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.25rem;
  font-weight: 600;
  line-height: 1.375;
  letter-spacing: normal;
  color: var(--text);
}

.pr-card-price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-top: 0.625rem;
}

.pr-card-amount {
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.375;
  color: var(--text);
}

.pr-card-unit {
  font-size: 1.25rem;
  font-weight: 500;
}

.pr-card-for {
  margin-top: 0.25rem;
  padding-bottom: 1.3125rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.375;
  color: var(--text);
}

.pr-card-list {
  display: grid;
  gap: 1rem;
  margin-block: 1.3125rem 2.5rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  color: color-mix(in srgb, var(--text) 90%, transparent);
}

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

.pr-card-list svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  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;
  height: 3.5rem;
  border-radius: 999px;
  background: var(--text);
  font-size: 1.125rem;
  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;
}

/* The same steps down as Huly's page: its text sizes and its column's widths */
@media (max-width: 1279px) {
  .pr-col { max-width: 53.75rem; }
  .pr-prose { font-size: 2rem; }
  .pr-top { padding-top: 6rem; }
}

@media (max-width: 1023px) {
  .pr-col { max-width: 39.6875rem; }
  .pr-prose { font-size: 1.75rem; }
  .pr-top { padding-top: 4.5625rem; }

  .pr-card { width: min(100%, 22.875rem); }
  .pr-card-amount { font-size: 3rem; }
}

@media (max-width: 767px) {
  .pr-col { max-width: 29.375rem; }
  .pr-prose { font-size: 1.25rem; line-height: 1.65; }
  .pr-prose + .pr-prose { margin-top: 1.65em; }
  .pr-top { padding-top: 2.3125rem; }
  .pr-bottom { padding-bottom: 6rem; }

  .pr-card { padding: 1.125rem; }
  .pr-card-name,
  .pr-card-unit,
  .pr-card-for,
  .pr-card-list,
  .pr-card-btn { font-size: 1rem; }
  .pr-card-amount { font-size: 2.25rem; }
  .pr-card-btn { height: 2.5rem; }
  .pr-contact { margin-top: 2.5rem; }
}

@media (max-width: 639px) {
  .pr-col {
    max-width: 25.625rem;
    padding-inline: 1.25rem;
  }
}

@media (max-width: 413px) {
  .pr-col { max-width: 21.25rem; }
  .pr-card { width: min(100%, 18rem); }
}