/* Marketing digitale: solo ciò che manca a style.css (stessi colori e caratteri di REAssist). */
.mk-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
  font: 700 1.25rem/1 var(--font-display); letter-spacing: -.02em; }
.mk-logo:hover { color: var(--ink); }
.mk-logo em { font-style: normal; color: var(--brand); }
.mk-mark { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--brand); color: var(--brand-ink); font-size: 1.2rem; }

.mk-hero { padding: 56px 0 32px; max-width: 760px; }
.mk-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.mk-hero p { font-size: 1.15rem; color: var(--ink-soft); }
.mk-section { padding: 32px 0; }
.mk-steps { counter-reset: step; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mk-steps .card::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 700; margin-bottom: 8px; }
.mk-packages { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mk-price { font: 700 2rem/1.1 var(--font-display); color: var(--ink); margin: 8px 0 0; }
.mk-price small { font: 400 .9rem var(--font-sans); color: var(--ink-soft); }
.mk-pick { display: block; cursor: pointer; }
.mk-pick input { position: absolute; opacity: 0; }
.mk-pick input:checked + .card { border: 2px solid var(--brand); background: var(--brand-soft); }
.mk-pick input:focus-visible + .card { outline: 3px solid var(--brand-line); }

.mk-photos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 12px 0; }
.mk-photos figure { margin: 0; background: var(--surface-2); border-radius: var(--radius-sm); overflow: hidden; }
.mk-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mk-photos figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; font-size: .85rem; color: var(--ink-soft); }
.mk-compare { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.mk-compare figure { margin: 0; }
.mk-compare img { display: block; width: 100%; border-radius: var(--radius-sm); }
.mk-compare figcaption { font-size: .85rem; color: var(--ink-soft); padding-top: 4px; }
.mk-video { width: 100%; max-width: 340px; aspect-ratio: 9 / 16; border-radius: var(--radius); background: #000; }
.mk-text { white-space: pre-wrap; background: var(--surface-2); border-radius: var(--radius-sm); padding: 14px 16px; margin: 8px 0 16px; }
.mk-warning { border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-bg); color: var(--warn);
  border-radius: var(--radius-sm); padding: 14px 16px; margin: 12px 0; }
.mk-warning strong { color: var(--ink); }
.mk-progress { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.mk-progress span { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s; }
.mk-status { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 12px 0 0; font-size: .85rem; }
.mk-status li { padding: 4px 10px; border-radius: 99px; background: var(--surface-2); color: var(--faint); }
.mk-status li.done { color: var(--ok); background: var(--ok-bg); }
.mk-status li.now { color: var(--brand-ink); background: var(--brand); font-weight: 600; }
table.mk-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.mk-table th, table.mk-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
@media (max-width: 640px) { .mk-hero { padding-top: 32px; } }

/* Home (grafica di Segreteria, home.css): telefono con il video verticale al posto del palazzo. */
.mk-scene .mk-phone { position: absolute; right: 24px; top: 0; width: 290px; aspect-ratio: 9 / 16;
  border-radius: 36px; border: 2px solid #0066ff; background: #0d0d0d; overflow: hidden;
  box-shadow: 0 30px 80px -30px #0066ff; display: flex; flex-direction: column; align-items: center; }
.mk-phone::before { content: ""; position: absolute; inset: 0; background: url("img/soggiorno-800.webp") center / cover;
  filter: blur(18px) brightness(.45); transform: scale(1.2); }
.mk-phone > * { position: relative; }
.mk-phone-logo { margin-top: 44px; font: 700 .8rem/1 var(--font-display); letter-spacing: .14em; color: #ffffff; opacity: .9;
  border: 1px solid #ffffff55; border-radius: 8px; padding: 8px 12px; }
.mk-phone img { width: 100%; height: auto; margin-top: 58px; animation: mk-zoom 9s ease-in-out infinite alternate; }
.mk-phone-sub { margin: 20px 18px 0 !important; padding: 8px 12px; border-radius: 12px; background: #000000aa; color: #fff;
  font-weight: 700; font-size: .92rem; text-align: center; line-height: 1.3; }
.mk-phone-note { position: absolute !important; bottom: 22px; font-size: .68rem; color: #fff; background: #000000aa;
  padding: 4px 10px; border-radius: 99px; }
@keyframes mk-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .mk-phone img { animation: none; } }
@media (max-width: 760px) { .mk-scene .mk-phone { right: auto; left: 50%; margin-left: -120px; width: 240px; } }
.sd-plans.mk-plans { max-width: 1120px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }