/* vCard Contact File Tools landing page only (/tools/vcard-contact-tools).
   Drop zone ids/data attributes are shared with /assets/tool-drop.js. */

.tp-vc{--vc-ink:#071b35;--vc-muted:#52647b;--vc-line:#d7e1ee;--vc-blue:#1f5cf0;--vc-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.tp-vc.mt-public{padding-top:clamp(20px,3.2vw,44px)}

/* hero */
.tp-vc-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
.tp-vc-intro{min-width:0;padding-top:6px}
.tp-vc-intro h1{margin:10px 0 14px;font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.03;letter-spacing:-.05em;overflow-wrap:anywhere}
.tp-vc-lede{margin:0;color:var(--vc-muted);font-size:1.08rem;line-height:1.6}
.tp-vc .wt-drop{margin-top:22px}
.tp-vc .wt-drop-meta{text-wrap:balance;font-size:.9rem;font-weight:650;color:#344054}
.tp-vc .wt-drop-alt{margin:2px 0 0;gap:4px 20px}
.tp-vc .wt-drop-alt a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px}

/* preview card */
.tp-vc-preview{min-width:0;border:1px solid #bfd0e5;border-radius:20px;background:#fff;box-shadow:0 22px 55px rgba(9,34,70,.12);overflow:hidden;scroll-margin-top:90px}
.tp-vc-preview-head{padding:18px 20px 14px;border-bottom:1px solid var(--vc-line);background:#f7faff}
.tp-vc-preview-head p{margin:0 0 4px;color:#3159b8;font-size:.76rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.tp-vc-preview-head h2{margin:0;font-size:1.2rem;letter-spacing:-.02em;color:var(--vc-ink)}
.tp-vc-step{padding:14px 20px;border-bottom:1px solid var(--vc-line)}
.tp-vc-step:last-child{border-bottom:0}
.tp-vc-step-label{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-weight:800;color:var(--vc-ink);font-size:.95rem}
.tp-vc-step-label b{display:inline-grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#e6efff;color:#1548c7;font-size:.82rem}
.tp-vc-table{width:100%;border-collapse:collapse;font-size:.9rem}
.tp-vc-table th{padding:6px 8px;text-align:left;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--vc-muted);border-bottom:1px solid var(--vc-line)}
.tp-vc-table td{padding:5px 8px;border-bottom:1px solid #edf1f6;color:var(--vc-ink);vertical-align:top;overflow-wrap:anywhere}
.tp-vc-table tr:last-child td{border-bottom:0}
.tp-vc-table td small{display:block;color:var(--vc-muted);font-size:.78rem}
.tp-vc-table th:last-child,.tp-vc-table td:last-child{text-align:right}
.tp-vc-conflict th:last-child,.tp-vc-conflict td:last-child{text-align:left}
.tp-vc-conflict td:first-child{font-family:var(--vc-mono);font-size:.84rem}
.tp-vc-kept{color:#05603a;background:#ecfdf3}
.tp-vc-dropped{color:#93370d;background:#fff6ed}
.tp-vc-warn{margin:10px 0 0;padding:8px 10px;border-radius:8px;background:#fffaeb;color:#7a2e0e;font-size:.84rem}
.tp-vc-group{margin:0 0 10px;font-size:.9rem;font-weight:700;color:var(--vc-ink)}
.tp-vc-group span{display:block;margin-top:2px;font-family:var(--vc-mono);font-weight:500;font-size:.8rem;color:var(--vc-muted);overflow-wrap:anywhere}
.tp-vc-code{margin:0;padding:12px 14px;border-radius:10px;background:#0b1f3f;color:#e3ecfb;font-family:var(--vc-mono);font-size:.78rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.tp-vc-code mark{background:#1f4b8f;color:#fff;border-radius:3px;padding:0 2px}
.tp-vc-note{margin:10px 0 0;color:var(--vc-muted);font-size:.84rem;line-height:1.5}

/* what you get */
.tp-vc-gets{margin:56px 0 0}
.tp-vc-gets h2{margin:0 0 18px;font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.035em}
.tp-vc-gets ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.tp-vc-gets li{min-width:0;padding:18px;border:1px solid var(--vc-line);border-radius:16px;background:#fff}
.tp-vc-gets h3{margin:0 0 6px;font-size:1.02rem;color:var(--vc-ink)}
.tp-vc-gets p{margin:0;color:var(--vc-muted);font-size:.93rem;line-height:1.55}

/* link row */
.tp-vc-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:18px}
.tp-vc-links a{font-weight:750;text-underline-offset:3px}

.tp-vc a:focus-visible{outline:3px solid rgba(23,104,229,.55);outline-offset:3px;border-radius:4px}

/* browser-only tool: hide account-job wording from the shared footer on this page */
.tp-vc-page .wt-foot-note,.tp-vc-page .wt-footer-brand>p{display:none}

@media (min-width:861px){.tp-vc-intro{position:sticky;top:96px}}
@media (max-width:1020px){.tp-vc-gets ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.tp-vc-hero{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .tp-vc-gets ul{grid-template-columns:minmax(0,1fr)}
  .tp-vc-step,.tp-vc-preview-head{padding-left:14px;padding-right:14px}
  .tp-vc-code{font-size:.74rem;padding:10px}
  .tp-vc-table td,.tp-vc-table th{padding-left:6px;padding-right:6px}
}
.tp-vc .mt-editorial>p,.tp-vc .mt-editorial>h3{max-width:780px}
.tp-vc .mt-faq p{max-width:780px}

/* related tools row (site.css is not loaded on this page) */
.tp-vc #related-tools{margin:64px 0 0}
.tp-vc #related-tools .eyebrow{margin:0;color:#3159b8;font-size:.76rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.tp-vc #related-tools h2{margin:6px 0 16px;font-size:clamp(1.4rem,2.2vw,1.9rem);letter-spacing:-.03em}
.tp-vc .related-tools-list{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.tp-vc .related-tools-list li{min-width:0;max-width:100%}
.tp-vc .related-tools-list a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--vc-line);border-radius:12px;background:#fff;color:var(--vc-ink);font-weight:700;font-size:.92rem;text-decoration:none;overflow-wrap:anywhere}
.tp-vc .related-tools-list a:hover{border-color:#9fb6dc;color:#1548c7}