/* Pricing block: the plan cards (and sub-tabs) that the home page, /ai-comments and /streaming embed
   ([data-pricing-product], .pp-wrapper--embed), in every language. The pricing pages load this file too, and then
   page-pricing.css with the rest of their layout. Only rules that match the embedded block are here (checked against
   the rendered pages in every state); everything else stays in page-pricing.css, so neither file repeats the other.
   Origin: the prices repo (iframe-bridge/pricing-page-client.css), with the site fonts and without the font files,
   page reset and footer of the widget. */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

:root {
    --pp-accent: #04bacb;
    /* Teal that carries text, or has white text on it: the site's --accent-ink (5.6:1 on white). #04bacb is 2.4:1. */
    --pp-accent-text: var(--accent-ink);
    --pp-dark: var(--ink);
    --pp-card-bg: var(--surface);
    --pp-border: #e0e0e0;
    --pp-radius-card: var(--radius);
    --pp-muted: var(--muted);
    --mist: #F4F6F7;
}

main{
    background: var(--mist);
}
/* --------------------------------------------------------------------------
   CTA button (Purchase, Start free trial): the site's gradient pill, as the streaming page's free-trial button
   and the purchase buttons in the prices app. Contract: font size >= 19px and weight 800 — white on the light
   end of the gradient (#0a9aab, 3.5:1) passes only as large text; do not make it smaller without changing the gradient.
   -------------------------------------------------------------------------- */

.pp-wrapper .ct-btn,
.pp-wrapper button.ct-btn {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 56px;
    padding: 0 28px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #0a9aab 0%, #14708a 45%, #3b2a60 100%);
    background-size: 160% 160%;
    background-position: 0% 50%;
    color: #ffffff;
    font-family: var(--font-text);
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition:
        background-position 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pp-wrapper .ct-btn:hover,
.pp-wrapper button.ct-btn:hover {
    background-position: 100% 50%;
    filter: saturate(1.06);
}

.pp-wrapper .ct-btn:active,
.pp-wrapper button.ct-btn:active {
    transform: scale(0.985);
    filter: brightness(0.96);
}

.pp-wrapper .ct-btn:focus-visible,
.pp-wrapper button.ct-btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: -5px;
}

.pp-wrapper .ct-btn.disabled,
.pp-wrapper button.ct-btn.disabled,
.pp-wrapper .ct-btn[aria-disabled='true'],
.pp-wrapper button.ct-btn[aria-disabled='true'] {
    color: #4a4458;
    cursor: not-allowed;
    background: #f0f0f0;
    box-shadow: none;
    transform: none;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .pp-wrapper .ct-btn,
    .pp-wrapper button.ct-btn {
        transition: none;
    }
    .pp-wrapper .ct-btn:hover,
    .pp-wrapper button.ct-btn:hover {
        background-position: 0% 50%;
        filter: none;
    }
    .pp-wrapper .ct-btn:active,
    .pp-wrapper button.ct-btn:active {
        transform: none;
    }
}

/* Widget base rules. The card design further down (:is(.pp-pricing-page, .pp-wrapper--embed) …) replaces most of
   the widget's original rules; only the declarations still in effect are kept here. */

.pp-wrapper {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* The same cards embedded in a product page section (product-pricing.js): the section already has the gutter. */
.pp-wrapper--embed {
    max-width: none;
    padding: 0;
    margin-top: 24px;
    text-align: left;
}
.pp-embed-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
    margin: 32px 0 0;
    text-align: center;
}

.pp-grid {
    overflow: visible;
}

.pp-card {
    width: 100%;
    min-width: 0;
}

.pp-badge-wrap {
    top: -11px;
    left: 50%;
    display: flex;
    justify-content: center;
    z-index: 1;
}

.pp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    white-space: nowrap;
    text-align: center;
}

.pp-price-area {
    min-height: 42px;
    flex-wrap: wrap;
}

.pp-price-old {
    line-height: 1;
}

.pp-quantity {
    color: var(--pp-dark);
    line-height: 1.4;
}

.pp-features {
    flex: 1; /* pushes button to bottom */
}

.pp-feature {
    position: relative;
}

.pp-stat {
    line-height: 1.3;
}

.pp-stat-value {
    font-family: var(--font-text);
}

