/*
 * Secondary marketing pages — features, feature detail, integrations,
 * changelog, help, compare, contact, customer stories and the company /
 * legal content pages.
 *
 * Separate from marketing.css for the same reason marketing-pricing.css is:
 * the home page pays for none of it. Loaded per page with @push('head').
 *
 * Tokens only — no literal colours — so every block follows the theme in both
 * light and dark without a second definition.
 */

/* ---------- Shared page furniture ---------- */

.mcl-eyebrow {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-teal);
    margin-bottom: var(--space-3);
}

/* Compact hero for pages that are not the home page: a secondary page that
   opens with a full-height hero pushes its actual content below the fold. */
.mcl-page-hero {
    padding: var(--space-16) 0 var(--space-10);
    text-align: center;
}
.mcl-page-hero h1 {
    margin-bottom: var(--space-4);
}
.mcl-page-hero p {
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    max-width: 40rem;
    margin: 0 auto;
}
.mcl-page-hero .mcl-hero-ctas {
    margin-top: var(--space-8);
    justify-content: center;
}

.mcl-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding: var(--space-6) 0 0;
}
.mcl-crumbs a { color: var(--color-text-muted); text-decoration: none; }
.mcl-crumbs a:hover { color: var(--color-text); text-decoration: underline; }
.mcl-crumbs [aria-current] { color: var(--color-text); font-weight: var(--weight-medium); }

.mcl-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-12) var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}

/* ---------- Long-form prose (about, security, terms, privacy) ---------- */

.mcl-doc {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
}

.mcl-toc {
    position: sticky;
    top: 96px;
    font-size: var(--text-sm);
}
.mcl-toc-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}
.mcl-toc ol { list-style: none; margin: 0; padding: 0; }
.mcl-toc li { margin-bottom: var(--space-2); }
.mcl-toc a {
    display: block;
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 2px 0 2px var(--space-3);
    border-left: 2px solid var(--color-border);
    transition: color var(--transition-base), border-color var(--transition-base);
}
.mcl-toc a:hover {
    color: var(--color-text);
    border-left-color: var(--color-teal);
}

.mcl-prose {
    max-width: 44rem;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: 1.75;
}
.mcl-prose h2 {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: var(--space-10) 0 var(--space-3);
    scroll-margin-top: 96px;
}
.mcl-prose h2:first-child { margin-top: 0; }
.mcl-prose h3 {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: var(--space-6) 0 var(--space-2);
}
.mcl-prose p { margin-bottom: var(--space-4); }
.mcl-prose ul, .mcl-prose ol { margin: 0 0 var(--space-4) var(--space-5); }
.mcl-prose li { margin-bottom: var(--space-2); }
.mcl-prose a { color: var(--color-teal); }
.mcl-prose strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.mcl-prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); }
.mcl-prose th, .mcl-prose td {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

/* Operator-authored HTML pulled from an admin system template.
 *
 * It is an arbitrary document written for a white page: its headings carry no
 * explicit colour, so dropped straight into the themed prose column they
 * inherit our light-on-dark text and land invisibly on their own hardcoded
 * white card. Rather than half-theme content we do not control, it gets a
 * permanently light surface of its own.
 *
 * The literal colours below are deliberate and are the one place in this sheet
 * where tokens are wrong: this block is opted out of the theme on purpose. */
.mcl-raw-html {
    color-scheme: light;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    overflow-x: auto;
}
.mcl-raw-html h1,
.mcl-raw-html h2,
.mcl-raw-html h3,
.mcl-raw-html h4,
.mcl-raw-html th,
.mcl-raw-html strong { color: #111827; }
.mcl-raw-html a { color: #4338ca; }
.mcl-raw-html img { max-width: 100%; height: auto; }

.mcl-updated {
    display: inline-block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    background: var(--color-hover-bg);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-6);
}

/* ---------- Filter pills (integrations) ---------- */

.mcl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    margin-bottom: var(--space-8);
}
.mcl-filter {
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text-secondary);
    transition: all var(--transition-base);
}
.mcl-filter:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.mcl-filter.is-active {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-primary-fg);
}

/* ---------- Directory cards (integrations) ---------- */

.mcl-dir-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.mcl-dir-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.mcl-dir-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
}
.mcl-dir-card[hidden] { display: none; }
.mcl-dir-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: var(--radius-card);
    background: var(--color-hover-bg);
    color: var(--color-text-secondary);
}
.mcl-dir-logo img { max-width: 26px; max-height: 26px; display: block; }
.mcl-dir-name {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}
.mcl-dir-desc { font-size: var(--text-sm); color: var(--color-text-muted); }
.mcl-dir-cat {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    background: var(--color-hover-bg);
    border-radius: var(--radius-full);
    padding: 1px var(--space-2);
    margin-top: var(--space-3);
}

