/* UZYTAK Material Calculator for websites page: additions on top of photopack.css (pp- classes). Prefix mp-. */
.mp-hero h1 { max-width: 20ch; }
.mp-app { display: flex; align-items: center; gap: 12px; }
.mp-app img { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.mp-app .pp-eyebrow { margin: 0; }
.mp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.mp-cta .pp-buy { display: inline-flex; align-items: center; justify-content: center; padding: 14px 24px; background: var(--pp-blue); }
.mp-cta .mp-secondary { background: #fff; color: var(--pp-navy); border: 1px solid var(--pp-line); }
.mp-note { margin: 12px 0 0; font-size: 14px; color: var(--pp-muted); }
.mp-small { font-size: 14px !important; color: var(--pp-muted); line-height: 1.5; margin: 14px 0 0; }
.pp-dark .mp-small { color: #9fb0cf; }

.mp-demo { margin-top: 26px; max-width: 920px; }

.mp-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; margin-top: 28px; }
.mp-who { border-top: 4px solid var(--pp-teal); }
.mp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; margin-top: 28px; }
.mp-rooms { margin-top: 22px !important; }

.mp-platform { display: flex; flex-direction: column; gap: 12px; color: var(--pp-ink); }
.mp-platform p { flex: 1; }
.mp-platform .mp-small { flex: none; margin: 0; }
.mp-platform .pp-buy { background: var(--pp-blue); }

/* Code generator: form left, live preview right; stacked on small screens. */
.mp-gen { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; margin-top: 28px; align-items: start; }
.mp-gen > * { min-width: 0; }
.mp-form { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 90px; }
.mp-field { display: flex; flex-direction: column; gap: 6px; font-weight: 650; font-size: 15px; border: 0; padding: 0; margin: 0; min-width: 0; }
.mp-field legend { padding: 0; margin-bottom: 6px; }
.mp-field select, .mp-field input[type=text], .mp-field textarea { font: inherit; font-weight: 400; font-size: 15px; padding: 10px 12px; border: 1px solid var(--pp-line); border-radius: 10px; background: #fff; color: var(--pp-ink); width: 100%; box-sizing: border-box; }
.mp-field textarea { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; line-height: 1.45; resize: vertical; background: #f6f8fb; }
.mp-inline { flex-direction: row; align-items: center; justify-content: space-between; }
.mp-inline input[type=color] { width: 56px; height: 36px; border: 1px solid var(--pp-line); border-radius: 8px; padding: 2px; background: #fff; }
.mp-check { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 15px; margin: 3px 0; cursor: pointer; }
.mp-check input { width: 18px; height: 18px; accent-color: var(--pp-blue); }
.mp-copy { border: 0; cursor: pointer; font: inherit; font-weight: 800; background: var(--pp-blue); }
.mp-preview { min-width: 0; }
.mp-preview .mp-small { margin: 0 0 8px; }
.mp-where-title { margin: 34px 0 10px; font-size: 20px; }
.mp-where { margin: 0; padding-left: 20px; color: var(--pp-muted); line-height: 1.7; }
.mp-where strong { color: var(--pp-ink); }

.mp-plans .pp-buy { margin-top: auto; }
.mp-limits { margin: 18px 0 0; padding-left: 20px; color: var(--pp-muted); line-height: 1.7; max-width: 80ch; }

@media (max-width: 860px) {
  .mp-gen { grid-template-columns: minmax(0, 1fr); }
  .mp-form { position: static; }
}