/* The Codex payment page: the TICKET screen (his pick of 27 Oct 2026, after testing it in a Clinical History test copy;
   his rule the same day: "each app should have its own colors"). One shared file, the same in every app (scripts/check_apps.py
   compares every copy with Clinica's; scripts/patch_pay_page.py puts it in). Drawn by js/pay-page.js on the app's real pay
   screen when codex.ong says online payment (Wayl) is on for this account: a light page, whatever the app's own look, in
   the app's own colours (js/pay-page.js works them out from the app's accent and sets them on the page; the values below
   are only the defaults), with the same fonts in every app: Inter for text, Plus Jakarta Sans for the titles, and the two
   faces of the gold price card (fonts/price.css) for the plan numbers. The year ticket is gold in every app.
   html.pd-on is set while the page is drawn; html[data-scr] while a payment screen shows (pay, wayl, refused, receipt,
   review, done); the rest of the app is untouched. Light only (his ask: "a light colored premium one"). */

/* the two fonts, bundled in every app (the same four files; see fonts/) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/b6db4a06c119.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/6ab57b19c69b.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/5d8873d8050a.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/d4d84dd169e7.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

html.pd-on{
  /* the defaults (Clinical History's teal); js/pay-page.js sets the app's own on the page while this screen is drawn */
  --app:#0E6E62; --app2:#15887A; --app-rgb:14,110,98; --app2-rgb:21,136,122;
  --d-bg:#EAF2F0; --d-bg-rgb:234,242,240; --d-card:#FFFFFF; --d-well:#E1EEEA; --d-ink:#10231F; --d-ink-rgb:16,35,31;
  --d-soft:#42584F; --d-faint:#55706A; --d-line:#CFE0DC; --d-line2:#B3CBC5; --d-acc:var(--app); --d-acc2:var(--app2);
  --d-acc-ink:#FFFFFF; --d-acc-soft:#D9ECE7; --d-acc-line:#98CDC2; --d-top:#D6EEE8; --d-t1:#D4E9E3; --d-t2:#E4F2EE;
  --d-t3:#F3FAF8; --d-handle:#C3D6D1; --d-glow:#CBEDE5; --d-good:#0B6B3E; --d-bad:#B42318; --d-bad-soft:#FDECEA;
  --d-grad:linear-gradient(110deg, var(--app), var(--app2));
  --d-font:'Inter',-apple-system,"Segoe UI",Roboto,sans-serif; --d-head:'Plus Jakarta Sans','Inter',sans-serif;
  --d-shadow:0 1px 2px rgba(17,21,42,.04),0 16px 34px -20px rgba(var(--app-rgb),.45);
  --d-r:22px; --d-r2:16px;
}
html[lang="ar"].pd-on{--d-font:'Noto Sans Arabic','IBM Plex Sans Arabic',-apple-system,"Segoe UI",Tahoma,sans-serif;--d-head:'Noto Sans Arabic','Plus Jakarta Sans',sans-serif;}

/* ---------------- the frame of every payment screen (light, whatever the app's own look) ---------------- */
html.pd-on[data-scr]{color-scheme:light;background:var(--d-bg);}
html.pd-on[data-scr] body{color:var(--d-ink);font-family:var(--d-font);font-size:15px;
  background:radial-gradient(120% 300px at 50% 0%, var(--d-top), transparent 75%),var(--d-bg);}
html.pd-on[data-scr] .topbar{display:none;}
html.pd-on[data-scr] #app{max-width:480px;padding:0 18px calc(26px + env(safe-area-inset-bottom,0px));
  --bg:var(--d-bg); --surface:var(--d-card); --surface-2:var(--d-well); --ink:var(--d-ink); --ink-soft:var(--d-soft);
  --ink-faint:var(--d-faint); --border:var(--d-line); --border-strong:var(--d-line2); --accent:var(--d-acc);
  --accent-ink:var(--d-acc-ink); --accent-soft:var(--d-acc-soft); --accent-soft-ink:var(--d-acc);
  --danger:var(--d-bad); --danger-soft:var(--d-bad-soft);
  --bg-elevated:var(--d-card); --bg-soft:var(--d-well); --bg-soft-strong:var(--d-line); --text:var(--d-ink);
  --text-muted:var(--d-soft); --text-faint:var(--d-faint); --primary:var(--d-acc); --primary-dark:var(--d-acc);
  --primary-soft:var(--d-acc-soft); --on-primary:var(--d-acc-ink);
  --font-ui:var(--d-font); --font-heading:var(--d-head); --radius-m:14px; --radius-l:var(--d-r);
  --shadow-2:var(--d-shadow); --shadow-3:var(--d-shadow);}
html.pd-on :is(.pd,.pd-steps,.pd-track,.pds,.pdx,.pd-order,.pd-check) svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
html.pd-on :is(.pd-cta,.pds-done,.pds-x,.pdx-x,.pd-m-copy):focus-visible{outline:2px solid var(--d-acc);outline-offset:3px;}
/* the pay screen waits, unseen, until codex.ong has said whether online payment is on (no flash of the other layout) */
html.pd-veil #scr-payment{visibility:hidden;}

/* ---------------- the payment screen ---------------- */
html.pd-on #scr-payment{align-items:stretch;text-align:start;padding-top:0;}
.pd{flex:1;display:flex;flex-direction:column;gap:18px;padding-top:calc(env(safe-area-inset-top,0px) + 16px);}
.pd-hero{display:flex;flex-direction:column;gap:12px;}
.pd-brand{display:flex;align-items:center;gap:10px;min-width:0;}
.pd-icon-w{flex:0 0 auto;display:grid;place-items:center;padding:4px;border-radius:16px;background:#FFFFFF;box-shadow:0 10px 24px -12px rgba(var(--app-rgb),.75);}
.pd-icon{width:42px;height:42px;border-radius:12px;display:block;}
.pd-brand-t{display:flex;flex-direction:column;min-width:0;line-height:1.25;}
.pd-name{font:700 15.5px/1.2 var(--d-font);color:var(--d-ink);letter-spacing:-.01em;}
.pd-by{font-size:12px;color:var(--d-faint);}
.pd-secure{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.75);color:var(--d-soft);font-size:11.5px;font-weight:600;white-space:nowrap;}
.pd-secure svg{width:13px;height:13px;}
html.pd-on .pd .lang-toggle{margin:0;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.75);color:var(--d-acc);font-size:12px;font-weight:700;border:0;}
.pd-hero-text{display:flex;flex-direction:column;gap:6px;}
html.pd-on #paymentHeadline{font:800 30px/1.15 var(--d-head);letter-spacing:-.02em;margin:0;text-align:start;color:var(--d-ink);text-wrap:balance;}
html.pd-on #paymentSub{margin:0;max-width:none;text-align:start;color:var(--d-soft);font-size:14px;}
.pd-test[hidden]{display:none;}
.pd-test{margin:0;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:5px 10px;border-radius:999px;background:#FFF4D6;color:#6B4600;font-size:12px;font-weight:700;}

.pd-sheet{display:flex;flex-direction:column;gap:14px;}
.pd-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;}
.pd-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px 6px;font-size:11.5px;font-weight:700;color:var(--d-faint);text-align:start;}
.pd-steps li::before{content:"";grid-column:1/-1;height:4px;border-radius:2px;background:var(--d-line);}
.pd-steps li.done::before,.pd-steps li.now::before{background:var(--d-grad);}
.pd-steps li.now{color:var(--d-ink);} .pd-steps li.done{color:var(--d-soft);}
.pd-sn{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;background:var(--d-line);color:var(--d-soft);}
.pd-steps li.now .pd-sn,.pd-steps li.done .pd-sn{background:var(--d-acc);color:var(--d-acc-ink);}
.pd-sn svg{width:11px;height:11px;stroke-width:3;}

