/*
 * landing.css: the shared layout for the AI Platforms hub (/ai-platforms), the
 * Features page (/features, #31943) and every "Shared Memory for <Tool>" page (#31810). One stylesheet so every tool page
 * looks the same and a change lands everywhere at once. The page structure it
 * styles is documented in docs/landing-pages/README.md, and the reference page
 * is docs/landing-pages/template.html.
 *
 * Colours and type follow the rest of mmryai.com (pricing.html): background
 * #0a0a0a, text #f5f0e8, accent #c41e1e, Inter. The .cta-button rule is the
 * site's existing "Start free trial" button, copied from pricing.html, until
 * the MMRY design system replaces it.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #0a0a0a;
    color: #f5f0e8;
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    line-height: 1.6;
}

a {
    color: #f5f0e8;
}

.landing {
    max-width: 860px;
    margin: 0 auto;
    padding: 96px 24px 40px;
}

/* Breadcrumb trail, mirrored by the BreadcrumbList JSON-LD. */
.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 300;
    opacity: 0.6;
    margin-bottom: 28px;
}

.breadcrumb li + li::before {
    content: "/";
    margin-right: 6px;
    opacity: 0.6;
}

.breadcrumb a {
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 240, 232, 0.2);
}

/* Hero: H1, the answer summary, and the first trial button. */
.hero {
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(245, 240, 232, 0.08);
}

.hero h1 {
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 16px;
}

/* Team-first subtitle under the tool page H1 (#31858): the H1 stays "Shared Memory for <Tool>"
   for the guard and SEO, and this line says who it is shared with, team first. */
.hero .hero-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 16px;
}

.answer-summary {
    font-size: 1.1rem;
    font-weight: 300;
    opacity: 0.85;
    max-width: 680px;
    margin-bottom: 28px;
}

.landing section {
    padding: 40px 0 8px;
}

.landing h2 {
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 16px;
}

.landing h3 {
    font-size: 1.05rem;
    font-weight: 500;
    margin-bottom: 6px;
}

.landing p {
    font-weight: 300;
    margin-bottom: 14px;
    opacity: 0.85;
}

.landing code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.9em;
    background: rgba(245, 240, 232, 0.07);
    border-radius: 4px;
    padding: 2px 6px;
}

/* Setup steps: an ordered list, mirrored by the HowTo JSON-LD. */
.setup-steps {
    list-style: none;
    counter-reset: step;
}

.setup-steps li {
    counter-increment: step;
    position: relative;
    padding: 0 0 18px 44px;
    font-weight: 300;
}

.setup-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(196, 30, 30, 0.6);
    color: #f5f0e8;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.setup-steps strong {
    font-weight: 500;
}

/* What works: a plain list of proven capabilities. */
.works-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
}

.works-list li {
    font-weight: 300;
    padding-left: 18px;
    position: relative;
}

.works-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c41e1e;
}

/* FAQ: every answer opens with a direct one or two sentence answer. */
.faq-item {
    border-top: 1px solid rgba(245, 240, 232, 0.08);
    padding: 18px 0 6px;
}

/* Tool cards: used by the AI Platforms hub, the Features page and the related tools section. */
.tool-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Three cards sit in one row on desktop, so an odd card is never left alone (#32033). */
.tool-grid-three {
    grid-template-columns: repeat(3, 1fr);
}

.tool-card {
    border: 1px solid rgba(245, 240, 232, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.tool-card h3 {
    margin-bottom: 8px;
}

.tool-card p {
    font-size: 0.92rem;
    margin-bottom: 12px;
}

.tool-card a {
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(196, 30, 30, 0.6);
}

.tool-card a:hover {
    border-bottom-color: #c41e1e;
}

/* The trial button, near the top and again at the end of every page. */
.cta-button {
    display: inline-block;
    padding: 14px 36px;
    background: #c41e1e;
    color: #f5f0e8;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.2s;
}

.cta-button:hover {
    background: #a81818;
}

.cta-button:focus-visible {
    outline: 2px solid #f5f0e8;
    outline-offset: 3px;
}

.cta-note {
    font-size: 0.8rem;
    font-weight: 300;
    opacity: 0.6;
    margin-top: 12px;
}

.landing section.closing-cta {
    text-align: center;
    margin-top: 40px;
    padding: 48px 24px;
    border-top: 1px solid rgba(245, 240, 232, 0.08);
}

.closing-cta h2 {
    margin-bottom: 10px;
}

/* Formation page (#32090). The hero eyebrow sits inside the H1, so the H1 still names Formations. */
.hero h1 .hero-eyebrow {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 10px;
}

.hero h1 .hero-headline {
    display: block;
}

/* The project leads diagram: the initiative on top, one card per project lead (its computer and
   tool, and its own helpers where that tool runs them), and a line between the lead cards labelled
   as the Formation. Drawn with HTML and CSS; the text in it is ordinary page text, so it is its own
   text alternative, and the lines and helper dots are decoration only. At phone width the cards
   stack in reading order along one line. */
.formation-map {
    margin: 8px 0 24px;
    padding: 20px;
    border: 1px solid rgba(245, 240, 232, 0.1);
    border-radius: 12px;
}

.formation-map figcaption {
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.75;
    margin-bottom: 16px;
}

.map-banner {
    text-align: center;
    padding: 12px 16px;
    border: 1px solid rgba(196, 30, 30, 0.7);
    border-radius: 10px;
}

.map-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.8;
}

.map-role,
.map-work {
    display: block;
    font-weight: 500;
}

.landing p.map-rail {
    position: relative;
    margin: 0;
    padding: 14px 0;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 1;
}

.map-rail::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px solid rgba(245, 240, 232, 0.3);
}

.map-rail span {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 2px 12px;
    background: #0a0a0a;
    border: 1px solid rgba(196, 30, 30, 0.7);
    border-radius: 999px;
}

.map-leads {
    position: relative;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
}

/* The Formation: a line running between the lead cards, joined to the label above it. */
.map-leads::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 12.5%;
    right: 12.5%;
    border-top: 1px solid rgba(196, 30, 30, 0.7);
}

