/* Checkout, account and legal pages: checkout.html, thanks.html, withdraw.html, cancel.html, setup.html, the creator
   pages (affiliates.html, apply.html) and the legal texts (impressum, terms, terms.de, withdrawal, sales-policy,
   privacy, affiliate-terms). Loaded after site.css and page.css, which supply the bar, the phone menu, the footer,
   the tokens and the font (Barlow), so these pages wear the same frame as the rest of the site.

   Pure black and white, like the rest of the site: an error is picked out by inverting it, never by colour.
   Labels the law fixes word for word (the order, withdrawal and cancel buttons, the footer's first two links) are
   never uppercased or otherwise restyled, so the words on screen are exactly the words required. */

:root { --dim: rgba(255, 255, 255, .62); --line: rgba(255, 255, 255, .14); }

/* The content starts under the fixed bar; the widths are those of the text column, whatever the side margin. */
.page { max-width: calc(672px + 2 * var(--edge)); margin: 0 auto; padding: calc(var(--header) + clamp(36px, 5vw, 72px)) var(--edge) 0; }
.page--doc { max-width: calc(772px + 2 * var(--edge)); }
.page__title { margin: 0; font-size: clamp(34px, 5vw, 72px); line-height: .96; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; }
.page__lead { margin: 18px 0 0; max-width: 60ch; color: rgba(255, 255, 255, .78); font-size: 16px; line-height: 1.55; }
.page__lead + .page__lead { margin-top: 10px; }
.page__lead--dim { color: var(--dim); }
/* A line pointing to the account page (accounts-copy §4a), shown only while accounts are on (assets/acct.js). */
.acct-line { margin: 10px 0 0; max-width: 60ch; font-size: 15px; line-height: 1.55; color: var(--dim); }
.foot--page { padding-top: clamp(72px, 10vw, 128px); }

button:focus-visible, a:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.link, .fine a, .under a, .doc a, .steps a, .check label a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link:hover, .fine a:hover, .under a:hover, .doc a:hover, .steps a:hover, .check label a:hover { text-decoration-thickness: 2px; }

/* The start-of-order notice: payment methods and blocked countries, before any field. */
.notice { margin: 22px 0 0; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .82); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 30px; margin-top: clamp(28px, 3.4vw, 40px); }
.form[hidden] { display: none; }
.group { min-width: 0; margin: 0; padding: 0; border: 0; }
.group > legend, .label { display: block; margin: 0 0 10px; padding: 0; font-size: 14px; font-weight: 500; letter-spacing: .01em; color: var(--paper); }
.label--small { margin-bottom: 6px; font-size: 12px; font-weight: 400; color: var(--dim); }
.group > * + * { margin-top: 18px; }
.group > legend + * { margin-top: 0; }
.help { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--dim); }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dob { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; }

