/*
 * Ordering, cancellation, withdrawal and confirmation pages.
 *
 * Tokens, type, buttons, navigation and footer come from tokens.css and
 * landing.css, so these pages are the site itself. This file holds only what a
 * form needs on top.
 */

/* ── Page shape ─────────────────────────────────────────────────────────── */

.page {
  padding-block: 30px 70px;
}
[hidden] {
  display: none !important;
}
/* Cancellation and withdrawal are single-column forms; their consent texts are
   running prose, so the column stops at a readable width. */
.page-narrow,
.order {
  max-width: 900px;
  margin-inline: auto;
}
.page-head {
  padding: 26px 0 34px;
}
/* On the order page the head lines up with the form below it. */
.page > .page-head {
  max-width: 1120px;
  margin-inline: auto;
}
.page-head h1 {
  margin: 14px 0 0;
}
.page-lede {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* The order form keeps a fixed measure on wide screens: full-width inputs and
   consent lines become unreadable past this. */
.order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: 24px;
  align-items: start;
  max-width: 1120px;
  margin-inline: auto;
}
.order-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.block {
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: 22px;
  background: var(--bg-card);
  box-shadow:
    0 0 0 1px var(--border-faint),
    var(--shadow-card);
}
.block-head {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
.block-head h2 {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.block-sub {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

.block-n {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
}

/* ── The address field ────────────────────────────────────────────────────
 * The one field on the whole site that is the product rather than a form
 * control, so it is drawn at the size it deserves.
 */

.addr-field {
  display: flex;
  align-items: center;
  margin-top: 18px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.addr-field:focus-within {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 4px var(--tint);
}
.addr-field input {
  flex: 1;
  min-width: 0;
  padding: 15px 4px 15px 17px;
  border: 0;
  outline: 0;
  background: none;
  font-family: var(--font);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.addr-field input::placeholder {
  color: var(--text-muted);
  font-weight: 500;
}
.addr-suffix {
  padding: 15px 17px 15px 0;
  font-family: var(--font);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-muted);
  white-space: nowrap;
}

.state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 13px 0 0;
  min-height: 20px;
  font-size: 13px;
  color: var(--text-muted);
}
.state[data-tone="ok"] {
  color: var(--success);
}
.state[data-tone="bad"] {
  color: var(--danger);
}
.state svg {
  flex: none;
}

/* ── Plain fields ───────────────────────────────────────────────────────── */

.field {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  outline: 0;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.field::placeholder {
  color: var(--text-faint);
}
.field:focus {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 4px var(--tint);
}
.field-spaced {
  margin-top: 18px;
}
.field-label {
  display: block;
  margin: 18px 0 8px;
}
/* "optional" next to a label: quieter than the label, loud enough to be seen. */
.field-opt {
  margin-left: 6px;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field-note {
  margin: 8px 0 0;
  min-height: 17px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.field-note[data-tone="bad"] {
  color: var(--danger);
}
/* A field can also end well, as a valid voucher does. */
.field-note[data-tone="ok"] {
  color: var(--success);
}
.field-group {
  margin-top: 18px;
}
textarea.field {
  resize: vertical;
  min-height: 84px;
  font-family: var(--font);
}

/* ── The picker ───────────────────────────────────────────────────────────
 * Radio buttons, actually. A row of cards that only looks like a choice is a
 * choice a keyboard cannot make and a screen reader cannot announce.
 */

.pick {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 18px;
}
.pick-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-primary);
  background: var(--bg-primary);
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
}
.pick-row:hover {
  border-color: var(--text-faint);
}
.pick-row input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pick-dot {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  flex: none;
  border: 1.5px solid var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}
.pick-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-card);
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pick-row:has(input:checked) {
  border: 1.5px solid var(--text-primary);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.pick-row:has(input:checked) .pick-dot {
  border-color: var(--text-primary);
  background: var(--text-primary);
}
.pick-row:has(input:checked) .pick-dot::after {
  transform: scale(1);
}
.pick-row:has(input:focus-visible) {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}
.pick-body {
  flex: 1;
  min-width: 0;
}
.pick-body b {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.pick-body small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
}
.pick-price {
  flex: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.pick-tag {
  margin-left: 7px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ── Consent ──────────────────────────────────────────────────────────────
 * Never pre-ticked and never styled to look already given. A consent that looks
 * given is not one.
 */

.agree {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-secondary);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
  cursor: pointer;
}
.agree-first {
  margin-top: 8px;
}
.agree:last-of-type {
  border-bottom: 0;
}
.agree input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.agree a {
  text-decoration: underline;
}
.agree-box {
  width: 19px;
  height: 19px;
  border-radius: 6px;
  flex: none;
  margin-top: 1px;
  border: 1.5px solid var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}
.agree-box::after {
  content: "";
  width: 10px;
  height: 5px;
  margin-top: -2px;
  border-left: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.agree:has(input:checked) .agree-box {
  border-color: var(--accent);
  background: var(--accent);
}
.agree:has(input:checked) .agree-box::after {
  transform: rotate(-45deg) scale(1);
}
.agree:has(input:focus-visible) .agree-box {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}
/* A button inside running text that reads as a link. `font: inherit` takes the
   surrounding family, size and leading. */
.linkish {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.linkish:hover {
  text-decoration-thickness: 2px;
}
.linkish:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── The summary ──────────────────────────────────────────────────────────
 * §312j Abs. 2 wants the essentials immediately before the button, and
 * §312j Abs. 3 wants the button itself to say what pressing it does. So the
 * summary is sticky and the button lives inside it.
 */

.order-side {
  position: sticky;
  top: 22px;
}
.sum {
  margin: 16px 0 0;
}
.sum > div {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-secondary);
}
.sum dt {
  flex: none;
  width: 88px;
  font-size: 12px;
  color: var(--text-muted);
}
.sum dd {
  margin: 0;
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
}
.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 0 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.sum-total b {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
/* What the voucher covers, read right next to the total. */
.sum-credit {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border-secondary);
  border-radius: 10px;
  background: var(--bg-tertiary);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-primary);
}
.sum-vat {
  margin: 14px 0 18px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.sum-hint {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}
.sum-hint[data-tone="bad"] {
  color: var(--danger);
}

/* Before launch: the order form is readable, but orders are not taken. */
.co-closed {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  font-weight: 600;
}

/* `.block-sub` has no bottom margin, so a button that follows it brings its own. */
.btn-spaced {
  margin-top: 18px;
}

/* The way back from the confirmation page: set apart from the binding button, so the two are never mistaken. */
.sum-correct {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border-faint);
}

/* A note between form sections. Deliberately not a `.block`: numbered cards are
   steps, and a note styled the same reads as a skipped one. */
.note-inline {
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  font-size: 13.5px;
  line-height: 1.6;
}
.note-inline p {
  margin: 0;
}
.note-inline p + p {
  margin-top: 8px;
}

/* The declaration in the customer's own words (§ 356a Abs. 4 BGB), set apart
   from the explanation around it. */
.note-quote {
  /* The same gap `.block-head` keeps to the first element of a section. */
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
}
.note-quote p {
  margin: 0;
}

.btn-block {
  width: 100%;
  justify-content: center;
}
/* Full-width buttons carry the statutory labels, which run long in some
 * languages ("Commander avec obligation de paiement"). They wrap rather than
 * spill past the pill on a phone. */
.btn-block {
  height: auto;
  min-height: 48px;
  padding-block: 12px;
  white-space: normal;
  text-align: center;
  text-wrap: balance;
  line-height: 1.3;
}
/* Voucher codes are typed, not read: spaced so characters compare one by one. */
.field-code {
  font-family: var(--font-sub);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.field-code::placeholder {
  letter-spacing: 0.08em;
  text-transform: none;
}

.note-box {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  padding: 15px 17px;
  border-radius: 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.note-box svg {
  flex: none;
  margin-top: 3px;
  color: var(--text-muted);
}

/* ── The receipt ──────────────────────────────────────────────────────────
 * §312k Abs. 4 wants the confirmation immediately and in text form. This is
 * the "immediately"; the email is the "text form".
 */

.done {
  text-align: center;
  padding: 46px;
}
.done-mark {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--success-soft);
  color: var(--success);
}
.done h2 {
  margin: 0;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.done-text {
  margin: 14px auto 0;
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}
.receipt {
  margin: 28px auto 0;
  max-width: 440px;
  padding: 22px;
  border-radius: 14px;
  text-align: left;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
}
.receipt dl {
  margin: 14px 0 0;
}
.receipt dt {
  font-family: var(--font-sub);
}
.receipt dd {
  font-family: var(--font-sub);
  font-size: 12.5px;
}
.done-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 26px;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .order-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Not sticky on a narrow screen, where a pinned summary would cover the form.
     It moves to the end, right before the button. */
  .order-side {
    position: static;
  }
}

@media print {
  /* The receipt is the artefact somebody keeps. */
  header,
  footer,
  .done-actions {
    display: none;
  }
  .done {
    padding: 0;
  }
  .receipt {
    border-color: #999;
  }
}

/* ── The monthly / yearly switch ──────────────────────────────────────────
 * The pricing section's control, rebuilt here for the order form.
 */
.plan-switch {
  display: flex;
  align-items: center;
  gap: 14px;
}
.plan-seg {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: var(--bg-selected);
}
.plan-seg > button {
  padding: 8px 18px;
  border-radius: 999px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  transition:
    background-color 0.2s,
    color 0.2s;
}
.plan-seg > button.on {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.plan-save {
  font-family: var(--font-sub);
  font-size: 12px;
  color: var(--text-primary);
}

/* ── The outcome page ─────────────────────────────────────────────────────
 * Replaces the form instead of appearing below it, so nobody submits twice.
 */
.order-done {
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 0 40px;
  text-align: center;
}
.done-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 26px;
  background: var(--success-soft);
  color: var(--success);
}
.done-mark svg {
  width: 26px;
  height: 26px;
}
.order-done h1 {
  margin: 0 0 18px;
}

/* The address is the result of the whole page: large and easy to copy. */
.done-url {
  display: inline-block;
  margin: 0 0 24px;
  padding: 12px 20px;
  border-radius: 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  font-family: var(--font-sub);
  font-size: 17px;
  color: var(--text-primary);
  word-break: break-all;
}
.done-lead {
  margin: 0 0 30px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.done-facts {
  margin: 0 0 26px;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid var(--border-primary);
  text-align: left;
}
.done-facts > div {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-secondary);
}
.done-facts > div:first-child {
  padding-top: 0;
}
.done-facts > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.done-facts dt {
  flex: none;
  width: 128px;
  font-size: 12px;
  color: var(--text-muted);
}
.done-facts dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.done-facts a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.done-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.done-note a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 560px) {
  .done-facts > div {
    flex-direction: column;
    gap: 3px;
  }
  .done-facts dt {
    width: auto;
  }
}

/* Open-source contribution on the order form */
.support-opt .support-price {
  font-weight: 600;
  white-space: nowrap;
}

/*
 * The confirmation page behind the opt-in link: one column, as narrow as the
 * outcome pages it leads to, with the summary in the same card the order page uses.
 */
.confirm-order {
  max-width: 560px;
  margin: 0 auto;
}
.confirm-order .page-head {
  padding-top: 8px;
}

/* ── Checkout ─────────────────────────────────────────────────────────────
 * The order page: a full-width head, the form on the left and a sticky column
 * on the right that shows the address as it will look, the § 312j summary with
 * the button, and what happens after it.
 */

.checkout {
  padding-block: 24px 96px;
}
.co-head {
  padding: 40px 0 44px;
}
.co-title {
  margin: 0;
  font-size: clamp(38px, 5vw, 64px);
}
.co-head .lede {
  max-width: 620px;
}
.co-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.co-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  background: var(--bg-secondary);
  box-shadow: inset 0 0 0 1px var(--border-faint);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}
.co-trust .i {
  width: 15px;
  height: 15px;
  color: var(--success);
}

.co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.co-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.co-step {
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 22px;
  background: var(--bg-card);
  box-shadow:
    0 0 0 1px var(--border-faint),
    var(--shadow-card);
}
.co-step-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.co-step-head > div:first-of-type {
  flex: 1;
  min-width: 0;
}
.co-step-head h2 {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.co-step-head p {
  margin: 5px 0 0;
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.co-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
}

/* The address reads as a real URL bar while it is typed. */
.checkout .addr-field {
  margin-top: 22px;
  border-radius: 16px;
  background: var(--bg-secondary);
}
.checkout .addr-field:focus-within {
  background: var(--bg-card);
}
.addr-scheme {
  padding-left: 20px;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 500;
  color: var(--text-muted);
}
.checkout .addr-field input {
  padding: 19px 2px;
  font-size: clamp(19px, 1.9vw, 26px);
}
.checkout .addr-suffix {
  padding: 19px 20px 19px 0;
  font-size: clamp(19px, 1.9vw, 26px);
}

/* Plans as cards, side by side. */
.co-step-head .plan-seg {
  flex: none;
  align-self: center;
}
/* Label and badge wrap as two whole pieces: when "Annuel 2 mois offerts" does
 * not fit on a phone, the badge drops below the label, centred, instead of
 * breaking inside itself. */
.plan-seg > button:has(.plan-save) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px 6px;
}
.plan-seg .plan-save {
  padding: 2px 7px;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success-text);
  font-size: 11px;
  font-weight: 600;
}
.checkout .pick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.checkout .pick-row {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: var(--bg-card);
}
.checkout .pick-row:has(input:checked) {
  border-color: var(--text-primary);
  box-shadow:
    0 0 0 1px var(--text-primary),
    var(--shadow-md);
  background: var(--bg-card);
}
.checkout .pick-hot {
  background: linear-gradient(var(--tint), var(--tint)), var(--bg-card);
}
.checkout .pick-hot:has(input:checked) {
  background: linear-gradient(var(--tint), var(--tint)), var(--bg-card);
}
.pick-flag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-sub);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pick-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pick-top b {
  font-size: 17px;
  font-weight: 700;
}
.pick-for {
  margin-top: 3px;
  min-height: 36px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted);
}
.pick-amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 14px;
}
.checkout .pick-price {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.pick-amount small {
  font-size: 12.5px;
  color: var(--text-muted);
}
.pick-feats {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-secondary);
}
.feat {
  position: relative;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.feat::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 9px;
  height: 5px;
  border-left: 1.75px solid var(--success);
  border-bottom: 1.75px solid var(--success);
  transform: rotate(-45deg);
}
.feat-off {
  color: var(--text-muted);
}
.feat-off::before {
  top: 8px;
  height: 0;
  border-left: 0;
  border-color: var(--text-faint);
  transform: none;
}

