/* ============================================================================
   checkout-hp.css — DesignerBox checkout / upgrade surface (2026-07-22)

   Re-skins the legacy signuppro.css checkout family: it owns the LAYOUT of the
   checkout surface — the column split, the measures, the shapes, the spacing.
   NO gradients, NO glows (project rule).

   ⚠ THE `--ck-*` TOKEN BLOCK BELOW IS DEAD COLOUR. Do not read it as the
   palette and do not "fix" it in place. It was written 2026-07-22 against the
   then-current DARK auth surface. The site flipped to Soft Studio on
   2026-08-08 (soft-studio.css) and /login followed (signin.css:1075), but this
   file loads AFTER soft-studio.css, so the token remap could not reach it. The
   live values are re-pointed from the Soft Studio block at the bottom of
   signuppro.css (`html body.db-checkout`, ~line 5503), which outranks every
   selector here on specificity, so document order does not matter.

   So: change COLOUR in signuppro.css, change LAYOUT here. The two halves of
   the funnel are body.db-login (signin.css:1075) and body.db-checkout — keep
   them in step, and keep both on the Soft Studio contract: white canvas,
   ink #141414, line #E7E4DF, ink PILL as the action, #FFD3F6 pink as a flat
   fill that always carries ink text, never white text and never pink text.

   Loaded LAST (raw <link>, outside usemin) by
   frontend/common/frontend_signup_common_style.pug, which is included ONLY by
   the 6 checkout templates:
     backend/account/backend_upgrade[_iframe].pug
     backend/account/backend_account_update_card_details.pug
     frontend/frontend_signup_paid[_iframe].pug
     frontend/frontend_signup_free.pug

   Everything is scoped under body.db-checkout so nothing can leak. Markup and
   JS hooks are untouched — this file only restyles existing classes/ids.
   ========================================================================== */

.db-checkout {
  /* ── mirrors body.db-login (signin.css) ── */
  --ck-page: #08080a;        /* --db-bg     */
  --ck-panel: #0c0c0e;       /* --db-panel  */
  --ck-surface: #141416;     /* --db-surface */
  --ck-surface-2: #1b1b1e;   /* --db-surface-hover */
  --ck-line: rgba(255, 255, 255, 0.09);        /* --db-border */
  --ck-line-strong: rgba(255, 255, 255, 0.18); /* --db-border-strong */
  --ck-ink: #f4f4f6;         /* --db-text */
  --ck-ink-2: #9a9aa6;       /* --db-text-muted */
  --ck-ink-3: rgba(244, 244, 246, 0.55);
  --ck-accent: #f71ec7;      /* --db-accent */
  --ck-accent-ink: #ff3ad6;  /* --db-accent-hover — links read brighter on dark */
  --ck-danger: #ff6b6b;      /* #d92d20 fails contrast on #141416 */
  --ck-r: 10px;              /* --db-radius */
  --ck-r-lg: 16px;
  --ck-gap: 14px;
  --ck-edge: clamp(20px, 5vw, 64px);

  background: var(--ck-page) !important;
  color: var(--ck-ink);
  font-family: var(--font-clash);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* the legacy chain paints html/body white on some of these routes */
html:has(body.db-checkout) { background: var(--ck-page, #08080a); }

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

.db-checkout ::selection { background: var(--ck-accent); color: #fff; }

/* one typeface across the whole surface — the legacy chain still had Inter and
   Helvetica Neue on the price and copy blocks */
.db-checkout h1,
.db-checkout h2,
.db-checkout h3,
.db-checkout h4,
.db-checkout h5,
.db-checkout p,
.db-checkout li,
.db-checkout span,
.db-checkout label,
.db-checkout button,
.db-checkout input,
.db-checkout select,
.db-checkout textarea { font-family: var(--font-clash); }

.db-checkout h1,
.db-checkout h2,
.db-checkout h3,
.db-checkout h4 { color: var(--ck-ink); letter-spacing: -0.02em; text-shadow: none; }

/* the legacy chain leaves float-clearing divs and <br> everywhere; the new
   layout is flex/grid so they only add phantom rows */
.db-checkout #signupProContainer .clearfix,
.db-checkout form#signupAccount > br,
.db-checkout form#signupPro > br,
.db-checkout form#updateBilling > br { display: none !important; }

/* ------------------------------------------------------------------ shell -- */
.db-checkout .pageElement,
.db-checkout #signupProContainer.pricing_page {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: var(--ck-page);
}

.db-checkout #signupProContainer.pricing_page > .container {
  width: 100%;
  max-width: none;
  padding-inline: var(--ck-edge);
  margin: 0 auto;
}

/* bootstrap-2 .row clears with ::before/::after — as grid children they would
   occupy real cells and push the columns out of place */
.db-checkout .row-custom5::before,
.db-checkout .row-custom5::after,
.db-checkout form#signupAccount::before,
.db-checkout form#signupAccount::after,
.db-checkout form#signupPro::before,
.db-checkout form#signupPro::after,
.db-checkout form#updateBilling::before,
.db-checkout form#updateBilling::after,
.db-checkout .businessContainer::before,
.db-checkout .businessContainer::after { content: none !important; display: none !important; }

.db-checkout .row-custom5 {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 72px);
  align-items: start;
  max-width: 1160px;
  margin: 0 auto;
  padding-block: clamp(32px, 5vw, 72px);
}

/* neutralise the bootstrap-2 float grid inside our scope */
.db-checkout .row-custom5 > .span,
.db-checkout .span7,
.db-checkout .signupProContainer,
.db-checkout .left-container-price,
.db-checkout .priceContainer {
  width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
  display: block;
}

/* ---------------------------------------------------------- order summary -- */
.db-checkout .left-container-price { position: sticky; top: 32px; }

.db-checkout .container-left-overview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 0;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.db-checkout .container-left-overview .link-default a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: -8px;
  border-radius: var(--ck-r);
  color: var(--ck-ink-2);
  border-bottom: 0;
  transition: background 0.18s ease, color 0.18s ease;
}
.db-checkout .container-left-overview .link-default a:hover {
  background: var(--ck-surface-2);
  color: var(--ck-ink);
}
.db-checkout .link-default svg { width: 26px; height: 26px; }

