/* ──────────────────────────────────────────────────────────────────
   marketing-mockups.css — product-style mockups for feature pages.
   Pure-CSS browser & phone frames showing each feature's UI, matching
   the marketing page design language (tokens + radii + shadows).
   ────────────────────────────────────────────────────────────────── */

/* ── Shared frame pieces ── */
.mk-mock { position: relative; }

/* soft gradient glow behind the frame */
.mk-mock-glow {
    position: absolute;
    inset: -12% -8% auto;
    height: 80%;
    background: radial-gradient(60% 60% at 50% 30%, rgba(30, 125, 153, 0.16), transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.mk-browser {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #d1dce5;
    box-shadow: 0 24px 56px rgba(10, 40, 58, 0.16), 0 2px 8px rgba(10, 40, 58, 0.06);
    overflow: hidden;
}
.mk-browser-top {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    background: #f1f5f8;
    border-bottom: 1px solid #dce6ed;
}
.mk-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; flex-shrink: 0; }
.mk-dot-red    { background: #ff5f57; }
.mk-dot-yellow { background: #febc2e; }
.mk-dot-teal   { background: #1e7d99; }
.mk-browser-url {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-left: 0.5rem;
    font-family: "Consolas", "Menlo", monospace;
    background: #e9eef3;
    border-radius: 0.35rem;
    padding: 0.15rem 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    text-align: center;
}
.mk-browser-body {
    padding: 1.1rem 1.2rem 1.3rem;
    background: #f6f8fb;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* phone frame */
.mk-phone {
    position: relative;
    z-index: 1;
    width: 250px;
    margin: 0 auto;
    background: #0d2a3a;
    border-radius: 2.2rem;
    padding: 0.6rem;
    box-shadow: 0 30px 60px rgba(10, 40, 58, 0.28), 0 2px 8px rgba(10, 40, 58, 0.1);
}
.mk-phone-screen {
    background: #f6f8fb;
    border-radius: 1.8rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 430px;
    position: relative;
}
.mk-phone-notch {
    width: 92px;
    height: 22px;
    background: #0d2a3a;
    border-radius: 0 0 14px 14px;
    margin: 0 auto;
    flex-shrink: 0;
}
.mk-phone-body { padding: 1.1rem 1rem 1.3rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }

/* ── Mockup atoms ── */
.mk-mock-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: #fff;
    border: 1px solid #dce6ed;
    border-radius: 0.55rem;
    padding: 0.55rem 0.7rem;
}
.mk-mock-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #e3f3f9, #cce8f2);
    color: #0d5b78;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.mk-mock-icon--aqua { background: linear-gradient(135deg, #d4eef6, #b8deeb); color: #186d87; }
.mk-mock-icon--amber { background: linear-gradient(135deg, #fdeed6, #f8dcb0); color: #b36a18; }
.mk-mock-icon--violet { background: linear-gradient(135deg, #e7e5fc, #d1ccf7); color: #4a3bb5; }
.mk-mock-icon--teal { background: linear-gradient(135deg, #d8f1f5, #b5e2ea); color: #0a5569; }
.mk-mock-icon--rose { background: linear-gradient(135deg, #fbdede, #f5c3c3); color: #9b2f2f; }

.mk-mock-label { flex: 1; min-width: 0; }
.mk-mock-label-title { font-size: 0.78rem; font-weight: 700; color: #1e293b; line-height: 1.25; }
.mk-mock-label-sub { font-size: 0.66rem; color: #64748b; }

.mk-chip {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}
.mk-chip-teal  { background: #d4eef6; color: #186d87; border: 1px solid #a8d8e8; }
.mk-chip-blue  { background: #d9ebf3; color: #1f607b; border: 1px solid #b8dcea; }
.mk-chip-amber { background: #fdeed6; color: #9a5a12; border: 1px solid #f0d3a3; }
.mk-chip-gray  { background: #e9eef3; color: #5f7688; border: 1px solid #d5dfe6; }

.mk-mock-btn {
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(140deg, #1e7d99, #186d87);
    border-radius: 0.45rem;
    padding: 0.35rem 0.8rem;
    white-space: nowrap;
    border: none;
}
.mk-mock-btn--ghost {
    background: #fff;
    color: #1e7d99;
    border: 1px solid #b8dcea;
}

/* stat tiles */
.mk-mock-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.45rem;
}
.mk-mock-stat {
    background: #fff;
    border: 1px solid #dce6ed;
    border-radius: 0.5rem;
    padding: 0.5rem 0.55rem;
}
.mk-mock-stat-lbl {
    font-size: 0.52rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mk-mock-stat-val {
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f4d66;
    line-height: 1.2;
    margin-top: 0.1rem;
}

/* chart bars */
.mk-mock-chart {
    background: #fff;
    border: 1px solid #dce6ed;
    border-radius: 0.55rem;
    padding: 0.7rem 0.75rem;
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    height: 110px;
}
.mk-mock-bar {
    flex: 1;
    border-radius: 0.2rem 0.2rem 0 0;
    background: linear-gradient(180deg, #7fc4dd, #2e8cae);
    min-height: 12%;
}
.mk-mock-bar--teal { background: linear-gradient(180deg, #92cde2, #1e7d99); }
.mk-mock-bar--dim { background: linear-gradient(180deg, #d8e3ea, #9db3c0); }

/* domain row with mono token */
.mk-mock-mono {
    font-family: "Consolas", "Menlo", monospace;
    font-size: 0.62rem;
    color: #334155;
    background: #f1f5f8;
    border: 1px solid #dce6ed;
    border-radius: 0.4rem;
    padding: 0.4rem 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* member rows */
.mk-mock-member { display: flex; align-items: center; gap: 0.6rem; }
.mk-mock-avatar {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #cfe6f0, #a9cfe0);
    color: #0d5b78;
    font-size: 0.62rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mk-mock-avatar--alt { background: linear-gradient(135deg, #fde5c8, #f6c98d); color: #8a4e0c; }
.mk-mock-avatar--alt2 { background: linear-gradient(135deg, #d8f1f5, #a8dce6); color: #0a5569; }

/* link-in-bio (phone) */
.mk-mock-bio-avatar {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    margin: 0 auto;
    background: linear-gradient(135deg, #1e7d99, #0d5b78);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
}
.mk-mock-bio-name { text-align: center; font-size: 0.85rem; font-weight: 800; color: #0d2a3a; }
.mk-mock-bio-sub { text-align: center; font-size: 0.66rem; color: #64748b; margin-top: 0.1rem; }
.mk-mock-bio-link {
    background: #fff;
    border: 1px solid #dce6ed;
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
    box-shadow: 0 2px 6px rgba(10, 40, 58, 0.05);
}
.mk-mock-bio-lead { background: #fff; border: 1px dashed #b8dcea; border-radius: 0.55rem; padding: 0.55rem 0.7rem; }
.mk-mock-bio-lead input {
    width: 100%;
    border: 1px solid #dce6ed;
    border-radius: 0.4rem;
    font-size: 0.68rem;
    padding: 0.4rem 0.6rem;
    color: #334155;
}

/* QR grid */
.mk-mock-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 0.6rem 0; }
.mk-mock-qr {
    width: 128px;
    height: 128px;
    background:
        conic-gradient(#0d2a3a 25%, transparent 0 50%, #0d2a3a 0 75%, transparent 0) 0 0 / 32px 32px;
    border-radius: 0.45rem;
    border: 1px solid #dce6ed;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mk-mock-qr-center {
    width: 30px;
    height: 30px;
    border-radius: 0.35rem;
    background: linear-gradient(140deg, #1e7d99, #0d5b78);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mk-mock-qr-formats { display: flex; gap: 0.4rem; }

/* success banner */
.mk-mock-success {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #eaf7fb;
    border: 1px solid #b8dfea;
    color: #186d87;
    border-radius: 0.55rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
}

/* floating badges around the frame */
.mk-mock-float {
    position: absolute;
    z-index: 2;
    background: #fff;
    border: 1px solid #d1dce5;
    border-radius: 0.8rem;
    box-shadow: 0 14px 32px rgba(10, 40, 58, 0.16);
    padding: 0.6rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #0f3143;
}
.mk-mock-float--tl { top: 6%; left: -6%; }
.mk-mock-float--br { bottom: 8%; right: -5%; }
.mk-mock-float-icon {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* hero layout */
.mk-feature-hero {
    padding: 3.5rem 0 2rem;
    position: relative;
}
.mk-feature-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 3rem;
    align-items: center;
}
.mk-feature-hero-copy .mk-kicker { margin-bottom: 0.9rem; }
.mk-feature-hero-copy h1 {
    font-family: "Sora", "Segoe UI", sans-serif;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 800;
    color: #0d2a3a;
    line-height: 1.12;
    margin-bottom: 1rem;
}
.mk-feature-hero-copy .mk-hero-sub {
    color: var(--mk-muted);
    font-size: 1.02rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
    max-width: 52ch;
}
.mk-feature-hero-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; }

.mk-feature-trust {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    gap: 0.45rem 1.4rem;
    justify-content: start;
}
.mk-feature-trust li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #385565;
}
.mk-feature-trust li i { color: #1e7d99; }

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .mk-feature-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .mk-mock-float--tl { left: 0; }
    .mk-mock-float--br { right: 0; }
}
@media (max-width: 575.98px) {
    .mk-feature-hero { padding: 2.25rem 0 1rem; }
    .mk-feature-trust { grid-template-columns: 1fr; }
    .mk-phone { width: 220px; }
    .mk-mock-float--tl { top: -4%; }
}

/* Match the pared-back public marketing system. The mockups still show the
   product, but no longer compete with the page copy through glow or badges. */
.marketing-page .mk-mock-glow,
.marketing-page .mk-mock-float { display: none; }

.marketing-page .mk-browser {
    border-color: #c9dcde;
    border-radius: 0.7rem;
    box-shadow: 0 12px 28px rgba(16, 46, 51, 0.1);
}

.marketing-page .mk-browser-top { padding: 0.55rem 0.8rem; background: #f5f7fb; border-bottom-color: #dce6ed; }
.marketing-page .mk-browser-body { padding: 0.9rem; background: #f8fcfc; gap: 0.65rem; }
.marketing-page .mk-phone { box-shadow: 0 12px 28px rgba(16, 46, 51, 0.16); }
.marketing-page .mk-phone-screen { min-height: 390px; }

@media (max-width: 575.98px) {
    .marketing-page .mk-browser-url { font-size: 0.62rem; }
    .marketing-page .mk-mock-stats { grid-template-columns: repeat(2, 1fr); }
    .marketing-page .mk-phone { width: min(220px, 76vw); }
    .marketing-page .mk-phone-screen { min-height: 360px; }
}

/* QR codes are generated and exported from a desktop workspace, not a phone. */
.marketing-page .mk-qr-mock {
    width: min(100%, 500px);
    margin-inline: auto;
}

.marketing-page .mk-qr-workspace {
    overflow: hidden;
    background: #fff;
    border: 1px solid #c9dcde;
    border-radius: 0.75rem;
    box-shadow: 0 12px 28px rgba(16, 46, 51, 0.1);
}

.marketing-page .mk-qr-workspace-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0.7rem 0.9rem;
    background: #f5f7fb;
    border-bottom: 1px solid #dce6ed;
}

.mk-qr-workspace-title,
.mk-qr-workspace-status,
.mk-qr-url,
.mk-qr-download {
    display: inline-flex;
    align-items: center;
}

.mk-qr-workspace-title {
    gap: 0.5rem;
    color: #0f3143;
    font-size: 0.82rem;
    font-weight: 800;
}

.mk-qr-workspace-mark {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    color: var(--lt-primary, #1e7d99);
    background: var(--lt-primary-soft, #d4eef6);
    border-radius: 0.4rem;
    font-size: 0.82rem;
}

.mk-qr-workspace-status {
    gap: 0.3rem;
    color: #71858a;
    font-size: 0.7rem;
    font-weight: 750;
    white-space: nowrap;
}

.mk-qr-workspace-status i { color: var(--lt-primary, #1e7d99); font-size: 0.9rem; }

.marketing-page .mk-qr-workspace-body {
    display: grid;
    grid-template-columns: minmax(195px, 0.9fr) minmax(0, 1fr);
    align-items: stretch;
}

.mk-qr-preview {
    display: flex;
    min-height: 236px;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 1.15rem;
    background: #f5f7fb;
    border-right: 1px solid #dce6ed;
    flex-direction: column;
}

.marketing-page .mk-mock-qr--studio {
    width: 158px;
    height: 158px;
    overflow: hidden;
    background: #fff;
    border-color: #d6e5e7;
    border-radius: 0.55rem;
    box-shadow: 0 4px 12px rgba(16, 46, 51, 0.06);
}

.mk-qr-art {
    position: absolute;
    inset: 11px;
    width: calc(100% - 22px);
    height: calc(100% - 22px);
    color: #0f3143;
}

.marketing-page .mk-mock-qr--studio .mk-mock-qr-center {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    background: var(--lt-primary, #1e7d99);
    border: 3px solid #fff;
    border-radius: 0.45rem;
    box-shadow: 0 2px 7px rgba(16, 46, 51, 0.16);
}

.mk-qr-preview-caption {
    color: #71858a;
    font-size: 0.68rem;
    font-weight: 650;
}

.mk-qr-export {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: center;
    padding: 1.15rem;
    flex-direction: column;
}

.mk-qr-export-label {
    margin-bottom: 0.45rem;
    color: #71858a;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mk-qr-url {
    width: 100%;
    min-height: 38px;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    overflow: hidden;
    color: #0f3143;
    background: #f8fcfc;
    border: 1px solid #dce6ed;
    border-radius: 0.4rem;
    font-size: 0.74rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-qr-url i { flex: 0 0 auto; color: var(--lt-primary, #1e7d99); font-size: 0.8rem; }

.mk-qr-format-picker {
    display: inline-flex;
    gap: 0.15rem;
    padding: 0.2rem;
    margin-top: 0.8rem;
    background: #f2f8f8;
    border: 1px solid #dce6ed;
    border-radius: 0.45rem;
}

.mk-qr-format {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0.25rem 0.55rem;
    color: #71858a;
    border-radius: 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
}

.mk-qr-format--active { color: #fff; background: var(--lt-primary, #1e7d99); }

.mk-qr-export-meta {
    margin-top: 0.7rem;
    color: #71858a;
    font-size: 0.68rem;
    line-height: 1.45;
}

.mk-qr-download {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    margin-top: 1rem;
    color: #fff;
    background: var(--lt-primary, #1e7d99);
    border-radius: 0.4rem;
    font-size: 0.74rem;
    font-weight: 800;
}

.mk-qr-download i { font-size: 0.85rem; }

@media (max-width: 575.98px) {
    .marketing-page .mk-qr-mock { width: 100%; }
    .marketing-page .mk-qr-workspace-body { grid-template-columns: 1fr; }
    .mk-qr-preview { min-height: 0; padding: 1.25rem; border-right: 0; border-bottom: 1px solid #dce6ed; }
    .marketing-page .mk-mock-qr--studio { width: 146px; height: 146px; }
    .mk-qr-export { padding: 1rem; }
    .mk-qr-download { min-height: 44px; }
}