.co-support {
  margin-top: 16px;
  padding: 14px 16px;
}
.co-support .support-text b {
  font-size: 14px;
}
.co-support .support-text small {
  font-family: var(--font);
  font-size: 12.5px;
  white-space: normal;
}
.co-support .support-price {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.co-support.on .support-text small {
  color: var(--text-muted);
}
.co-support.on .support-price {
  color: #e11d48;
}

.co-fields {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px 16px;
  margin-top: 22px;
}
.co-field {
  grid-column: span 2;
  min-width: 0;
}
.co-field.co-wide {
  grid-column: span 3;
}
.co-field.co-full {
  grid-column: 1 / -1;
}
.co-field .field-label {
  display: block;
  margin-bottom: 7px;
}
.co-field .field-note {
  min-height: 18px;
  margin-top: 5px;
}
select.field {
  appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.co-business {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.co-business input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.co-business:has(input:checked) .switch {
  background: var(--accent);
}
.co-business:has(input:checked) .switch::after {
  transform: translateX(14px);
}
.co-business:has(input:focus-visible) .switch {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}
.co-voucher {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border-secondary);
}
.co-voucher .field-label {
  display: block;
  margin-bottom: 7px;
}
.co-agrees {
  margin-top: 18px;
  padding-top: 4px;
  border-top: 1px solid var(--border-secondary);
}
.co-agrees .agree {
  padding-bottom: 6px;
  font-size: 14px;
  color: var(--text-primary);
}
.agree-info {
  margin: 0 0 0 32px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.agree-info a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── When the instance starts ──────────────────────────────────────────────
 * Two cards, one of which must be chosen; neither is preselected. The legal
 * sentences belong to "Sofort starten" and are part of its label, so choosing
 * the card is giving them.
 */
.start-pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.start-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid var(--border-primary);
  background: var(--bg-card);
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.start-opt:hover {
  border-color: var(--text-faint);
}
.start-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.start-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
}
.start-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.start-legal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-primary);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}
.start-opt:has(input:checked) {
  border-color: var(--text-primary);
  box-shadow:
    0 0 0 1px var(--text-primary),
    var(--shadow-md);
}
.start-opt:has(input:checked) .pick-dot {
  border-color: var(--text-primary);
  background: var(--text-primary);
}
.start-opt:has(input:checked) .pick-dot::after {
  transform: scale(1);
}
.start-opt:has(input:focus-visible) {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .start-pick {
    grid-template-columns: 1fr;
  }
}

