@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/ibm-plex-sans-arabic-latin-400-normal.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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fonts/ibm-plex-sans-arabic-latin-600-normal.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;
}
/* The pay page's styles: the site's look (its brand colour, its slate greys, its two faces, its rounded cards) written by hand,
   because this page is not part of the site's build. Logical properties only, so the Arabic layout is the real layout.
   The @font-face rules are added in front of this file by the build (scripts/build-pay.mjs), from the font packages' own CSS. */
:root {
  --brand-50: #f5f5ff;
  --brand-200: #dbd9ff;
  --brand-700: #5e11da;
  --brand-800: #4a07b0;
  --slate-50: #f8fafc;
  --slate-200: #e2e8f0;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-900: #0f172a;
  --slate-950: #020617;
  --red-50: #fef2f2;
  --red-200: #fecaca;
  --red-900: #7f1d1d;
  --font: 'Inter Variable', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Arabic', sans-serif;
}

/* Arabic leads with the Arabic face, so Latin words inside Arabic text (Paddle, UnplugPDF) match it. */
html[lang='ar'] {
  --font: 'IBM Plex Sans Arabic', 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Arabic', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-block-size: 100dvh;
  background: var(--slate-50);
  color: var(--slate-900);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p,
h1,
ul {
  margin: 0;
}

a {
  color: var(--brand-800);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--brand-700);
}

:focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 2px;
  border-radius: 0.375rem;
}

.top {
  border-block-end: 1px solid var(--slate-200);
  background: #fff;
}

/* The same column as the site's header, so the brand sits where it sat on the page the buyer came from. */
.top-inner {
  display: flex;
  align-items: center;
  max-inline-size: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
  block-size: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--slate-950);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.brand img {
  display: block;
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  inline-size: 100%;
  max-inline-size: 34rem;
  margin-inline: auto;
  padding: 2rem 1rem 3rem;
}

h1 {
  color: var(--slate-950);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

html[dir='rtl'] h1,
html[dir='rtl'] .brand,
html[dir='rtl'] .price {
  letter-spacing: normal;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border: 1px solid var(--slate-200);
  border-radius: 1.5rem;
  background: #fff;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}

.summary {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-block-end: 1px solid var(--slate-200);
  padding-block-end: 1.25rem;
}

.label {
  color: var(--slate-500);
  font-size: 0.875rem;
}

.line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  font-size: 1.125rem;
}

.line strong {
  font-weight: 600;
}

.price {
  color: var(--slate-950);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.per {
  color: var(--slate-600);
  font-size: 0.875rem;
}

.fine {
  margin-block-start: 0.5rem;
  color: var(--slate-600);
  font-size: 0.875rem;
}

.progress {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.status {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--slate-700);
}

/* A small turning ring while the checkout is on its way; still for people who ask their system for less motion. */
body[data-state='opening'] .status::before {
  content: '';
  flex: none;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border: 2px solid var(--brand-200);
  border-block-start-color: var(--brand-700);
  border-radius: 50%;
  animation: turn 0.8s linear infinite;
}

@keyframes turn {
  to {
    transform: rotate(360deg);
  }
}

.problem {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--red-200);
  border-radius: 1rem;
  background: var(--red-50);
  padding: 1rem;
  color: var(--red-900);
}

.problem a {
  color: inherit;
  font-weight: 600;
}

.detail {
  color: var(--slate-700);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  border: 0;
  border-radius: 0.75rem;
  background: var(--brand-700);
  padding: 0.75rem 1.25rem;
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--brand-800);
  color: #fff;
}

.notes {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-inline-start: 1.25rem;
  color: var(--slate-600);
  font-size: 0.875rem;
}

.notes li::marker {
  color: var(--brand-700);
}

.legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.875rem;
}

.back {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Paddle.js lays its checkout over the whole window: a frame fixed to the corners with the highest z-index there is, which
   takes every click and tap even while it shows nothing, and at times a dimming loader under it. While this page itself asks
   the person to do something (try again, open the checkout again, write to us), neither may cover that or swallow its
   clicks. Hidden, not removed: a checkout that was only slow shows again when the script moves the page on (page.ts).
   `!important` because Paddle.js writes `visibility: visible` on the frame itself. The page has no frame of its own, and
   its policy allows Paddle's and no other, so any frame here is Paddle's. Written out state by state, without `:is()`: a
   browser that did not know one selector would drop the whole rule. */
body[data-state='slow'] iframe,
body[data-state='closed'] iframe,
body[data-state='paddle-error'] iframe,
body[data-state='load-error'] iframe,
body[data-state='slow'] .paddle-loader,
body[data-state='closed'] .paddle-loader,
body[data-state='paddle-error'] .paddle-loader,
body[data-state='load-error'] .paddle-loader {
  visibility: hidden !important;
}

/* With nothing to pay for, the way back is the card's own button. */
body[data-state='none'] .back {
  display: none;
}

/* The notice for a page whose script never ran. It waits four seconds before showing (at once where scripts are off, by the
   <noscript> rule in the page), and the script removes it for good the moment it has run. `visibility`, not opacity: while it
   waits it is not read out either. */
.late {
  visibility: hidden;
  inline-size: calc(100% - 2rem);
  max-inline-size: 32rem;
  margin: 2rem auto;
  animation: late 0s linear 4s forwards;
}

@keyframes late {
  to {
    visibility: visible;
  }
}

html.ready .late {
  display: none;
}

body[data-state='not-found'] .card p + p {
  border-block-start: 1px solid var(--slate-200);
  padding-block-start: 1.25rem;
}

.late p + p {
  border-block-start: 1px solid var(--slate-200);
  padding-block-start: 1.25rem;
}

@media (min-width: 40rem) {
  .top-inner {
    padding-inline: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-state='opening'] .status::before {
    animation: none;
  }
}