/* ===========================================================================
   Yumee hub — /pricing (2026-09-30, the owner's mockup): the term switch, one
   line of threads rising through every plan, a fan of threads from the chosen
   plan down into its one card, and the comparison under it. pricing.js draws
   the threads and runs the motion; without it the page is the same line, the
   card of the plan in the address and a comparison that opens as a <details>.
   Every value is a token from site.css; phone first (minmax(0, 1fr) grids).
   =========================================================================== */

.pp-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- title --- */
.pp-band { padding-bottom: calc(var(--wave-h) * .8); }
.pp-title {
    margin: 0 auto;
    max-width: 18ch;
    text-align: center;
    font-family: var(--yu-font-display, inherit);
    font-weight: 600;
    font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4rem);
    line-height: 1.04;
    letter-spacing: -.04em;
    color: var(--ink);
    text-wrap: balance;
}
.pp-title__accent { color: var(--art-violet); }

.pp { padding-top: 0; }
.page-band + .pp { padding-top: 0; }

/* ------------------------------------------------------- term switch --- */
.pp-terms-wrap { position: relative; z-index: 2; display: flex; justify-content: center; }
.pp-terms {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    padding: 5px;
    border: 1px solid var(--line-card);
    border-radius: var(--r-pill);
    background: var(--card);
    box-shadow: var(--shadow-card);
}
.pp-terms__thumb {
    position: absolute;
    top: 5px; bottom: 5px; left: 5px;
    width: 0;
    border-radius: var(--r-pill);
    background: var(--purple-deep);
    box-shadow: var(--shadow-purple);
    opacity: 0;
    transition: left 460ms var(--yu-ease), width 460ms var(--yu-ease), opacity 200ms linear;
}
.pp.is-live .pp-terms__thumb { opacity: 1; }
.pp-terms__opt {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 14px;
    min-width: 0;
    padding: 12px clamp(18px, 3vw, 30px);
    border-radius: var(--r-pill);
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color 260ms var(--yu-ease), background-color 200ms linear;
}
.pp-terms__opt:hover { color: var(--purple-ink); }
.pp-terms__opt[aria-pressed='true'] { color: var(--yu-on-primary); background: var(--purple-deep); }
.pp.is-live .pp-terms__opt[aria-pressed='true'] { background: transparent; }
.pp-terms__opt:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.pp-terms__save { color: var(--purple); font-size: .8125rem; font-weight: 500; transition: color 260ms var(--yu-ease); }
.pp-terms__opt[aria-pressed='true'] .pp-terms__save { color: var(--lav-50); }
.pp-terms__sep { align-self: center; width: 1px; height: 22px; background: var(--line-card); transition: opacity 200ms linear; }
.pp-terms__opt[aria-pressed='true'] + .pp-terms__sep,
.pp-terms__sep:has(+ .pp-terms__opt[aria-pressed='true']) { opacity: 0; }

