/* =============================================================================
   AliveCRM - shared marketing stylesheet
   Loaded once in layouts/main.blade.php after the design tokens.
   Tokens + @font-face live in resources/views/partials/md3-tokens.blade.php.

   Sections:
     1. Base / reset / typography
     2. Layout primitives (.mk-container, .mk-section)
     3. Eyebrow + lede + section headers
     4. Buttons (.mk-btn) + legacy button aliases
     5. Product screenshot frame (.mk-frame)
     6. Cards, chips, stat, benefit list
     7. Scroll reveal
     8. Legacy aliases for pages not yet restyled
   ============================================================================= */

/* ---------- 1. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* :root (not a bare html selector) - core.css sets :root{font-size:var(--bs-root-font-size:16px)}
   which outranks `html`. Match specificity, win on load order. */
:root { font-size: 17px; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main { display: block; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text);
    margin: 0 0 0.5em;
    line-height: var(--lh-heading);
    font-weight: 600;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; }
h5 { font-size: var(--fs-h5); font-weight: 600; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

strong, b { font-weight: 600; color: var(--text); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: 0.4rem; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Numeric data reads in mono + tabular */
.mk-num, .mk-stat-value, .kpi-value, .fu-num, .record-stats strong {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.02em;
}

/* ---------- 2. Layout primitives ---------- */
.mk-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.mk-container--narrow { max-width: var(--container-narrow); }

.mk-section { padding-block: var(--section-y); position: relative; }
.mk-section--subtle { background: var(--bg-subtle); }
.mk-section--sunken { background: var(--surface-sunken); }
.mk-section--ink {
    background: var(--ink);
    color: var(--text-on-ink);
}
.mk-section--ink h1, .mk-section--ink h2, .mk-section--ink h3, .mk-section--ink h4 { color: #fff; }
.mk-section--ink p { color: var(--text-on-ink-muted); }
.mk-section--tight { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); }

/* ---------- 3. Eyebrow / lede / section header ---------- */
/* Restrained: small caps label, no pill, no background. Max 1 per 3 sections. */
.mk-eyebrow, .eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin: 0 0 0.9rem;
}
.mk-section--ink .mk-eyebrow, .mk-section--ink .eyebrow { color: var(--text-on-ink-muted); }

.mk-lede, .lede {
    font-size: var(--fs-lede);
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 62ch;
    margin: 0 0 1.5rem;
}
.mk-section--ink .mk-lede, .mk-section--ink .lede { color: var(--text-on-ink); }

.mk-section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.mk-section-head--center { margin-inline: auto; text-align: center; }
.mk-section-head--center .mk-lede { margin-inline: auto; }

/* The one-sentence direct answer under a section H2 - bold for humans + snippets */
.mk-answer { font-weight: 600; color: var(--text); }

/* ---------- 4. Buttons ---------- */
.mk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 46px;
    padding: 0 1.5rem;
    border-radius: var(--r-pill);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.mk-btn:hover { text-decoration: none; }
.mk-btn:active { transform: translateY(1px); }
.mk-btn--lg { height: 52px; padding: 0 1.9rem; font-size: 1rem; }
.mk-btn--block { width: 100%; }

.mk-btn--primary { background: var(--accent); color: var(--on-accent); }
.mk-btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); box-shadow: var(--shadow-sm); }

.mk-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.mk-btn--secondary:hover { border-color: var(--text); background: var(--surface); color: var(--text); }

.mk-btn--ghost { background: transparent; color: var(--text); }
.mk-btn--ghost:hover { background: var(--surface-sunken); color: var(--text); }

.mk-btn--on-ink { background: #fff; color: var(--ink); }
.mk-btn--on-ink:hover { background: var(--n-100); color: var(--ink); box-shadow: var(--shadow-md); }
.mk-btn--ghost-on-ink { background: transparent; color: #fff; border-color: var(--border-on-ink); }
.mk-btn--ghost-on-ink:hover { background: rgba(255, 255, 255, 0.10); border-color: #fff; color: #fff; }

/* Text link with arrow */
.mk-arrow, .link-arrow, .feat-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--accent);
    text-decoration: none;
    transition: gap var(--dur-fast) var(--ease);
}
.mk-arrow:hover, .link-arrow:hover, .feat-link:hover { gap: 0.65rem; text-decoration: none; color: var(--accent-hover); }

/* ---------- 5. Product screenshot frame ---------- */
.mk-frame {
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.mk-frame__bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
}
.mk-frame__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.mk-frame__body { display: block; }
.mk-frame__body img { width: 100%; height: auto; display: block; }
.mk-frame__caption {
    margin-top: 0.75rem;
    font-size: var(--fs-sm);
    color: var(--text-subtle);
}

/* Placeholder state - visible spec until a real screenshot is dropped in */
.mk-frame.is-placeholder .mk-frame__body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 2rem;
    background:
        repeating-linear-gradient(45deg, var(--surface-sunken) 0 12px, var(--bg-subtle) 12px 24px);
    color: var(--text-subtle);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    text-align: center;
}

/* ---------- 6. Cards / chips / stat / benefit list ---------- */
.mk-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.5rem;
}
.mk-card--raised { box-shadow: var(--shadow-sm); border-color: transparent; }

.mk-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--r-pill);
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 500;
}
.mk-chip--accent { background: var(--accent-wash); color: var(--accent-hover); }
.mk-chip--success { background: var(--success-wash); color: var(--success); }
.mk-chip--warning { background: var(--warning-wash); color: var(--warning); }
.mk-chip--danger { background: var(--danger-wash); color: var(--danger); }