/* the promo and referral tab: its own design (16 Oct 2026); the card under it follows this screen */
html.pd-on .pd .codes-tab{background:var(--d-card);border-color:var(--d-line);font-family:var(--d-font);}

/* pay online: the ways Wayl's page offers, one button */
.pd-online{padding:16px;border-radius:var(--d-r);background:var(--d-card);border:1px solid var(--d-line);box-shadow:var(--d-shadow);display:flex;flex-direction:column;gap:14px;}
.pd-mk{width:42px;height:42px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;color:#FFFFFF;background:var(--d-grad);box-shadow:0 10px 20px -10px rgba(var(--app-rgb),.8);}
.pd-mk svg{width:22px;height:22px;}
.pd-ways{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.pd-ways li{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;background:var(--d-well);font-size:13px;font-weight:650;color:var(--d-ink);min-width:0;}
.pd-ways svg{width:17px;height:17px;flex:0 0 auto;color:var(--d-acc);}
.pd-ticks{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--d-line);display:flex;flex-direction:column;gap:8px;}
.pd-ticks li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--d-ink);line-height:1.4;}
.pd-ticks svg{width:17px;height:17px;color:var(--d-acc);stroke-width:2.6;margin-top:1px;flex:0 0 auto;}

/* the summary: the price, the code, the total */
.pd-sum{margin:0;display:flex;flex-direction:column;gap:9px;padding:2px 2px 0;}
.pd-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;color:var(--d-soft);}
.pd-row dt{min-width:0;} .pd-row dt b{color:var(--d-ink);letter-spacing:.04em;font-weight:700;}
.pd-row dd{margin:0;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;color:var(--d-ink);font-weight:600;}
.pd-row-off dd{color:var(--d-good);}
.pd-row-ref dd{color:var(--d-soft);font-weight:500;}
.pd-total{padding-top:11px;border-top:1px solid var(--d-line);font-size:15px;color:var(--d-ink);font-weight:700;}
.pd-total dd{font:800 17px/1.2 var(--d-head);font-variant-numeric:lining-nums tabular-nums;}

/* the one Pay button is the app's own "Pay now" button (js/wayl-pay.js), moved here and restyled */
html.pd-on .pd .pd-cta{width:100%;min-height:56px;margin:0;padding:14px 20px;border-radius:999px;border:0;background:var(--d-grad);color:#FFFFFF;font:700 16px/1.2 var(--d-font);
  box-shadow:0 16px 30px -14px rgba(var(--app-rgb),.8);transition:transform .15s ease;cursor:pointer;}
html.pd-on .pd .pd-cta:active{transform:scale(.985);}
html.pd-on .pd .pd-cta:disabled{opacity:.75;}
html.pd-on .pd .wayl-msg{margin:0;text-align:center;font-size:13px;line-height:1.45;color:var(--d-soft);}
html.pd-on .pd .wayl-msg.bad{color:var(--d-bad);}
.pd-note{margin:0;display:flex;gap:7px;align-items:flex-start;justify-content:center;font-size:12px;color:var(--d-faint);text-align:center;line-height:1.45;}
.pd-note svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px;}
.pd-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;}
html.pd-on .pd .link-btn{margin:0;color:var(--d-soft);font-size:13.5px;}
html.pd-on .pd :is(.trial-card,.or-buy,.trial-used-note,.lock-note){margin:0;}
html.pd-on .pd .trial-card{text-align:start;}
html.pd-on .pd .trial-card .btn-primary{background:var(--d-grad);color:#FFFFFF;}
.pd-away{display:none!important;}

/* ---------------- waiting for Wayl, and refused ---------------- */
html.pd-on[data-scr] :is(#scr-wayl,#scr-rejected,#scr-receipt,#scr-waiting){padding-top:calc(env(safe-area-inset-top,0px) + 18px);}
html.pd-on[data-scr] .screen h1.headline{font-family:var(--d-head);font-weight:800;letter-spacing:-.02em;color:var(--d-ink);font-size:26px;}
html.pd-on[data-scr] .screen p.sub{color:var(--d-soft);}
html.pd-on[data-scr] .screen > .pd-steps{margin-bottom:22px;}
html.pd-on[data-scr] :is(#scr-wayl,#scr-waiting) .spinner{display:none;}
html.pd-on[data-scr] :is(#scr-wayl,#scr-waiting) > div.spacer:first-of-type{display:none;}
html.pd-on[data-scr] #scr-wayl .wayl-test{order:-1;margin:0 0 14px;padding:5px 10px;border-radius:999px;background:#FFF4D6;color:#6B4600;font-size:12px;font-weight:700;}
html.pd-on[data-scr] .screen .btn-primary{background:var(--d-grad);color:#FFFFFF;min-height:56px;box-shadow:0 16px 30px -14px rgba(var(--app-rgb),.8);}
html.pd-on[data-scr] .screen .btn-outline{background:var(--d-card);border-color:var(--d-line2);color:var(--d-ink);min-height:52px;}
html.pd-on[data-scr] .screen .link-btn{color:var(--d-soft);}
html.pd-on[data-scr] #scr-rejected .icon-badge svg{stroke:var(--d-bad);}
html.pd-on[data-scr] #scr-rejected .btn+.btn{margin-top:10px;}
.pd-track{width:100%;margin:4px 0 22px;padding:16px;border-radius:var(--d-r);background:var(--d-card);border:1px solid var(--d-line);display:flex;flex-direction:column;gap:13px;text-align:start;box-shadow:var(--d-shadow);}
.pd-tk{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--d-faint);}
.pd-tk.done{color:var(--d-soft);} .pd-tk.now{color:var(--d-ink);font-weight:650;}
.pd-tk-dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--d-line2);flex:0 0 auto;color:#FFFFFF;}
.pd-tk.done .pd-tk-dot{background:var(--d-grad);border-color:transparent;}
.pd-tk.now .pd-tk-dot{border:2.5px solid var(--d-acc-soft);border-top-color:var(--d-acc);animation:pdSpin 1s linear infinite;}
.pd-tk-dot svg{width:13px;height:13px;stroke-width:3;}
@keyframes pdSpin{to{transform:rotate(360deg)}}

/* ---------------- payment confirmed (his first picture) ---------------- */
.pds{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;font-family:var(--d-font);color:var(--d-ink);}
.pds-scrim{position:absolute;inset:0;background:rgba(14,16,30,.4);opacity:0;transition:opacity .35s ease;}
.pds.in .pds-scrim{opacity:1;}
.pds-sheet{position:relative;width:100%;max-width:480px;background:var(--d-card);border-radius:32px 32px 0 0;padding:46px 22px calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;transform:translateY(105%);transition:transform .55s cubic-bezier(.2,.9,.2,1);box-shadow:0 -24px 60px -24px rgba(14,16,30,.4);}
.pds.in .pds-sheet{transform:none;}
.pds-notch{position:absolute;top:-24px;left:50%;margin-left:-30px;width:60px;height:60px;border-radius:50%;background:var(--d-card);display:grid;place-items:center;}
.pds-x{width:36px;height:36px;border-radius:50%;border:0;background:var(--d-well);display:grid;place-items:center;color:var(--d-ink);cursor:pointer;}
.pds-x svg{width:16px;height:16px;stroke-width:2.2;}
html.pd-on .pds svg.pds-seal{width:136px;height:136px;margin:0 0 6px;overflow:visible;stroke:none;}
.pds-glow{fill:var(--d-glow);transform-origin:50px 50px;animation:pdsGlow 2.8s ease-in-out infinite;}
.pds-shape{fill:url(#pdsGrad);transform-origin:50px 50px;animation:pdsPop .6s cubic-bezier(.2,1.4,.4,1) both;}
.pds-tick{fill:none;stroke:#FFFFFF;stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44;animation:pdsTick .45s .45s ease-out forwards;}
.pds-spark{fill:var(--app);opacity:0;transform-box:fill-box;transform-origin:center;animation:pdsSpark 2.6s ease-in-out infinite;}
.pds-sheet h2{font:800 26px/1.2 var(--d-head);letter-spacing:-.02em;color:var(--d-ink);margin:0;}
.pds-sub{margin:4px 0 12px;color:var(--d-soft);font-size:14.5px;max-width:31ch;line-height:1.5;}
.pds-rows{width:100%;margin:0 0 18px;padding:12px 14px;border-radius:16px;background:var(--d-well);display:flex;flex-direction:column;gap:9px;}
.pds-rows div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;}
.pds-rows dt{color:var(--d-soft);} .pds-rows dd{margin:0;color:var(--d-ink);font-weight:650;text-align:end;font-variant-numeric:lining-nums tabular-nums;}
.pds-done{width:100%;min-height:56px;border-radius:999px;border:0;background:var(--d-grad);color:#FFFFFF;font:700 16px/1.2 var(--d-font);cursor:pointer;box-shadow:0 16px 30px -14px rgba(var(--app-rgb),.8);}
@keyframes pdsPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes pdsTick{to{stroke-dashoffset:0}}
@keyframes pdsGlow{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.04);opacity:1}}
@keyframes pdsSpark{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1)}}

/* ---------------- two ways to pay and their sheets (design C, his pick of 26 Oct 2026) ----------------
   Pay online (Wayl) and Pay manually (USDT, Zain Cash, Super Qi), chosen in "How would you like to pay?". Each way opens
   its own sheet. The sheet moves like the open-source Vaul drawer (MIT): up on Vaul's curve, it follows the finger when its
   handle is dragged, and the page behind steps back a little. Soft depth, flat faces (no gloss). */
html.pd-on{--d-ease:cubic-bezier(.32,.72,0,1);}
.pd-label{margin:6px 2px -4px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--d-soft);}
@keyframes pdRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* the sheets (fixed on the page, over a dimmed backdrop) */
.pdx{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;font-family:var(--d-font);font-size:15px;color:var(--d-ink);
  --accent:var(--d-acc);--accent-soft:var(--d-acc-soft);--accent-soft-ink:var(--d-acc);--accent-ink:#FFFFFF;--surface:var(--d-card);--surface-2:var(--d-well);
  --border:var(--d-line);--border-strong:var(--d-line2);--ink:var(--d-ink);--ink-soft:var(--d-soft);--ink-faint:var(--d-faint);}
.pdx[hidden]{display:none;}
.pdx-scrim{position:absolute;inset:0;background:rgba(14,16,30,.42);opacity:0;transition:opacity .5s var(--d-ease);}
.pdx.open .pdx-scrim{opacity:1;}
.pdx-sheet{position:relative;width:100%;max-width:480px;max-height:calc(100% - 48px - env(safe-area-inset-top,0px));display:flex;flex-direction:column;
  background:var(--d-card);border-radius:30px 30px 0 0;box-shadow:0 -24px 60px -24px rgba(14,16,30,.45);transform:translateY(105%);transition:transform .5s var(--d-ease);will-change:transform;}
.pdx.open .pdx-sheet{transform:translateY(0);}
.pdx-sheet.dragging{transition:none;}
.pdx-grip{flex:0 0 auto;padding:10px 20px 0;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;}
.pdx-sheet.dragging .pdx-grip{cursor:grabbing;}
.pdx-handle{display:block;width:42px;height:5px;border-radius:999px;background:var(--d-handle);margin:0 auto 14px;}
.pdx-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--d-line);}
.pdx-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25;}
.pdx-t b{font:800 18px/1.2 var(--d-head);letter-spacing:-.01em;color:var(--d-ink);}
.pdx-t span{font-size:12.5px;font-weight:600;color:var(--d-soft);}
.pdx-online .pdx-t span{color:var(--d-acc);}
.pdx-x{width:40px;height:40px;flex:0 0 auto;border-radius:50%;border:0;background:var(--d-well);color:var(--d-soft);display:grid;place-items:center;cursor:pointer;}
.pdx-x svg{width:18px;height:18px;stroke-width:2.2;}
.pdx-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:18px 20px 20px;display:flex;flex-direction:column;gap:16px;}
.pdx-foot{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;padding:12px 20px calc(16px + env(safe-area-inset-bottom,0px));background:var(--d-card);border-top:1px solid var(--d-line);box-shadow:0 -14px 24px -18px rgba(17,21,42,.25);}
.pdx-foot:empty{display:none;}
.pdx-foot .pd-note{margin:0;}
.pdx.open .pdx-body>*{animation:pdRise .55s var(--d-ease) backwards;}
.pdx.open .pdx-body>:nth-child(2){animation-delay:.05s;}
.pdx.open .pdx-body>:nth-child(3){animation-delay:.1s;}
.pdx.open .pdx-body>:nth-child(4){animation-delay:.14s;}
.pdx.open .pdx-body>:nth-child(5){animation-delay:.18s;}
.pd-mk.soft{color:var(--d-acc);background:linear-gradient(135deg,var(--d-t1),var(--d-t2));box-shadow:none;}
.pd-mk.sm{width:36px;height:36px;border-radius:11px;}
.pd-mk.sm svg{width:18px;height:18px;}
/* the page behind steps back while a sheet is open */
html.pd-on[data-scr="pay"] #app{transition:transform .5s var(--d-ease);}
html.pdx-on,html.pdx-on body{overflow:hidden;}
html.pdx-on body:not(.has-locked-bg) #app{transform:scale(.955);}

/* the Wayl sheet */
.pd-flow{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.pd-flow::before,.pd-flow::after{content:"";position:absolute;top:20px;left:16.6%;right:16.6%;height:2px;border-radius:2px;background:var(--d-line);}
.pd-flow::after{background:var(--d-grad);transform-origin:left center;transform:scaleX(0);transition:transform .9s .25s var(--d-ease);}
html[dir=rtl] .pd-flow::after{transform-origin:right center;}
.pdx.open .pd-flow::after{transform:scaleX(1);}
.pd-flow li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;font-size:12px;font-weight:650;color:var(--d-soft);line-height:1.3;}
.pd-fc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--d-acc-soft);color:var(--d-acc);box-shadow:0 0 0 4px var(--d-card);}
.pd-fc.ok{background:#E6F4EC;color:var(--d-good);}
.pd-fc svg{width:18px;height:18px;}
.pdx .pd-online{background:var(--d-well);border-color:transparent;box-shadow:none;}
.pdx .pd-ways li{background:var(--d-card);}
.pdx .pd-cta{width:100%;min-height:56px;margin:0;padding:14px 20px;border-radius:999px;border:0;background:var(--d-grad);color:#FFFFFF;font:700 16px/1.2 var(--d-font);
  box-shadow:0 16px 30px -14px rgba(var(--app-rgb),.8);transition:transform .15s ease;cursor:pointer;}
.pdx .pd-cta:active{transform:scale(.985);}
.pdx .pd-cta:disabled{opacity:.75;}
.pdx .wayl-msg{margin:0;text-align:center;font-size:13px;line-height:1.45;color:var(--d-soft);}
.pdx .wayl-msg:empty{display:none;}
.pdx .wayl-msg.bad{color:var(--d-bad);}

/* the manual sheet: three steps */
.pd-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.pd-tl>li{display:flex;gap:12px;}
.pd-tl-c{display:flex;flex-direction:column;align-items:center;width:28px;flex:0 0 auto;}
.pd-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;background:var(--d-grad);color:#FFFFFF;flex:0 0 auto;}
.pd-dot.now{box-shadow:0 0 0 5px var(--d-acc-soft);}
.pd-tl>li:last-child .pd-dot{background:var(--d-line);color:var(--d-soft);}
.pd-tl-line{flex:1;width:2px;margin:5px 0;border-radius:2px;background:var(--d-line);}
.pd-tl-line.on{background:linear-gradient(var(--app),var(--app2));}
.pd-tl-b{display:flex;flex-direction:column;gap:12px;flex:1;min-width:0;padding-bottom:20px;}
.pd-tl>li:last-child .pd-tl-b{padding-bottom:0;gap:2px;}
.pd-tl-t{font-size:15px;font-weight:700;line-height:28px;color:var(--d-ink);}
.pd-tl-t.pd-mute{color:var(--d-soft);}
.pd-tl-s{font-size:12.5px;color:var(--d-faint);}
/* the way to send: one segmented control with a sliding mark under the chosen way */
.pdx .pm-row{position:relative;display:grid;grid-template-columns:repeat(var(--pd-n,3),minmax(0,1fr));gap:0;width:100%;margin:0;padding:4px;border-radius:16px;background:var(--d-well);}
.pdx .pm-row::before{content:"";position:absolute;top:4px;bottom:4px;inset-inline-start:4px;width:calc((100% - 8px) / var(--pd-n,3));border-radius:12px;background:var(--d-card);
  box-shadow:0 1px 2px rgba(17,21,42,.06),0 8px 18px -10px rgba(var(--app-rgb),.65);transform:translateX(calc(var(--pd-i,0) * 100%));transition:transform .4s var(--d-ease);}
html[dir=rtl] .pdx .pm-row::before{transform:translateX(calc(var(--pd-i,0) * -100%));}
.pdx .pm-btn,.pdx .pm-btn.active{position:relative;z-index:1;flex:none;min-height:44px;margin:0;padding:8px 4px;border:0;border-radius:12px;background:transparent;box-shadow:none;transform:none;
  color:var(--d-soft);font:600 13.5px/1.2 var(--d-font);}
.pdx .pm-btn.active{color:var(--d-ink);font-weight:700;}
/* the payment details: a ticket, the QR on top and the address or number below a torn line */
.pdx .pm-details{width:100%;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;display:flex;flex-direction:column;gap:12px;text-align:start;}
.pdx .network-row{margin:0;display:flex;flex-wrap:wrap;gap:8px;}
.pdx .network-chip{flex:0 1 auto;min-height:38px;padding:8px 13px;border-radius:999px;border:1px solid var(--d-line);background:var(--d-card);box-shadow:none;color:var(--d-soft);font:600 12.5px/1.2 var(--d-font);}
.pdx .network-chip.active{border:1.5px solid var(--d-acc);background:var(--d-acc-soft);color:var(--d-acc);box-shadow:none;}
.pdx #qrHolder{margin:0;display:flex;justify-content:center;padding:18px 16px 16px;border:1px solid var(--d-line);border-bottom:0;border-radius:20px 20px 0 0;background:linear-gradient(180deg,var(--d-t3),var(--d-well));}
.pdx #qrHolder:empty{display:none;}
.pdx #qrHolder img{width:156px!important;max-width:100%;height:auto!important;padding:10px;border-radius:16px;background:#FFFFFF;box-sizing:border-box;box-shadow:0 1px 2px rgba(17,21,42,.06),0 14px 26px -16px rgba(var(--app-rgb),.55);}
.pdx #qrHolder canvas{width:156px!important;height:auto!important;padding:10px;border-radius:16px;background:#FFFFFF;box-sizing:border-box;}
.pdx .addr-row{position:relative;margin:0;display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--d-line);border-top:1.5px dashed var(--d-line2);border-radius:0 0 20px 20px;background:var(--d-well);}
.pdx #qrHolder:empty+.addr-row{border-top:1px solid var(--d-line);border-radius:20px;}
.pdx .addr-row::before,.pdx .addr-row::after{content:"";position:absolute;top:-9px;width:16px;height:16px;border-radius:50%;background:var(--d-card);border:1px solid var(--d-line);}
.pdx .addr-row::before{left:-9px;clip-path:inset(0 0 0 50%);}
.pdx .addr-row::after{right:-9px;clip-path:inset(0 50% 0 0);}
.pdx #qrHolder:empty+.addr-row::before,.pdx #qrHolder:empty+.addr-row::after{display:none;}
.pdx .addr-row span{flex:1;min-width:0;font:600 12.5px/1.45 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--d-ink);word-break:break-all;text-align:start;}
.pdx .copy-btn{flex:0 0 auto;min-height:36px;padding:0 14px;border-radius:999px;border:0;background:var(--d-card);color:var(--d-acc);font:700 12.5px/1 var(--d-font);
  box-shadow:0 1px 2px rgba(17,21,42,.06),0 6px 14px -8px rgba(var(--app-rgb),.5);cursor:pointer;}
.pdx .pm-details p.sub{margin:0!important;max-width:none;font-size:12.5px!important;line-height:1.45;color:var(--d-soft);text-align:start;}
.pd-m-sum{display:flex;flex-direction:column;gap:4px;margin-top:-8px;}
.pd-m-amt{display:flex;align-items:baseline;gap:6px;font-family:var(--d-head);font-variant-numeric:lining-nums tabular-nums;}
.pd-m-amt b{font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.02em;padding-inline-end:2px;background:var(--d-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.pd-m-amt span{font-size:14px;font-weight:700;color:var(--d-soft);}
.pd-m-alt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:var(--d-soft);font-variant-numeric:lining-nums tabular-nums;}
.pd-m-alt[hidden]{display:none;}
.pd-m-copy{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 11px;border-radius:999px;border:1px solid var(--d-line);background:var(--d-card);color:var(--d-acc);font:700 12px/1 var(--d-font);cursor:pointer;}
.pd-m-copy svg{width:13px;height:13px;}
.pd-m-promo{margin:0;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--d-good);}
.pd-m-promo[hidden]{display:none;}
.pd-m-promo svg{width:15px;height:15px;stroke-width:2.6;flex:0 0 auto;}
.pd-m-promo b{letter-spacing:.04em;}
.pdx #btnPaymentContinue{width:100%;min-height:56px;margin:0;padding:14px 20px;border-radius:999px;border:0;background:var(--d-grad);color:#FFFFFF;font:700 16px/1.2 var(--d-font);
  box-shadow:0 16px 30px -14px rgba(var(--app-rgb),.8);cursor:pointer;}

/* ---------------- the receipt and waiting screens of a manual payment ---------------- */
html.pd-on[data-scr] #scr-receipt{align-items:stretch;text-align:start;gap:16px;}
html.pd-on[data-scr] #scr-receipt>*{margin-top:0;margin-bottom:0;}
html.pd-on[data-scr] #scr-receipt :is(h1.headline,p.sub){text-align:start;margin-inline:0;max-width:none;}
html.pd-on[data-scr] #scr-receipt h1.headline{margin-bottom:-8px;}
.pd-order{padding:14px 16px;border-radius:var(--d-r);background:var(--d-card);border:1px solid var(--d-line);box-shadow:var(--d-shadow);display:flex;flex-direction:column;gap:10px;}
.pd-order[hidden]{display:none;}
.pd-order-row{display:flex;align-items:center;gap:11px;}
.pd-order-t{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3;}
.pd-order-t b{font-size:14.5px;color:var(--d-ink);}
.pd-order-t span{font-size:12.5px;color:var(--d-soft);}
.pd-order-amt{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;font-variant-numeric:lining-nums tabular-nums;}
.pd-order-amt b{font:800 17px/1.2 var(--d-head);background:var(--d-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.pd-order-amt span{font-size:12px;color:var(--d-soft);}
.pd-order-promo{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--d-line);font-size:12.5px;font-weight:600;color:var(--d-good);}
.pd-order-promo svg{width:15px;height:15px;stroke-width:2.6;flex:0 0 auto;}
html.pd-on[data-scr] #uploadBox{margin:0;padding:26px 18px;border:1.5px dashed var(--d-acc-line);border-radius:var(--d-r);background:linear-gradient(180deg,var(--d-t3),var(--d-t2));
  display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--d-soft);text-align:center;transition:border-color .2s ease,background .2s ease;}
html.pd-on[data-scr] #uploadBox svg{width:58px;height:58px;margin:0;padding:16px;box-sizing:border-box;border-radius:50%;background:var(--d-grad);stroke:#FFFFFF;stroke-width:2;box-shadow:0 14px 26px -14px rgba(var(--app-rgb),.85);}
html.pd-on[data-scr] #uploadHint{font:800 16px/1.3 var(--d-head);color:var(--d-ink);overflow-wrap:anywhere;}
.pd-up-sub{font-size:12.5px;color:var(--d-soft);}
html.pd-on[data-scr] #uploadBox.has-file{padding:12px;border-style:solid;border-color:var(--d-line);background:var(--d-card);box-shadow:var(--d-shadow);}
html.pd-on[data-scr] #uploadBox.has-file svg{display:none;}
html.pd-on[data-scr] #uploadBox.has-file #uploadHint{order:2;font:600 13px/1.3 var(--d-font);color:var(--d-soft);}
html.pd-on[data-scr] #uploadBox.has-file .pd-up-sub{order:3;}
html.pd-on[data-scr] #receiptImg{order:1;max-width:100%;max-height:300px;border-radius:14px;object-fit:contain;}
.pd-check{display:flex;flex-direction:column;gap:8px;}
.pd-check .pd-label{margin:0 0 2px;}
.pd-check ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.pd-check li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--d-soft);}
.pd-check svg{width:16px;height:16px;color:var(--d-acc);stroke-width:2.6;flex:0 0 auto;}