/* --------------------------------------------------------- the stage --- */
.pp-stage { position: relative; isolation: isolate; }
.pp-threads {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.pp-stage > .yu-wrap { position: relative; z-index: 1; }

/* ------------------------------------------------ the line of plans --- */
/* Each plan is a point on a rising curve: --f across (0 Free .. 1 the top
   plan), --rise up. The dot's box never changes size, so its centre (where
   the threads meet) stays put while the dot inside grows. */
.pp-line {
    --pp-dot: 48px;
    --pp-base: 168px;
    --pp-lift: 110px;
    --pp-left: 9%;
    --pp-span: 78%;
    position: relative;
    height: calc(var(--pp-base) + 108px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.pp-node {
    position: absolute;
    left: calc(var(--pp-left) + var(--f) * var(--pp-span));
    top: calc(var(--pp-base) - var(--rise) * var(--pp-lift));
    width: 0;
    height: 0;
}
.pp-node__hit {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    transform: translate(-50%, calc(var(--pp-dot) / -2));
    color: inherit;
    text-decoration: none;
    border-radius: var(--r-md);
    -webkit-tap-highlight-color: transparent;
}
.pp-node__hit:focus-visible { outline: none; }
.pp-node__hit:focus-visible .pp-node__dot::after { opacity: 1; }

.pp-node__dot {
    position: relative;
    width: var(--pp-dot);
    height: var(--pp-dot);
    flex: none;
}
/* The dot, and a ring that shows on the chosen plan (and on focus). */
.pp-node__dot::before,
.pp-node__dot::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    /* Centred by translate, never by inset + auto margins: the ring is wider
       than the dot's box, and auto margins then pin it to the top left. */
    translate: -50% -50%;
    border-radius: 50%;
}
.pp-node__dot::before {
    width: 22px;
    height: 22px;
    background: var(--art-lilac);
    border: 3px solid var(--card);
    box-shadow: 0 2px 10px -2px var(--lav-300);
    transition: width 420ms var(--yu-ease), height 420ms var(--yu-ease), background-color 300ms linear,
                border-width 420ms var(--yu-ease), box-shadow 420ms var(--yu-ease), scale 520ms var(--yu-ease);
}
.pp-node__dot::after {
    width: calc(var(--pp-dot) + 8px);
    height: calc(var(--pp-dot) + 8px);
    border: 1px solid var(--lav-300);
    opacity: 0;
    scale: .7;
    transition: opacity 300ms linear, scale 520ms var(--yu-ease);
}
.pp-node__hit:hover .pp-node__dot::before { scale: 1.18; background: var(--lav-300); }
.pp-node.is-on .pp-node__dot::before {
    width: 42px;
    height: 42px;
    background: var(--purple-deep);
    border-width: 4px;
    box-shadow: 0 0 0 5px var(--lav-50), 0 10px 26px -8px var(--purple-deep);
    scale: 1;
}
.pp-node.is-on .pp-node__dot::after { opacity: .9; scale: 1; }

.pp-node__label {
    display: grid;
    justify-items: center;
    gap: 2px;
    margin-top: 2px;
    padding: 2px 10px 4px;
    border-radius: var(--r-sm);
    /* Paper behind the words, so the fan passes under them. */
    background: var(--bg);
    box-shadow: 0 0 10px 6px var(--bg);
    transition: transform 420ms var(--yu-ease);
}
.pp-node.is-on .pp-node__label { transform: translateY(14px); }
.pp-node__name {
    font-weight: 600;
    font-size: 1.1875rem;
    letter-spacing: -.02em;
    color: var(--ink);
    white-space: nowrap;
}
.pp-node__price {
    font-weight: 600;
    font-size: 1.1875rem;
    letter-spacing: -.02em;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: color 300ms linear;
}
.pp-node.is-on .pp-node__price,
.pp-node__hit:hover .pp-node__price { color: var(--ink-soft); }

.pp-node__flag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translate(-50%, -100%);
    padding: 5px 13px;
    border-radius: var(--r-pill);
    background: var(--purple-deep);
    color: var(--yu-on-primary);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--shadow-purple);
}
.pp-node__flag::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: var(--purple-deep);
}

/* The entrance (only once the script runs, so without it all is there). */
.pp.is-live .pp-node:not(.is-in) .pp-node__dot::before { scale: 0; }
.pp.is-live .pp-node:not(.is-in) .pp-node__label,
.pp.is-live .pp-node:not(.is-in) .pp-node__flag { opacity: 0; translate: 0 8px; }
.pp-node__label, .pp-node__flag { transition: transform 420ms var(--yu-ease), opacity 420ms linear, translate 520ms var(--yu-ease); }
.pp.is-live .pp-node.is-in .pp-node__flag { animation: pp-flag 2.8s var(--yu-ease) 600ms both; }
@keyframes pp-flag {
    0%   { translate: 0 8px; opacity: 0; }
    14%  { translate: 0 -3px; opacity: 1; }
    22%, 100% { translate: 0 0; opacity: 1; }
}

/* ------------------------------------------------------------- card --- */
.pp-card {
    position: relative;
    padding: clamp(22px, 3vw, 34px);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.pp-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.22fr);
    align-items: start;
}
.pp-panel[hidden] { display: none; }
.pp-panel > * { min-width: 0; }
.pp-panel > * + * {
    align-self: stretch;
    padding-left: clamp(22px, 3vw, 36px);
    margin-left: clamp(22px, 3vw, 36px);
    border-left: 1px solid var(--line-card);
}

.pp-panel__buy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.pp-panel__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.pp-chip {
    display: inline-flex;
    padding: 5px 16px;
    border-radius: var(--r-pill);
    background: var(--tint);
    color: var(--purple-ink);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
}

.pp-price-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pp-price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.pp-price__amount {
    font-family: var(--yu-font-display, inherit);
    font-weight: 600;
    font-size: clamp(2.9rem, 2rem + 2.6vw, 4.1rem);
    line-height: 1;
    letter-spacing: -.045em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.pp-price__per { color: var(--ink-faint); font-size: 1rem; }
.pp-rate { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-faint); font-size: .9375rem; }
.pp-rate__dot { color: var(--ink-faint); }
.pp-pill {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--lav-50);
    border: 1px solid var(--line-card);
    color: var(--purple-ink);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
}
.pp-pill--quiet { color: var(--ink-soft); }
.pp-pill--sale { background: var(--purple-deep); border-color: var(--purple-deep); color: var(--yu-on-primary); }
.pp-small { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--ink-soft); }
.pp-small__free { color: var(--ink); font-weight: 600; }
/* The offer that applies: a band across the top of the card, centred, the
   bonus as its big figure. A sheen crosses it once when it comes in. */
