/* Executive Signature
   The supplied Bonnard Lawson artwork informs this composition only. Tenant
   and card assets remain independent: a company mark is never used as the
   profile photo, and a missing portrait never leaves an empty circle. */
.legal-signature-vcard {
  --signature-deep: var(--qardora-brand, #1e2932);
  --signature-paper: var(--qardora-surface, #fff);
  --signature-ink: var(--qardora-ink, #1d2428);
  --signature-muted: var(--qardora-muted, #697177);
  --signature-line: var(--qardora-border, #d8d9d5);
  --signature-accent: var(--qardora-icon, #b28b52);
  --signature-footer: var(--qardora-action, var(--qardora-brand, #1e2932));
  --signature-font: Inter, ui-sans-serif, system-ui, sans-serif;
  /* Mobile artwork dimensions scale with the card, without reserving an
     oversized footer on shorter phone screens. */
  --signature-footer-min-height: clamp(208px, 55vw, 252px);
  --signature-footer-gap: clamp(16px, 5vw, 26px);
  --signature-footer-padding-top: clamp(38px, 11.2vw, 54px);
  --signature-footer-padding-inline: clamp(28px, 8vw, 40px);
  --signature-footer-padding-bottom: clamp(20px, 5vw, 26px);
  --signature-qr-size: clamp(78px, 22vw, 102px);
  --signature-save-gap: clamp(12px, 5.5vw, 26px);
  --signature-social-size: clamp(38px, 10vw, 46px);
  --signature-footer-separator-height: min(19vw, 94px);
  --signature-stage-padding-top: clamp(36px, 12vw, 60px);
  --signature-stage-padding-inline: clamp(20px, 6.7vw, 34px);
  --signature-stage-padding-bottom: clamp(24px, 6.4vw, 32px);
  --signature-company-header-height: clamp(68px, 18.6vw, 94px);
  --signature-company-header-gap: clamp(20px, 5.6vw, 28px);
  --signature-company-logo-height: clamp(68px, 18.6vw, 94px);
  --signature-portrait-size: clamp(88px, 22vw, 108px);
  --signature-portrait-gap: clamp(16px, 4.4vw, 22px);
  --signature-contact-min-height: 48px;
  --signature-contact-padding: 6px 0;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  width: 100%;
  min-height: var(--qardora-card-viewport-height, 100dvh);
  margin: 0 auto;
  overflow: hidden;
  background: var(--signature-paper);
  color: var(--signature-ink);
  font-family: var(--signature-font);
  isolation: isolate;
}
.legal-signature-vcard[data-signature-font="manrope"] { --signature-font: Manrope, Inter, Arial, sans-serif; }
.legal-signature-vcard[data-signature-font="system"] { --signature-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.legal-signature-vcard[data-signature-font="serif"] { --signature-font: Georgia, "Times New Roman", serif; }
.legal-signature-vcard[data-signature-font="custom"] { --signature-font: "Qardora Signature Custom", Inter, ui-sans-serif, system-ui, sans-serif; }

/* Asset state is declared by the Executive Signature template, never inferred
   from tenant-wide fallback assets. That keeps every variant compact and
   prevents a cleared card logo from reappearing. */
.legal-signature-vcard[data-signature-assets="wordmark-profile"] {
  --signature-company-header-height: auto;
  --signature-company-header-gap: 10px;
}
.legal-signature-vcard[data-signature-assets="company-only"],
.legal-signature-vcard[data-signature-assets="wordmark-only"] {
  --signature-company-header-gap: 0px;
}

.legal-signature-stage {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: var(--signature-stage-padding-top) var(--signature-stage-padding-inline) var(--signature-stage-padding-bottom);
  overflow: hidden;
  background: var(--signature-paper);
}
.legal-signature-stage::before {
  position: absolute;
  top: 0;
  right: var(--signature-stage-padding-inline);
  width: 62px;
  height: 5px;
  background: var(--signature-accent);
  content: "";
}

/* Company mark + personal portrait ----------------------------------------------------- */
.legal-signature-company-header {
  display: flex;
  width: min(100%, 380px);
  min-height: var(--signature-company-header-height);
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--signature-company-header-gap);
}
.legal-signature-company-logo {
  display: block;
  width: 100%;
  height: var(--signature-company-logo-height);
  object-fit: contain;
  object-position: center;
}
/* A company mark is the primary brand asset when it is displayed beside a
   personal portrait. Keep that visual hierarchy explicit on every device. */
.legal-signature-vcard--has-company-and-profile {
  --signature-company-header-height: clamp(112px, 28vw, 148px);
  --signature-company-logo-height: clamp(112px, 28vw, 148px);
  --signature-portrait-size: clamp(44px, 12vw, 54px);
}
.legal-signature-identity-assets { display: contents; }
.legal-signature-company-wordmark,
.legal-signature-company-panel-wordmark {
  margin: 0;
  color: var(--signature-deep);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.25;
  text-transform: uppercase;
}
.legal-signature-portrait {
  display: grid;
  width: var(--signature-portrait-size);
  height: var(--signature-portrait-size);
  flex: 0 0 auto;
  place-items: center;
  align-self: center;
  margin: 0 auto var(--signature-portrait-gap);
  overflow: hidden;
  isolation: isolate;
  border: 2px solid color-mix(in srgb, var(--signature-accent) 78%, var(--signature-line));
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  background: var(--signature-paper);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--signature-deep) 13%, transparent);
}
.legal-signature-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  clip-path: inherit;
}

/* With no portrait, the company mark moves into its former visual slot. */
.legal-signature-company-panel {
  display: flex;
  width: min(100%, 360px);
  min-height: 166px;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 6px auto 24px;
  text-align: center;
}
.legal-signature-company-panel-logo {
  display: block;
  width: min(100%, 348px);
  height: auto;
  max-height: 154px;
  object-fit: contain;
  object-position: center;
}
.legal-signature-company-panel-wordmark { max-width: 18ch; font-size: .9rem; }
.legal-signature-divider { display: none; }

/* Identity and details ------------------------------------------------------------------ */
.legal-signature-information { display: grid; min-width: 0; }
.legal-signature-bio { display: grid; justify-items: center; text-align: center; }
.legal-signature-company {
  margin: 0 0 8px;
  color: var(--signature-muted);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.25;
  text-transform: uppercase;
}
.legal-signature-bio h1 {
  max-width: 15ch;
  margin: 0;
  color: var(--signature-ink);
  font-size: clamp(2.25rem, 11vw, 3.5rem);
  font-weight: 750;
  letter-spacing: -.055em;
  line-height: .95;
  overflow-wrap: anywhere;
}
.legal-signature-role {
  margin: 11px 0 0;
  color: var(--signature-muted);
  font-size: .94rem;
  font-weight: 650;
  line-height: 1.35;
}
.legal-signature-rule {
  display: block;
  width: 56px;
  height: 2px;
  min-height: 2px;
  margin-top: 12px;
  background: var(--signature-accent);
}
.legal-signature-contact {
  display: grid;
  margin-top: 25px;
  border-top: 1px solid var(--signature-line);
}
.legal-signature-contact > [data-contact-key] {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 19px;
  column-gap: 10px;
  min-height: var(--signature-contact-min-height);
  padding: var(--signature-contact-padding);
  border: 0;
  border-bottom: 1px solid var(--signature-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
  transition: background .16s ease, padding .16s ease, color .16s ease;
}
.legal-signature-contact > a[href]:hover {
  padding-right: 4px;
  padding-left: 4px;
  background: color-mix(in srgb, var(--signature-accent) 6%, transparent);
  color: var(--signature-deep);
}
.legal-signature-contact > a[href]:focus-visible { outline: 2px solid var(--signature-accent); outline-offset: 2px; }
.legal-signature-contact-icon {
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 29px;
  height: 29px;
  place-items: center;
  align-self: center;
  border-radius: 50%;
  background: var(--signature-accent);
  color: #fff;
}
.legal-signature-contact-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.legal-signature-contact > a:not(.vcard-custom-field) > span:not(.legal-signature-contact-icon),
.legal-signature-contact > .vcard-custom-field > small {
  grid-column: 2;
  grid-row: 1;
  color: var(--signature-muted);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .15em;
  line-height: 1.15;
  text-transform: uppercase;
}
.legal-signature-contact > a:not(.vcard-custom-field) > strong,
.legal-signature-contact > .vcard-custom-field > span:not(.legal-signature-contact-icon) {
  grid-column: 2;
  grid-row: 2;
  margin-top: 3px;
  font-size: .91rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.legal-signature-contact-arrow,
.legal-signature-contact > .vcard-custom-field > svg {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--signature-accent);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.legal-signature-contact > .vcard-custom-field { display: grid; grid-template-columns: 34px minmax(0, 1fr) 19px; column-gap: 10px; }
.legal-signature-contact > .vcard-custom-field:not(a) { cursor: default; }

/* Connection footer --------------------------------------------------------------------- */
.legal-signature-footer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: var(--signature-footer-min-height);
  gap: var(--signature-footer-gap);
  padding: var(--signature-footer-padding-top) var(--signature-footer-padding-inline) var(--signature-footer-padding-bottom);
  border-top: 0;
  overflow: hidden;
  /* The source artwork has transparent space above the two vectors. Keep that
     space on the card surface; only the gold plane and upper-right dark wedge
     are painted, rather than turning the whole footer into a dark rectangle. */
  background: var(--signature-paper);
  color: #fff;
  isolation: isolate;
}
.legal-signature-footer::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(112deg, color-mix(in srgb, var(--signature-accent) 72%, var(--signature-deep)) 0%, var(--signature-accent) 58%, color-mix(in srgb, var(--signature-accent) 84%, #fff) 100%);
  /* 1536 × 1024 source: (0,52), (817,219), (1536,367). */
  clip-path: polygon(0 5.1%, 53.2% 21.4%, 100% 35.8%, 100% 100%, 0 100%);
  content: "";
}
.legal-signature-footer::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--signature-footer) 88%, #fff), var(--signature-footer));
  /* Upper-right vector from the supplied mobile artwork. */
  clip-path: polygon(53.2% 21.4%, 100% 5.1%, 100% 35.8%);
  content: "";
}
.legal-signature-footer-primary { position: relative; z-index: 2; min-width: 0; }
.legal-signature-connection {
  display: grid;
  grid-template-columns: var(--signature-qr-size) 1px minmax(0, 1fr);
  align-items: center;
  gap: var(--signature-save-gap);
}
.legal-signature-qr-slot {
  display: block;
  width: var(--signature-qr-size);
  height: var(--signature-qr-size);
  margin: 0;
}
.legal-signature-qr {
  display: grid;
  width: var(--signature-qr-size);
  height: var(--signature-qr-size);
  place-items: center;
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 6px 18px #18202924;
}
.legal-signature-qr { object-fit: contain; image-rendering: pixelated; }
.legal-signature-footer-separator { width: 1px; height: var(--signature-footer-separator-height); background: #ffffffa8; }
.legal-signature-save {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}
.legal-signature-save-icon { width: 23px; height: 23px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.legal-signature-save:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.legal-signature-save-copy { display: grid; min-width: 0; gap: 5px; }
.legal-signature-save-copy strong { font-size: .96rem; font-weight: 800; letter-spacing: .01em; line-height: 1.15; }
.legal-signature-save-copy small { max-width: 14ch; font-size: .76rem; line-height: 1.35; opacity: .92; }
/* English is intentionally one compact contact label. Other locales retain
   their natural wrapping behavior so longer translations are never clipped. */
html[lang="en"] .legal-signature-vcard .legal-signature-save-copy small { max-width: none; white-space: nowrap; }
.legal-signature-social {
  position: relative;
  z-index: 2;
  display: flex;
  grid-column: 1;
  grid-row: 2;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--signature-social-size);
  margin: 0;
  padding: 0;
}
.legal-signature-social:empty { display: none; }
.legal-signature-social--content { display: none; }
.legal-signature-social a,
.legal-signature-share {
  position: relative;
  z-index: 2;
  display: grid;
  width: var(--signature-social-size);
  height: var(--signature-social-size);
  place-items: center;
  border: 1px solid #ffffffb0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.legal-signature-social a::after {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  color: #fff;
  content: attr(aria-label);
  font-size: .58rem;
  font-weight: 650;
  line-height: 1;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
}
.legal-signature-social a::after { display: none; }
.legal-signature-social svg { width: 18px; height: 18px; fill: currentColor; }
.legal-signature-share svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.legal-signature-share {
  z-index: 1;
  flex: 0 0 auto;
  align-self: center;
  justify-self: auto;
  width: var(--signature-social-size);
  height: var(--signature-social-size);
}
.legal-signature-share .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}
.legal-signature-social a:hover,
.legal-signature-social a:focus-visible,
.legal-signature-share:hover,
.legal-signature-share:focus-visible { border-color: #fff; background: #ffffff22; outline: none; transform: translateY(-2px); }
.legal-signature-share[data-copy-feedback="true"]::after {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  padding: 6px 8px;
  border-radius: 5px;
  background: #fff;
  color: var(--signature-footer);
  content: "Link copied";
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}

.legal-signature-vcard > .template-powered-by {
  display: flex !important;
  min-height: 36px !important;
  align-items: center;
  justify-content: center;
  padding: 9px 20px !important;
  border: 0 !important;
  background: var(--signature-paper) !important;
  color: var(--signature-muted) !important;
  font: 800 .61rem / 1 Inter, ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: .07em !important;
  text-align: center;
}
.legal-signature-vcard > .template-powered-by .template-powered-link { color: inherit; text-decoration: none; }
.legal-signature-vcard > .template-powered-by .template-powered-link:hover,
.legal-signature-vcard > .template-powered-by .template-powered-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Desktop is opt-in. The explicit exclusion is what makes the wide editor's
   Mobile preview use the real phone composition instead of this grid. */
@media (min-width: 760px) {
  body.public-card-classic:not([data-preview-device]):has(.legal-signature-vcard) { padding: 20px; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-vcard {
    width: min(100%, 1200px);
    height: min(760px, calc(100svh - 40px));
    min-height: 0;
    border: 1px solid color-mix(in srgb, var(--signature-line) 74%, transparent);
    border-radius: 18px;
    box-shadow: 0 28px 78px color-mix(in srgb, var(--signature-deep) 20%, transparent);
  }
  /* Company and profile assets use the same bounded desktop card as every
     other signature variant, keeping the complete card inside the viewport. */
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-vcard--has-company-and-profile {
    height: min(760px, calc(100svh - 40px));
    min-height: 0;
    overflow: hidden;
  }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-stage {
    --signature-stage-padding-top: 34px;
    --signature-stage-padding-inline: 66px;
    --signature-stage-padding-bottom: 30px;
    --signature-company-header-height: 118px;
    --signature-company-header-gap: 0px;
    --signature-company-logo-height: 118px;
    --signature-portrait-size: 132px;
    --signature-portrait-gap: 0px;
    --signature-contact-min-height: 57px;
    --signature-contact-padding: 9px 0;
    display: grid;
    grid-template-columns: clamp(190px, 24vw, 280px) 2px minmax(0, 570px) minmax(0, 1fr);
    grid-template-rows: 154px minmax(0, 1fr);
    column-gap: 36px;
    padding: 34px 66px 30px;
  }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-stage::before { right: 66px; width: 104px; height: 6px; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-company-header {
    grid-column: 1 / -1;
    grid-row: 1;
    width: min(100%, 500px);
    max-width: calc(100% - 130px);
    min-height: 118px;
    align-self: start;
    justify-content: flex-start;
    margin: 0;
  }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-company-logo { height: 118px; object-position: left center; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-portrait {
    grid-column: 1;
    grid-row: 2;
    width: 132px;
    height: 132px;
    align-self: center;
    justify-self: center;
    margin: 0;
  }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-vcard--has-company-and-profile .legal-signature-company-header {
    width: min(100%, 420px);
    min-height: 104px;
  }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-vcard--has-company-and-profile .legal-signature-company-logo {
    height: 104px;
  }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-vcard--has-company-and-profile .legal-signature-portrait {
    width: 136px;
    height: 136px;
  }
  /* A profile paired with a text company name has no large company artwork in
     the upper row. Give its contact list that unused room so every standard
     field remains above the footer on desktop. */
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-vcard[data-signature-assets="wordmark-profile"] .legal-signature-stage {
    --signature-contact-min-height: 54px;
    --signature-contact-padding: 7px 0;
    grid-template-rows: 92px minmax(0, 1fr);
  }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-vcard[data-signature-assets="wordmark-profile"] .legal-signature-contact { margin-top: 20px; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-divider {
    display: block;
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    background: var(--signature-accent);
  }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-information { grid-column: 3; grid-row: 2; align-self: center; max-width: 570px; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-bio { justify-items: start; text-align: left; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-bio h1 { max-width: 16ch; font-size: clamp(2.45rem, 3.5vw, 3.55rem); }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-contact { margin-top: 26px; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-vcard--without-profile .legal-signature-stage {
    --signature-contact-min-height: 40px;
    --signature-contact-padding: 2px 0;
    grid-template-rows: max-content;
    align-content: center;
  }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-vcard--without-profile .legal-signature-contact { margin-top: 14px; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-vcard--without-profile .legal-signature-contact > [data-contact-key] { min-height: 40px; padding-block: 2px; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-vcard--without-profile .legal-signature-company-panel { grid-column: 1; grid-row: 1; width: min(100%, 320px); min-height: 190px; align-self: center; justify-self: center; margin: 0; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-vcard--without-profile .legal-signature-company-panel-logo { width: min(100%, 312px); max-height: 180px; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-vcard--without-profile .legal-signature-divider { grid-column: 2; grid-row: 1; }
  /* The no-profile desktop composition has no portrait above the details.
     Keep this block in its natural grid position so its final contact never
     consumes the footer clearance. */
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-vcard--without-profile .legal-signature-information {
    position: relative;
    top: 0;
    grid-column: 3;
    grid-row: 1;
  }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-vcard--without-profile .legal-signature-contact {
    margin-top: 14px;
  }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-vcard--without-profile .legal-signature-contact > [data-contact-key] {
    min-height: 40px;
    padding-block: 2px;
  }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-footer {
    --signature-footer-min-height: 154px;
    --signature-footer-gap: 32px;
    --signature-footer-padding-top: 22px;
    --signature-footer-padding-inline: 58px;
    --signature-footer-padding-bottom: 22px;
    --signature-qr-size: 94px;
    --signature-save-gap: 18px;
    --signature-social-size: 44px;
    --signature-footer-separator-height: 78px;
    grid-template-columns: minmax(350px, 46%) minmax(0, 1fr) auto;
    /* 121px content track + 22px vertical padding = the source 165px footer. */
    grid-template-rows: minmax(121px, auto);
    background: var(--signature-accent);
  }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-footer::before {
    background: var(--signature-footer);
    /* M660 510 H1200 V675 H570 — the desktop deep trapezoid. */
    clip-path: polygon(55% 0, 100% 0, 100% 100%, 47.5% 100%);
  }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-footer::after { display: none; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-footer-primary { grid-column: 1; grid-row: 1; align-self: center; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-connection { grid-template-columns: 94px 1px minmax(0, 1fr); gap: 18px; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-qr,
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-qr-slot { width: 94px; height: 94px; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-footer-separator { height: 78px; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-save-copy strong { font-size: 1.04rem; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-save-copy small { font-size: .84rem; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-social { grid-column: 2 / 4; grid-row: 1; align-self: center; justify-content: flex-end; gap: 12px; min-height: 64px; padding: 0; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-social a,
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-share { width: 44px; height: 44px; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-social a::after { font-size: .65rem; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-share { align-self: center; justify-self: auto; }
  body[data-preview-device="desktop"] .legal-signature-vcard { min-height: min(760px, calc(100svh - 150px)); }
}

/* The viewport can be wide while the preview device is Mobile. Reset every
   desktop-grid property so it remains a genuine mobile layout. */
body[data-preview-device="mobile"] .legal-signature-vcard {
  width: min(100%, 430px);
  min-height: var(--qardora-card-viewport-height, 100dvh);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body[data-preview-device="mobile"] .legal-signature-stage { display: flex; flex-direction: column; }
body[data-preview-device="mobile"] .legal-signature-stage::before { width: 62px; height: 5px; }
body[data-preview-device="mobile"] .legal-signature-company-header { display: flex; width: min(100%, 380px); justify-content: center; }
body[data-preview-device="mobile"] .legal-signature-company-logo { object-position: center; }
body[data-preview-device="mobile"] .legal-signature-company-panel { width: min(100%, 360px); min-height: 166px; margin: 6px auto 24px; }

/* Keep the home and language controls clear of wide company marks on the
   mobile Executive Signature composition. */
@media (max-width: 759px) {
  .legal-signature-vcard { grid-template-rows: auto auto auto; }
  .legal-signature-vcard--has-company-and-profile { --signature-stage-padding-bottom: 8px; }
  .legal-signature-vcard > .legal-signature-stage {
    padding-top: max(var(--signature-stage-padding-top), 72px);
  }
}
body[data-preview-device="mobile"] .legal-signature-vcard > .legal-signature-stage {
  padding-top: max(var(--signature-stage-padding-top), 72px);
}
body[data-preview-device="mobile"] .legal-signature-company-panel-logo { width: min(100%, 348px); max-height: 154px; }
body[data-preview-device="mobile"] .legal-signature-divider { display: none; }
body[data-preview-device="mobile"] .legal-signature-information { display: grid; max-width: none; }
body[data-preview-device="mobile"] .legal-signature-bio { justify-items: center; text-align: center; }
body[data-preview-device="mobile"] .legal-signature-bio h1 { font-size: clamp(2.25rem, 11vw, 3.5rem); }
body[data-preview-device="mobile"] .legal-signature-contact { margin-top: 25px; }

/* The default composition is the supplied mobile artwork.  These dimensions
   are also the ones used by the editor's wide-screen Mobile preview. */
@media (max-width: 759px) {
  /* The utility actions have their own clear row. They never overlap the
     company mark, portrait, or identity content on a phone. */
  .legal-signature-stage { padding-top: 64px; }
  .legal-signature-vcard--has-company-and-profile .legal-signature-identity-assets {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--signature-portrait-size);
    gap: clamp(12px, 4vw, 20px);
    width: 100%;
    align-items: center;
    margin: 0 auto var(--signature-portrait-gap);
  }
  .legal-signature-vcard--has-company-and-profile .legal-signature-company-header {
    width: 100%;
    min-height: var(--signature-company-header-height);
    margin: 0;
  }
  .legal-signature-vcard--has-company-and-profile .legal-signature-portrait {
    justify-self: end;
    margin: 0;
  }
  /* Keep a selected company logo visually connected to the person’s name on
     phones. The company mark and profile remain in their shared asset row;
     only the empty space below that row is reduced. */
  .legal-signature-vcard[data-signature-assets="company-profile"] {
    --signature-portrait-gap: clamp(4px, 2vw, 8px);
  }
  .legal-signature-vcard--has-profile:not(.legal-signature-vcard--has-company-and-profile) .legal-signature-identity-assets {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0 auto 12px;
  }
  .legal-signature-vcard--has-profile:not(.legal-signature-vcard--has-company-and-profile) .legal-signature-company-header {
    min-height: 0;
    margin: 0;
  }
  .legal-signature-vcard--has-profile:not(.legal-signature-vcard--has-company-and-profile) .legal-signature-portrait {
    margin: 0;
  }
  /* A text company name needs enough presence to take the place of a missing
     logo.  At the same time, make the personal name clearly secondary.  This
     applies only to wordmark states, never to a supplied company logo. */
  .legal-signature-vcard[data-signature-assets="wordmark-profile"] .legal-signature-company-wordmark {
    font-size: clamp(1.05rem, 4.7vw, 1.35rem);
    letter-spacing: .11em;
  }
  .legal-signature-vcard[data-signature-assets="wordmark-profile"] {
    /* With no company image competing for attention, let the personal photo
       become the primary visual anchor.  The compact name preserves the
       hierarchy beneath it on narrow, short mobile viewports. */
    --signature-portrait-size: clamp(88px, 25vw, 104px);
    --signature-portrait-gap: 10px;
  }
  .legal-signature-vcard[data-signature-assets="wordmark-profile"] .legal-signature-bio h1 {
    font-size: clamp(1.75rem, 7.7vw, 2.2rem);
  }
  .legal-signature-vcard[data-signature-assets="wordmark-only"] .legal-signature-company-panel-wordmark {
    max-width: 20ch;
    font-size: clamp(1.2rem, 5.6vw, 1.65rem);
    letter-spacing: .11em;
  }
  .legal-signature-vcard[data-signature-assets^="wordmark"] .legal-signature-bio h1 {
    font-size: clamp(1.95rem, 8.7vw, 2.6rem);
  }
  .legal-signature-vcard--without-profile .legal-signature-company-panel {
    min-height: 0 !important;
    margin: 0 auto 16px !important;
  }
  .legal-signature-vcard[data-signature-assets="company-only"] .legal-signature-company-panel { margin-bottom: 8px !important; }
  .legal-signature-vcard--without-profile .legal-signature-company-panel-logo { height: auto; }
  .legal-signature-footer {
    /* Android browser chrome changes the visual viewport while scrolling.
       Keep every footer element proportional to that live viewport rather
       than switching to a smaller visual treatment. */
    --signature-footer-min-height: clamp(208px, calc(var(--qardora-vh, 1dvh) * 25), 252px);
    --signature-footer-gap: clamp(16px, calc(var(--qardora-vh, 1dvh) * 2.5), 26px);
    --signature-footer-padding-top: clamp(38px, calc(var(--qardora-vh, 1dvh) * 5), 54px);
    --signature-footer-padding-bottom: clamp(20px, calc(var(--qardora-vh, 1dvh) * 2.5), 26px);
    --signature-qr-size: clamp(78px, min(22vw, calc(var(--qardora-vh, 1dvh) * 11)), 102px);
    --signature-footer-separator-height: min(19vw, calc(var(--qardora-vh, 1dvh) * 9.5));
  }
  .legal-signature-qr { border-width: 6px; border-radius: 7px; }
  /* Keep the VCF prompt secondary to the QR and align its compact copy with
     the QR's lower edge. Social/share controls retain their existing size and
     row below this connection area. */
  .legal-signature-save { align-self: end; gap: 8px; }
  .legal-signature-save-icon { width: 20px; height: 20px; }
  .legal-signature-save-copy { gap: 4px; }
  .legal-signature-save-copy strong { font-size: .92rem; }
  .legal-signature-save-copy small { max-width: 13ch; font-size: .72rem; line-height: 1.3; }
  .legal-signature-social {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    align-items: center;
  }
  .legal-signature-social a { flex: 0 0 auto; border-width: 1.5px; }
  .legal-signature-social a::after { display: none; }
  .legal-signature-social svg { width: 23px; height: 23px; }
  .legal-signature-social { justify-content: center; }
  .legal-signature-share { display: grid; flex: 0 0 auto; align-self: center; }
  /* Social profiles and Share belong directly after the contact list on
     phones. The footer action group remains desktop-only. */
  .legal-signature-information > .legal-signature-social--content {
    display: flex;
    grid-row: auto;
    grid-column: auto;
    min-height: var(--signature-social-size);
    margin-top: 10px;
    padding: 0;
    color: var(--signature-accent);
  }
  .legal-signature-information > .legal-signature-social--content a,
  .legal-signature-information > .legal-signature-social--content .legal-signature-share {
    border-color: color-mix(in srgb, var(--signature-accent) 46%, transparent);
    color: inherit;
  }
  .legal-signature-information > .legal-signature-social--content a:hover,
  .legal-signature-information > .legal-signature-social--content a:focus-visible,
  .legal-signature-information > .legal-signature-social--content .legal-signature-share:hover,
  .legal-signature-information > .legal-signature-social--content .legal-signature-share:focus-visible {
    border-color: var(--signature-accent);
    background: color-mix(in srgb, var(--signature-accent) 10%, transparent);
  }
  .legal-signature-footer > .legal-signature-social > a,
  .legal-signature-footer > .legal-signature-social > .legal-signature-share { display: none; }

  /* With both assets selected, the company mark leads the mobile identity.
     The personal profile follows as a clearly smaller circular portrait. */
  .legal-signature-vcard--has-company-and-profile .legal-signature-identity-assets {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
  }
  .legal-signature-vcard--has-company-and-profile .legal-signature-company-header {
    width: min(100%, 320px);
    min-height: 128px;
  }
  .legal-signature-vcard--has-company-and-profile .legal-signature-company-logo {
    width: 100%;
    height: 128px;
    object-position: center;
  }
  .legal-signature-vcard--has-company-and-profile .legal-signature-portrait {
    width: 56px;
    height: 56px;
    margin: 0;
  }
  .legal-signature-vcard--has-company-and-profile .legal-signature-bio h1 { font-size: clamp(1.55rem, 6.8vw, 2rem); }
  .legal-signature-information {
    display: flex;
    flex-direction: column;
  }
  .legal-signature-information > .legal-signature-bio { order: 1; }
  .legal-signature-information > .legal-signature-contact { order: 2; }
  .legal-signature-information > .legal-signature-social--content { order: 3; }
}

/* The editor can render the mobile device in a wide browser viewport. */
body[data-preview-device="mobile"] .legal-signature-vcard { grid-template-rows: auto auto auto; }
body[data-preview-device="mobile"] .legal-signature-vcard--has-company-and-profile { --signature-stage-padding-bottom: 8px; }
body[data-preview-device="mobile"] .legal-signature-information > .legal-signature-social--content {
  display: flex;
  grid-row: auto;
  grid-column: auto;
  min-height: var(--signature-social-size);
  margin-top: 10px;
  padding: 0;
  color: var(--signature-accent);
}
body[data-preview-device="mobile"] .legal-signature-information > .legal-signature-social--content a,
body[data-preview-device="mobile"] .legal-signature-information > .legal-signature-social--content .legal-signature-share {
  border-color: color-mix(in srgb, var(--signature-accent) 46%, transparent);
  color: inherit;
}
body[data-preview-device="mobile"] .legal-signature-information > .legal-signature-social--content a:hover,
body[data-preview-device="mobile"] .legal-signature-information > .legal-signature-social--content a:focus-visible,
body[data-preview-device="mobile"] .legal-signature-information > .legal-signature-social--content .legal-signature-share:hover,
body[data-preview-device="mobile"] .legal-signature-information > .legal-signature-social--content .legal-signature-share:focus-visible {
  border-color: var(--signature-accent);
  background: color-mix(in srgb, var(--signature-accent) 10%, transparent);
}
body[data-preview-device="mobile"] .legal-signature-footer > .legal-signature-social > a,
body[data-preview-device="mobile"] .legal-signature-footer > .legal-signature-social > .legal-signature-share { display: none; }
body[data-preview-device="mobile"] .legal-signature-vcard--has-company-and-profile .legal-signature-identity-assets {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
body[data-preview-device="mobile"] .legal-signature-vcard--has-company-and-profile .legal-signature-company-header {
  width: min(100%, 320px);
  min-height: 128px;
}
body[data-preview-device="mobile"] .legal-signature-vcard--has-company-and-profile .legal-signature-company-logo {
  width: 100%;
  height: 128px;
  object-position: center;
}
body[data-preview-device="mobile"] .legal-signature-vcard--has-company-and-profile .legal-signature-portrait {
  width: 56px;
  height: 56px;
  margin: 0;
}
body[data-preview-device="mobile"] .legal-signature-vcard--has-company-and-profile .legal-signature-bio h1 { font-size: clamp(1.55rem, 6.8vw, 2rem); }
body[data-preview-device="mobile"] .legal-signature-information {
  display: flex;
  flex-direction: column;
}
body[data-preview-device="mobile"] .legal-signature-information > .legal-signature-bio { order: 1; }
body[data-preview-device="mobile"] .legal-signature-information > .legal-signature-contact { order: 2; }
body[data-preview-device="mobile"] .legal-signature-information > .legal-signature-social--content { order: 3; }
body[data-preview-device="mobile"] .legal-signature-information > .legal-signature-social--content { margin-top: 18px; }
body[data-preview-device="mobile"] .legal-signature-stage { padding-bottom: 12px; }
body[data-preview-device="mobile"] .legal-signature-vcard { align-content: start; }
/* The editor can show its mobile device in a wide browser. Apply the same
   compact signature geometry as a real phone instead of the desktop footer. */
body[data-preview-device="mobile"] .legal-signature-footer {
  --signature-footer-min-height: clamp(174px, 46vw, 196px);
  --signature-footer-gap: 12px;
  --signature-footer-padding-top: 30px;
  --signature-footer-padding-inline: 26px;
  --signature-footer-padding-bottom: 16px;
  --signature-qr-size: 72px;
  --signature-save-gap: 14px;
  --signature-footer-separator-height: 62px;
  --signature-social-size: 38px;
  height: clamp(174px, 46vw, 196px);
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}
body[data-preview-device="mobile"] .legal-signature-footer > .legal-signature-social { display: none; }
body[data-preview-device="mobile"] .legal-signature-connection { grid-template-columns: 72px 1px minmax(0, 1fr); gap: 14px; }
body[data-preview-device="mobile"] .legal-signature-qr,
body[data-preview-device="mobile"] .legal-signature-qr-slot { width: 72px; height: 72px; }
body[data-preview-device="mobile"] .legal-signature-footer-separator { height: 62px; }
body[data-preview-device="mobile"] .legal-signature-save-copy strong { font-size: .86rem; }
body[data-preview-device="mobile"] .legal-signature-save-copy small { font-size: .68rem; }
body[data-preview-device="mobile"] .legal-signature-vcard > .template-powered-by {
  min-height: 24px !important;
  padding: 5px 12px !important;
}

/* Short Android visual viewports reserve space for browser chrome. The
   elements keep their established treatment; only empty vertical space is
   tightened so the complete card remains visible without page scrolling. */
@media (max-width: 759px) and (max-height: 780px) {
  .legal-signature-vcard {
    --signature-stage-padding-top: 12px;
    --signature-stage-padding-bottom: 6px;
    --signature-company-header-height: 88px;
    --signature-company-logo-height: 88px;
    --signature-company-header-gap: 6px;
    --signature-portrait-size: 48px;
    --signature-portrait-gap: 6px;
    --signature-footer-min-height: 188px;
    /* Keep the connection row clear of the angled footer artwork on Android
       without shrinking the QR, VCF action, or social controls. */
    --signature-footer-padding-top: 54px;
    --signature-footer-gap: 12px;
    --signature-footer-padding-bottom: 14px;
    --signature-qr-size: 72px;
    --signature-footer-separator-height: 72px;
    --signature-social-size: 36px;
  }
  .legal-signature-contact { margin-top: 10px; }
  .legal-signature-contact > [data-contact-key] { min-height: 42px; }
  .legal-signature-role { margin-top: 5px; }
  .legal-signature-rule { margin-top: 8px; }
  /* The no-logo profile keeps its intentionally larger portrait. Reclaim the
     surrounding decorative spacing instead, so Android still fits the card
     without changing the photo or footer controls. */
  .legal-signature-vcard[data-signature-assets="wordmark-profile"] {
    --signature-stage-padding-bottom: 1px;
    --signature-portrait-gap: 6px;
  }
  .legal-signature-vcard[data-signature-assets="wordmark-profile"] .legal-signature-contact { margin-top: 6px; }
  .legal-signature-vcard[data-signature-assets="wordmark-profile"] .legal-signature-role { margin-top: 3px; }
  .legal-signature-vcard[data-signature-assets="wordmark-profile"] .legal-signature-rule { margin-top: 6px; }
}

/* Short iPhone viewports can be smaller than the artwork's original canvas
   while Safari's browser chrome is visible. Recompose only this template so
   every contact, the complete footer, and attribution remain visible without
   scaling the whole card or creating a page scroll. */
@media (max-width: 759px) and (max-height: 700px) {
  .legal-signature-vcard {
    --signature-stage-padding-top: 60px;
    --signature-stage-padding-bottom: 4px;
    --signature-company-header-height: 60px;
    --signature-company-logo-height: 60px;
    --signature-portrait-size: 44px;
    --signature-portrait-gap: 4px;
    --signature-contact-min-height: 36px;
    --signature-contact-padding: 1px 0;
  }
  .legal-signature-vcard--has-company-and-profile .legal-signature-company-header {
    min-height: 60px;
  }
  .legal-signature-vcard--has-company-and-profile .legal-signature-company-logo {
    height: 60px;
  }
  .legal-signature-contact { margin-top: 8px; }
  .legal-signature-role { margin-top: 4px; }
  .legal-signature-rule { margin-top: 6px; }
  .legal-signature-vcard > .template-powered-by {
    min-height: 0 !important;
    height: 18px !important;
    padding: 3px 12px !important;
    font-size: .55rem !important;
  }
}

@media (max-width: 390px) {
  .legal-signature-bio h1 { font-size: clamp(1.95rem, 10vw, 2.75rem); }
  .legal-signature-contact > [data-contact-key] { grid-template-columns: 31px minmax(0, 1fr) 17px; column-gap: 8px; }
  .legal-signature-contact-icon { width: 27px; height: 27px; }
  .legal-signature-contact > a:not(.vcard-custom-field) > strong,
  .legal-signature-contact > .vcard-custom-field > span:not(.legal-signature-contact-icon) { font-size: .85rem; }
}

/* Preview alignment reset --------------------------------------------------------------
   The editor can be much shorter than a public desktop page. Keep this
   signature inside that real preview viewport and compact its two-column
   composition before the footer begins. */
@media (min-width: 760px) {
  body[data-preview-device="desktop"] .legal-signature-vcard {
    height: min(760px, calc(100svh - 96px)) !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) auto auto;
    overflow: hidden !important;
  }
  body[data-preview-device="desktop"] .legal-signature-stage {
    --signature-stage-padding-top: 24px;
    --signature-stage-padding-inline: 54px;
    --signature-stage-padding-bottom: 20px;
    --signature-contact-min-height: 44px;
    --signature-contact-padding: 4px 0;
    grid-template-columns: 220px 2px minmax(0, 500px);
    grid-template-rows: 118px minmax(0, 1fr);
    column-gap: 30px;
    padding: var(--signature-stage-padding-top) var(--signature-stage-padding-inline) var(--signature-stage-padding-bottom);
  }
  body[data-preview-device="desktop"] .legal-signature-stage::before { right: 54px; }
  body[data-preview-device="desktop"] .legal-signature-company-header { min-height: 96px; }
  body[data-preview-device="desktop"] .legal-signature-company-logo { height: 96px; }
  body[data-preview-device="desktop"] .legal-signature-vcard--has-company-and-profile .legal-signature-company-header { width: min(100%, 360px); min-height: 96px; }
  body[data-preview-device="desktop"] .legal-signature-vcard--has-company-and-profile .legal-signature-company-logo { height: 96px; }
  body[data-preview-device="desktop"] .legal-signature-vcard--has-company-and-profile .legal-signature-portrait { width: 124px; height: 124px; }
  body[data-preview-device="desktop"] .legal-signature-vcard--without-profile .legal-signature-company-panel { width: min(100%, 220px); min-height: 140px; }
  body[data-preview-device="desktop"] .legal-signature-vcard--without-profile .legal-signature-company-panel-logo { width: min(100%, 212px); max-height: 118px; }
  /* Company-only cards are a single composition: center the brand in the
     left column and let the divider take its height from the actual details. */
  body[data-preview-device="desktop"] .legal-signature-vcard--without-profile .legal-signature-stage {
    grid-template-rows: max-content;
    align-content: center;
  }
  body[data-preview-device="desktop"] .legal-signature-vcard--without-profile .legal-signature-company-panel {
    grid-row: 1;
    align-self: center;
  }
  body[data-preview-device="desktop"] .legal-signature-vcard--without-profile .legal-signature-divider {
    grid-row: 1;
    align-self: stretch;
  }
  body[data-preview-device="desktop"] .legal-signature-vcard--without-profile .legal-signature-information { grid-row: 1; align-self: start; }
  body[data-preview-device="desktop"] .legal-signature-information { max-width: 500px; }
  body[data-preview-device="desktop"] .legal-signature-bio h1 { font-size: clamp(2rem, 3.2vw, 3rem); }
  body[data-preview-device="desktop"] .legal-signature-role { margin-top: 6px; }
  body[data-preview-device="desktop"] .legal-signature-rule { margin-top: 12px; }
  body[data-preview-device="desktop"] .legal-signature-contact { margin-top: 14px; }
  body[data-preview-device="desktop"] .legal-signature-contact > [data-contact-key] { min-height: 40px; padding-block: 2px; }
  body[data-preview-device="desktop"] .legal-signature-contact > a:not(.vcard-custom-field) > strong,
  body[data-preview-device="desktop"] .legal-signature-contact > .vcard-custom-field > span:not(.legal-signature-contact-icon) { font-size: .84rem; }
  body[data-preview-device="desktop"] .legal-signature-footer {
    --signature-footer-min-height: 128px;
    --signature-footer-padding-top: 16px;
    --signature-footer-padding-inline: 48px;
    --signature-footer-padding-bottom: 16px;
    --signature-qr-size: 80px;
    --signature-footer-separator-height: 68px;
    --signature-save-gap: 15px;
    grid-template-columns: minmax(280px, 46%) minmax(0, 1fr) auto;
    grid-template-rows: minmax(96px, auto);
  }
  body[data-preview-device="desktop"] .legal-signature-connection { grid-template-columns: 80px 1px minmax(0, 1fr); gap: 15px; }
  body[data-preview-device="desktop"] .legal-signature-qr,
  body[data-preview-device="desktop"] .legal-signature-qr-slot { width: 80px; height: 80px; }
  body[data-preview-device="desktop"] .legal-signature-footer-separator { height: 68px; }
  body[data-preview-device="desktop"] .legal-signature-vcard > .template-powered-by { min-height: 26px !important; padding: 6px 18px !important; }
}

/* At tablet widths the desktop composition still applies, but its original
   fixed contact column would exceed the available card width. Let both sides
   of the grid flex so the signature stays fully inside the viewport. */
@media (min-width: 760px) and (max-width: 999px) {
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-stage {
    grid-template-columns: minmax(150px, 30%) 2px minmax(0, 1fr);
    column-gap: 22px;
    padding-right: 32px;
    padding-left: 32px;
  }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-stage::before { right: 32px; }
  :where(body:not([data-preview-device="mobile"]), body[data-preview-device="desktop"]) .legal-signature-footer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    padding-right: 32px;
    padding-left: 32px;
  }
}

@media (max-width: 759px) {
  .legal-signature-vcard {
    /* The visible viewport is refreshed on browser-chrome changes. Fill that
       exact space so every phone gets a complete, proportioned signature. */
    height: var(--qardora-card-viewport-height, 100dvh);
    min-height: var(--qardora-card-viewport-height, 100dvh);
    grid-template-rows: minmax(0, 1fr) auto auto;
  }
  /* Give the content social row a deliberate separation from the final
     contact item, then reclaim the otherwise empty stage inset below it. */
  .legal-signature-information > .legal-signature-social--content,
  body[data-preview-device="mobile"] .legal-signature-information > .legal-signature-social--content {
    margin-top: 18px;
  }
  .legal-signature-stage {
    padding-top: max(calc(env(safe-area-inset-top) + 28px), clamp(48px, calc(var(--qardora-vh, 1dvh) * 7), 68px));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: clamp(8px, calc(var(--qardora-vh, 1dvh) * 1.7), 16px);
    padding-left: max(20px, env(safe-area-inset-left));
  }
  .legal-signature-vcard--without-profile[data-signature-assets="company-only"] .legal-signature-company-panel {
    width: min(100%, 300px);
    margin: 0 auto 10px !important;
  }
  .legal-signature-vcard--without-profile[data-signature-assets="company-only"] .legal-signature-company-panel-logo { max-height: 110px; }

  /* Keep the connection signature compact on phones. The QR remains easily
     scannable, while the footer no longer consumes most of the card. */
  .legal-signature-footer {
    --signature-footer-min-height: clamp(174px, calc(var(--qardora-vh, 1dvh) * 24), 220px);
    --signature-footer-gap: clamp(10px, calc(var(--qardora-vh, 1dvh) * 1.7), 14px);
    --signature-footer-padding-top: clamp(24px, calc(var(--qardora-vh, 1dvh) * 4), 36px);
    --signature-footer-padding-inline: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
    --signature-footer-padding-bottom: max(14px, env(safe-area-inset-bottom));
    --signature-qr-size: clamp(68px, min(20vw, calc(var(--qardora-vh, 1dvh) * 10)), 80px);
    --signature-save-gap: clamp(12px, calc(var(--qardora-vh, 1dvh) * 2), 16px);
    --signature-footer-separator-height: clamp(58px, calc(var(--qardora-vh, 1dvh) * 8.5), 68px);
    --signature-social-size: 38px;
    height: auto;
    min-height: var(--signature-footer-min-height);
    grid-template-rows: minmax(0, 1fr);
  }
  .legal-signature-footer > .legal-signature-social { display: none; }
  .legal-signature-connection { grid-template-columns: var(--signature-qr-size) 1px minmax(0, 1fr); gap: var(--signature-save-gap); }
  .legal-signature-qr,
  .legal-signature-qr-slot { width: var(--signature-qr-size); height: var(--signature-qr-size); }
  .legal-signature-footer-separator { height: var(--signature-footer-separator-height); }
  .legal-signature-save-copy strong { font-size: .86rem; }
  .legal-signature-save-copy small { font-size: .68rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .legal-signature-vcard { animation: legal-signature-card-load .32s cubic-bezier(.2, .75, .25, 1) both; }
  .legal-signature-company-header,
  .legal-signature-company-panel,
  .legal-signature-portrait,
  .legal-signature-information,
  .legal-signature-footer { animation: legal-signature-enter .28s ease both; }
  .legal-signature-portrait,
  .legal-signature-company-panel { animation-delay: .04s; }
  .legal-signature-information { animation-delay: .08s; }
  .legal-signature-footer { animation-delay: .12s; }
  @keyframes legal-signature-card-load { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
  @keyframes legal-signature-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
  .legal-signature-vcard[data-signature-blur="on"] .legal-signature-company-header,
  .legal-signature-vcard[data-signature-blur="on"] .legal-signature-company-panel,
  .legal-signature-vcard[data-signature-blur="on"] .legal-signature-portrait,
  .legal-signature-vcard[data-signature-blur="on"] .legal-signature-information,
  .legal-signature-vcard[data-signature-blur="on"] .legal-signature-footer { animation-name: legal-signature-enter-blur; }
  @keyframes legal-signature-enter-blur { from { opacity: 0; filter: blur(7px); transform: translateY(7px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
}