@media (prefers-reduced-motion: reduce){
  .pds-sheet,.pds-scrim,.pd-cta{transition:none!important;}
  .pds-glow,.pds-shape,.pds-tick,.pds-spark,.pd-tk.now .pd-tk-dot{animation:none!important;}
  .pds-tick{stroke-dashoffset:0;} .pds-spark{opacity:.8;}
  .pdx.open .pdx-body>*{animation:none!important;}
  .pdx-scrim,.pdx-sheet,.pd-flow::after,.pdx .pm-row::before,#app{transition:none!important;}
  html.pdx-on body #app{transform:none!important;}
}

/* ======================================================================================================================
   THE TICKETS (his pick, 27 Oct 2026, after the five pay-screen designs: "I like the ticket one"; his asks: the full price
   crossed out and the new price shown, the yearly ticket glowing, the money saved, the way a seller would; his prices: 3 months
   full, 6 months 20% off, 1 year 40% off). In every app (his rule, 27 Oct 2026), in the app's own colours; the year in gold.
   Playfair Display for the plan numbers and Cormorant Garamond italic for the monthly line (the two faces of the gold price
   card, fonts/price.css); Inter for the small words. Notched tickets, the months on the stub; the year in gold.
   ====================================================================================================================== */
html.pd-on{--pt-serif:'Playfair Display',Georgia,'Times New Roman',serif;--pt-italic:'Cormorant Garamond','Playfair Display',Georgia,serif;
  --pt-gold:#E3A52D;--pt-gold2:#F6D36B;--pt-goldink:#8A5700;--pt-goldsoft:#FFF4D6;--pt-best1:#FFF4D2;--pt-green:#DDF5E7;--pt-greenink:#0B6B3E;--pt-red:#D6403F;--pt-glow:rgba(227,165,45,.55);}
html.pd-on #paymentHeadline{font-family:var(--pt-serif);font-weight:700;letter-spacing:0;font-size:clamp(28px,8.4vw,34px);line-height:1.1;}
html.pd-on[data-scr="pay"] #app{padding-bottom:0;}
.pd-sheet{flex:1;}
.pt-plans{display:flex;flex-direction:column;gap:14px;}
.pt-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.pt-pass{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:var(--d-acc-soft);color:var(--d-acc);font:800 10.5px/1 var(--d-font);letter-spacing:.16em;}
.pt-pass svg{width:14px;height:14px;}
.pt-deal{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:linear-gradient(95deg,var(--pt-gold),var(--pt-gold2));color:#2A1D00;font:800 10.5px/1 var(--d-font);letter-spacing:.12em;box-shadow:0 8px 16px -10px var(--pt-glow);}
html.pd-on .pd .pt-deal svg{width:13px;height:13px;fill:currentColor;stroke:none;}
.pt-list{display:flex;flex-direction:column;gap:16px;padding-top:6px;}
.pt{position:relative;display:flex;width:100%;margin:0;padding:0;text-align:start;border-radius:20px;background:var(--d-card);border:1.5px solid var(--d-line);color:var(--d-ink);font:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.pt:focus-visible{outline:2px solid var(--d-acc);outline-offset:3px;}
.pt::before,.pt::after{content:"";position:absolute;inset-inline-start:92px;width:18px;height:18px;border-radius:50%;background:var(--d-bg);z-index:2;}
.pt::before{top:-10px;} .pt::after{bottom:-10px;}
.pt-stub{flex:0 0 102px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:16px 6px 16px 10px;border-inline-end:2px dashed var(--d-line);}
.pt-stub b{font:700 38px/1 var(--pt-serif);font-variant-numeric:lining-nums;color:var(--d-acc);}
.pt-stub>span{font:800 10px/1 var(--d-font);letter-spacing:.16em;color:var(--d-faint);}
.pt-seal{margin-top:7px;padding:4px 8px;border-radius:999px;font:800 10.5px/1 var(--d-font);font-style:normal;letter-spacing:.04em;background:var(--d-acc-soft);color:var(--d-acc);white-space:nowrap;}
.pt-seal.flat{background:transparent;color:var(--d-faint);letter-spacing:.1em;font-size:9.5px;border:1px solid var(--d-line);}
.pt-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:15px 14px 15px 16px;}
.pt-was,.pt-tot{padding-inline-end:26px;}
.pt-was{display:flex;align-items:baseline;gap:6px;font:700 17px/1.1 var(--pt-serif);color:var(--d-faint);}
.pt-was s{text-decoration:line-through;text-decoration-color:var(--pt-red);text-decoration-thickness:2px;font-variant-numeric:lining-nums;}
.pt-was em{font:600 9.5px/1 var(--d-font);letter-spacing:.12em;font-style:normal;color:var(--d-faint);}
.pt-tot{display:flex;align-items:baseline;gap:7px;}
.pt-tot b{font:700 29px/1.1 var(--pt-serif);font-variant-numeric:lining-nums;}
.pt-tot span{font:600 10.5px/1 var(--d-font);letter-spacing:.14em;color:var(--d-faint);}
.pt-pm{font:italic 600 17px/1.25 var(--pt-italic);color:var(--d-soft);font-variant-numeric:lining-nums;white-space:nowrap;}
.pt-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px;}
.pt-tags i{padding:4px 9px;border-radius:999px;font:800 10px/1.2 var(--d-font);font-style:normal;letter-spacing:.04em;white-space:nowrap;}
.pt-tags .sv{background:var(--pt-green);color:var(--pt-greenink);}
.pt-tags .fm{background:linear-gradient(95deg,var(--pt-gold),var(--pt-gold2));color:#2A1D00;}
.pt-tags .std{background:var(--d-acc-soft);color:var(--d-acc);}
.pt-tags .cd{background:#fff;color:var(--app);box-shadow:inset 0 0 0 1px rgba(var(--app-rgb),.38);}
.pt-chk{position:absolute;inset-inline-end:12px;top:12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--d-acc);color:#FFFFFF;opacity:0;transform:scale(.6);transition:.25s;z-index:3;}
.pt-chk svg{width:14px;height:14px;stroke-width:2.8;}
.pt.on{border-color:var(--d-acc);transform:translateY(-2px);box-shadow:0 20px 34px -22px var(--d-acc);}
.pt.on .pt-chk{opacity:1;transform:none;}
.pt-fx{display:none;}
/* the 1-year ticket: gold, glowing, always the one the eye lands on */
@property --pt-a{syntax:'<angle>';inherits:false;initial-value:0deg;}
.pt.best{border:2px solid transparent;background:linear-gradient(135deg,var(--pt-best1),#FFFFFF) padding-box,conic-gradient(from var(--pt-a),#F6D36B,#FFF6CF,#D99A1E,#FFE9A0,#B9770A,#F6D36B) border-box;animation:ptSpin 7s linear infinite,ptPulse 2.8s ease-in-out infinite;}
.pt.best .pt-stub b{color:var(--pt-goldink);}
.pt.best .pt-stub{border-inline-end-color:rgba(227,165,45,.55);}
.pt.best .pt-seal{background:linear-gradient(95deg,var(--pt-gold),var(--pt-gold2));color:#2A1D00;}
.pt.best .pt-tot b{background:linear-gradient(100deg,#8F5A00,#D49512,#8F5A00);-webkit-background-clip:text;background-clip:text;color:transparent;padding-inline-end:2px;filter:drop-shadow(0 2px 8px var(--pt-glow));}
.pt.best .pt-chk{background:var(--pt-gold);color:#2A1D00;}
.pt.best .pt-fx{display:block;position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:1;}
.pt-shine{position:absolute;top:-10%;bottom:-10%;left:0;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:ptSweep 4.2s ease-in-out infinite;}
html.pd-on .pd .pt-sp{position:absolute;width:11px;height:11px;animation:ptTw 2.6s ease-in-out infinite;}
html.pd-on .pd .pt-sp svg{width:100%;height:100%;fill:var(--pt-gold);stroke:none;}
.pt-sp.a{inset-inline-end:44px;top:12px;} .pt-sp.b{inset-inline-end:18px;bottom:16px;width:9px;height:9px;animation-delay:.9s;} .pt-sp.c{inset-inline-start:116px;bottom:10px;width:8px;height:8px;animation-delay:1.7s;}
.pt-rib{position:absolute;top:-12px;inset-inline-start:114px;z-index:4;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:linear-gradient(95deg,#B9770A,#E3A52D 40%,#F6D36B);color:#2A1D00;font:800 9.5px/1 var(--d-font);letter-spacing:.12em;box-shadow:0 8px 16px -8px var(--pt-glow);white-space:nowrap;}
html.pd-on .pd .pt-rib svg{width:10px;height:10px;fill:currentColor;stroke:none;}
@keyframes ptSpin{to{--pt-a:360deg;}}
@keyframes ptPulse{0%,100%{box-shadow:0 0 0 0 rgba(227,165,45,0),0 10px 26px -14px var(--pt-glow);}50%{box-shadow:0 0 0 5px rgba(227,165,45,.16),0 16px 38px -10px var(--pt-glow);}}
@keyframes ptSweep{0%,55%{transform:translateX(-130%) skewX(-18deg);}100%{transform:translateX(420%) skewX(-18deg);}}
@keyframes ptTw{0%,100%{opacity:.15;transform:scale(.55);}50%{opacity:1;transform:scale(1);}}

/* the promo and referral tab: the same tab and chips (his design, 16 Oct 2026), in this app's colours and the gold */
html.pd-on .pd .codes{margin:0;--c-acc:var(--d-acc);--c-g2:var(--d-acc2);--c-g3:var(--d-acc2);--c-ok:var(--d-acc);--c-soft:var(--d-acc-soft);--c-ink:#FFFFFF;--c-bg:var(--d-card);--c-line:var(--d-line);--c-faint:var(--d-faint);--c-r:var(--d-r2);}

.pt-inc{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:16px;border-radius:18px;border:1.5px dashed var(--d-line2);}
.pt-inc h4{grid-column:1/-1;margin:0;font:800 10.5px/1 var(--d-font);letter-spacing:.16em;text-transform:uppercase;color:var(--d-faint);}
.pt-inc div{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;min-width:0;}
.pt-inc svg{width:16px;height:16px;color:var(--d-acc);stroke-width:2.6;flex:0 0 auto;}

/* the foot: it stays at the bottom of the phone while the page scrolls under it */
.pt-foot{position:sticky;bottom:0;z-index:6;margin:auto -18px 0;padding:24px 18px calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:9px;
  background:linear-gradient(180deg,rgba(var(--d-bg-rgb),0),var(--d-bg) 30%);}
.pt-nudge{display:flex;align-items:center;gap:10px;width:100%;margin:0;text-align:start;padding:10px 12px;border-radius:16px;background:var(--pt-goldsoft);border:1px dashed var(--pt-gold);color:var(--d-ink);font:inherit;cursor:pointer;}
.pt-nudge[hidden]{display:none;}
.pt-nudge.done{border-style:solid;cursor:default;}
.pt-ni{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--pt-gold),var(--pt-gold2));color:#2A1D00;flex:0 0 auto;}
.pt-ni svg{width:16px;height:16px;stroke-width:2.4;}
.pt-nt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.pt-nt b{font:700 13.5px/1.25 var(--d-head);}
.pt-nt span{font-size:11.5px;line-height:1.35;color:var(--d-soft);}
.pt-nt b .pt-cnt{font:inherit;color:inherit;}
.pt-nt s{text-decoration-color:var(--pt-red);text-decoration-thickness:1.5px;}
.pt-nudge>svg{width:18px;height:18px;color:var(--pt-goldink);flex:0 0 auto;}
.pt-pay{width:100%;min-height:56px;margin:0;padding:14px 20px;border-radius:999px;border:0;background:var(--d-grad);color:#FFFFFF;font:700 16.5px/1.2 var(--d-head);
  box-shadow:0 16px 30px -14px rgba(var(--app-rgb),.8);transition:transform .15s ease;cursor:pointer;}
.pt-pay:active{transform:scale(.985);}
.pt-pay:focus-visible,.pt-nudge:focus-visible,.pk-opt:focus-visible{outline:2px solid var(--d-acc);outline-offset:3px;}
.pt-fine{margin:0;text-align:center;font-size:11.5px;line-height:1.4;color:var(--d-faint);}

/* "How would you like to pay?": the sheet the Pay button opens */
.pk-amt{margin:0;font-size:13px;line-height:1.45;color:var(--d-soft);}
.pk-amt b{color:var(--d-good);}
.pk-opts{display:flex;flex-direction:column;gap:10px;}
.pk-opt{display:flex;align-items:center;gap:13px;width:100%;margin:0;text-align:start;padding:14px;border-radius:18px;border:1.5px solid var(--d-line);background:var(--d-card);color:var(--d-ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s ease;}
.pk-opt:active{transform:scale(.985);}
.pk-opt.lead{border-color:var(--d-acc);background:linear-gradient(110deg,rgba(var(--app-rgb),.09),transparent);}
.pk-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;background:var(--d-acc-soft);color:var(--d-acc);}
.pk-opt.lead .pk-ic{background:var(--d-grad);color:#FFFFFF;box-shadow:0 10px 20px -10px rgba(var(--app-rgb),.8);}
.pk-ic svg{width:22px;height:22px;}
.pk-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35;}
.pk-t b{font:700 15.5px/1.25 var(--d-head);}
.pk-t span{font-size:12.5px;color:var(--d-soft);}
.pk-go{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--d-well);color:var(--d-soft);flex:0 0 auto;}
.pk-go svg{width:16px;height:16px;stroke-width:2.2;}
html[dir=rtl] .pk-go svg{transform:scaleX(-1);}
.pk-cancel{align-self:center;margin:0;padding:8px 14px;border:0;background:none;color:var(--d-soft);font:600 13px/1.2 var(--d-font);cursor:pointer;}
.pdx-pick .pdx-t span:empty{display:none;}
.pdx.swap .pdx-scrim{transition:none;opacity:1;}

/* the free-trial card: small, in this screen's look, with depth (his ask, 27 Oct 2026). A badge, a one-line title, one soft well
   holding the only two lines that stay, and the button. Layered shadows under it, a light edge on top, a faint glow in a corner. */
html.pd-on .pd .trial-card{display:flex;flex-direction:column;align-items:stretch;margin:0;padding:14px 14px 14px;border:1px solid var(--d-line);border-radius:22px;
  background:linear-gradient(180deg,#FFFFFF 0%,var(--d-t3) 100%);overflow:hidden;
  box-shadow:inset 0 1px 0 #FFFFFF,0 1px 2px rgba(var(--d-ink-rgb),.06),0 12px 22px -12px rgba(var(--app-rgb),.34),0 30px 44px -30px rgba(var(--app-rgb),.5);}
html.pd-on .pd .trial-card::after{background:radial-gradient(150px 110px at 100% 0%,rgba(var(--app2-rgb),.17),transparent 72%);opacity:1;}
html.pd-on .pd .trial-badge{align-self:flex-start;margin:0 0 7px;padding:4px 9px;gap:5px;border-radius:999px;font:800 10px/1 var(--d-font);letter-spacing:.14em;background:linear-gradient(95deg,var(--d-acc),var(--d-acc2));color:#FFFFFF;box-shadow:0 6px 12px -6px rgba(var(--app-rgb),.7);}
html.pd-on .pd .trial-badge svg{width:12px;height:12px;}
html.pd-on .pd .trial-card h2{margin:0 0 11px;font:700 clamp(19px,5.6vw,22px)/1.15 var(--pt-serif);letter-spacing:0;color:var(--d-ink);text-wrap:balance;}
.pd-trial-off{display:none!important;}
.pd-trial-notes{display:flex;flex-direction:column;gap:8px;margin:0 0 12px;padding:11px 12px;border-radius:14px;background:var(--d-well);
  box-shadow:inset 0 2px 5px rgba(var(--d-ink-rgb),.09),inset 0 0 0 1px rgba(var(--d-ink-rgb),.04),0 1px 0 rgba(255,255,255,.9);}
html.pd-on .pd .trial-points{margin:0;gap:8px;}
html.pd-on .pd .trial-points li{gap:8px;font-size:12.5px;line-height:1.4;font-weight:600;color:var(--d-ink);}
html.pd-on .pd .trial-points li svg{width:15px;height:15px;margin-top:1px;stroke:var(--d-acc);stroke-width:2.6;}
html.pd-on .pd .trial-foot{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:12.5px;line-height:1.4;font-weight:600;color:var(--d-soft);text-align:start;}
html.pd-on .pd .trial-foot svg{width:15px;height:15px;margin-top:1px;flex:0 0 auto;color:var(--d-acc);}
html.pd-on .pd .btn-trial{width:100%;min-height:48px;margin:0;padding:12px 18px;border:0;border-radius:999px;font:700 15.5px/1.2 var(--d-head);
  box-shadow:0 12px 22px -12px rgba(var(--app-rgb),.75),inset 0 1px 0 rgba(255,255,255,.28);}
html.pd-on .pd .or-buy{margin:0;}

/* the narrowest phones (320 px): a slimmer stub, so the numbers and the pills keep their room */
@media (max-width:359px){
  .pt-stub{flex-basis:84px;padding-inline:4px;}
  .pt-stub b{font-size:34px;}
  .pt::before,.pt::after{inset-inline-start:74px;}
  .pt-rib{inset-inline-start:96px;}
  .pt-sp.c{inset-inline-start:98px;}
  .pt-tags i{font-size:9.5px;padding:4px 8px;letter-spacing:.02em;}
  .pt-tot b{font-size:27px;}
  .pd-secure>span{display:none;} .pd-secure{padding:8px;}
  html.pd-on .pd .btn-trial{font-size:14.5px;padding:12px 10px;}
}
@media (prefers-reduced-motion: reduce){
  .pt.best{animation:none;}
  .pt-shine,.pt-sp{animation:none!important;} .pt-sp{opacity:.8;}
  .pt,.pt-chk,.pk-opt{transition:none!important;}
}

/* one ticket only: the cloud storage pack (Clinica, SURGES, Life Echoes, Vault), or a listing that sells only 6 months */
.pt.solo{cursor:default;}
.pt-ico{width:44px;height:44px;margin-bottom:6px;border-radius:14px;display:grid;place-items:center;background:var(--d-acc-soft);color:var(--d-acc);}
.pt-ico svg{width:24px;height:24px;}
.pt.solo .pt-pm{white-space:normal;}
.pt-deal[hidden]{display:none;}

/* Arabic (Clinica): the Arabic face for the words, the gold faces only where there are numbers; no letter-spacing, which
   pulls the joined Arabic letters apart */
html[lang="ar"].pd-on{--pt-serif:'Playfair Display','Noto Sans Arabic',Georgia,serif;--pt-italic:'Noto Sans Arabic','IBM Plex Sans Arabic',-apple-system,sans-serif;}
html[lang="ar"].pd-on #paymentHeadline,html[lang="ar"].pd-on .pd .trial-card h2{font-family:var(--d-head);}
html[lang="ar"].pd-on .pt-pm{font-style:normal;font-size:14px;}
html[lang="ar"].pd-on :is(.pd,.pdx,.pds) *{letter-spacing:0!important;}