.db-checkout .pricing_page .container-div img,
.db-checkout .left-container-price .container-div img {
  width: auto !important;
  max-width: 190px;
  height: auto;
  margin: 0 !important;
}

.db-checkout .register__right,
.db-checkout .register__right_top {
  min-height: 0;
  padding: 0 !important;
  gap: 0;
  background: transparent;
  box-shadow: none;
}

/* price */
.db-checkout .price-heading {
  display: block;
  font-family: var(--font-clash) !important;
  font-size: clamp(2.4rem, 4vw, 3.25rem) !important;
  font-weight: 700 !important;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ck-ink) !important;
  margin-bottom: 8px !important;
}
.db-checkout .price-heading.green { color: var(--ck-ink) !important; }

.db-checkout .price-heading2,
.db-checkout .price-heading .small-grey {
  font-family: var(--font-clash) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ck-ink-3);
}

/* order lines */
.db-checkout .priceContainer { font-family: var(--font-clash) !important; }
.db-checkout .order-items { margin: clamp(24px, 3vw, 36px) 0 0 !important; padding: 0; }
.db-checkout .priceContainer ul li,
.db-checkout .order-item { font-size: 14px; }

.db-checkout .order-flex-item { padding: 14px 0; }
/* the mixin emits a trailing row whose only content is commented out — it
   reserved ~48px of dead space. Rows the controller injects (team members,
   proration) all carry .normal-black, so they are unaffected. */
.db-checkout .order-items > li.order-item:not(:has(.normal-black)) { display: none; }
.db-checkout .order-item.border-bottom { border-bottom: 1px solid var(--ck-line); }
.db-checkout .order-item.total-amount-container .order-flex-item { padding-top: 16px; }

.db-checkout .normal-black {
  font-family: var(--font-clash);
  font-size: 14px;
  font-weight: 600;
  color: var(--ck-ink);
}
.db-checkout .small-grey {
  font-family: var(--font-clash);
  font-size: 13px;
  font-weight: 500;
  color: var(--ck-ink-3);
}
.db-checkout .order-item.total-amount-container .normal-black { font-size: 15px; font-weight: 700; }
.db-checkout .total-amount-value { font-size: 15px; }

/* --------------------------------------------------------------- headline -- */
.db-checkout .h1-container { margin: 0 0 clamp(20px, 2.6vw, 28px); }
.db-checkout .h1-container h1 {
  font-family: var(--font-clash);
  font-size: clamp(1.65rem, 2.6vw, 2.15rem) !important;
  line-height: 1.1 !important;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--ck-ink);
  margin: 0;
  padding: 0 !important;
  text-wrap: balance;
}
.db-checkout .h1-container .h1-sub {
  display: block;
  margin: 10px 0 0;
  max-width: 56ch;
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ck-ink-2);
}

/* ------------------------------------------------------------- form card --- */
.db-checkout form#signupAccount,
.db-checkout form#signupPro,
.db-checkout form#updateBilling {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ck-gap) 16px;
  width: 100%;
  margin: 0 0 20px !important;
  padding: clamp(22px, 2.6vw, 34px) !important;
  background: var(--ck-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-r-lg) !important;
  box-shadow: none !important;
}

/* full-bleed rows inside the card */
.db-checkout form#signupAccount > *,
.db-checkout form#signupPro > *,
.db-checkout form#updateBilling > * { flex: 0 0 100%; max-width: 100%; min-width: 0; }

/* …except the paired text fields, which run 2-up (id-level specificity is
   required to beat the full-bleed rule above) */