.pp-qty-line {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.pp-subtab-bar {
    overflow: hidden;
}

.pp-subtab-btn {
    white-space: nowrap;
}

/* Phones: the two sub-tabs share the width and may wrap, so the bar never widens the page. */
@media (max-width: 639px) {
    .pp-subtab-bar {
        max-width: 100%;
    }
    .pp-subtab-btn {
        flex: 1 1 0;
        min-width: 0;
        white-space: normal;
    }
}

.pp-btn {
    text-align: center;
}

.pp-wrapper .pp-trial-btn {
    max-width: 400px;
    width: 100%;
    display: flex;
    margin: 0 auto;
    padding: 0 40px;
}

/* Price placeholder. The static USD prices stay hidden until the prices app has written the visitor's prices
   (page-pricing.js removes .pp-prices-pending). If neither happens within 8 s (no JavaScript, blocked app),
   the animation shows the USD prices anyway. */
.pp-prices-pending .pp-price-area {
    position: relative;
    visibility: hidden;
    animation: pp-reveal 0s linear 8s forwards;
}

.pp-prices-pending .pp-price-area::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4em;
    height: 1em;
    max-width: 100%;
    border-radius: 8px;
    visibility: visible;
    background: linear-gradient(90deg, #eef6f7 25%, #dcecee 50%, #eef6f7 75%);
    background-size: 200% 100%;
    animation:
        pp-shimmer 1.2s ease-in-out infinite,
        pp-placeholder-out 0s linear 8s forwards;
}

@media (prefers-reduced-motion: reduce) {
    .pp-prices-pending .pp-price-area::before {
        animation: pp-placeholder-out 0s linear 8s forwards;
    }
}

/* ==========================================================================
   Card design of the /pricing redesign (ported value-for-value from the approved reference design), shared by
   the pricing page and the product-page embeds: scoped to :is(.pp-pricing-page, .pp-wrapper--embed), which is
   always more specific than the widget's unscoped rules above. The page-only parts (tabs, ticket, finder,
   comparison, includes, FAQ) are in page-pricing.css, scoped to .pp-pricing-page. There is no
   "* { margin:0; padding:0 }" reset, so every rule that needs a zero margin/padding states it, and every native
   <button> gets an explicit border/appearance reset.
   -------------------------------------------------------------------------- */

:is(.pp-pricing-page, .pp-wrapper--embed) {
    --pph-ink: #0a0a0a;
    --pph-ink-2: #262a2e;
    --pph-soft: #4a4f55;
    --pph-line: #e3e6ea;
    --pph-line-2: #d3d8de;
    --pph-mist: #f4f6f7;
    --pph-mist-2: #eceff1;
    --pph-teal-t: #04545d;
    --pph-teal-d: #45d8e4;
    --pph-tint: #e4f4f5;
    --pph-night: #0c1220;
    --pph-night-g: linear-gradient(100deg, #14263b 0%, #23203a 48%, #3a1430 100%);
    --pph-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --pph-f-m: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --pph-f-d: var(--font-head);
    --pph-f-b: var(--font-text);
    --c-tr: #04bacb;
    --c-st: #ff5a5f;
    --c-cm: #8b7bff;
    --c-sp: #f5a524;
    --c-ai: #7bd88f;
}

/* ---------- buttons ----------
   .ct-btn is already styled site-wide by ".pp-wrapper .ct-btn" above (same
   gradient pill); .btn-ink has no rule anywhere on the site, so it is added
   here. Every button gets an explicit native-button reset: this site has no
   blanket "button{border:0;...}" rule, and the prices-app widget injects its
   own Tailwind-style "button,[type=button]{-webkit-appearance:button}" reset
   at runtime (body-end.html) — every selector below already carries 2+
   classes via :is(.pp-pricing-page, .pp-wrapper--embed), which is enough specificity to beat that
   regardless of load order, so no !important is needed. */
/* .btn-ink alone, not ".pp-btn.btn-ink": the reference uses this as a plain
   standalone secondary-button class — cards combine it with "pp-btn" (for the
   flex push-to-bottom/full-width behaviour) but the AI Tips ticket's "See
   Translator plans" button uses "btn-ink" on its own, so requiring "pp-btn"
   left it with no background/color/shape at all. */
:is(.pp-pricing-page, .pp-wrapper--embed) .btn-ink {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    margin: 0;
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background: #0d1a20;
    color: #fff;
    font-family: var(--pph-f-b);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.01em;
    transition:
        background 0.2s,
        transform 0.2s var(--pph-ease);
}

:is(.pp-pricing-page, .pp-wrapper--embed) .btn-ink:hover {
    background: #1e3540;
}

:is(.pp-pricing-page, .pp-wrapper--embed) .btn-ink:active {
    transform: scale(0.985);
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card .pp-btn {
    margin-top: auto;
    width: 100%;
}

/* ---------- sub-tabs ---------- */
:is(.pp-pricing-page, .pp-wrapper--embed) .sub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0 0 26px;
}

:is(.pp-pricing-page, .pp-wrapper--embed) .sub-row h3 {
    margin: 0;
    font-family: var(--pph-f-d);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--pph-ink);
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-subtab-bar {
    display: inline-flex;
    gap: 4px;
    margin: 0;
    padding: 5px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--pph-line);
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-subtab-btn {
    margin: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background: none;
    font-family: var(--pph-f-b);
    font-weight: 700;
    font-size: 15.5px;
    color: var(--pph-ink-2);
    transition:
        background 0.25s,
        color 0.25s;
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-subtab-btn--active {
    background: var(--pph-tint);
    color: var(--pph-teal-t);
}
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-subtab-panel {
    display: none;
}
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-subtab-panel--active {
    display: block;
    animation: pph-fadeup 0.5s var(--pph-ease);
}

/* ---------- cards ---------- */
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-grid.g3 {
    grid-template-columns: repeat(3, 1fr);
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card {
    --mx: 50%;
    --my: 0%;
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
    background: #fff;
    border: 1px solid var(--pph-line);
    border-radius: 24px;
    padding: 26px 24px 24px;
    transition:
        transform 0.5s var(--pph-ease),
        box-shadow 0.4s,
        border-color 0.3s;
    isolation: isolate;
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
    background: radial-gradient(
        420px circle at var(--mx) var(--my),
        rgba(4, 186, 203, 0.12),
        transparent 45%
    );
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -34px rgba(20, 38, 59, 0.45);
    border-color: var(--pph-line-2);
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card:hover::before {
    opacity: 1;
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card--highlighted {
    border: 0;
    background:
        linear-gradient(#fff, #fff) padding-box,
        conic-gradient(from var(--pph-a, 0deg), #04bacb, #3b2a60, #8b7bff, #04bacb) border-box;
    border: 2px solid transparent;
    box-shadow: 0 34px 70px -38px rgba(10, 117, 132, 0.6);
    animation: pph-spinb 8s linear infinite;
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-badge {
    position: absolute;
    margin: 0;
    text-transform: uppercase;
    background: #0d1a20;
    color: #fff;
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-plan-name {
    margin: 0;
    padding: 0;
    border-bottom: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    /* fixes the price row across a 4-up row regardless of how many lines a plan
     name wraps to (e.g. "Rising Star Advanced" vs "Beginner") — same fix as
     .pph-plan-name in page-home.css for the homepage Translator embed */
    min-height: 2.3em;
    font-family: var(--pph-f-d);
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--pph-ink);
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-plan-for {
    margin: 4px 0 0;
    font-size: 15px;
    color: var(--pph-soft);
    min-height: 3.2em;
}

/* old+current stack on two lines (old below current via order:2) instead of
   side by side: some pairs (e.g. $119.99 struck through above $102.99) don't
   fit on one line in a 4-up card. No font-variant-numeric: tabular-nums — it
   forces the comma/period to a full digit's width, reading as a stray gap
   inside the number ("56 . 99"). Both lessons learned on the homepage port. */
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-price-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 18px 0 0;
    font-family: var(--pph-f-d);
    font-size: 52px;
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1;
    white-space: nowrap;
    color: var(--pph-ink);
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-price-old {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--pph-soft);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    order: 2;
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-price-period {
    margin: 8px 0 0;
    font-size: 14.5px;
    color: var(--pph-soft);
}

/* the old unscoped .pp-price-current (36px, teal) has no ancestor class, so it only loses to a
   rule that targets the same element directly, not to .pp-price-area's inherited 52px */
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-price-current {
    font-family: var(--pph-f-d);
    font-weight: 600;
    font-size: 52px;
    color: var(--pph-ink);
    line-height: 1;
}

/* visually-hidden utility (standard clip technique) — the "Regular price " label read by
   screen readers before the struck-through old price; not defined anywhere else on the site */
:is(.pp-pricing-page, .pp-wrapper--embed) .vh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--pph-line);
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--pph-line);
    font-size: 14.5px;
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-stat-label {
    margin: 0;
    font-size: 14.5px;
    font-style: normal;
    color: var(--pph-soft);
}
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-stat-value {
    margin: 0;
    font-weight: 800;
    font-size: 15.5px;
    color: var(--pph-ink);
    min-width: auto;
    overflow: visible;
    text-overflow: clip;
}
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-quantity {
    margin: 16px 0 0;
    padding: 0;
    font-size: inherit;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-quantity .pp-stat-label {
    font-size: 13.5px;
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-qty-value {
    display: block;
    margin: 2px 0 0;
    font-family: var(--pph-f-b);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--pph-ink);
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--pph-teal-t);
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-save--base {
    color: var(--pph-soft);
    font-weight: 600;
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 16px 0 0;
    padding: 0;
    font-size: 15px;
    color: var(--pph-ink-2);
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-feature {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-size: inherit;
    color: inherit;
}
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-feature svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--pph-teal-t);
}
:is(.pp-pricing-page, .pp-wrapper--embed) .spacer {
    flex: 1;
    min-height: 20px;
    margin: 0;
    padding: 0;
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card--trial {
    background: var(--pph-night-g);
    color: #fff;
    border: 0;
}
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card--trial .pp-plan-for,
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card--trial .pp-price-period,
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card--trial .pp-stat-label {
    color: rgba(255, 255, 255, 0.84);
}
/* .pp-stat-value has its own explicit dark color (var(--pph-ink)), so it does
   not inherit the card's white text color — without this override it renders
   near-black on the dark gradient background and is effectively invisible */
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card--trial .pp-stat-value {
    color: #fff;
}
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card--trial .pp-price-area,
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card--trial .pp-plan-name {
    color: #fff;
}
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card--trial .pp-stats,
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card--trial .pp-stat {
    border-color: rgba(255, 255, 255, 0.14);
}
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card--trial .pp-feature {
    color: rgba(255, 255, 255, 0.92);
}
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card--trial .pp-feature svg {
    color: var(--pph-teal-d);
}
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-card--trial::before {
    background: radial-gradient(
        420px circle at var(--mx) var(--my),
        rgba(69, 216, 228, 0.16),
        transparent 45%
    );
}

@media (max-width: 1180px) {
    :is(.pp-pricing-page, .pp-wrapper--embed) .pp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    :is(.pp-pricing-page, .pp-wrapper--embed) .pp-grid.g3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 860px) {
    :is(.pp-pricing-page, .pp-wrapper--embed) .pp-grid.g3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    :is(.pp-pricing-page, .pp-wrapper--embed) .pp-grid,
    :is(.pp-pricing-page, .pp-wrapper--embed) .pp-grid.g3 {
        grid-template-columns: 1fr;
    }
    :is(.pp-pricing-page, .pp-wrapper--embed) .pp-plan-for {
        min-height: 0;
    }
    :is(.pp-pricing-page, .pp-wrapper--embed) .pp-plan-name {
        min-height: 0;
    }
}

/* "Best seller" and "Fits your numbers" (pricing page and product-page embeds): one badge design, left and right on the card's top edge. */
:is(.pp-pricing-page, .pp-wrapper--embed) .pp-badge-wrap {
    position: static;
    transform: none;
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-badge {
    top: -13px;
    padding: 6px 10px;
    font-family: var(--pph-f-m);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    border-radius: 7px;
}

:is(.pp-pricing-page, .pp-wrapper--embed) .pp-badge { left: 20px; }
/* global.css sets overflow-wrap: anywhere on body, which lets grid and flex columns shrink to a few
   letters and split words ("Переводчи / к.", "бесплат / но"). Here a word breaks only if it can't fit at all. */
:is(.pp-pricing-page, .pp-wrapper--embed) { overflow-wrap: break-word; }

@keyframes pp-reveal {
    to {
        visibility: visible;
    }
}

@keyframes pp-placeholder-out {
    to {
        opacity: 0;
    }
}

@keyframes pp-shimmer {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -100% 0;
    }
}

@keyframes pph-fadeup {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@property --pph-a {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes pph-spinb {
    to {
        --pph-a: 360deg;
    }
}