.mk-stat { }
.mk-stat__value { font-family: var(--font-mono); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 500; color: var(--text); letter-spacing: -0.02em; line-height: 1.05; }
.mk-stat__label { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 0.35rem; }

.mk-benefits { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.mk-benefits li { display: flex; gap: 0.65rem; margin-bottom: 0.8rem; color: var(--text-muted); }
.mk-benefits li::before {
    content: "";
    flex: none;
    width: 1.15rem; height: 1.15rem;
    margin-top: 0.15rem;
    border-radius: 50%;
    background: var(--success-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f7a4d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- 7. Scroll reveal ----------
   MOTION_INTENSITY is 3 (static): the marketing pages ship with no automatic
   entrance animation. `.mk-reveal` is kept in the markup as a hook so a future
   design pass can add a subtle IntersectionObserver fade WITHOUT re-touching
   every template; it must animate from a visible resting state if added. */
@media (prefers-reduced-motion: no-preference) {
    .js-reveal .mk-reveal {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    }
    .js-reveal .mk-reveal.is-visible { opacity: 1; transform: none; }
    .js-reveal .mk-reveal[data-reveal-delay="1"] { transition-delay: 50ms; }
    .js-reveal .mk-reveal[data-reveal-delay="2"] { transition-delay: 100ms; }
}

/* =============================================================================
   8. LEGACY ALIASES - keep not-yet-restyled pages coherent on the new tokens.
   These map old class names onto the new system. Delete a block when its
   page is restyled in a later stage.
   ============================================================================= */

/* Kill the retired Material-You floating blobs everywhere */
.md3-blob-field, .md3-blob { display: none !important; }

/* The template pins .layout-navbar as position:fixed (html.layout-navbar-fixed),
   which overlaps the first section. Drop it to static and let the inner
   .site-nav (already position:sticky) hold the top of the page in normal flow. */
html.layout-navbar-fixed .layout-navbar { position: static; }

/* Old container / section-header helpers */
.section-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section-heading-block { margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-heading-block.text-center { text-align: center; }
.h2-display, .h2-display.final-cta-heading {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: var(--lh-heading);
    color: var(--text);
    margin-bottom: 0.75rem;
}
.section-sub {
    font-size: var(--fs-lede);
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 62ch;
    margin: 0;
}
.section-sub.mx-auto { margin-inline: auto; }

/* Old eyebrow pill -> restrained label (handled above via shared .eyebrow selector) */
.md3-eyebrow {
    display: block;
    background: none;
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: 0.9rem;
}

/* Old hero / CTA buttons -> new button system */
.btn-hero-primary, .btn-md3-filled, .btn-nav-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    height: 46px; padding: 0 1.5rem; border-radius: var(--r-pill);
    font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; line-height: 1;
    background: var(--accent); color: var(--on-accent); border: 1px solid transparent;
    text-decoration: none; cursor: pointer;
    transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-hero-primary:hover, .btn-md3-filled:hover, .btn-nav-primary:hover {
    background: var(--accent-hover); color: var(--on-accent); box-shadow: var(--shadow-sm); text-decoration: none;
}
.btn-hero-primary:active, .btn-md3-filled:active, .btn-nav-primary:active { transform: translateY(1px); }

.btn-hero-secondary, .btn-md3-outlined, .btn-md3-tonal {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    height: 46px; padding: 0 1.5rem; border-radius: var(--r-pill);
    font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; line-height: 1;
    background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
    text-decoration: none; cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-hero-secondary:hover, .btn-md3-outlined:hover, .btn-md3-tonal:hover {
    border-color: var(--text); color: var(--text); text-decoration: none;
}

.btn-hero-primary-inverse { background: #fff; color: var(--ink); }
.btn-hero-primary-inverse:hover { background: var(--n-100); color: var(--ink); }
.btn-hero-secondary-inverse, .btn-md3-outlined-inverse {
    background: transparent; color: #fff; border-color: var(--border-on-ink);
}
.btn-hero-secondary-inverse:hover, .btn-md3-outlined-inverse:hover {
    background: rgba(255, 255, 255, 0.10); border-color: #fff; color: #fff;
}

.btn-nav-ghost {
    display: inline-flex; align-items: center; height: 40px; padding: 0 1rem;
    border-radius: var(--r-pill); font-size: 0.9rem; font-weight: 500;
    color: var(--text); background: transparent; border: none; text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn-nav-ghost:hover { background: var(--surface-sunken); color: var(--text); text-decoration: none; }

/* Old MD3 card / chip / field */
.md3-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: none; }
.md3-card-elevated, .md3-card-interactive { box-shadow: var(--shadow-sm); border-color: transparent; }
.md3-card-interactive:hover { box-shadow: var(--shadow-md); transform: none; }
.md3-chip {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem;
    border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--text-muted);
    font-size: var(--fs-xs); font-weight: 500;
}
.md3-field label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); margin-bottom: 0.4rem; }
.md3-field input, .md3-field select, .md3-field textarea, .md3-field .form-control, .md3-field .form-select {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: 0.7rem 0.9rem;
    min-height: 46px;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    color: var(--text);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.md3-field input:focus, .md3-field select:focus, .md3-field textarea:focus,
.md3-field .form-control:focus, .md3-field .form-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}
.md3-field .form-control.is-invalid, .md3-field input.is-invalid { border-color: var(--danger); }

/* Old benefit list bullets */
.benefit-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.benefit-list li { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.8rem; color: var(--text-muted); font-size: var(--fs-body); }
.benefit-list li i { color: var(--success); margin-top: 0.2rem; flex: none; }

/* Old utility helpers used inline on marketing pages */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-4 { margin-top: 1.5rem; }
.ms-auto { margin-left: auto; }