.map-leads::after {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    height: calc(50% + 14px);
    border-left: 1px solid rgba(196, 30, 30, 0.7);
}

.map-leads li {
    position: relative;
    z-index: 1;
    padding: 12px;
    text-align: center;
    background: #0a0a0a;
    border: 1px solid rgba(245, 240, 232, 0.14);
    border-radius: 10px;
}

.map-where {
    display: block;
    font-size: 0.85rem;
    font-weight: 300;
    opacity: 0.85;
}

.map-state {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 12px;
    font-size: 0.8rem;
    font-weight: 400;
    border: 1px solid rgba(196, 30, 30, 0.7);
    border-radius: 999px;
}

.map-helpers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 0.8rem;
    font-weight: 300;
    opacity: 0.85;
}

.map-dots {
    flex: none;
    width: 6px;
    height: 6px;
    margin-right: 18px;
    border-radius: 50%;
    background: rgba(245, 240, 232, 0.6);
    box-shadow: 9px 0 0 rgba(245, 240, 232, 0.6), 18px 0 0 rgba(245, 240, 232, 0.6);
}

/* The story: who is on the launch, then its beats along a timeline. The overlap beat is set apart,
   with the notice both sessions receive on its own line. */
.story-cast {
    margin-bottom: 24px;
}

.story-beats {
    list-style: none;
    margin: 8px 0 0 6px;
    padding: 0 0 0 22px;
    border-left: 1px solid rgba(245, 240, 232, 0.2);
}

.story-beats li {
    position: relative;
    padding: 0 0 18px;
    font-weight: 300;
}

.story-beats li::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: -28px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0a0a0a;
    border: 1px solid #c41e1e;
}

.story-beats strong {
    font-weight: 500;
}

.story-beats li.story-beat-overlap {
    margin-bottom: 18px;
    padding: 12px 14px;
    background: rgba(196, 30, 30, 0.08);
    border: 1px solid rgba(196, 30, 30, 0.5);
    border-radius: 10px;
}

.story-beats li.story-beat-overlap::before {
    top: calc(12px + 0.5em);
    left: -29px;
}

.story-notice {
    display: block;
    margin-top: 8px;
    padding-left: 12px;
    font-weight: 400;
    border-left: 2px solid #c41e1e;
}

@media (max-width: 768px) {
    .landing {
        padding: 84px 20px 32px;
    }

    .map-rail::before,
    .map-leads::after {
        display: none;
    }

    .map-leads {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 0 0 0 8px;
        padding: 0 0 0 16px;
    }

    .map-leads::before {
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        border-top: none;
        border-left: 1px solid rgba(196, 30, 30, 0.7);
    }

    .map-leads li {
        text-align: left;
    }

    .map-leads li::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -17px;
        width: 16px;
        border-top: 1px solid rgba(196, 30, 30, 0.7);
    }

    .map-helpers {
        justify-content: flex-start;
    }

    .hero h1 {
        font-size: 1.7rem;
    }

    .answer-summary {
        font-size: 1rem;
    }

    .works-list,
    .tool-grid,
    .tool-grid-three {
        grid-template-columns: 1fr;
    }
}