.pp-panel > .pp-offer {
    grid-column: 1 / -1;
    grid-row: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
    margin: 0 0 clamp(20px, 2.6vw, 28px);
    padding: 14px clamp(16px, 3vw, 28px);
    border: 0;
    border-radius: var(--r-md);
    background: linear-gradient(100deg, var(--purple-deep), var(--art-violet) 55%, var(--purple-deep));
    box-shadow: var(--shadow-purple);
    color: var(--yu-on-primary);
    text-align: center;
}
.pp-panel > .pp-offer[hidden] { display: none; }
.pp-offer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, var(--lav-50) 50%, transparent 62%);
    opacity: .28;
    translate: -110% 0;
    pointer-events: none;
}
.pp.is-live .pp-offer::after { animation: pp-sheen 1.5s var(--yu-ease) 1.1s both; }
.pp.is-live .pp-offer:hover::after { animation: pp-sheen-again 1.2s var(--yu-ease) both; }
@keyframes pp-sheen { from { translate: -110% 0; } to { translate: 110% 0; } }
@keyframes pp-sheen-again { from { translate: -110% 0; } to { translate: 110% 0; } }
.pp-offer__amount {
    font-family: var(--yu-font-display, inherit);
    font-weight: 600;
    font-size: clamp(2rem, 1.5rem + 1.6vw, 2.7rem);
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
.pp-offer__text { display: grid; gap: 2px; text-align: left; min-width: 0; }
.pp-offer__what { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.pp-offer__when { font-size: .875rem; line-height: 1.35; color: var(--lav-50); }

.pp-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 8px; }
.pp-buy { display: grid; grid-template-columns: minmax(0, 1fr); }
.pp-btn { width: 100%; justify-content: center; min-height: 52px; font-size: 1.0625rem; }
.pp-btn.is-ready { animation: pp-ready 1.6s var(--yu-ease) 2; }
@keyframes pp-ready {
    0%, 100% { box-shadow: 0 0 0 0 var(--lav-300); }
    40%      { box-shadow: 0 0 0 7px var(--lav-50); }
}

/* Only the chosen term's price and button show. */
.pp[data-terms='month'] [data-term]:not([data-term='month']),
.pp[data-terms='quarter'] [data-term]:not([data-term='quarter']),
.pp[data-terms='year'] [data-term]:not([data-term='year']) { display: none; }
/* Only on a change of term (pricing.js sets is-swapping for a moment), not
   when another plan's card comes in: that is value by value. */
.pp.is-swapping .pp-price-block[data-term], .pp.is-swapping .pp-node__price, .pp.is-swapping .pp-usage__label { animation: pp-swap 380ms var(--yu-ease) both; }
@keyframes pp-swap { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.pp-features {
    list-style: none;
    margin: 0;
    padding-block: 6px;
    display: grid;
    gap: 22px;
    align-content: start;
}
.pp-features li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    font-size: 1.0625rem;
    line-height: 1.35;
    color: var(--ink);
}
.pp-features__tick {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tint);
    color: var(--purple-deep);
}
.pp-features__tick svg { width: 16px; height: 16px; stroke-width: 2.4; }

.pp-usage { padding-top: 4px; }
.pp-usage__term { display: grid; gap: 18px; align-content: start; }
.pp-usage__label {
    margin: 0;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--purple);
}
.pp-usage__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.pp-usage__list li {
    display: grid;
    grid-template-columns: minmax(3.2ch, max-content) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}