/* ── Something is missing ──────────────────────────────────────────────────
 * Set by order.js only after the button was pressed, and cleared as soon as
 * the field is right.
 */
.field[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px var(--danger-soft);
}
.start-pick[aria-invalid="true"] .start-opt {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}
.agree[aria-invalid="true"] .agree-box {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}
.co-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}
.sum-hint[data-tone="bad"] {
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The column beside the form. */
.co-side {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.co-preview {
  overflow: hidden;
  border-radius: 18px;
  background: var(--bg-card);
  box-shadow:
    0 0 0 1px var(--border-faint),
    var(--shadow-lg);
}
.co-preview-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-faint);
  background: var(--bg-secondary);
}
.co-dots {
  display: flex;
  gap: 5px;
}
.co-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-primary);
}
.co-url {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--bg-card);
  font-size: 12.5px;
  color: var(--text-muted);
}
.co-url > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-url .i {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--success);
}
.co-url b {
  color: var(--text-primary);
  font-weight: 600;
}
.co-preview picture {
  display: block;
}
.co-preview img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
}

.co-card {
  padding: 22px 24px 20px;
  border-radius: 22px;
  background: var(--bg-card);
  box-shadow:
    0 0 0 1px var(--border-faint),
    var(--shadow-card);
}
.co-card .sum {
  margin: 0;
}
.co-card .sum > div:first-child {
  padding-top: 0;
}
.co-card .sum dt {
  width: 112px;
}
.co-card .sum-total b {
  font-size: 30px;
  font-weight: 700;
}
.co-submit {
  padding-block: 15px;
  font-size: 16px;
}

