/* הצגת כרטיס בתוך מסגרת טלפון, על שולחן העבודה */
html, body { margin: 0; padding: 0; }

/* צפייה בכרטיס במחשב: הכרטיס בתוך הטלפון שבתמונה */
html.cd-page, html.cd-page body { height: 100%; margin: 0; overflow: hidden; background: #dfe5e2; }
.cd-stage { position: absolute; top: 0; left: 0; width: 1583px; height: 767px; background: url('../images/card-desk-phone.jpg') 0 0 / 100% 100% no-repeat; transform-origin: 0 0; }
.cd-screen { position: absolute; top: 0; left: 0; width: 330px; height: 747px; border: 0; border-radius: 40px; background: #0a0a0c; transform-origin: 0 0; transform: matrix3d(0.66207946, -0.00897548, 0.00000000, 0.00004806, 0.08989698, 0.65936296, 0.00000000, -0.00007271, 0.00000000, 0.00000000, 1.00000000, 0.00000000, 261.00000000, 133.50000000, 0.00000000, 1.00000000); }
.cd-copy { position: fixed; right: 0; bottom: 8px; left: 0; margin: 0; direction: rtl; text-align: center; font: 13px Arial, sans-serif; color: #555; }
.cd-copy a { color: #333; font-weight: bold; }

/* דף הדגמת העיצובים */
.dm-panel { direction: rtl; text-align: center; font-family: Arial, sans-serif; color: #1b1931; }
.dm-panel h1 { margin: 0; font-size: 30px; font-weight: bold; }
.dm-panel p { margin: 8px 0 18px; font-size: 16px; line-height: 1.4; color: #444; }
.dm-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dm-nav a { padding: 9px 18px; border: 1px solid #125370; border-radius: 22px; background: rgba(255, 255, 255, .7); color: #125370; font-size: 15px; text-decoration: none; transition: background .15s, color .15s; }
.dm-nav a:hover { background: #fff; }
.dm-nav a.is-on { background: #125370; color: #fff; }
.dm-cta { display: inline-block; margin-top: 18px; color: #125370; font-size: 15px; font-weight: bold; }
.cd-page .dm-panel { position: fixed; z-index: 2; top: 7vh; left: calc(var(--phone-right, 40vw) + 24px); right: 24px; max-width: 620px; margin: 0 auto; }
.dm-phone, .dm-phone body { height: 100%; margin: 0; }
.dm-phone body { display: flex; flex-direction: column; background: #dfe5e2; }
.dm-phone .dm-panel { flex: none; padding: 10px 8px; }
.dm-phone .dm-panel h1, .dm-phone .dm-panel p { display: none; }
.dm-phone .dm-nav { gap: 4px; }
.dm-phone .dm-nav a { padding: 6px 9px; font-size: 13px; }
.dm-phone .dm-cta { margin-top: 8px; font-size: 14px; }
.dm-screen { flex: 1; width: 100%; min-height: 0; border: 0; }