.phone .profilenav{overflow-x:auto;justify-content:flex-start;gap:4px;scrollbar-width:thin}.phone .profilenav button{flex:0 0 auto;padding:10px 12px;white-space:nowrap;min-height:44px}.phone[data-page="gallery"] [data-section="gallery"]{display:block}
.contact-details{display:grid;gap:12px;margin:20px 0}.phone .contact-card{display:block;border:1px solid color-mix(in srgb,currentColor 16%,transparent);border-radius:18px;background:color-mix(in srgb,var(--card-bg,#fff) 94%,currentColor 6%);padding:16px;text-align:left;color:inherit;text-decoration:none}.phone .contact-value{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;min-width:0}.contact-value>span:nth-child(2){flex:1;min-width:0}.contact-value small{display:block;letter-spacing:.12em;font-size:10px;opacity:.65;margin-bottom:5px}.contact-value strong{display:block;font-size:.95em;overflow-wrap:anywhere;font-weight:650}.contact-icon{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border-radius:12px;background:color-mix(in srgb,currentColor 9%,transparent);font-size:22px}.contact-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.phone .contact-actions button,.phone .contact-actions a{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 9px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:10px;background:transparent;color:inherit;font-family:inherit;font-weight:600;font-size:12px;line-height:1.4;text-decoration:none;cursor:pointer}.phone .contact-actions a{background:#e5f6eb;color:#175a35;border-color:#bcdcc8}
.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.gallery-tile{min-width:0}.gallery-tile>button:first-child{display:block;width:100%;aspect-ratio:1;border:0;padding:0;border-radius:14px;overflow:hidden;background:#e8ebf0;cursor:zoom-in}.gallery-tile img{display:block;width:100%;height:100%;object-fit:cover}.gallery-tile .btn{margin-top:6px;width:100%}.gallery-dialog{position:fixed;inset:0;margin:auto;border:0;border-radius:18px;padding:14px;background:#11151d;color:#fff;width:min(94vw,1000px);max-height:94dvh;box-sizing:border-box}.gallery-dialog::backdrop{background:#060910dc}.gallery-dialog>img{display:block;width:100%;height:calc(85dvh - 130px);object-fit:contain}.gallery-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px}.gallery-toolbar p{overflow-wrap:anywhere;text-align:center;font-size:14px}.gallery-toolbar button{flex-shrink:0;border:1px solid #ffffff40;border-radius:12px;color:white;background:#ffffff12;min-height:44px;min-width:44px;font-size:20px;cursor:pointer}.gallery-toolbar button:disabled{opacity:.3}button:focus-visible,a:focus-visible{outline:3px solid #758aff;outline-offset:3px}
/* v26 — restrained silver detailing; custom card colors remain authoritative. */
.phone,.publicview .phone{border:2px solid transparent;border-radius:28px;background:linear-gradient(var(--card-bg,#f4f6fa),var(--card-bg,#f4f6fa)) padding-box,linear-gradient(135deg,#fafbfd 0%,#a5aebc 20%,#edf0f5 37%,#8b96a6 58%,#f9fafc 77%,#b0bac7 100%) border-box;box-shadow:0 24px 65px #17233324,0 4px 14px #17233312;overflow:hidden;isolation:isolate}
.phone .cover{border-bottom:1px solid #cbd2db88}.phone .profilebody{padding-bottom:28px}.phone .profileimage{border:4px solid #e3e7ed;outline:1px solid #fff;box-shadow:0 0 0 2px #a3adbb,0 8px 22px #111c2b26}.phone .profilebody h3{margin-top:18px;letter-spacing:-.7px}.phone .profilebody .job{margin-top:5px;opacity:.8}.phone .profilebody .company{font-size:.8em;letter-spacing:.065em;margin-top:4px}.phone .bio{line-height:1.75;opacity:.85;margin:20px 0}
.phone .profilenav{padding:5px;background:color-mix(in srgb,var(--card-bg,#f4f6fa) 90%,var(--card-ink,#1c2c40) 10%);border:1px solid color-mix(in srgb,var(--card-ink,#1c2c40) 14%,transparent);border-radius:16px;gap:3px;justify-content:center}.phone .profilenav button{border:0;border-radius:11px;background:transparent;color:var(--card-ink,#1c2c40);font-size:11px;padding:10px 11px;transition:background .18s,box-shadow .18s}.phone .profilenav button[aria-pressed=true]{background:var(--card-bg,#f4f6fa);color:var(--card-ink,#1c2c40);box-shadow:0 2px 7px #17233320,inset 0 0 0 1px #aeb8c64d}
.phone .contact-details{gap:14px;margin:22px 0}.phone .contact-card{padding:17px;border:1px solid color-mix(in srgb,var(--card-ink,#1c2c40) 13%,transparent);background:linear-gradient(130deg,#ffffff0d,transparent),var(--card-bg,#f4f6fa);box-shadow:0 5px 15px #15233509,inset 0 1px 0 #ffffff35;border-radius:18px}.phone .contact-icon{background:linear-gradient(145deg,#fafbfd,#dfe4eb);color:#727d8b;border:1px solid #cbd2dc;box-shadow:inset 0 1px 0 #fff;width:40px;height:40px;border-radius:13px}.phone .contact-value strong{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.01em}.phone .contact-actions{border-top:1px solid color-mix(in srgb,var(--card-ink,#1c2c40) 10%,transparent);padding-top:13px;margin-top:14px;gap:8px}.phone .contact-actions button,.phone .contact-actions a{gap:7px;font-size:11px;min-height:46px;border-radius:12px;line-height:1.4;box-shadow:0 2px 4px #15233506}.contact-actions svg,.save-contact svg{flex:0 0 20px}.phone .contact-actions button{background:linear-gradient(145deg,#f8fafc,#dfe5ed);color:#354150;border:1px solid #bdc7d4}.phone .contact-actions a{background:#edf7f1;border:1px solid #c5dfd0;color:#246442}.phone .contact-actions a svg{color:#23985c}.phone .save-contact{display:flex;align-items:center;justify-content:center;gap:9px}.phone .plink,.phone .bankdetail{border-radius:15px}.phone .powered{margin-top:26px;letter-spacing:.12em;font-size:9px;opacity:.6}
@media(max-width:680px){.publicview{padding:12px 10px 24px}.publicview .phone{border-radius:25px}.phone .contact-card{padding:15px}.phone .profilebody{padding-left:18px;padding-right:18px}}
@media(prefers-reduced-motion:reduce){.phone .profilenav button{transition:none}}

/* v28: larger portrait, consistent in preview and public card. */
.phone .profilebody .profileimage,.publicview .phone .profilebody .profileimage{width:120px;height:120px;margin-top:-60px;font-size:32px}

/* v29: a more substantial silver portrait ring. */
.phone .profilebody .profileimage,.publicview .phone .profilebody .profileimage{border:7px solid #dce2ea;outline:1px solid #f9fbff;box-shadow:0 0 0 2px #9da8b8,0 9px 24px #111c2b29}

/* v30: fit the complete cover image; softly fill mismatched aspect ratios. */
.phone .cover,.demo-card .demo-cover{overflow:hidden}
.phone .cover .card-cover-image,.demo-card .demo-cover .card-cover-image{object-fit:contain;object-position:center;z-index:1}
.phone .cover .card-cover-backdrop,.demo-card .demo-cover .card-cover-backdrop{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:blur(16px) brightness(.72);transform:scale(1.18);z-index:0;pointer-events:none}
.card-cover-backdrop[hidden]{display:none!important}

/* v32: fill the full cover, without blurred side panels or distortion. */
.phone .cover .card-cover-image,.demo-card .demo-cover .card-cover-image{object-fit:cover;object-position:center center;width:100%;height:100%}
.phone .cover .card-cover-backdrop,.demo-card .demo-cover .card-cover-backdrop{display:none}

/* v33: polished silver perimeter and a lighter portrait bezel. */
.phone,.publicview .phone{
 border:5px solid transparent;
 background:linear-gradient(var(--card-bg,#f4f6fa),var(--card-bg,#f4f6fa)) padding-box,
 conic-gradient(from 145deg at 50% 50%,#788391 0deg,#cbd2db 28deg,#fff 49deg,#e0e5ec 68deg,#8893a2 101deg,#616d7b 124deg,#bdc7d3 150deg,#fdfefe 181deg,#fff 205deg,#aab5c3 237deg,#737f8e 265deg,#dce3eb 295deg,#fff 321deg,#b1bdca 341deg,#788391 360deg) border-box;
 box-shadow:0 1px 0 #ffffffed,0 0 0 1px #8d98a657,0 12px 28px #15233516,0 30px 65px #15233524;
}
.phone .profilebody .profileimage,.publicview .phone .profilebody .profileimage{
 width:128px;height:128px;margin-top:-64px;
 border:3px solid transparent;outline:1px solid #ffffffb3;
 background:linear-gradient(#e7ebf1,#e7ebf1) padding-box,conic-gradient(from 130deg,#85919f,#fefefe 18%,#bdc6d2 35%,#74818f 50%,#fff 72%,#a3afbe 89%,#85919f) border-box;
 box-shadow:0 0 0 1px #8895a66b,0 9px 22px #111c2b24;
}

/* v37: full rectangular cover, rounded corners and overlapping portrait. */
.phone .cover:has(.card-cover-image),.publicview .phone .cover:has(.card-cover-image),.demo-card .demo-cover:has(.card-cover-image:not([hidden])){display:flex;align-items:center;justify-content:center;height:260px;min-height:0;padding:0;line-height:0;overflow:hidden;background-image:none;background-color:var(--card-bg,#f4f6fa)}
.phone .cover .card-cover-image,.demo-card .demo-cover .card-cover-image{position:relative;inset:auto;display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:fill;border-radius:22px;box-shadow:none}
.phone:has(.card-cover-image) .profilebody .profileimage,.publicview .phone:has(.card-cover-image) .profilebody .profileimage{margin-top:-64px;position:relative;z-index:2}
.demo-card:has(.card-cover-image:not([hidden])) .demo-avatar{margin-top:-54px;position:relative;z-index:2}
.phone .coverbrand,.demo-card .demo-cover [data-demo-brand]{line-height:1.4}
.demo-card .demo-cover .card-cover-image[hidden]{display:none}

/* v38: recognizable social/PDF icons and larger top-left company logo. */
.phone .brand-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 32px}
.phone .brand-icon svg{width:27px;height:27px}
.phone .brand-linkedin{color:#0a66c2}.phone .brand-instagram{color:#c13584}.phone .brand-whatsapp{color:#26985b}.phone .brand-pdf{color:#d83232}
.phone .plink .linkdetail{flex:1;min-width:0}
.phone [data-section="catalog"] .btn{width:100%;text-align:left;justify-content:flex-start;gap:12px}
.phone [data-section="catalog"] .btn>span:last-child{min-width:0;overflow-wrap:anywhere}
.phone .coverbrand:has(.companylogo),.publicview .phone .coverbrand:has(.companylogo){top:16px;left:16px;right:auto;width:140px;max-width:45%;height:88px;justify-content:flex-start;align-items:flex-start;z-index:3}
.phone .coverbrand .companylogo{width:140px;height:88px;max-width:100%;max-height:88px;object-fit:contain;object-position:left top}

/* Explicit separation between profile ground and cover color. */
.phone .profilebody,.demo-card .demo-card-body{background:var(--card-bg,#f4f6fa)}
.phone .cover,.publicview .phone .cover,.demo-card .demo-cover{background-color:var(--card-color,#152335);background-image:none}

/* v44 shared public/editor/demo card — customizable two-tone ground and foil edge. */
.phone,.publicview .phone,#landing [data-demo-card-host] .phone{border:5px solid transparent;background:linear-gradient(155deg,var(--card-bg,#111418) 12%,var(--card-bg-end,#9b783b) 100%) padding-box,conic-gradient(from 135deg,var(--card-frame,#d7b66d),color-mix(in srgb,var(--card-frame) 25%,white) 12%,var(--card-frame,#d7b66d) 25%,color-mix(in srgb,var(--card-frame) 45%,black) 38%,var(--card-frame,#d7b66d) 52%,color-mix(in srgb,var(--card-frame) 20%,white) 67%,var(--card-frame,#d7b66d) 80%,color-mix(in srgb,var(--card-frame) 40%,black) 90%,var(--card-frame,#d7b66d)) border-box;color:var(--card-ink);box-shadow:0 20px 55px #0003;overflow:hidden}
.phone .profilebody{background:transparent}
.phone .profilebody h3,.phone .job,.phone .company,.phone .bio,.phone .powered{color:var(--card-ink)}
.phone .profilebody .profileimage{border-color:var(--card-frame);background:var(--card-bg);color:var(--card-ink);outline:0}
.phone .profilenav{background:#00000024;border:1px solid color-mix(in srgb,var(--card-frame) 45%,transparent);padding:5px}
.phone .profilenav button{color:var(--card-ink);background:transparent;box-shadow:none}
.phone .profilenav button[aria-pressed=true]{background:var(--card-frame);color:#181714;box-shadow:0 4px 15px #0002}
.phone .contact-card,.phone .plink,.phone .bankdetail{background:#00000020;border:1px solid color-mix(in srgb,var(--card-frame) 45%,transparent);color:var(--card-ink);box-shadow:none}
.phone .contact-value,.phone .contact-value strong,.phone .contact-value small,.phone .plink strong,.phone .plink small{color:var(--card-ink)}
.phone .contact-icon{background:#ffffff10;border-color:#ffffff28;color:var(--card-frame)}
.phone .phone-icon{color:#b5bac2}
.phone .contact-actions{border-color:#ffffff20}
.phone .contact-actions button{background:var(--card-frame);border-color:var(--card-frame);color:#171714}
.phone .contact-actions a{background:#e4f4e9;color:#17613d;border-color:#c0dccb}
.phone .powered{opacity:.75;border-color:#ffffff25}
#landing [data-demo-card-host] .phone{width:100%;max-width:480px;margin:auto}
#landing [data-demo-card-host] .phone h3{font-family:var(--card-font);font-size:calc(var(--card-size) + 10px);font-weight:var(--card-weight);line-height:1.25;letter-spacing:-.6px}
#landing [data-demo-card-host] .phone p{font-size:var(--card-size)}
#landing [data-demo-card-host] .phone a{color:inherit}
.phone,.publicview .phone,#landing [data-demo-card-host] .phone{border-radius:28px}
.phone .profilebody .profileimage,.publicview .phone .profilebody .profileimage{border-color:var(--card-frame);background:var(--card-bg);color:var(--card-ink);outline:0}
/* v45 — brief public-card opening, independent of the landing animation. */
.nfc-intro{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 75% 80%,#514125 0%,#141619 60%);color:#ead4a5;animation:nfcExit 4.4s both}
.nfc-intro-stage{position:relative;width:min(360px,92vw);height:355px}
.nfc-intro-phone{position:absolute;left:55px;top:8px;width:174px;height:325px;border:4px solid #b4a78b;border-radius:29px;background:linear-gradient(150deg,#0b1015,#514125);box-shadow:0 18px 50px #0007;transform:rotate(-7deg);overflow:hidden}
.nfc-intro-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);height:15px;width:56px;background:#060809;border-radius:12px;z-index:2}
.nfc-intro-screen{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:30px 16px;animation:nfcLogo 4.4s both;text-align:center}
.nfc-intro-brand{font-size:15px;font-weight:650;line-height:1.5;overflow-wrap:anywhere}
.nfc-intro-screen img{width:126px;height:85px;object-fit:contain;border-radius:10px;background:#fff;padding:9px}
.nfc-intro-ready{font-size:10px;color:#e6d8bc;letter-spacing:.06em}
.nfc-intro-card{position:absolute;left:153px;top:155px;width:180px;height:113px;border:1px solid #d7b66d;border-radius:10px;padding:18px;background:linear-gradient(135deg,#242629,#07090b);box-shadow:0 15px 35px #0008;animation:nfcTap 4.4s both}
.nfc-intro-card>span{font-size:12px;display:block;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Georgia,serif;letter-spacing:.04em}
.nfc-intro-card svg{position:absolute;right:16px;bottom:28px;width:29px;height:29px}
.nfc-intro-card small{position:absolute;bottom:13px;font-size:8px;letter-spacing:.08em}
.nfc-intro-pulse{position:absolute;left:168px;top:84px;width:44px;height:44px;border:2px solid #ead4a5;border-radius:50%;animation:nfcPulse 4.4s both;pointer-events:none}
.nfc-intro-caption{font-size:17px;letter-spacing:.03em;margin:14px 0 24px;color:#ead4a5}
.nfc-intro-skip{font:inherit;font-size:13px;color:#f9e7c0;background:#ffffff0b;border:1px solid #bba77e70;border-radius:24px;padding:11px 25px;cursor:pointer}
.nfc-intro-skip:focus-visible{outline:2px solid #fff;outline-offset:4px}
.nfc-intro-progress{height:2px;width:130px;background:#e1c18a;margin-top:25px;transform-origin:left;animation:nfcProgress 4.4s linear both}
@keyframes nfcTap{0%,10%{transform:translate(35px,20px) rotate(12deg)}32%,43%{transform:translate(-42px,-92px) rotate(-7deg)}65%,100%{transform:translate(45px,35px) rotate(12deg);opacity:0}}
@keyframes nfcLogo{0%,35%{opacity:0;transform:translateY(9px)}53%,100%{opacity:1;transform:translateY(0)}}
@keyframes nfcPulse{0%,27%{opacity:0;transform:scale(.4)}35%,42%{opacity:1}57%,100%{opacity:0;transform:scale(2.2)}}
@keyframes nfcExit{0%,88%{opacity:1}100%{opacity:0}}
@keyframes nfcProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.nfc-intro{display:none}}
/* v46 — always-visible navigation and a combined media section. */
.phone .profilenav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.phone .profilenav button{width:100%;min-height:44px;min-width:0;white-space:normal;font-size:11px;line-height:1.25;padding:7px 2px}
.phone .media-heading{font:inherit;font-weight:650;color:var(--card-ink);text-align:left;margin:24px 0 13px}
.phone .gallery-placeholders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.phone .gallery-placeholder{aspect-ratio:1;border:1px dashed color-mix(in srgb,var(--card-frame) 60%,transparent);border-radius:15px;background:#ffffff08;display:grid;place-items:center;color:var(--card-frame)}
.phone .gallery-placeholder svg{width:38px;height:38px;opacity:.5}
.phone .sectionempty{color:var(--card-ink);opacity:.7;font-size:13px;line-height:1.6}

.phone .billing-detail{margin:10px 0;padding:14px;text-align:left;overflow-wrap:anywhere}.phone .billing-detail small{opacity:.7;font-size:11px}.phone .billing-detail p{white-space:pre-wrap;margin:5px 0 0;font-size:14px}

.media-editor-divider{border:0;border-top:1px solid #dce0e8;margin:30px 0}

/* Stable card frame: each tab owns the same scrollable content area. */
.phone .profilebody>[data-section]{height:360px;min-height:360px;max-height:360px;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:thin;padding:2px 4px 10px;box-sizing:border-box}
.phone .gallery-grid,.phone .gallery-placeholders{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
.phone .gallery-placeholder{border-radius:10px}.phone .gallery-placeholder svg{width:24px;height:24px}
.phone .social-unset{opacity:.45;cursor:default}.phone .social-unset small{font-size:11px}.brand-youtube{color:#ff3535}
/* v50: the public card follows the visible mobile viewport, including browser chrome. */
.publicview{height:100vh;height:100dvh;width:100%;max-width:480px;margin:0 auto;padding:calc(8px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px));box-sizing:border-box}
.publicview .phone{height:100%;min-height:0;max-height:100%;display:flex;flex-direction:column}
.publicview .phone .cover,.publicview .phone .cover:has(.card-cover-image){height:clamp(80px,20dvh,160px);min-height:0;flex-shrink:0}
.publicview .phone .profilebody{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 14px 8px}
.publicview .phone .profilebody .profileimage,.publicview .phone:has(.card-cover-image) .profilebody .profileimage{width:clamp(64px,13dvh,104px);height:clamp(64px,13dvh,104px);margin:calc(clamp(64px,13dvh,104px) / -2) auto 4px;flex-shrink:0}
.publicview .phone .profilebody h3{font-size:clamp(18px,3dvh,24px);line-height:1.15;margin:6px 0 3px;flex-shrink:0;max-height:3.5em;overflow:auto}
.publicview .phone .profilebody .job,.publicview .phone .profilebody .company{font-size:12px;line-height:1.3;margin:2px 0;flex-shrink:0;max-height:2.6em;overflow:auto}
.publicview .phone .profilenav{margin:10px 0 8px;flex-shrink:0}
.publicview .phone .profilebody>[data-section]{flex:1;min-height:0;height:auto;max-height:none;margin:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.publicview .phone .powered{flex-shrink:0;margin:7px 0 0;font-size:8px}
.publicview .phone .contact-details{margin:6px 0;gap:8px}
.publicview .phone .contact-card{padding:10px;border-radius:13px}
.publicview .phone .contact-actions{margin-top:8px;padding-top:8px}
.publicview .phone .bio{margin:5px 0 10px}
@media(max-height:500px){
.publicview .phone .cover,.publicview .phone .cover:has(.card-cover-image){height:55px}
.publicview .phone .profilebody .profileimage,.publicview .phone:has(.card-cover-image) .profilebody .profileimage{width:48px;height:48px;margin-top:-24px}
.publicview .phone .coverbrand{top:6px;height:40px}
.publicview .phone .companylogo{max-height:36px;width:auto}
.publicview .phone .profilebody h3{font-size:16px;margin:2px 0}
.publicview .phone .profilebody .job,.publicview .phone .profilebody .company{font-size:10px;margin:0}
.publicview .phone .profilenav{margin:4px 0}
.publicview .phone .powered{margin-top:3px}
}

.phone.blank-cover .cover:not(:has(.card-cover-image)){background:transparent;border-bottom-color:transparent}.phone.blank-cover .cover:not(:has(.card-cover-image)) .coverbrand{color:var(--card-ink)}

/* v53 — action color is independent from the foil frame. */
.phone .profilenav button[aria-pressed=true],.phone .contact-actions button,.phone .contact-actions a,.phone .save-contact,.phone [data-section] .btn{background:var(--card-accent,#2458a6);border-color:var(--card-accent,#2458a6);color:var(--card-accent-ink,#fff)}
.phone .contact-actions a svg{color:inherit}

.privacy-option{display:flex;align-items:flex-start;gap:12px;margin:18px 0;line-height:1.6}.privacy-option input{width:20px;min-width:20px;height:20px;margin-top:3px}.privacy-notice{padding:12px;border:1px solid #dce2eb;border-radius:10px;background:#f4f6fa}