/* ── Brand colours ─────────────────────────────────────────── */
.is-hero-indigo     { background-color: #1a237e; }
.is-hero-green      { background-color: #1a7f37; }
.has-text-indigo    { color: #1a237e; }
.has-text-green     { color: #1a7f37; }

/* ── Layout helpers ────────────────────────────────────────── */
.is-full-height     { height: 100%; }
.has-opacity-90     { opacity: 0.9; }
.is-constrained-text { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ── Buttons ───────────────────────────────────────────────── */
.button.is-green-outlined { border-color: #1a7f37; color: #1a7f37; }

/* ── Screenshot images ─────────────────────────────────────── */
.is-screenshot      { border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }

/* ── Pricing page ──────────────────────────────────────────── */
.box.is-featured    { border: 2px solid hsl(171, 100%, 41%); }
details > summary   { cursor: pointer; }

/* ── Feature check icon ────────────────────────────────────── */
.feature-check      { color: hsl(171, 100%, 29%); font-weight: bold; margin-right: 0.5rem; }

/* ── Feature plugin tiles ──────────────────────────────────── */
.feature-tile       { border: 1px solid #e8e8e8; border-radius: 8px; padding: 1.5rem; height: 100%; }
.feature-tile.is-coming { border-style: dashed; opacity: 0.7; }

/* ── Section background ────────────────────────────────────── */
.has-background-blue-tint { background-color: #f0f4ff; }

/* ── Carousel ──────────────────────────────────────────────── */
.ma-carousel        { position: relative; overflow: hidden; min-height: 380px; }
.ma-carousel .carousel-slide { display: none; }
.ma-carousel .carousel-slide.is-active { display: flex; align-items: center; }
.carousel-controls  { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.carousel-dot       { width: 10px; height: 10px; border-radius: 50%; background: #ccc; border: none; cursor: pointer; padding: 0; transition: background 0.2s; }
.carousel-dot.is-active { background: #1a237e; }

/* ── Code blocks (self-hosting steps) ──────────────────────── */
.is-code-snippet    { min-height: 56px; border-radius: 4px; word-break: break-all; }
.code-box pre       { background: transparent; color: #a8ff78; font-size: 0.78rem; overflow-x: auto; }

/* ── Portal page ───────────────────────────────────────────── */
.has-border-bottom  { border-bottom: 1px solid #dbdbdb; }
.groups-grid        { column-count: 2; column-gap: 1.5rem; }
.group-card-wrapper { break-inside: avoid; margin-bottom: 1.5rem; display: inline-block; width: 100%; }
@media screen and (max-width: 768px) {
    .groups-grid    { column-count: 1; }
}
.card-footer-form   { border: none !important; padding: 0 !important; }
.card-footer-form .button { border-radius: 0; justify-content: center; }

/* ── Platform landing page ─────────────────────────────────── */
.platform-hero {
    background-image: linear-gradient(135deg, #1a237e 0%, #3c60a9 100%);
    position: relative;
    overflow: hidden;
}
.platform-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.10), transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(153,204,51,0.12), transparent 50%);
    pointer-events: none;
}
.platform-hero .hero-body { position: relative; z-index: 1; }

@media screen and (max-width: 768px) {
    .hero.is-medium .title.is-1    { font-size: 2.125rem; }
    .hero.is-medium .subtitle.is-4 { font-size: 1.125rem; }
}

.platform-trust-strip { padding-top: 2rem; padding-bottom: 2rem; }
.platform-trust-strip .icon { font-size: 1.5rem; }

.platform-contrast-card {
    background: #fff;
    border-radius: 8px;
    padding: 1.75rem 1.5rem;
    height: 100%;
    border-left: 4px solid #1a237e;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.platform-contrast-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.platform-step {
    padding: 1.5rem 1rem;
    height: 100%;
}
.platform-step-number {
    width: 56px;
    height: 56px;
    line-height: 56px;
    border-radius: 50%;
    background: #1a237e;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 auto;
    text-align: center;
}

.platform-plugin-tile {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.platform-plugin-tile:hover {
    transform: translateY(-3px);
    border-color: #1a237e;
    box-shadow: 0 6px 20px rgba(26,35,126,0.12);
    color: inherit;
}

.platform-cta-band {
    background-image: linear-gradient(135deg, #1a237e 0%, #3c60a9 100%);
}

@media (prefers-reduced-motion: reduce) {
    .platform-contrast-card,
    .platform-plugin-tile {
        transition: none;
    }
    .platform-contrast-card:hover,
    .platform-plugin-tile:hover {
        transform: none;
    }
}