.db-checkout form#signupAccount > .input-container,
.db-checkout form#signupPro > .input-container,
.db-checkout form#updateBilling > .input-container,
.db-checkout form#signupAccount > .chosen-container,
.db-checkout form#signupPro > .chosen-container,
.db-checkout form#updateBilling > .chosen-container,
.db-checkout form#signupAccount > select.input-large2,
.db-checkout form#signupPro > select.input-large2,
.db-checkout form#updateBilling > select.input-large2 {
  flex: 1 1 calc(50% - 8px);
  max-width: calc(50% - 8px);
}

/* empty validation slots must not reserve space */
.db-checkout .payment-errors:empty,
.db-checkout #card-errors:empty,
.db-checkout .redColor:empty { display: none !important; }

/* Section headings own a full row. `flex: 1 1 auto` let a heading share its row
   with whatever came next, so "EMAIL AND PASSWORD" sat beside the Email field
   and "CARD DETAILS" beside the Password field — the labels described the wrong
   inputs. The card marks follow on their own row, right-aligned under the
   CARD DETAILS heading they belong to. */
.db-checkout form#signupAccount > h3.whiteheader,
.db-checkout form#signupPro > h3.whiteheader,
.db-checkout form#updateBilling > h3.whiteheader {
  flex: 0 0 100%;
  max-width: 100%;
}
.db-checkout form#signupAccount > .cards-container,
.db-checkout form#signupPro > .cards-container,
.db-checkout form#updateBilling > .cards-container {
  flex: 0 0 100%;
  max-width: 100%;
  justify-content: flex-end;
  margin-top: -8px;
}
.db-checkout .cards-container { flex: 0 0 100%; }
.db-checkout .radioContainer { flex: 0 0 100%; margin-left: 0; }

.db-checkout h3.whiteheader {
  font-family: var(--font-clash) !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ck-ink-3);
  margin: 0 !important;
  padding: 0 !important;
  float: none;
}
.db-checkout form > h3.whiteheader:not(:first-child) { margin-top: 10px !important; }

.db-checkout .requiredFields { color: var(--ck-ink-3); letter-spacing: 0; text-transform: none; }

.db-checkout .container-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}

/* card brand marks — flat, no drop shadow */
.db-checkout .cards-container {
  display: inline-flex;
  gap: 6px;
  width: auto;
  padding-top: 0;
  margin-left: auto;
}
.db-checkout img.cards {
  box-shadow: none;
  border: 1px solid var(--ck-line);
  border-radius: 4px;
  background: #fff; /* card brand marks are printed on white by the issuers */
  margin-right: 0;
  opacity: 0.9;
}

/* ------------------------------------------------------------ card input --- */
.db-checkout .cardContainerNew { width: 100% !important; }
.db-checkout #card-element {
  padding: 14px 14px;
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-r);
  transition: border-color 0.18s ease;
}
.db-checkout #card-element.StripeElement--focus { border-color: var(--ck-accent); }
.db-checkout #card-element.StripeElement--invalid { border-color: var(--ck-danger); }

.db-checkout #card-errors,
.db-checkout .payment-errors {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ck-danger);
  text-shadow: none;
}
.db-checkout #card-errors:not(:empty) { margin-top: 8px; }

.db-checkout .textDetails {
  float: none;
  top: 0;
  display: block;
  margin-top: 10px;
  padding-left: 0;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ck-ink-3);
}

/* existing-card block (upgrade only) */
.db-checkout .card-existing {
  width: 100%;
  padding: 18px;
  background: var(--ck-surface-2);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-r);
}
.db-checkout .card-existing h3 { color: var(--ck-ink); font-size: 15px; font-weight: 650; margin: 0 0 6px; }
.db-checkout .payment-description { font-size: 14px; color: var(--ck-ink-2); }

/* ----------------------------------------------------------------- fields -- */
.db-checkout .input-container {
  position: relative;
  flex: 1 1 calc(50% - 8px);
  max-width: calc(50% - 8px);
  float: none;
  margin: 0;
}
.db-checkout .input-container.hidden { display: none; }
.db-checkout .businessContainer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ck-gap) 16px;
  width: 100% !important;
  float: none;
}

.db-checkout .inputImage { display: none !important; }

.db-checkout .signupPro select,
.db-checkout select,
.db-checkout textarea,
.db-checkout input[type='text'],
.db-checkout input[type='password'],
.db-checkout input[type='email'],
.db-checkout input[type='tel'],
.db-checkout input[type='number'],
.db-checkout .input-large,
.db-checkout .input-large2 {
  width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  font-family: var(--font-clash) !important;
  font-size: 15px !important;
  line-height: 46px;
  color: var(--ck-ink) !important;
  background: var(--ck-surface);
  border: 1px solid var(--ck-line) !important;
  border-radius: var(--ck-r) !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease;
}
.db-checkout select { line-height: normal; }

.db-checkout input::placeholder,
.db-checkout textarea::placeholder { color: var(--ck-ink-3); opacity: 1; }

.db-checkout input:hover,
.db-checkout select:hover { border-color: var(--ck-line-strong) !important; }