.pp-usage__count {
    font-family: var(--yu-font-display, inherit);
    font-weight: 600;
    font-size: clamp(2.3rem, 1.8rem + 1.5vw, 3.1rem);
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.pp-usage__what { font-size: .875rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.pp-usage__app { color: var(--purple); white-space: nowrap; }

/* Another plan: the card stays, only the values that differ move. The old
   panel sits over the new one for a moment (pricing.js), its changed values
   leaving while the new ones arrive. */
.pp-card { display: grid; }
.pp-card > .pp-panel { grid-area: 1 / 1; }
.pp-panel.is-leaving { pointer-events: none; z-index: 1; }
.pp-panel.is-leaving > * { border-color: transparent; }

.pp-msg { text-align: center; margin: 14px 0 0; }

/* ---------------------------------------------------------- consent --- */
/* Hidden until a buy button is pressed; then it opens under that button. */
.pp-consent { display: grid; gap: 10px; margin-top: 4px; }
.pp-consent[hidden] { display: none; }
.pp-consent .shop-consent { max-width: none; margin: 0; padding: 12px 14px; align-items: start; font-size: .8125rem; }
.pp-consent .shop-consent input { margin-top: 1px; }
.pp-consent__note { margin: 0; font-size: .75rem; line-height: 1.5; color: var(--ink-faint); }
.pp-consent.is-opening { animation: pp-open 460ms var(--yu-ease) both; }
.pp-consent.is-nudge .shop-consent { animation: pp-nudge 420ms var(--yu-ease); border-color: var(--purple); }
@keyframes pp-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes pp-nudge {
    0%, 100% { transform: none; }
    25% { transform: translateX(-4px); }
    60% { transform: translateX(3px); }
}
.pp-consent-slot:empty { display: none; }
.pp-consent-slot--packs { max-width: 720px; margin: 18px auto 0; }

/* ---------------------------------------------------------- compare --- */
.pp-compare { margin: 26px 0 0; }
.pp-compare__toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin: 0 auto;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    color: var(--purple-ink);
    font-size: 1.0625rem;
    cursor: pointer;
    list-style: none;
    transition: background-color 200ms linear;
}
.pp-compare__toggle::-webkit-details-marker { display: none; }
.pp-compare__toggle:hover { background: var(--lav-50); }
.pp-compare__toggle:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.pp-compare__toggle svg { width: 20px; height: 20px; transition: transform 360ms var(--yu-ease); }
.pp-compare__toggle:hover svg { transform: translateX(3px); }
.pp-compare[open] .pp-compare__toggle svg { transform: rotate(90deg); }
.pp-compare__body { overflow: hidden; }
.pp-compare__scroll {
    margin-top: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--line-card);
    border-radius: var(--r-lg);
    background: var(--card);
    box-shadow: var(--shadow-card);
}
.pp-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9375rem; }
.pp-table th, .pp-table td { padding: 14px 16px; border-top: 1px solid var(--line-card); text-align: center; vertical-align: middle; }
.pp-table thead th { border-top: 0; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; color: var(--ink); }
.pp-table tbody th { text-align: left; font-weight: 500; color: var(--ink-soft); }
.pp-table strong { font-weight: 600; color: var(--ink); }
.pp-table small { display: block; color: var(--ink-faint); font-size: .75rem; }
.pp-table [data-pp-col] { transition: background-color 300ms linear; }
.pp-table .is-on { background: var(--lav-50); }
.pp-table__none { color: var(--ink-faint); }
.pp-table__yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: var(--purple-deep); }
.pp-table__yes svg { width: 14px; height: 14px; stroke-width: 2.4; }
.pp-table__list { text-align: left !important; vertical-align: top !important; }
.pp-table__list ul { margin: 0; padding-left: 16px; color: var(--ink-soft); font-size: .8125rem; line-height: 1.5; }

.pp-packs { margin-top: 18px; }
.pp-foot { margin-top: 40px; }

/* ------------------------------------------------------------ narrow --- */
@media (max-width: 1000px) {
    .pp-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pp-panel__buy { grid-row: span 2; }
    .pp-usage { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-card); }
    .pp-panel > .pp-usage { grid-column: 2; }
}

@media (max-width: 700px) {
    .pp-panel { grid-template-columns: minmax(0, 1fr); }
    .pp-panel__buy { grid-row: auto; }
    .pp-panel > * + *,
    .pp-panel > .pp-usage {
        grid-column: auto;
        padding-left: 0;
        margin-left: 0;
        border-left: 0;
        margin-top: 22px;
        padding-top: 22px;
        border-top: 1px solid var(--line-card);
    }
    .pp-panel > .pp-offer { margin: 0 0 20px; padding: 14px 16px; border: 0; }
    .pp-panel > .pp-panel__buy { margin-top: 0; padding-top: 0; border-top: 0; }
    .pp-offer__text { text-align: center; }
    .pp-features { gap: 14px; }
    .pp-features li { font-size: 1rem; }
    .pp-terms__opt { flex-direction: column; align-items: center; gap: 0; padding: 8px 14px; line-height: 1.25; }
    .pp-terms__save { font-size: .75rem; }
    .pp-terms__sep { height: 28px; }
}

@media (max-width: 640px) {
    .pp-line {
        --pp-dot: 38px;
        --pp-base: 132px;
        --pp-lift: 72px;
        --pp-left: 11%;
        --pp-span: 78%;
        height: calc(var(--pp-base) + 70px);
    }
    .pp-node__dot::before { width: 16px; height: 16px; border-width: 2px; }
    .pp-node.is-on .pp-node__dot::before { width: 32px; height: 32px; border-width: 3px; box-shadow: 0 0 0 4px var(--lav-50), 0 8px 20px -8px var(--purple-deep); }
    .pp-node__label { padding: 2px 4px 3px; }
    .pp-node__name, .pp-node__price { font-size: .9375rem; }
    .pp-node.is-on .pp-node__label { transform: translateY(8px); }
    .pp-node__flag { font-size: .6875rem; padding: 4px 9px; top: -8px; }
    .pp-card { padding: 20px; }
    .pp-rate__dot { display: none; }
}