/* payments.html, חיובים וסליקה (built 31 Oct 2026, in the homepage's language). Linked after site.css.
   The shared pieces (.ih, .ih-stage, .st-card, .win with the homepage's .pd-nav, .phone2, .feat, .faq3, .closing2) are in site.css,
   and so are the homepage's money story parts this page reuses as they are: the כרטסת (.fl-head, .fl-stats, .fl-tabs, .fl-th / .fl-tr,
   .fl-m), the checkout and the receipt (.fl-checkout, .fl-paid), the "דוח הכנסות" dialog (.fl-dialog) and the app's notice (.pt-note).
   Nothing here sits in a .fl, so site.js never plays the homepage's story on this page: every mockup holds its finished state.
   This file holds only the page's own pieces (prefix py-) and the overrides that show the story's end state. */

#main { --ok: #16A34A; --ok-soft: #E8F7EE; }
.py-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.py-p { max-width: 30em; font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.nw { white-space: nowrap; }
.feat-copy .ticks a.py-tax, .feat-copy .ticks a.py-in { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* a feature's picture sits on a stage: grey with a dot grid on white sections; lighter, with a soft fall, on grey ones (the homepage's) */
.py-panel { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; background: #F2F2F3 radial-gradient(rgba(0, 0, 0, .075) 1px, transparent 1.6px) 0 0 / 22px 22px; }
.tint .py-panel { background: radial-gradient(rgba(0, 0, 0, .07) 1px, transparent 1.6px) 0 0 / 22px 22px, linear-gradient(165deg, #FCFCFD 0%, #E3E3E8 100%); }
:where(.py-panel) p { margin: 0; }
.py-panel .ic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the phone's status bar (WhatsApp page's) */
.py-sys { display: flex; align-items: center; gap: 5px; }
.py-sys svg { width: 17px; height: 11px; fill: currentColor; }
.py-sys svg + svg { width: 25px; }

/* ---------- Hero: the warm studio wall, the product's כרטסת, Daniel's receipt on the phone, the report sent to the accountant ---------- */
.py-stage { height: clamp(560px, 52vw, 660px); }
.py-win { top: 40px; bottom: -40px; inset-inline-start: clamp(24px, 4cqw, 48px); width: calc(100% - 330px); grid-template-columns: 64px minmax(0, 1fr); border-radius: 18px; font-size: 12.5px; }
.py-main { gap: 16px; }
.py-main .ic { width: 15px; height: 15px; }
/* the story's end state: the +₪500 shown, "נשלח לרואה החשבון" beside the export, the new line lit */
.py-main .fl-delta { opacity: 1; transform: none; }
.py-main .fl-sent { display: flex; }
.py-new { background: #F2FBF5; border-top-color: transparent; }
.py-new .fl-sum { color: var(--ok); }
.py-main .fl-tr { flex: none; }

.py-phone { z-index: 3; top: 46px; left: clamp(24px, 4.5cqw, 52px); width: 250px; }
.py-paid { opacity: 1; transform: none; padding-top: 70px; }
.py-paid .fl-receipt { margin-top: 18px; }

.py-cpa { left: clamp(200px, 23cqw, 262px); bottom: 32px; z-index: 4; display: grid; gap: 10px; width: 310px; }
.py-cpa-b { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.py-cpa-b .fl-badge { width: 40px; height: 40px; box-shadow: 0 8px 18px -8px rgba(22, 163, 74, .6); }
.py-cpa-b .fl-badge svg { width: 20px; height: 20px; }
.py-cpa-b p { display: grid; min-width: 0; line-height: 1.35; }
.py-cpa-b b { font-size: 16.5px; font-weight: 700; }
.py-cpa-b small { font-size: 13px; }

@container ihs (max-width: 1060px) { .py-main .fl-search { display: none; } }
/* narrower stages: the window across the stage; the phone lower down on the end side, the report card on the start side, over the lines */
@container ihs (max-width: 979px) {
  .py-win { top: 24px; inset-inline: 24px; width: auto; }
  .py-phone { top: 236px; left: 20px; width: 210px; }
  .py-cpa { left: auto; right: 24px; bottom: 22px; width: 290px; }
  .py-main .fl-pill { display: none; }
  .py-main :is(.fl-th, .fl-tr) { grid-template-columns: minmax(0, 1fr) 112px 66px 92px; }
  .py-main .fl-th span:nth-child(2), .py-main .fl-date { display: none; }
}
/* site.css drops .win's menu under 700px of stage; drop it a little earlier here, where the table needs the room */
@container ihs (max-width: 859px) { .py-win { grid-template-columns: minmax(0, 1fr); } .py-win .pd-nav { display: none; } }
@container ihs (max-width: 759px) {
  .py-main { padding: 18px; }
  .py-main .fl-sent { display: none; }
}
/* phones: the כרטסת on top (the title and export, two totals, the first lines), Daniel's receipt rising from the stage's bottom */
@container ihs (max-width: 599px) {
  .py-win { top: 12px; bottom: auto; height: 318px; inset-inline: 12px; width: auto; border-radius: 16px; }
  .py-main { gap: 12px; padding: 14px; }
  .py-main .fl-title b { font-size: 18px; }
  .py-main .fl-export { padding: 0 10px; }
  .py-main .fl-tabs, .py-main .fl-stats p:last-child { display: none; }
  .py-main .fl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .py-main .fl-stats p { padding: 10px 12px; }
  .py-main .fl-num { flex-wrap: wrap; gap: 2px 6px; }
  .py-main .fl-num b { font-size: 17px; }
  .py-main :is(.fl-th, .fl-tr) { grid-template-columns: minmax(0, 1fr) 54px 84px; gap: 8px; }
  .py-main .fl-th span:nth-child(3), .py-main .fl-meth { display: none; }
  .py-main .fl-tr { height: 46px; }
  .py-phone { top: 296px; left: calc(50% - 112px); width: 224px; }
  .py-cpa { display: none; }
}
@media (max-width: 599px) { .py-stage { height: 620px; } }

/* ---------- Standing orders: the month's charges in the product, and the notice in Daniel's app ---------- */
.py-hok-stage { min-height: 660px; padding: clamp(24px, 3.4vw, 40px) clamp(18px, 3vw, 36px); }
.py-card { position: relative; z-index: 1; width: calc(100% - 60px); max-width: 500px; padding: 18px 18px 8px; border-radius: 18px; background: #fff; color: #0B0B0C;
  font-size: 12.5px; line-height: 1.35; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 40px 80px -40px rgba(0, 0, 0, .3); }
.py-card-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.py-card-h small { display: block; font-size: 11.5px; color: var(--ink-2); }
.py-card-h b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.py-tally { display: flex; gap: 6px; }
.py-tally i { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; font-style: normal; white-space: nowrap; }
.py-tally .ok { background: var(--ok-soft); color: var(--ok); }
.py-tally .bad { background: #FDECEC; color: #D92D20; }
.py-rows li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 64px; column-gap: 10px; align-items: center; min-height: 56px; border-top: 1px solid #F0F0F3; }
.py-rows li:first-child { border-top: 0; }
.py-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 12.5px; font-weight: 700; font-style: normal; }
.py-rows p { display: grid; min-width: 0; line-height: 1.3; }
.py-rows b { overflow: hidden; font-size: 13.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.py-rows p small { font-size: 11.5px; color: var(--ink-2); }
.py-amt { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.py-st { display: inline-flex; align-items: center; justify-self: end; gap: 6px; font-size: 12px; font-weight: 700; font-style: normal; }
.py-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.py-st.ok::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.py-st.bad { color: #D92D20; }
.py-st.bad::before { background: #ED3B49; box-shadow: 0 0 0 3px #FDECEC; }
.py-rows li.is-bad { padding-bottom: 10px; }
.py-why { grid-column: 2 / -1; display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: 4px; padding: 4px 9px; border-radius: 8px; background: #FFF4F4;
  font-size: 11.5px; font-weight: 600; color: #B42318; }
.py-why .ic { width: 13px; height: 13px; }
/* the notice in Daniel's app, the homepage's card as it arrives; a tag on its edge says where it is */
.py-fail { left: clamp(14px, 2.4vw, 28px); bottom: clamp(18px, 2.4vw, 28px); width: 292px; }
.py-fail .pt-note-a .yes { pointer-events: none; }
.py-tag { position: absolute; top: -13px; inset-inline-end: 16px; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 999px;
  background: #fff; color: #000; font-size: 11.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 6px 16px -6px rgba(0, 0, 0, .35); }
.py-tag svg { width: 9px; height: 12px; fill: #000; }
@media (max-width: 599px) {
  .py-hok-stage { min-height: 0; padding: 16px 12px 18px; }
  .py-card { width: 100%; padding: 14px 12px 4px; }
  .py-card-h { flex-wrap: wrap; }
  .py-card-h b { font-size: 18px; }
  .py-rows li { grid-template-columns: 30px minmax(0, 1fr) auto 52px; column-gap: 8px; }
  .py-av { width: 30px; height: 30px; }
  .py-fail { position: relative; left: auto; bottom: auto; width: auto; max-width: 300px; margin: 22px 0 0; margin-inline: auto 0; }
}

/* ---------- Every way to pay: the checkout on the phone, a payment link beside it ---------- */
.py-pay-stage { height: 640px; }
.py-phone2 { top: 36px; left: max(24px, 50% - 270px); width: 260px; }
.py-checkout { padding: 46px 14px 16px; }
.py-checkout .fl-ap { flex: none; }
.py-checkout .fl-ap svg, .py-pays .ap svg { fill: #fff; }
.py-alt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.py-alt .bit svg { fill: #fff; }
.py-alt .card .ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Google Pay: its own light button, the G in its colours */
.py-alt .gp, .py-pays .gp { gap: 3px; background: #fff; color: #3C4043; box-shadow: inset 0 0 0 1px #DADCE0; direction: ltr; font-weight: 600; }
.py-alt .gp svg { width: 14px; height: 14px; }
.py-link { right: max(16px, 50% - 286px); top: 236px; display: grid; gap: 12px; width: 286px; }
.py-link .st-card-h .ic { width: 18px; height: 18px; }
.py-link-c { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.py-link-c > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #FCF3E2; color: #8A5A08; }
.py-link-c > i .ic { width: 19px; height: 19px; }
.py-link-c p { display: grid; min-width: 0; line-height: 1.3; }
.py-link-c b { font-size: 14.5px; font-weight: 700; }
.py-link-c small { font-size: 12.5px; }
.py-link-c em { padding: 8px 13px; border-radius: 999px; background: #000; color: #fff; font-size: 13px; font-weight: 700; font-style: normal; }
@media (max-width: 1099px) and (min-width: 900px) { .py-link { width: 250px; } }
@media (max-width: 599px) {
  .py-pay-stage { display: grid; justify-items: center; height: auto; padding: 22px 12px 16px; }
  .py-phone2 { position: relative; top: auto; left: auto; width: 248px; }
  .py-link { position: relative; right: auto; top: auto; width: 100%; max-width: 320px; margin-top: 14px; }
}

/* ---------- The till: the product's קופה at full screen (no menu), the studio's items, the order paid with bit ---------- */
.py-pos-stage { padding-block: clamp(28px, 4vw, 44px) 0; padding-inline: 0 clamp(20px, 3.4vw, 40px); }
.py-pos { position: relative; inset: auto; grid-template-columns: minmax(0, 1fr); margin-bottom: -28px; border-radius: 0; border-start-end-radius: 16px; font-size: 12.5px; }
.py-pos .pd-nav { display: none; }
.py-pos .win-main { gap: 14px; padding-bottom: 44px; }
.py-pos .ic { width: 15px; height: 15px; }
.py-tools { display: flex; gap: 14px; }
.py-tools .ic { width: 17px; height: 17px; }
.py-pos .win-h { align-items: center; }
.py-full { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; white-space: nowrap; }
.py-pos-body { display: grid; grid-template-columns: minmax(0, 1fr) 196px; gap: 12px; align-items: start; }
.py-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.py-item { position: relative; display: grid; gap: 6px; align-content: start; min-height: 96px; padding: 11px 12px; border-radius: 14px; background: #F6F6F8; }
.py-item > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-style: normal; }
.py-item b { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.py-item small { margin-top: auto; font-size: 14px; font-weight: 800; color: #000; font-variant-numeric: tabular-nums; }
.py-item.on { background: #fff; box-shadow: inset 0 0 0 2px #000; }
.py-item.on::after { content: "1"; position: absolute; top: 9px; inset-inline-end: 9px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #000; color: #fff; font-size: 11px; font-weight: 700; }
.py-cart { display: grid; gap: 10px; padding: 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.py-cart-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.py-cart-h b { font-size: 14px; font-weight: 800; }
.py-cart-h small { font-size: 11px; color: var(--ink-2); }
.py-line, .py-cart-t { display: flex; justify-content: space-between; gap: 8px; }
.py-line { color: var(--ink-2); }
.py-line b { color: #000; font-weight: 600; }
.py-cart-t { padding-top: 10px; border-top: 1px dashed #D9D9DE; }
.py-cart-t b { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.py-pays { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.py-pays span { display: flex; align-items: center; justify-content: center; gap: 5px; height: 32px; border-radius: 9px; background: #F2F2F5; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.py-pays .bit { background: #00353B; }
.py-pays .bit svg { width: 26px; height: 15px; fill: #fff; }
.py-pays .bit.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #00353B; }
.py-pays .ap { gap: 1px; background: #000; color: #fff; font-size: 13px; direction: ltr; }
.py-pays .ap svg { width: 12px; height: 12px; margin-top: -2px; }
.py-pays .gp svg { width: 12px; height: 12px; }
.py-pays .cash { grid-column: 1 / -1; }
.py-done { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.py-done .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.py-done span { display: grid; line-height: 1.25; }
.py-done small { font-size: 11px; font-weight: 600; color: #2F6B45; }
@media (max-width: 1099px) { .py-pos-body { grid-template-columns: minmax(0, 1fr); } .py-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } .py-cart { grid-template-columns: 1fr 1fr; align-items: start; } .py-cart-h, .py-line, .py-cart-t { grid-column: 1; } .py-pays { grid-column: 2; grid-row: 1 / span 3; } }
@media (max-width: 599px) {
  .py-pos-stage { padding-block-start: 18px; padding-inline-end: 14px; }
  .py-pos .win-main { padding-inline: 14px; }
  .py-pos .win-top { margin-inline: -14px; padding-inline: 14px; }
  .py-pos .win-h b { font-size: 18px; }
  .py-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .py-cart { grid-template-columns: minmax(0, 1fr); }
  .py-pays { grid-column: auto; grid-row: auto; }
}

/* ---------- Receipts: Daniel's חשבונית מס / קבלה, sent by email; the report dialog addressed to the accountant ---------- */
.py-docs-stage { display: flex; flex-direction: column; padding: 44px clamp(14px, 4%, 30px) 30px; }
.py-doc { position: relative; z-index: 1; align-self: flex-start; width: 296px; max-width: 100%; padding: 20px 20px 16px; border-radius: 6px; background: #fff; color: #111;
  font-size: 12.5px; line-height: 1.4; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 40px 70px -36px rgba(0, 0, 0, .4); }
.py-doc-h { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 2px solid #111; }
.py-doc-logo { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: #000; color: #fff; font-size: 15px; font-weight: 700; }
.py-doc-h p { display: grid; line-height: 1.25; }
.py-doc-h b { font-size: 14px; font-weight: 800; }
.py-doc-h small { font-size: 11px; color: var(--ink-2); }
.py-doc-k { margin-inline-start: auto; padding: 2px 8px; border: 1px solid #111; border-radius: 4px; font-size: 10.5px; font-weight: 700; }
.py-doc-t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 14px; }
.py-doc-t b { font-size: 16px; font-weight: 800; }
.py-doc-t span { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.py-doc-m { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; }
.py-doc-m div { display: grid; }
.py-doc-m dt { font-size: 10.5px; color: var(--ink-2); }
.py-doc-m dd { margin: 0; font-weight: 700; }
.py-doc-tbl { margin-top: 14px; }
.py-doc-tbl p { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #EDEDF0; }
.py-doc-tbl p.th { padding: 5px 8px; border: 0; border-radius: 4px; background: #F2F2F3; font-size: 10.5px; font-weight: 700; color: var(--ink-2); }
.py-doc-tbl p:not(.th) { padding-inline: 8px; }
.py-doc-tbl p span { display: grid; }
.py-doc-tbl p small { font-size: 10.5px; color: var(--ink-2); }
.py-doc-tbl b, .py-doc-sum b { font-weight: 700; font-variant-numeric: tabular-nums; }
.py-doc-sum { display: grid; gap: 4px; margin-top: 10px; padding-inline: 8px; }
.py-doc-sum p { display: flex; justify-content: space-between; color: var(--ink-2); }
.py-doc-sum p b { color: #111; }
.py-doc-sum .tot { margin-top: 4px; padding-top: 8px; border-top: 1px solid #111; color: #111; font-size: 14px; font-weight: 800; }
.py-doc-sum .tot b { font-weight: 800; }
.py-doc-pay { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11.5px; color: var(--ink-2); }
.py-doc-pay .fl-m.ap svg { fill: #fff; }
.py-doc-f { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px dashed #D9D9DE; font-size: 10.5px; color: var(--ink-2); }
.py-doc-f img { width: 22px; height: 22px; }
.py-sentto { position: absolute; top: -15px; left: 50%; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; transform: translateX(-50%);
  border-radius: 999px; background: var(--ok); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 22px -10px rgba(22, 163, 74, .7); }
.py-sentto .ic { width: 15px; height: 15px; }
/* the dialog sits under the document, over its foot, on the other side */
.py-dialog { position: relative; z-index: 3; top: auto; left: auto; align-self: flex-end; width: 250px; max-width: calc(100% - 24px); margin: -64px 0 0; opacity: 1; transform: none; }
.py-dialog .fl-d-h i { pointer-events: none; }
@media (max-width: 599px) {
  .py-docs-stage { align-items: center; padding: 40px 12px 16px; }
  .py-doc, .py-dialog { align-self: auto; }
  .py-doc { width: 100%; max-width: 330px; }
  .py-dialog { width: calc(100% - 24px); max-width: 300px; margin-top: -40px; }
}

/* ---------- Clearing through Grow: its line in the monthly bill (pricing.html's bill, renamed) ---------- */
.py-bill-stage { padding: clamp(14px, 4vw, 48px); }
.py-bill { max-width: 520px; margin-inline: auto; padding: 20px 24px 18px; border-radius: 22px; background: #fff; color: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 30px 60px -32px rgba(0, 0, 0, .3); }
.py-bill-h { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.py-b { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: #000; }
.py-b svg { width: 14px; height: 18px; fill: #fff; }
.py-bill-h b { display: block; font-size: 19px; font-weight: 700; line-height: 1.25; }
.py-bill-h small { display: block; font-size: 15px; color: var(--ink-2); }
.py-bill dl { margin: 0; }
.py-bill dl > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #EDEDF0; }
.py-bill dt { min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.35; }
.py-bill dt small { display: block; margin-top: 2px; font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--ink-2); }
.py-bill dd { flex: none; margin: 0; text-align: end; font-family: "Wix Madefor Text", var(--sans); font-size: 18px; font-weight: 700; white-space: nowrap; }
.py-bill dd small { display: block; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.py-ok { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: #E3FBEF; color: #1A7F4B; font-family: var(--sans); font-size: 15px; font-weight: 700; }
.py-ok::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: #18E588 var(--tick-ink) center / 10px no-repeat; }
.py-bill-f { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 599px) {
  .py-bill { padding: 16px 16px 14px; border-radius: 18px; }
  .py-bill dl > div { gap: 12px; }
  .py-bill dt { font-size: 16px; }
  .py-bill dt small { font-size: 14px; }
  .py-bill dd { font-size: 16px; }
}

@media (max-width: 599px) { .py-panel { border-radius: 22px; } }