.db-checkout input:focus,
.db-checkout select:focus,
.db-checkout textarea:focus {
  border-color: var(--ck-accent) !important;
  outline: 2px solid var(--ck-accent);
  outline-offset: -2px;
  box-shadow: none !important;
}

.db-checkout .redInputBorder { border-color: var(--ck-danger) !important; }
/* .hide is toggled by the validators — never override it into visibility */
.db-checkout .input-container .redColor:not(.hide) {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ck-danger);
  text-shadow: none;
}

/* country select (chosen.js swaps the native select for .chosen-container) */
.db-checkout .chosen-container {
  flex: 1 1 calc(50% - 8px);
  max-width: calc(50% - 8px);
  width: 100% !important;
  font-family: var(--font-clash);
}
.db-checkout #signupProContainer .chosen-container { display: block; }
.db-checkout .chosen-container-single .chosen-single {
  width: 100% !important;
  height: 48px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center;
  font-size: 15px;
  color: var(--ck-ink);
  background: var(--ck-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ck-line) !important;
  border-radius: var(--ck-r) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.db-checkout .chosen-container-single .chosen-single span { padding-left: 0; margin-right: 0; }
.db-checkout .chosen-container-active.chosen-container-single .chosen-single { border-color: var(--ck-accent) !important; }
.db-checkout .chosen-container .chosen-drop {
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-r);
  margin-top: 6px;
  background: var(--ck-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.db-checkout .chosen-container .chosen-results li { padding: 9px 14px; line-height: 1.4; font-size: 14px; }
.db-checkout .chosen-container .chosen-results li.highlighted {
  background: var(--ck-accent) !important;
  background-image: none !important;
  color: #fff;
}

/* ----------------------------------------------------------------- radios -- */
.db-checkout .radioContainer {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding-top: 0;
  margin: 0 0 2px;
}
.db-checkout .label_radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0 0 0 26px;
  background: none !important;
  font-family: var(--font-clash);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ck-ink);
  text-shadow: none;
  cursor: pointer;
  min-height: 44px; /* touch target */
}
.db-checkout .label_radio input {
  position: absolute;
  left: -4px;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.db-checkout .label_radio::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ck-surface);
  border: 1.5px solid var(--ck-line-strong);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.db-checkout .label_radio.r_on::before,
.db-checkout .label_radio:has(input:checked)::before {
  border-color: var(--ck-accent);
  box-shadow: inset 0 0 0 4px var(--ck-accent);
}
.db-checkout .label_radio:has(input:focus-visible)::before {
  outline: 2px solid var(--ck-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------- CTA --- */
.db-checkout .newbutton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin: 6px 0 0 !important;
}
.db-checkout .centerElement.signupButton { display: block; width: 100%; }

.db-checkout button#signup,
.db-checkout button#updateCardButton,
.db-checkout .signupButton button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin: 0 !important;
  padding: 14px 24px !important;
  font-family: var(--font-clash) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  text-transform: none !important;
  color: #fff !important;
  background: var(--ck-accent) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--ck-r) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.1s ease;
}
.db-checkout button#signup:hover,
.db-checkout button#signup.button:hover,
.db-checkout button#updateCardButton:hover,
.db-checkout .signupButton button:hover {
  background: var(--ck-accent-ink) !important;
  box-shadow: none !important;
  transform: none !important;
}
.db-checkout button#signup:active,
.db-checkout button#updateCardButton:active,
.db-checkout button#cancelUpdateCard:active { transform: scale(0.99); }
.db-checkout button#signup:focus-visible,
.db-checkout button#updateCardButton:focus-visible,
.db-checkout button#cancelUpdateCard:focus-visible {
  outline: 2px solid var(--ck-accent);
  outline-offset: 2px;
}
.db-checkout button#signup:disabled,
.db-checkout button#updateCardButton:disabled { opacity: 0.55; cursor: not-allowed; }

/* secondary action on the update-card screen */
.db-checkout button#cancelUpdateCard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin: 0 !important;
  padding: 14px 24px !important;
  font-family: var(--font-clash) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  color: var(--ck-ink) !important;
  background: var(--ck-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ck-line-strong) !important;
  border-radius: var(--ck-r) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.db-checkout button#cancelUpdateCard:hover {
  background: var(--ck-surface-2) !important;
  border-color: var(--ck-ink-3) !important;
  box-shadow: none !important;
  transform: none !important;
}
.db-checkout .button-container-form { display: flex; flex-direction: column; gap: 12px; }
.db-checkout .spin-item .spinner-svg { width: 18px; height: 18px; }

/* secure-checkout + login rows under the CTA.
   signuppro forces `.newbutton a { color:#fff !important }` for the old purple
   card — on a white surface that made the login link invisible. */