/* ---------- Changelog ---------- */

.mcl-releases { max-width: 46rem; margin: 0 auto; }
.mcl-release {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--space-8);
    padding-bottom: var(--space-10);
}
.mcl-release + .mcl-release { border-top: 1px solid var(--color-border); padding-top: var(--space-10); }
.mcl-release-meta { font-size: var(--text-sm); }
.mcl-release-version {
    display: inline-block;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    background: var(--color-hover-bg);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-2);
}
.mcl-release-date { display: block; color: var(--color-text-muted); }
.mcl-release h2 {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-4);
    scroll-margin-top: 96px;
}
.mcl-release-items { list-style: none; margin: 0; padding: 0; }
.mcl-release-items li {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    margin-bottom: var(--space-3);
    color: var(--color-text-secondary);
}
.mcl-kind {
    flex-shrink: 0;
    /* Wide enough for the longest label ("Improved") so the three kinds share
       one left edge and the change text lines up down the column. */
    min-width: 78px;
    text-align: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    padding: 2px var(--space-2);
}
.mcl-kind.is-new { background: var(--chart-1-bg); color: var(--chart-1); }
.mcl-kind.is-improved { background: var(--chart-3-bg); color: var(--chart-3); }
.mcl-kind.is-fixed { background: var(--chart-4-bg); color: var(--chart-4); }

/* ---------- Card grids (help, contact) ---------- */

.mcl-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.mcl-card-grid.is-2 { grid-template-columns: repeat(2, 1fr); }
.mcl-info-card {
    display: block;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
a.mcl-info-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
}
.mcl-info-card h3 {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}
.mcl-info-card p { font-size: var(--text-base); color: var(--color-text-muted); }
.mcl-info-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-teal);
}

/* ---------- Comparison ---------- */

.mcl-vs-wrap { overflow-x: auto; }
.mcl-vs {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
    font-size: var(--text-base);
}
.mcl-vs th, .mcl-vs td {
    text-align: left;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
.mcl-vs thead th {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    border-bottom: 2px solid var(--color-border-strong);
}
.mcl-vs tbody th {
    font-weight: var(--weight-medium);
    color: var(--color-text);
    width: 34%;
}
.mcl-vs td { color: var(--color-text-secondary); }
.mcl-vs col.is-us { background: var(--chart-1-bg); }

.mcl-callout {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-teal);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    max-width: 44rem;
    margin: 0 auto;
}
.mcl-callout h3 {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}
.mcl-callout p { color: var(--color-text-secondary); }
.mcl-callout p + p { margin-top: var(--space-3); }

.mcl-alt-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

/* ---------- Customer stories ---------- */

.mcl-story-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    align-items: start;
}
.mcl-story {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin: 0;
    box-shadow: var(--shadow-xs);
}
.mcl-story-stars { display: inline-flex; gap: 2px; color: var(--color-warning); margin-bottom: var(--space-3); }
.mcl-story-text {
    margin: 0 0 var(--space-5);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: 1.7;
}
.mcl-story-foot { display: flex; align-items: center; gap: var(--space-3); }
.mcl-story-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--chart-1-bg);
    color: var(--chart-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}
.mcl-story-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mcl-story-name { font-weight: var(--weight-semibold); color: var(--color-text); font-size: var(--text-sm); }
.mcl-story-role { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }

/* ---------- Feature detail ---------- */

.mcl-point-list { list-style: none; margin: 0; padding: 0; }
.mcl-point-list li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin-bottom: var(--space-4);
    color: var(--color-text-secondary);
}
.mcl-point-list .mcl-point-tick {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: var(--radius-full);
    background: var(--color-success-bg);
    color: var(--color-success-dark);
    margin-top: 2px;
}

/* Six one-line points down a single column leave the right half of a desktop
   page empty. Columns, not a grid, so a point that wraps to two lines does not
   stretch the row it shares. break-inside guards against one being split
   across the column boundary mid-sentence. */
.mcl-point-list.is-2col {
    columns: 2;
    column-gap: var(--space-10);
    max-width: 62rem;
}
.mcl-point-list.is-2col li { break-inside: avoid; }

@media (max-width: 719px) {
    .mcl-point-list.is-2col { columns: 1; }
}

