/* pricing.css - /Pricing (public) and the checkout page of the customer panel (bil-* block at the end).
   Public part: restyles the shared plan markup (pf-plan*, pf-payg; from user.css + _PlanCard) inside .pfp-pricing and adds the
   seconds = credits example table, the rules list, the personal-worker strip and the retention notice.
   Pafta material throughout: themed tokens only, no category colours, no hard-coded themed colours. Logical properties only
   (inline-start / inline-end), so the page mirrors correctly in right-to-left languages.
   pf-ui.css is not loaded on public pages, so the few pf-* utilities the plan card uses are scoped here. */

/* == utilities used by _PlanCard / the payg block (pf-ui.css is not loaded) == */
.pfp-pricing .pf-muted{color:var(--mum-color-text-muted)}
.pfp-pricing .pf-small{font-size:.875rem;line-height:1.5}
.pfp-pricing .pf-num{font-variant-numeric:tabular-nums}
.pfp-pricing .pf-btn-block{width:100%;justify-content:center}
.pfp-pricing .pf-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border:1px solid color-mix(in srgb,var(--mum-accent) 45%,transparent);border-radius:999px;background:var(--mum-accent-tint);color:var(--mum-accent-strong);font:600 .75rem/1.2 var(--pf-font-mono)}
.pfp-pricing .pf-badge svg{width:.85rem;height:.85rem}

/* == 01 packages == */
.pfp-pricing__plans .pfp-section-head{margin-bottom:1.75rem}
.pfp-pricing__alert{max-width:40rem;margin:0 auto 1.5rem}

/* Plan grid: one column on phones; from 640px it narrows to the card count (DB-driven). */
.pfp-pricing .pf-plan-grid{counter-reset:pfp-plan;display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem;align-items:stretch}
@media (min-width:640px){.pfp-pricing .pf-plan-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr));gap:2rem 1.5rem;max-width:76rem;margin-inline:auto}
.pfp-pricing .pf-plan-grid:has(> .pf-plan:only-child){max-width:24rem}
.pfp-pricing .pf-plan-grid:has(> .pf-plan:nth-child(2):last-child){max-width:48rem}}

/* Plan card as a hairline drafting sheet with a sheet number. */
.pfp-pricing .pf-plan{counter-increment:pfp-plan;position:relative;display:flex;flex-direction:column;gap:0;padding:1.5rem 1.5rem 1.25rem;background:var(--mum-color-surface);border:1px solid var(--pf-pub-sheet-edge);border-radius:var(--mum-radius-sm);box-shadow:6px 6px 0 -1px var(--pf-pub-paper-2),6px 6px 0 0 var(--pf-pub-sheet-edge)}
.pfp-pricing .pf-plan::before{content:counter(pfp-plan,decimal-leading-zero);content:counter(pfp-plan,decimal-leading-zero) / "";position:absolute;top:1.15rem;inset-inline-end:1.25rem;font:600 .75rem/1 var(--pf-font-mono);letter-spacing:.06em;color:var(--pf-pub-ink)}
.pfp-pricing .pf-plan:hover,.pfp-pricing .pf-plan:focus-within{border-color:var(--pf-pub-ink-soft)}
/* Featured pack: a heavier edge and a small label on the sheet (no "most popular" claim). */
.pfp-pricing .pf-plan--highlight{border-color:var(--pf-pub-ink);box-shadow:6px 6px 0 -1px var(--pf-pub-paper-2),6px 6px 0 0 var(--pf-pub-ink)}
.pfp-pricing .pf-plan__ribbon{align-self:flex-start;margin:-.25rem 0 .75rem;padding:.2rem .55rem;border:1px solid var(--pf-pub-ink);border-radius:var(--mum-radius-sm);font:600 .6875rem/1.2 var(--pf-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--pf-pub-ink)}
.pfp-pricing .pf-plan header{padding-inline-end:2.25rem}
.pfp-pricing .pf-plan__name{font-size:var(--pf-pub-fs-h3);font-weight:700;line-height:1.3}
.pfp-pricing .pf-plan header p{margin-top:.35rem}
.pfp-pricing .pf-plan__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .4rem;margin:1.25rem 0 0;padding-top:1rem;border-top:1px dashed var(--pf-pub-ink-soft)}
.pfp-pricing .pf-plan__amount{font:600 clamp(1.625rem,1.35rem + 1vw,2.125rem)/1.05 var(--pf-font-mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--mum-color-text)}
.pfp-pricing .pf-plan__price .pf-muted{font-size:.9375rem}
.pfp-pricing .pf-plan__price ~ p{margin-top:.35rem}
.pfp-pricing .pf-plan__features{display:grid;gap:.6rem;margin:1.25rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--mum-color-border);list-style:none;font-size:.9375rem;line-height:1.45}
.pfp-pricing .pf-plan__features li{display:grid;grid-template-columns:1.1rem minmax(0,1fr);gap:.65rem;align-items:start}
.pfp-pricing .pf-plan__features svg{width:1.1rem;height:1.1rem;margin-top:.1rem;color:var(--pf-pub-ink)}
.pfp-pricing .pf-plan__action{margin-top:auto;padding-top:1.5rem}