.db-checkout .newbutton a { color: var(--ck-accent-ink) !important; margin-left: 4px !important; }
.db-checkout .newbutton a:hover { color: var(--ck-accent) !important; text-decoration: underline; }
.db-checkout .login-container { margin: 0 !important; padding: 0 !important; }
.db-checkout .secure-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 !important;
}
.db-checkout .lock-payment { background-color: var(--ck-ink-3) !important; float: none; }
.db-checkout .textDetails2 { font-size: 12.5px; font-weight: 500; color: var(--ck-ink-3); }

.db-checkout .secure-checkout-2 {
  display: flex;
  justify-content: center;
  padding-top: 12px;
  border-top: 1px solid var(--ck-line);
  font-size: 13.5px;
  color: var(--ck-ink-2);
}
.db-checkout .secure-checkout-2 .pageElement { font-size: 13.5px; color: var(--ck-ink-2); }
.db-checkout .secure-checkout-2 a,
.db-checkout .disclaimer3 a {
  color: var(--ck-accent-ink);
  font-weight: 600;
  font-size: inherit;
  border-bottom: 0;
  text-decoration: none;
}
.db-checkout .secure-checkout-2 a:hover,
.db-checkout .disclaimer3 a:hover { text-decoration: underline; color: var(--ck-accent); }

/* --------------------------------------------------------------- legalese -- */
.db-checkout .disclaimer3 {
  max-width: 62ch;
  margin: 0 auto !important;
  padding: 0;
  font-family: var(--font-clash) !important;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ck-ink-3);
}
.db-checkout .disclaimer3 strong { font-weight: 600; color: var(--ck-ink-2); }

/* --------------------------------------------------------------- a11y/etc -- */
.db-checkout a:focus-visible,
.db-checkout button:focus-visible,
.db-checkout label:focus-visible {
  outline: 2px solid var(--ck-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .db-checkout *,
  .db-checkout *::before,
  .db-checkout *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 960px) {
  .db-checkout .row-custom5 {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-block: 28px;
  }
  .db-checkout .left-container-price { position: static; }
  .db-checkout .container-left-overview { margin-bottom: 24px; }
  .db-checkout .price-heading { margin-bottom: 4px !important; }
  .db-checkout .order-items { margin-top: 18px !important; }
}

@media (max-width: 620px) {
  /* signuppro hides the page heading on small screens — keep it, it is the
     only h1 on the page */
  .db-checkout .h1-container { display: block !important; }

  .db-checkout .input-container,
  .db-checkout .chosen-container,
  .db-checkout form#signupAccount > .input-container,
  .db-checkout form#signupPro > .input-container,
  .db-checkout form#updateBilling > .input-container,
  .db-checkout form#signupAccount > .chosen-container,
  .db-checkout form#signupPro > .chosen-container,
  .db-checkout form#updateBilling > .chosen-container,
  .db-checkout form#signupAccount > select.input-large2,
  .db-checkout form#signupPro > select.input-large2,
  .db-checkout form#updateBilling > select.input-large2 {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .db-checkout .input-large,
  .db-checkout .input-large2,
  .db-checkout input[type='text'],
  .db-checkout input[type='password'],
  .db-checkout input[type='email'] {
    width: 100% !important;
    height: 48px !important;
  }
  .db-checkout .container-form { align-items: flex-start; }
  .db-checkout .radioContainer { margin-left: 0; gap: 18px; }
  .db-checkout form h3.whiteheader { flex-basis: 100%; }
  .db-checkout .cards-container { margin-left: 0; }
  .db-checkout .h1-container h1 { font-size: 1.5rem !important; }
}

/* iframe embeds: no outer chrome, tighter block padding */
.db-checkout.iframe-pricing-plans .row-custom5 { padding-block: 0; }
.db-checkout.iframe-pricing-plans .iframe-pricing-plans .pricing_page { padding-top: 0 !important; }

/* ============================================================================
   FREE signup (form#signupAccountTrial) — single-column variant

   The rules above were written against the PAID checkout markup, whose billing
   fields run 2-up. The free signup reuses some of those class names in a
   single-column layout, so it inherited the half-width sizing and rendered its
   Email / Password fields at half the width of the Google button and the submit
   button stacked around them. These rules re-align that surface; they are all
   scoped to the free form or to classes only the free signup uses, so the paid
   checkout is untouched.
   ========================================================================== */

/* 1. Fields run full width here — the 50% rule above is for the paid 2-up grid */
.db-checkout form#signupAccountTrial .input-container {
  flex: 1 1 100%;
  max-width: 100%;
}

.db-checkout form#signupAccountTrial {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ck-gap);
  width: 100%;
}

.db-checkout form#signupAccountTrial > .clearfix,
.db-checkout form#signupAccountTrial > div.clearfix,
.db-checkout form#signupAccountTrial > br { display: none; }

.db-checkout form#signupAccountTrial > .newbutton { width: 100%; }

/* the free form uses .input-xlarge / .input-xxlarge where the paid checkout
   uses .input-large2 — give them the same field treatment */