.mcl-feature-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
.mcl-feature-nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card-bg);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: border-color var(--transition-base), background var(--transition-base);
}
.mcl-feature-nav a:hover { border-color: var(--color-border-strong); background: var(--color-hover-bg); }
.mcl-feature-nav a[aria-current] { border-color: var(--color-teal); background: var(--chart-1-bg); }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .mcl-doc { grid-template-columns: 1fr; gap: var(--space-6); }
    .mcl-toc { position: static; }
    .mcl-dir-grid,
    .mcl-card-grid,
    .mcl-story-grid,
    .mcl-feature-nav { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .mcl-page-hero { padding: var(--space-12) 0 var(--space-8); }
    .mcl-dir-grid,
    .mcl-card-grid,
    .mcl-card-grid.is-2,
    .mcl-story-grid,
    .mcl-feature-nav { grid-template-columns: 1fr; }
    .mcl-release { grid-template-columns: 1fr; gap: var(--space-3); }
    .mcl-prose { max-width: none; }
}

/* ==========================================================================
   FEATURE DETAIL PAGE
   /features/{slug} only. Everything here is additive to the shared primitives
   above, so nothing in this block can regress another marketing page.
   ========================================================================== */

.mcl-feature-hero {
    padding-top: var(--space-10);
    padding-bottom: var(--space-12);
}

/* The hero already ends on its own padding, so the section under it does not
   need a full .mcl-section top pad as well — stacked, the two read as a gap
   where the page has stopped rather than as a break between two blocks. */
.mcl-feature-hero + .mcl-section { padding-top: var(--space-6); }

/* The spec card is a fixed 320px rather than a fraction: it holds four short
   label/value rows, and letting it grow with the viewport just stretches the
   whitespace between them. */
.mcl-feature-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-10);
    align-items: start;
}

.mcl-feature-hero h1 {
    font-size: clamp(2rem, 4.4vw, var(--text-4xl));
    font-weight: var(--weight-black);
    letter-spacing: -0.025em;
    line-height: var(--leading-tight);
    margin-top: var(--space-4);
}

.mcl-feature-hero-lede {
    margin-top: var(--space-4);
    max-width: 34rem;
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.mcl-feature-hero .mcl-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-7);
}

.mcl-feature-icon.is-lg { width: 52px; height: 52px; }

/* ---------- At-a-glance card ---------- */

.mcl-spec-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5) var(--space-6);
}
.mcl-spec-card h2 {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}
.mcl-spec-card dl { margin: 0; }
.mcl-spec-card dl > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}
.mcl-spec-card dl > div:first-child { border-top: 0; padding-top: 0; }
.mcl-spec-card dt {
    flex: 0 0 auto;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.mcl-spec-card dd {
    margin: 0;
    text-align: end;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

/* ---------- Lead paragraph ---------- */

.mcl-lede {
    max-width: 46rem;
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.75;
    margin-bottom: var(--space-12);
}

/* ---------- How it works ---------- */

.mcl-howto {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    counter-reset: mcl-step;
}
.mcl-howto > li {
    position: relative;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}
.mcl-howto-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    background: var(--chart-1-bg);
    color: var(--chart-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-4);
}
.mcl-howto h3 {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-2);
}
.mcl-howto p {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
}

/* ---------- FAQ ----------
   <details>/<summary>, so the answers exist before JavaScript does and the
   browser's own find-in-page can reach them. The marker is removed on both
   the standard and the WebKit pseudo-element; leaving either in gives a
   duplicate triangle next to the chevron. */

.mcl-faq {
    border-top: 1px solid var(--color-border);
}
.mcl-faq-item { border-bottom: 1px solid var(--color-border); }
.mcl-faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    cursor: pointer;
    list-style: none;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.mcl-faq-item > summary::-webkit-details-marker { display: none; }
.mcl-faq-item > summary:hover { color: var(--color-teal); }
.mcl-faq-item > summary:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.mcl-faq-item > summary .mc-icon {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}
.mcl-faq-item[open] > summary .mc-icon { transform: rotate(180deg); }
.mcl-faq-item > p {
    margin: 0;
    padding: 0 var(--space-8) var(--space-5) 0;
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* ---------- Feature-page responsive ----------
   Breakpoints match the shared ones already used in this file (960 / 640) so
   the detail page reflows on the same lines as the pages around it. */

@media (max-width: 1023px) {
    /* The spec card stops being a sidebar before the copy column gets too
       narrow to hold a headline on two lines. */
    .mcl-feature-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .mcl-spec-card { max-width: 520px; }
    .mcl-howto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .mcl-feature-hero { padding-top: var(--space-6); }
    .mcl-feature-hero .mcl-hero-ctas > .mcl-btn { flex: 1 1 100%; justify-content: center; }
    .mcl-spec-card { max-width: none; padding: var(--space-4) var(--space-5); }
    .mcl-howto { grid-template-columns: 1fr; }
    .mcl-lede { font-size: var(--text-base); margin-bottom: var(--space-8); }
    .mcl-faq-item > summary { font-size: var(--text-base); padding: var(--space-4) 0; }
    .mcl-faq-item > p { padding-right: 0; }
}