/* Pay as you go: an annex sheet with a dashed edge, under the cards. */
.pfp-pricing .pf-payg{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:1rem;align-items:center;max-width:52rem;margin:clamp(2.25rem,1.5rem + 2vw,3rem) auto 0;padding:1.25rem;background:var(--pf-pub-paper);border:1.5px dashed var(--pf-pub-ink-soft);border-radius:var(--mum-radius-sm)}
.pfp-pricing .pf-payg > :is(svg,i){box-sizing:border-box;width:2.75rem;height:2.75rem;padding:.65rem;border:1px solid var(--pf-pub-sheet-edge);border-radius:var(--mum-radius-sm);background:var(--mum-color-surface);color:var(--pf-pub-ink)}
.pfp-pricing__payg-title{font-size:1.0625rem;font-weight:700;line-height:1.35;color:var(--mum-color-text)}
.pfp-pricing__payg-text .pf-muted{margin-top:.2rem}
.pfp-pricing__payg-btn{grid-column:1 / -1;width:100%;justify-content:center}
@media (min-width:768px){.pfp-pricing .pf-payg{grid-template-columns:2.75rem minmax(0,1fr) auto;padding:1.25rem 1.5rem}
.pfp-pricing__payg-btn{grid-column:auto;width:auto}}

.pfp-pricing__empty{max-width:32rem;margin:0 auto;padding:2rem 1rem;text-align:center;border:1px dashed var(--mum-color-border-strong);border-radius:var(--mum-radius-sm)}

/* Retention notice: the one thing nobody may miss. */
.pfp-pricing__notice{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:1rem;align-items:start;max-width:52rem;margin:clamp(2rem,1.5rem + 1.5vw,2.75rem) auto 0;padding:1rem 1.25rem;border:1px solid var(--pf-pub-ink-soft);border-inline-start:4px solid var(--pf-pub-ink);border-radius:var(--mum-radius-sm);background:var(--mum-color-surface)}
.pfp-pricing__notice > :is(svg,i){width:1.5rem;height:1.5rem;margin:.15rem auto 0;color:var(--pf-pub-ink)}
.pfp-pricing__notice-title{font-weight:700;line-height:1.4;color:var(--mum-color-text)}
.pfp-pricing__notice-text{margin-top:.2rem;font-size:.9375rem;line-height:1.55;color:var(--mum-color-text-muted)}

/* == 02 seconds = credits: worked examples == */
.pfp-examples{width:100%;max-width:52rem;margin:0 0 clamp(2rem,1.25rem + 2vw,3rem);border-collapse:collapse;font-variant-numeric:tabular-nums;background:var(--mum-color-surface);border:1px solid var(--pf-pub-sheet-edge);border-radius:var(--mum-radius-sm)}
.pfp-examples caption{caption-side:bottom;padding-top:.6rem;text-align:start;font-size:.875rem;line-height:1.5;color:var(--mum-color-text-muted)}
.pfp-examples th,.pfp-examples td{padding:.7rem 1rem;border-bottom:1px solid var(--mum-color-border);text-align:start}
.pfp-examples thead th{font:600 .75rem/1.3 var(--pf-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--pf-pub-ink);background:var(--pf-pub-paper)}
.pfp-examples tbody th{font-weight:600}
.pfp-examples td{font-family:var(--pf-font-mono);font-size:.9375rem}
.pfp-examples tbody tr:last-child > *{border-bottom:0}
.pfp-examples__wrap{position:relative;overflow-x:auto}

/* == 03 included in every package == */
.pfp-pricing__included .pfp-section-head{margin-bottom:0}
.pfp-pricing__sheet-label{margin-bottom:1.1rem;padding-bottom:.75rem;border-bottom:1px solid var(--mum-color-border);font:600 .75rem/1.3 var(--pf-font-mono);letter-spacing:.06em;color:var(--pf-pub-ink)}
.pfp-pricing__included .pfp-sheet{container-type:inline-size}
.pfp-pricing__checklist{gap:.9rem;line-height:1.45}
@container (min-width:32rem){.pfp-pricing__checklist{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}}