.input, .select, .textarea {
  display: block; width: 100%; margin: 0; padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 12px; background: #000; color: var(--paper);
  font: inherit; font-size: 16px; line-height: 1.3; transition: border-color .2s;
}
.input:hover, .select:hover, .textarea:hover { border-color: rgba(255, 255, 255, .55); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; border-color: var(--paper); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper); }
.input::placeholder, .textarea::placeholder { color: rgba(255, 255, 255, .35); }
.textarea { min-height: 112px; resize: vertical; line-height: 1.45; }
.select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.select option { background: #000; color: #fff; }
.input[type="date"] { color-scheme: dark; }
.input:disabled { opacity: .4; cursor: not-allowed; }

/* Radio buttons and checkboxes, drawn in black and white so every browser shows the same thing. */
.tick {
  -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0;
  border: 1.5px solid rgba(255, 255, 255, .75); background: #000; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.tick[type="radio"] { border-radius: 50%; }
.tick[type="radio"]:checked { border-color: var(--paper); background: radial-gradient(circle, #fff 0 4.5px, transparent 5.5px); }
.tick[type="checkbox"] { border-radius: 5px; }
.tick[type="checkbox"]:checked {
  border-color: var(--paper);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.tick:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.tick[aria-invalid="true"] { border-color: var(--paper); box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--paper); }

/* Errors: inverted, white with black text. */
.err { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--paper); color: #000; font-size: 14px; line-height: 1.45; }
.err[hidden], .opt[hidden], .check[hidden], .note18[hidden], [data-us][hidden] { display: none; }
.err--top { margin: 0; }

/* ---------- Checkout ---------- */
/* The switch on checkout's <main>: only data-checkout="open" shows the form. Anything else, a typo included, shows
   the closed notice instead, even without JavaScript. */
main:not([data-checkout="open"]) .checkout-open { display: none !important; }
main[data-checkout="open"] .checkout-closed { display: none; }
.plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.plan-head__name { margin: 0; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.05; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }
.seg-pick { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 99px; }
.seg-pick label { position: relative; display: block; }
.seg-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-pick span { display: block; padding: 9px 16px; border-radius: 99px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .75); transition: background-color .25s var(--ease), color .25s var(--ease); }
.seg-pick input:checked + span { background: var(--paper); color: #000; }
.seg-pick input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 2px; }

.opts { display: grid; gap: 10px; }
.opt { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.opt:hover { border-color: rgba(255, 255, 255, .55); }
.opt.is-on { border-color: var(--paper); background: rgba(255, 255, 255, .06); }
.opt__text { font-size: 15px; line-height: 1.45; }
.opt__body { display: grid; gap: 4px; }
.opt__end { font-size: 13px; line-height: 1.45; color: var(--dim); }   /* checkout: "Offer ends …" under the monthly option */

.note18 { margin: 0; padding: 14px 16px; border: 1px dashed rgba(255, 255, 255, .6); border-radius: 14px; font-size: 14px; line-height: 1.5; }

/* "How to pay" (card or crypto) is only on the page when checkout's data-crypto switch is on. The note shown when
   crypto is picked is drawn like the under-18 note. */
.pay-note { margin: 12px 0 0; padding: 14px 16px; border: 1px dashed rgba(255, 255, 255, .6); border-radius: 14px; font-size: 14px; line-height: 1.5; }
.pay-note[hidden] { display: none; }

.checks { display: grid; gap: 18px; }
.check { display: flex; align-items: flex-start; gap: 14px; }
.check label { cursor: pointer; font-size: 15px; line-height: 1.5; }
.check__body { min-width: 0; }
.under { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--dim); }

/* The key-terms box sits directly above the order button, with nothing between them. */
.terms-box { padding: 20px 22px; border: 1.5px solid var(--paper); border-radius: 16px; }
.terms-box__title { margin: 0 0 12px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.terms-box ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.terms-box li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.terms-box li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 1.5px; background: currentColor; }
.terms-box b { color: var(--paper); font-weight: 600; }
.terms-box a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.order-wrap { margin-top: 0; }
.order {
  display: block; width: 100%; margin-top: 14px; padding: 18px 22px; border-radius: 99px;
  background: var(--paper); color: #000; font-size: 17px; font-weight: 600; line-height: 1.2; text-align: center;
  transition: background-color .2s;
}
.order:hover { background: rgba(255, 255, 255, .86); }
.order:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.order[aria-busy="true"] { opacity: .55; cursor: progress; }
.fine { margin: 14px 0 0; font-size: 13px; line-height: 1.6; letter-spacing: 0; color: var(--dim); }

/* ---------- Thanks ---------- */
.key { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 10px; }
.key__value {
  flex: 1 1 300px; min-width: 0; margin: 0; padding: 16px 18px; border: 1.5px solid var(--paper); border-radius: 12px;
  font: 500 clamp(16px, 2.3vw, 21px)/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .03em; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all;
}
.key .btn { min-width: 112px; padding-inline: 26px; }
.key__value--lines { flex-basis: 100%; font-size: 14px; line-height: 1.6; letter-spacing: 0; white-space: pre-wrap; }   /* two long lines: the button goes under */
.state[hidden] { display: none; }
.steps { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 10px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.steps li::marker { color: var(--dim); font-variant-numeric: tabular-nums; }
.block { margin-top: clamp(28px, 3.4vw, 40px); }
.block__h { margin: 0 0 10px; font-size: 14px; font-weight: 500; letter-spacing: .01em; }
.small { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--dim); }
.line { margin: 14px 0 0; padding: 0; font-size: 15px; line-height: 1.55; text-align: start; }   /* not page.css's big line */

/* ---------- Withdraw and cancel ---------- */
.statement { margin: 0; padding: 16px 18px; border: 1.5px solid var(--paper); border-radius: 14px; font-size: 15px; line-height: 1.5; }
.choice { display: grid; gap: 10px; }
.choice .opt { align-items: center; }
.or { margin: 22px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.or + .row { margin-top: 12px; }
.when-date { margin: 10px 0 0 34px; max-width: 240px; }
.summary { margin: 14px 0 0; border-top: 1px solid var(--line); }
.summary div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.summary dt { color: var(--dim); font-size: 13px; line-height: 1.5; }
.summary dd { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ends { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.ends li { padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 12px; font-size: 15px; line-height: 1.5; }
.ends small { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }

/* ---------- Legal texts, built from SwitchPayment/legal/*.md by tools/legal-pages.mjs ---------- */
.doc { color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 1.62; overflow-wrap: break-word; }
.doc h1 { margin: 0; color: var(--paper); font-size: clamp(32px, 4.6vw, 64px); line-height: .98; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; }
/* German titles carry long compounds ("Verkaufsbedingungen"): a size that fits them on a phone, and hyphens where the
   browser can place them. */
html[lang="de"] .doc h1 { font-size: min(max(24px, 7.2vw), clamp(32px, 4.6vw, 64px)); -webkit-hyphens: auto; hyphens: auto; }
.doc h2 { margin: 54px 0 14px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--paper); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; font-weight: 600; letter-spacing: .01em; }
.doc h3 { margin: 32px 0 10px; color: var(--paper); font-size: 18px; line-height: 1.3; font-weight: 600; }
.doc section > h2:first-child, .doc hr + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.doc section[id] { scroll-margin-top: calc(var(--header) + 16px); }
.doc p { margin: 12px 0; }
.doc h1 + p { margin-top: 18px; color: var(--dim); }
.doc ul, .doc ol { margin: 12px 0; padding-left: 22px; }
.doc ul { list-style: none; padding-left: 20px; }
.doc ul > li { position: relative; }
.doc ul > li::before { content: ""; position: absolute; left: -18px; top: .8em; width: 8px; height: 1.5px; background: currentColor; opacity: .7; }
.doc li { margin: 6px 0; }
.doc li > ul, .doc li > ol { margin: 6px 0 8px; }
.doc ol > li::marker { color: var(--dim); }
.doc strong { color: var(--paper); font-weight: 600; }
.doc hr { margin: 48px 0; border: 0; border-top: 1px solid var(--line); }
.doc blockquote { margin: 20px 0; padding: 4px 22px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 16px; }
.doc code { font: .9em ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.doc .table { margin: 18px 0; overflow-x: auto; }
.doc table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.doc th, .doc td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc th { color: var(--paper); font-weight: 500; border-bottom-color: rgba(255, 255, 255, .45); }
.doc .notice { margin: 0 0 32px; }

/* An owner placeholder, such as {{SUPPORT_EMAIL}}, still to be filled in: boxed so it's easy to spot. */
.ph { padding: 0 .3em; border: 1px dashed currentColor; border-radius: 4px; font: .86em/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; overflow-wrap: anywhere; }

@media (max-width: 599px) {
  /* Legal tables stack on a phone: each row becomes a block, each cell shows its column heading. */
  .doc table { min-width: 0; }
  .doc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .doc tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .doc tbody td { display: block; padding: 3px 0; border: 0; }
  .doc tbody td::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 12px; color: var(--dim); }
  .doc tbody td:first-child { color: var(--paper); }
  .doc tbody td:first-child::before { display: none; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .summary div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .plan-head { align-items: flex-start; flex-direction: column; }
  .terms-box { padding: 18px 16px; }
  .when-date { margin-left: 0; }
}

/* Printing or saving a confirmation as PDF: just the page's content, black on white. */
@media print {
  .bar, .sheet, .sbar, .soon-tip, .foot, .no-print, .actions { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .page { max-width: none; padding: 0; }
  .page *, .doc * { color: #000 !important; background: transparent !important; border-color: #000 !important; box-shadow: none !important; }
}