.db-checkout .input-xlarge,
.db-checkout .input-xxlarge {
  width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  font-family: var(--font-clash) !important;
  font-size: 15px !important;
  color: var(--ck-ink) !important;
  background: var(--ck-surface);
  border: 1px solid var(--ck-line) !important;
  border-radius: var(--ck-r) !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease;
}

.db-checkout .input-xlarge:focus,
.db-checkout .input-xxlarge:focus {
  border-color: var(--ck-accent) !important;
  outline: none;
}

.db-checkout form#signupAccountTrial label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  color: var(--ck-ink-2);
}

/* 2. Social button: same 52px block and hairline as the submit below it.
   The legacy rule shipped a 64px box with its own drop shadow. */
.db-checkout .authenticateContainer,
.db-checkout #signupSocialContainer { width: 100%; }

.db-checkout .authenticateContainer > a { display: block; width: 100%; }

/* signuppro.css ships `body.single-signup .container-flex-screen
   button.button.signinButtonSocial` (0,4,2) with `padding: 0 !important` and a
   hard `height: 64px`, which outranks a plain `.db-checkout button.button…`
   (0,3,1). Match its shape to win, and bring the button down to the submit's
   52px so the two stacked actions are the same block. */
body.db-checkout.single-signup .container-flex-screen button.button.signinButtonSocial,
body.db-checkout button.button.signinButtonSocial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px !important;
  min-height: 52px;
  margin: 0 !important;
  padding: 0 20px !important;
  font-family: var(--font-clash) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ck-ink) !important;
  background: var(--ck-surface) !important;
  border: 1px solid var(--ck-line-strong) !important;
  border-radius: var(--ck-r) !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, background 0.18s ease;
}

body.db-checkout.single-signup .container-flex-screen button.button.signinButtonSocial:hover,
body.db-checkout button.button.signinButtonSocial:hover {
  background: var(--ck-surface-2) !important;
  border-color: var(--ck-ink-3) !important;
}

body.db-checkout.single-signup .container-flex-screen button.button.signinButtonSocial:focus-visible,
body.db-checkout button.button.signinButtonSocial:focus-visible {
  outline: 2px solid var(--ck-accent);
  outline-offset: 2px;
}

.db-checkout .signinButtonSocialFlex { height: auto; gap: 10px; }
.db-checkout .signinButtonSocialText { font-weight: 600; }

/* 3. Divider inherits the surface tokens instead of its own hardcoded grey */
.db-checkout .signup-or-divider {
  width: 100%;
  margin: 4px 0 !important;
  color: var(--ck-ink-3) !important;
  font-size: 12.5px;
}

.db-checkout .signup-or-divider::before,
.db-checkout .signup-or-divider::after { background: var(--ck-line) !important; }

/* 4. Column shell + the trailing links/disclaimer */
.db-checkout .freeFormContainer {
  display: flex;
  flex-direction: column;
  gap: var(--ck-gap);
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.db-checkout .freeFormContainer > br { display: none; }
.db-checkout .freeFormContainer h1.centre {
  margin: 0;
  font-size: 1.6rem !important;
  font-weight: 600;
  text-align: left;
}
.db-checkout .freeFormContainer .logolink { align-self: flex-start; }
.db-checkout .authenticateUserPassword { width: 100%; }

.db-checkout form#signupAccountTrial .login-container {
  width: 100%;
  margin-top: 10px;
  text-align: right;
}

/* .disclaimer3 is shared with the paid signup and the upgrade form, which centre
   it under a wider column. Scope the left-aligned variant to the free shell so
   those two keep the `margin: 0 auto` treatment set earlier in this file. */
.db-checkout .freeFormContainer .disclaimer3 {
  max-width: none;
  margin: 0 !important;
  text-align: left;
}

/* mobile: two legacy sizings break the column below ~420px.
   `.signupProContainer` is a shared class (paid / upgrade / get-in-touch all use
   it), so the width reset is hung off `.signup-flex`, which only the free form
   carries. signuppro.css:1032 caps the submit at `max-width: 93%` in a media
   query, which left it 24px narrower than the fields above it. */
.db-checkout .signupProContainer.signup-flex {
  width: 100%;
  max-width: 100%;
}

.db-checkout form#signupAccountTrial button#signup {
  max-width: 100% !important;
}

/* signuppro.css:4839 gives `.flex-screen-left` a hard `min-width: 400px`, which
   forces a 400px document on a 375px viewport (horizontal scroll on iPhone SE /
   mini widths). Both this class and .container-flex-screen are used only by
   frontend_signup_free.pug, so relaxing them is free-signup-only. */
.db-checkout .container-flex-screen,
.db-checkout .flex-screen-left {
  min-width: 0;
  max-width: 100%;
}

/* ============================================================================
   AUTH SHELL — free signup (/signup?plan=free)

   /login and /signup are the two halves of one funnel but were built years
   apart: login got the .db-auth dark split-screen (signin.css:1021), signup
   kept the legacy .flex-screen shell from signuppro.css (white page, 800px
   fixed right column, 16px black gutter around an inset media card, tabs
   floating outside it, ALL-CAPS slide titles).

   The rules below re-cut the legacy shell to the same measurements as .db-auth:
   same column split, same panel + hairline, same 384px form measure, same
   30px/600 heading, same full-bleed showcase with the readability scrim and
   the tab rail INSIDE the frame. Markup and JS hooks are untouched.
   ========================================================================== */