.co-next {
  display: grid;
  gap: 14px;
  margin: 4px 0 0;
  padding: 0 6px;
  list-style: none;
}
.co-next li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.co-next-i {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--bg-secondary);
  box-shadow: inset 0 0 0 1px var(--border-faint);
}
.co-next-i .i {
  width: 15px;
  height: 15px;
  color: var(--text-secondary);
}
.co-next b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
}
.co-next small {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

.checkout .note-box .i {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--text-muted);
}
.sprite {
  position: absolute;
}

@media (max-width: 1360px) {
  .checkout .pick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }
}
@media (max-width: 1100px) {
  .co-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .co-side {
    position: static;
  }
  .co-preview {
    display: none;
  }
}
@media (max-width: 680px) {
  .co-head {
    padding: 20px 0 28px;
  }
  .co-step-head {
    flex-wrap: wrap;
  }
  .co-step-head .plan-seg {
    width: 100%;
  }
  .co-step-head .plan-seg > button {
    flex: 1;
  }
  .co-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .co-field,
  .co-field.co-wide {
    grid-column: 1 / -1;
  }
  .co-support {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .co-support .support-text {
    flex-basis: calc(100% - 50px);
  }
  .co-support .support-price {
    order: 3;
    padding-left: 38px;
  }
  .addr-scheme {
    display: none;
  }
  .checkout .addr-field input {
    padding-left: 16px;
  }
}
@media (max-width: 460px) {
  .checkout .pick {
    grid-template-columns: minmax(0, 1fr);
  }
  .pick-for {
    min-height: 0;
  }
}

/* Short pages keep the footer at the bottom of the window instead of ending mid-screen. */
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body > main {
  flex: 1 0 auto;
  width: 100%;
}

/*
 * The build of a just confirmed order (build-progress.js): a bar and three steps.
 * Green when the instance runs, red when the build failed.
 */
.build {
  margin: 0 0 28px;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid var(--border-primary);
  text-align: left;
}
.build-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--bg-tertiary);
  overflow: hidden;
  margin: 0 0 18px;
}
.build-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--text-primary);
  transition: width 0.8s ease;
}
.build[data-stage="ready"] .build-bar span {
  background: var(--success);
}
.build[data-stage="failed"] .build-bar span {
  background: var(--danger);
}
.build-steps {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.build-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text-muted);
}
.build-steps li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-primary);
  box-sizing: border-box;
}
.build-steps li[data-state="done"] {
  color: var(--text-primary);
}
.build-steps li[data-state="done"]::before {
  border-color: var(--success);
  background:
    var(--success)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E")
    center / 13px no-repeat;
}
.build-steps li[data-state="active"] {
  color: var(--text-primary);
  font-weight: 500;
}
.build-steps li[data-state="active"]::before {
  border-color: var(--text-primary);
  border-right-color: transparent;
  animation: build-spin 0.9s linear infinite;
}
.build-steps li[data-state="failed"] {
  color: var(--danger);
  font-weight: 500;
}
.build-steps li[data-state="failed"]::before {
  border-color: var(--danger);
  background:
    var(--danger)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}