/* Rules: hairline rows, two columns from 1024px */
.pfp-rules{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--mum-color-border)}
@media (min-width:1024px){.pfp-rules{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.5rem}}
.pfp-rules__item{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:1rem;align-items:start;padding:1.15rem 0;border-bottom:1px solid var(--mum-color-border)}
.pfp-rules__icon{display:grid;place-items:center;width:2.5rem;height:2.5rem;box-sizing:border-box;border:1px solid var(--pf-pub-sheet-edge);border-radius:var(--mum-radius-sm);background:var(--pf-pub-paper);color:var(--pf-pub-ink)}
.pfp-rules__icon svg{width:1.15rem;height:1.15rem}
.pfp-rules__title{font-size:1rem;font-weight:700;line-height:1.35}
.pfp-rules__text{margin-top:.25rem;font-size:.9375rem;line-height:1.55;color:var(--mum-color-text-muted)}
.pfp-rules__final{margin-top:1.75rem;padding:1rem 1.25rem;border-inline-start:3px solid var(--pf-pub-ink);border-radius:var(--mum-radius-sm);background:var(--pf-pub-paper);font-size:1.0625rem;line-height:1.5;color:var(--mum-color-text)}
.pfp-rules__final strong{font-weight:700}

/* == 04 personal worker == */
.pfp-worker{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1rem 1.25rem;align-items:start}
.pfp-worker__icon{display:grid;place-items:center;width:3rem;height:3rem;box-sizing:border-box;border:1px solid var(--pf-pub-sheet-edge);border-radius:var(--mum-radius-sm);background:var(--mum-color-surface);color:var(--pf-pub-ink);box-shadow:4px 4px 0 -1px var(--pf-pub-paper-2),4px 4px 0 0 var(--pf-pub-sheet-edge)}
.pfp-worker__icon svg{width:1.35rem;height:1.35rem}
.pfp-worker .pfp-section-head{margin-bottom:0}
.pfp-worker__text{grid-column:2;max-width:var(--pf-pub-measure);line-height:1.6}
@media (min-width:1024px){.pfp-worker{grid-template-columns:3rem minmax(0,5fr) minmax(0,6fr);column-gap:2rem}
.pfp-worker__text{grid-column:3;padding-top:1.85rem}}

/* == FAQ == */
.pfp-pricing__faq-link{margin-top:1rem}

/* == motion (final state is the static rule above) == */
@media (prefers-reduced-motion:no-preference){
.pfp-pricing .pf-plan{transition:border-color var(--mum-duration) var(--mum-ease)}}

/* ==========================================================================================================
   Checkout page of the customer panel (/User/Billing/Checkout). Panel styles come from user.css / pf-ui.css;
   only the sale-document box, the dialog body and the inline profile form need rules of their own.
   ========================================================================================================== */
.bil-legal-box{max-height:18rem;overflow:auto;padding:var(--mum-space-3) var(--mum-space-4);background:var(--mum-color-surface-2);border:1px solid var(--mum-color-border);border-radius:var(--mum-radius-md);font-size:var(--mum-text-sm);line-height:1.6;overscroll-behavior:contain}
.bil-legal-box:focus-visible{outline:2px solid var(--mum-accent);outline-offset:2px}
.bil-legal-box :is(h1,h2,h3,h4){margin:1rem 0 .4rem;font-size:1rem;font-weight:700;line-height:1.35}
.bil-legal-box :is(h1,h2,h3,h4):first-child{margin-top:0}
.bil-legal-box p,.bil-legal-dialog p{margin:0 0 .6rem}
.bil-legal-box :is(ul,ol),.bil-legal-dialog :is(ul,ol){margin:0 0 .6rem;padding-inline-start:1.25rem}
.bil-legal-box table,.bil-legal-dialog table{width:100%;border-collapse:collapse;margin:0 0 .6rem}
.bil-legal-box :is(th,td),.bil-legal-dialog :is(th,td){padding:.35rem .5rem;border:1px solid var(--mum-color-border);text-align:start;vertical-align:top}
.bil-legal-dialog{overflow:auto;padding:var(--mum-space-4);line-height:1.6}
.bil-legal-dialog :is(h1,h2,h3,h4){margin:1rem 0 .4rem;font-size:1rem;font-weight:700}
.bil-fieldset{margin:0;padding:0;border:0;min-width:0}
.bil-profile-add > summary{list-style:none;width:max-content;cursor:pointer}
.bil-profile-add > summary::-webkit-details-marker{display:none}
.bil-profile-add[open] > summary{margin-bottom:var(--mum-space-3)}
.bil-profile-form{padding:var(--mum-space-4);border:1px dashed var(--mum-color-border-strong);border-radius:var(--mum-radius-md)}
.bil-profile-form [hidden]{display:none}
.bil-accept{gap:var(--mum-space-3)}
.bil-accept .mum-check{align-items:flex-start}
.bil-accept .mum-checkbox{flex:0 0 auto;margin-top:.2rem}