.db-checkout .page-container { background: var(--ck-page); }

/* --- the split ------------------------------------------------------------ */
.db-checkout .flex-screen {
  display: grid;
  grid-template-columns: minmax(420px, 46%) 1fr; /* == .db-login .db-auth */
  min-height: 100vh;
  height: auto;
}

.db-checkout .flex-screen-left {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;                      /* signuppro hard-codes 400px */
  padding: 44px 56px;
  background: var(--ck-panel);
  border-right: 1px solid var(--ck-line);
}

.db-checkout .flex-screen-right {
  width: auto;                       /* signuppro hard-codes 800px */
  background: #0a0a0c;
  overflow: hidden;
}

.db-checkout .signupProContainer.signup-flex { padding: 0; }
.db-checkout #signupProContainer.pricing_page.signupfree { background: transparent; }

/* --- form column ---------------------------------------------------------- */
.db-checkout .freeFormContainer {
  gap: 0;
  max-width: 384px;                  /* == .db-login .db-auth__form */
}

.db-checkout .freeFormContainer .logolink {
  display: inline-block;
  margin-bottom: 34px;
  border-bottom: 0;
}

.db-checkout .freeFormContainer h1.centre,
.db-checkout .freeFormContainer h1 {
  font-size: 30px !important;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ck-ink);
  text-align: left;
  margin: 0 0 10px;
  text-transform: none;
}

.db-checkout .freeFormContainer .auth-sub {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ck-ink-2);
  text-align: left;
}

/* signuppro.css:4903 paints EVERY label in this shell #686869 !important */
.db-checkout .container-flex-screen label,
.db-checkout form#signupAccountTrial label {
  color: var(--ck-ink-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

.db-checkout .signup-or-divider { margin: 22px 0 !important; letter-spacing: 0.08em; }

.db-checkout form#signupAccountTrial { margin: 0 !important; }
.db-checkout form#signupAccountTrial .input-container { margin-bottom: 16px; }
.db-checkout form#signupAccountTrial > .newbutton { margin-top: 8px !important; }

/* "Already have an account?" — centred under the CTA, as on /login */
.db-checkout form#signupAccountTrial .login-container {
  margin-top: 22px !important;
  text-align: center;
  font-size: 14px;
}
.db-checkout .login-container .disclaimer.left.marginLeft { text-align: center; }
.db-checkout .login-container .pageElement { color: var(--ck-ink-2); }
.db-checkout .newbutton a.underline { color: var(--ck-accent) !important; font-weight: 600; }
.db-checkout .newbutton a.underline:hover { color: var(--ck-accent-ink) !important; }

.db-checkout .freeFormContainer .disclaimer3 { margin-top: 26px !important; }

/* --- showcase column ------------------------------------------------------ */
.db-checkout .signup-slideshow {
  position: relative;
  padding: 0;                        /* kills the 16px black gutter */
  background: #0a0a0c;
}