.build-note {
  margin: 0 0 4px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.build-note-failed {
  color: var(--danger);
}
[data-build-note="ready"] .btn {
  margin-top: 14px;
}
.done-url a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@keyframes build-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .build-steps li[data-state="active"]::before {
    animation: none;
  }
  .build-bar span {
    transition: none;
  }
}

/*
 * An operator's setup page (operator-invite.html): three numbered steps on one
 * form, the TOTP key large and grouped, then the WireGuard file to download.
 */
.op-setup {
  max-width: 600px;
  margin: 0 auto;
  padding: 8px 0 48px;
}
.op-setup h1 {
  margin: 0 0 14px;
}
.op-steps {
  list-style: none;
  counter-reset: op;
  margin: 26px 0 22px;
  padding: 0;
  display: grid;
  gap: 16px;
}
.op-steps > li {
  counter-increment: op;
  position: relative;
  padding: 20px 22px 20px 64px;
  border: 1px solid var(--border-primary);
  border-radius: 16px;
}
.op-steps > li::before {
  content: counter(op);
  position: absolute;
  left: 20px;
  top: 19px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--text-primary);
  color: var(--bg-primary);
  font-weight: 600;
  font-size: 14px;
}
.op-steps h2 {
  margin: 2px 0 10px;
  font-size: 17px;
}
.op-steps p {
  margin: 0 0 12px;
  color: var(--text-muted);
  line-height: 1.55;
  font-size: 14.5px;
}
.op-steps .field {
  width: 100%;
  margin-bottom: 12px;
}
.op-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--text-primary) !important;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  word-break: break-all;
  user-select: all;
}
.op-error {
  margin: 0 0 16px;
  color: var(--danger);
  font-size: 14.5px;
}
.op-after > li {
  color: var(--text-secondary);
  line-height: 1.55;
}

/* On the cancel and withdraw forms: a subscription bought in the app is ended and refunded in the store. */
.store-note {
  margin: 0 0 22px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.store-note p {
  margin: 0;
}
.store-note strong {
  color: var(--text-primary);
}