.db-checkout .signup-slideshow-slides {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.db-checkout .signup-slide-media { border-radius: 0; background: #0a0a0c; }

/* readability scrim, same stops as .db-showcase__scrim (no colour tint) */
.db-checkout .signup-slide-media::after {
  background: linear-gradient(
    to top,
    rgba(6, 6, 8, 0.94) 0%,
    rgba(6, 6, 8, 0.5) 40%,
    rgba(6, 6, 8, 0.12) 68%,
    rgba(6, 6, 8, 0.38) 100%
  );
}

.db-checkout .signup-slide-overlay {
  bottom: 104px;                     /* clears the tab rail below */
  padding: 0 44px;
  gap: 14px;
}

/* badges take the .db-showcase__eyebrow treatment: one glass pill spec, pink
   reserved for the tick. Three solid-pink pills fought the CTA for attention. */
.db-checkout .signup-slide-badge,
.db-checkout .signup-slide-badge--primary {
  padding: 8px 15px;
  background: rgba(12, 12, 14, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ck-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ck-ink);
}
.db-checkout .signup-slide-badge svg { color: var(--ck-accent); }

/* Same hierarchy as .db-showcase: a small accent kicker over one large soft-white
   line. The h3 strings are ALL CAPS in all 43 locale files, so they take the
   kicker role (== .db-showcase__kicker) rather than being blown up to 40px/800
   display type; the description becomes the display line. Locale-safe: no
   string edits, no per-language casing rules. */
.db-checkout .signup-slide-info { gap: 12px; }

.db-checkout .signup-slide-info h3 {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ck-accent);
}

.db-checkout .signup-slide-info p {
  max-width: 22ch;
  font-family: var(--font-clash);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
}

/* tab rail moves inside the frame, label above track (DOM order is track-first,
   hence column-reverse) */
.db-checkout .signup-slideshow-tabs {
  position: absolute;
  z-index: 3;
  left: 44px;
  right: 44px;
  bottom: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-top: 0;
}

.db-checkout .signup-slideshow-tab {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}

.db-checkout .signup-tab-progress {
  height: 3px;
  margin-bottom: 0;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}
.db-checkout .signup-tab-progress-bar { border-radius: 999px; }

.db-checkout .signup-slideshow-tab span {
  font-size: 12px;
  font-weight: 500;
  color: rgba(244, 244, 246, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-checkout .signup-slideshow-tab.active span { color: #fff; font-weight: 500; }

/* --- responsive: same breakpoints as .db-auth ----------------------------- */
@media (max-width: 900px) {
  .db-checkout .flex-screen { grid-template-columns: 1fr; }
  .db-checkout .flex-screen-right { display: none; }
  .db-checkout .flex-screen-left {
    padding: 40px 22px;
    min-height: 100vh;
    border-right: 0;
  }
}

@media (max-width: 480px) {
  .db-checkout .flex-screen-left { padding: 30px 18px; }
  .db-checkout .freeFormContainer h1.centre,
  .db-checkout .freeFormContainer h1 { font-size: 26px !important; }
}

/* --- parity pass vs /login ------------------------------------------------ */

/* signuppro.css:5240 paints the Google label #1a1f36 — invisible on the dark
   button. Same spec as .db-login .signinButtonSocialText. */
.db-checkout .signinButtonSocialText {
  color: var(--ck-ink) !important;
  font-weight: 500;
  font-size: 15px;
}
.db-checkout .signinButtonSocialFlex { justify-content: center; gap: 12px; }
.db-checkout .iconGoogle {
  flex-grow: 0;
  width: 22px;
  height: 22px;
  background-size: 22px 22px;
  background-position: center;
}

/* the sign-in prompt is a sentence, not a button: no underline, no plate */
.db-checkout .login-container .disclaimer,
.db-checkout .login-container .pageElement {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-right: 0 !important;
}
.db-checkout .newbutton a.underline { text-decoration: none !important; border-bottom: 0 !important; }
.db-checkout .newbutton a.underline:hover { text-decoration: underline !important; }

/* legal line: muted like #footer-sign-in on /login, not accent-pink */
.db-checkout .freeFormContainer .disclaimer3 a { color: var(--ck-ink-2) !important; }
.db-checkout .freeFormContainer .disclaimer3 a:hover { color: var(--ck-ink) !important; }

/* active tab underline is the accent, as on .db-showcase__tab-track:after */
.db-checkout .signup-slideshow-tab.active .signup-tab-progress-bar { background: var(--ck-accent); }

.db-checkout .signup-slide-overlay { bottom: 118px; }

/* the display line is a full sentence in every locale — 30px/36ch keeps it to
   two lines so it clears the tab rail */
.db-checkout .signup-slide-info p { font-size: 30px; max-width: 36ch; }

/* NOTE: deliberately not touching #recaptcha's box. The invisible widget is
   rendered into that container by the Google script; collapsing it is a
   cosmetic win not worth the risk to the signup gate. */

/* ============================================================================
   /account/update-card — the one checkout template still on the bootstrap-2
   float grid (.row > .span8 + .span3) instead of .row-custom5. Left as floats
   it rendered the title panel as a 270px column jammed against the right edge
   with legacy hairlines above and below it. Same grid + same reading order as
   the paid checkout: summary rail left, form right.
   ========================================================================== */
.db-checkout #signupProContainer.pricing_page > .container > .row {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 72px);
  align-items: start;
  max-width: 1160px;
  margin: 0 auto;
  padding-block: clamp(32px, 5vw, 72px);
}
.db-checkout .row::before,
.db-checkout .row::after { content: none !important; display: none !important; }

.db-checkout .row > .span8,
.db-checkout .row > .span3 {
  width: 100% !important;
  min-width: 0;
  float: none !important;
  margin-left: 0 !important;
}
.db-checkout .row > .span3 { order: 1; position: sticky; top: 32px; }
.db-checkout .row > .span8 { order: 2; }

.db-checkout .row > .span3 #footerSignin.pageElement {
  padding: 0 !important;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: left;
}
.db-checkout .row > .span3 .priceContainer h2 {
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ck-ink);
  margin: 0 0 10px;
  text-align: left;
}
.db-checkout .row > .span3 h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ck-ink-3);
  margin: 0 0 8px;
  text-align: left;
}
.db-checkout .row > .span3 > span {
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ck-ink-2);
  text-align: left;
}
.db-checkout .row > .span3 a[title='DesignerBox'] {
  display: inline-block;
  margin-top: 24px;
  border-bottom: 0;
}

@media (max-width: 960px) {
  .db-checkout #signupProContainer.pricing_page > .container > .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-block: 28px;
  }
  .db-checkout .row > .span3 { position: static; }
}