/* ==========================================================================
   mailkoo — Home page
   Loads after variables.css + marketing.css. Everything here is specific to
   the home page; anything reused elsewhere belongs in marketing.css.
   Scoped to body.mc-page-home.
   ========================================================================== */

/* ---------- Hero background ----------------------------------------------
   The existing two-blob glow, plus a dot grid masked to an ellipse so it
   fades out rather than ending on a hard edge. Both layers are decorative
   and sit behind everything at z-index 0. */

.mcl-hero-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 0%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 62% at 50% 0%, #000 20%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

/* ---------- Hero trust row ---------- */

.mcl-hero-trust {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    flex-wrap: wrap;
}

.mcl-hero-trust-text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Hero subtitle was --color-text-muted (5.0:1, the AA floor) at 18px — the
   second-most-read text on the site. Lifted to --color-text-secondary. */
.mc-page-home .mcl-hero-subtitle { color: var(--color-text-secondary); }

/* ---------- Hero product mock --------------------------------------------
   The working miniature of the dashboard beside the hero copy, in the same
   window frame the lifetime page's screenshot uses. Built from tokens rather
   than captured, so it re-themes, translates, and can be operated — see
   _home_hero_mock.blade.php.

   Everything is scoped to .mc-page-home. The grey .mcl-mock* skeleton this
   replaced has been deleted from marketing.css — the home page was its only
   caller. */

/* A little more of the row than the default hero split gives, since this is
   now a readable interface rather than a grey skeleton. */
.mc-page-home .mcl-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }

/* Glow behind the frame so it sits in the hero rather than on top of it. */
.mc-page-home .mcl-hero-visual::before {
    content: '';
    position: absolute;
    inset: 10% 2% -6% 2%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-teal) 24%, transparent), transparent 70%);
    filter: blur(56px);
    z-index: 0;
    pointer-events: none;
}

.mcl-dash {
    position: relative;
    z-index: 1;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);

    /* Layered rather than one large blur: the tight contact shadow keeps the
       frame's edge crisp and the wide one lifts it off the page. The inset
       hairline is what makes it read as glass instead of as a rectangle. */
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .06),
        0 12px 24px -8px rgba(16, 24, 40, .12),
        0 40px 72px -24px rgba(16, 24, 40, .26),
        inset 0 1px 0 rgba(255, 255, 255, .7);

    /* Turned very slightly away from the copy, and squares up on hover. The
       rotation is small enough that no label inside becomes hard to read. */
    transform: perspective(2000px) rotateY(-4deg) rotateX(3deg) scale(.985);
    transform-origin: center;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}
.mcl-hero-visual:hover .mcl-dash {
    transform: perspective(2000px) rotateY(0deg) rotateX(0deg) scale(1);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .06),
        0 16px 32px -8px rgba(16, 24, 40, .14),
        0 52px 88px -24px rgba(16, 24, 40, .30);
}
[data-theme="dark"] .mcl-dash {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .45),
        0 24px 48px -16px rgba(0, 0, 0, .60),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}
[data-theme="dark"] .mcl-hero-visual:hover .mcl-dash {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .45),
        0 32px 64px -16px rgba(0, 0, 0, .66),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* --- Window chrome --- */

.mcl-dash-chrome {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 8px var(--space-3);
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-text) 4%, var(--color-card-bg)),
        color-mix(in srgb, var(--color-text) 7%, var(--color-card-bg)));
}

/* Fixed hex on purpose — these three are a system signature, and a red that
   shifts with the theme stops reading as a close button. */
.mcl-dash-dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.mcl-dash-dots i {
    width: 9px; height: 9px;
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12);
}
.mcl-dash-dots .is-close { background: #FF5F57; }
.mcl-dash-dots .is-min   { background: #FEBC2E; }
.mcl-dash-dots .is-max   { background: #28C840; }

.mcl-dash-nav {
    display: inline-flex;
    gap: 2px;
    flex: 0 0 auto;
    color: var(--color-text-disabled);
}

.mcl-dash-url {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    max-width: 240px;
    margin-inline: auto;
    padding: 3px var(--space-3);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-text) 7%, var(--color-card-bg));
    font-size: 10px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
}
/* Balances the dots + arrows on the left so the pill sits optically centred. */
.mcl-dash-chrome::after { content: ''; flex: 0 0 auto; width: 62px; }

/* --- Icon rail --- */

.mcl-dash-body { display: flex; align-items: stretch; }

.mcl-dash-rail {
    flex: 0 0 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-right: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-text) 3%, var(--color-card-bg));
}

.mcl-dash-brand {
    width: 22px; height: 22px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--icon-gradient-from), var(--icon-gradient-via) 55%, var(--icon-gradient-to));
}

.mcl-dash-railset { position: relative; display: flex; flex-direction: column; gap: 6px; }

/* The active pill slides between rail items instead of appearing under the
   new one — the movement is what tells you the two are the same control. */
.mcl-dash-railpill {
    position: absolute;
    top: 0; left: 0;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--color-teal-light);
    transform: translateY(var(--pill-y, 0));
    transition: transform 320ms cubic-bezier(.32, .72, 0, 1);
}

.mcl-dash-railitem {
    position: relative;
    z-index: 1;
    width: 30px; height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
}
.mcl-dash-railitem:hover { color: var(--color-text-secondary); }
.mcl-dash-railitem.is-active { color: var(--color-teal); }

.mcl-dash-railfoot { margin-top: auto; color: var(--color-text-disabled); opacity: .55; }

/* --- Panel --- */

.mcl-dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.mcl-dash-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 9px var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.mcl-dash-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

.mcl-dash-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-success-border);
    background: var(--color-success-bg);
    color: var(--color-success);
    font-size: 10px;
    font-weight: var(--weight-medium);
}
.mcl-dash-live i {
    width: 5px; height: 5px;
    border-radius: var(--radius-full);
    background: var(--color-success);
    animation: mcl-dash-pulse 2s ease-in-out infinite;
}
@keyframes mcl-dash-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .3; transform: scale(.6); }
}

/* One grid cell holding whichever view is shown, with a floor set to the
   tallest of the three (overview). Both parts matter: without the floor the
   frame would shrink when a shorter view opens and drag the hero around it,
   and without the stretch the two shorter views would sit in the top of a
   frame with a band of dead space under them. */
.mcl-dash-stage {
    display: grid;
    align-items: stretch;
    padding: var(--space-3) var(--space-4) var(--space-4);
    min-height: 300px;
}

.mcl-dash-view { animation: mcl-dash-enter 360ms cubic-bezier(.32, .72, 0, 1) both; }
.mcl-dash-view[hidden] { display: none; }
@keyframes mcl-dash-enter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* --- Overview: stat row --- */

.mcl-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.mcl-dash-stat {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.mcl-dash-stat-label {
    display: block;
    font-size: 10px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mcl-dash-stat-value {
    display: block;
    margin-top: 1px;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: -.02em;
    /* Counting up would otherwise change the width on every frame. */
    font-variant-numeric: tabular-nums;
}
.mcl-dash-delta {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 10px;
    font-weight: var(--weight-medium);
    color: var(--color-success);
}

/* --- Overview: chart --- */

.mcl-dash-card {
    margin-top: 10px;
    padding: 10px var(--space-3) 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.mcl-dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: 6px;
    font-size: 10px;
    color: var(--color-text-muted);
}
.mcl-dash-legend { display: inline-flex; align-items: center; gap: 5px; }
.mcl-dash-legend i { width: 6px; height: 6px; border-radius: 2px; background: var(--color-teal); }

.mcl-dash-plot { position: relative; height: 112px; }
/* overflow visible so the round cap and the marker on the last point are not
   sliced in half by the plot box they sit exactly on. */
.mcl-dash-svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Data holders for the JS only — the values they carry are already on screen. */
.mcl-dash-plot [data-mock-point] { display: none; }

.mcl-dash-gridlines line { stroke: var(--color-border); stroke-dasharray: 3 4; }

.mcl-dash-line {
    fill: none;
    stroke: var(--color-teal);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* pathLength="1" in the markup, so one unit is the whole curve regardless
       of how the viewBox is stretched. */
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
.mcl-dash-area { opacity: 0; }

/* Drawn once, when the hero scrolls into view (or immediately, for a visitor
   who lands at the top). */
.mcl-dash.is-drawn .mcl-dash-line {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1400ms cubic-bezier(.32, .72, 0, 1);
}
.mcl-dash.is-drawn .mcl-dash-area {
    opacity: 1;
    transition: opacity 700ms ease 420ms;
}

.mcl-dash-cross {
    position: absolute;
    top: 0; bottom: 0;
    left: var(--px, 50%);
    width: 1px;
    background: var(--color-border-strong);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), left 160ms cubic-bezier(.32, .72, 0, 1);
}

.mcl-dash-dot {
    position: absolute;
    left: var(--px, 50%);
    top: var(--py, 50%);
    width: 9px; height: 9px;
    border-radius: var(--radius-full);
    background: var(--color-teal);
    border: 2px solid var(--color-card-bg);
    box-shadow: 0 0 0 3px var(--color-teal-ring);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base),
                left 160ms cubic-bezier(.32, .72, 0, 1),
                top 160ms cubic-bezier(.32, .72, 0, 1);
}
/* The last point stays marked when nobody is pointing at the chart, so the
   plot always has a "now" on it. */
.mcl-dash.is-drawn .mcl-dash-dot { opacity: 1; }

.mcl-dash-tip {
    position: absolute;
    left: var(--tx, 50%);
    top: var(--py, 50%);
    transform: translate(-50%, calc(-100% - 14px));
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: var(--color-card-bg);
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--shadow-md);
    transition: opacity var(--transition-fast),
                left 160ms cubic-bezier(.32, .72, 0, 1),
                top 160ms cubic-bezier(.32, .72, 0, 1);
}
.mcl-dash-tip b { font-weight: var(--weight-semibold); }
.mcl-dash-tip i { font-style: normal; opacity: .65; }

/* is-probing rather than :hover — a tap on a touch screen has to work too. */
.mcl-dash-plot.is-probing .mcl-dash-cross,
.mcl-dash-plot.is-probing .mcl-dash-tip { opacity: 1; }

.mcl-dash-axis {
    position: relative;
    height: 12px;
    margin-top: 4px;
    font-size: 9px;
    color: var(--color-text-disabled);
}
.mcl-dash-axis span { position: absolute; transform: translateX(-50%); }

/* --- Campaigns --- */

.mcl-dash-table {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.mcl-dash-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 10px;
    transition: background var(--transition-fast);
}
.mcl-dash-row + .mcl-dash-row { border-top: 1px solid var(--color-border); }
.mcl-dash-row:hover { background: var(--color-active-bg); }

.mcl-dash-rowicon {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-teal-light);
    color: var(--color-teal);
}
.mcl-dash-rowname {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 11px;
    font-weight: var(--weight-medium);
    line-height: 1.35;
}
.mcl-dash-rowname i { font-style: normal; font-size: 9px; font-weight: var(--weight-normal); color: var(--color-text-muted); }

.mcl-dash-rowbar {
    flex: 0 0 40px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    overflow: hidden;
}
.mcl-dash-rowbar i { display: block; height: 100%; border-radius: inherit; background: var(--color-teal); }

.mcl-dash-rowrate {
    flex: 0 0 26px;
    text-align: right;
    font-size: 10px;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.mcl-dash-pill {
    flex: 0 0 auto;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-size: 9px;
    font-weight: var(--weight-medium);
    white-space: nowrap;
}
.mcl-dash-pill.is-sent      { color: var(--color-success); background: var(--color-success-bg); border-color: var(--color-success-border); }
.mcl-dash-pill.is-sending   { color: var(--color-info);    background: var(--color-info-bg);    border-color: var(--color-info-border); }
.mcl-dash-pill.is-scheduled { color: var(--color-warning); background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.mcl-dash-pill.is-draft     { color: var(--color-text-muted); background: var(--color-active-bg); border-color: var(--color-border); }

/* --- Automation --- */

/* Centred in the stage rather than hung from the top: the flow is shorter
   than the overview and a top-aligned diagram leaves the frame looking
   half-empty. */
.mcl-dash-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.mcl-dash-node {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-xs);
    font-size: 10px;
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
}
.mcl-dash-node.is-trigger { border-color: var(--color-teal-ring); background: var(--color-teal-light); color: var(--color-teal); }
.mcl-dash-node.is-wait { border-style: dashed; }
.mcl-dash-node.is-small { padding: 5px 10px; font-size: 9px; }
.mcl-dash-node.is-yes { color: var(--color-success); border-color: var(--color-success-border); background: var(--color-success-bg); }

/* A dot runs each connector in turn, so the flow reads as something that is
   executing rather than a stack of boxes. */
.mcl-dash-conn { position: relative; width: 1px; height: 20px; background: var(--color-border-strong); }
.mcl-dash-conn i {
    position: absolute;
    left: -1.5px;
    width: 4px; height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-teal);
    animation: mcl-dash-travel 2.7s linear infinite;
}
.mcl-dash-conn:nth-of-type(2) i { animation-delay: .3s; }
.mcl-dash-conn:nth-of-type(3) i { animation-delay: .6s; }
@keyframes mcl-dash-travel {
    0%        { top: -4px; opacity: 0; }
    12%, 62%  { opacity: 1; }
    75%, 100% { top: 20px; opacity: 0; }
}

.mcl-dash-branch { position: relative; display: flex; margin-top: 12px; width: 100%; max-width: 260px; }
/* Equal legs, so the bracket's two drops at 25% and 75% land dead centre over
   each node however wide its own label happens to be. */
.mcl-dash-branch-leg { flex: 1 1 0; display: flex; justify-content: center; }
/* Bracket: out to each side, then down into both branches. */
.mcl-dash-branch::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 25%; right: 25%;
    height: 12px;
    border: 1px solid var(--color-border-strong);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
}

/* --- Toast --- */

/* Hangs off the bottom-right corner, overlapping only the stage's own bottom
   padding — any deeper and it covers the last day on the chart. */
.mcl-dash-toast {
    position: absolute;
    z-index: 2;
    right: -18px;
    bottom: -30px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-lg);
    animation: mcl-dash-toast-in 650ms cubic-bezier(.32, .72, 0, 1) 900ms both;
}
.mcl-dash-toast-icon { display: inline-flex; color: var(--color-success); }
.mcl-dash-toast b { display: block; font-size: var(--text-xs); }
.mcl-dash-toast i { display: block; font-style: normal; font-size: 10px; color: var(--color-text-muted); }
@keyframes mcl-dash-toast-in {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mcl-dash,
    .mcl-hero-visual:hover .mcl-dash { transform: none; }
    .mcl-dash-view,
    .mcl-dash-toast,
    .mcl-dash-live i,
    .mcl-dash-conn i { animation: none; }
    /* Without the draw animation the line still has to end up visible. */
    .mcl-dash-line { stroke-dashoffset: 0; }
    .mcl-dash-area { opacity: 1; }
}

/* NOTE: .mcl-avatar*, .mcl-proof*, .mcl-marquee*, .mcl-chip, .mcl-stat-value/
   -label, .mcl-quote* and .mcl-usecase* moved to marketing.css when the
   lifetime page started reusing them. They rendered unstyled there — the
   trust-strip logos came out at full size — because this sheet only loads on
   the home page. Shared primitives belong in marketing.css. */

/* ---------- Pillar tabs ---------- */

.mcl-tabs {
    position: relative;
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-active-bg);
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.mcl-tabs-tab {
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast);
}
.mcl-tabs-tab[aria-selected="true"] { color: var(--color-text); }

/* The indicator slides AND stretches between tabs of different widths —
   transitioning width as well as transform is what makes it read as bespoke
   rather than as a generic underline. */
.mcl-tabs-indicator {
    position: absolute;
    inset-block: var(--space-1);
    inset-inline-start: 0;
    width: var(--tab-w, 0);
    transform: translateX(var(--tab-x, 0));
    border-radius: var(--radius-full);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-xs);
    transition: transform 280ms cubic-bezier(.32, .72, 0, 1),
                width 280ms cubic-bezier(.32, .72, 0, 1);
    pointer-events: none;
}
/* Before JS measures it the indicator would sit at width 0 on the left edge,
   which flashes. Hide until measured. */
.mcl-tabs:not(.is-measured) .mcl-tabs-indicator { opacity: 0; }

.mcl-tabs-panel[hidden] { display: none; }

.mcl-pillar-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-12);
    align-items: center;
    margin-top: var(--space-10);
}

.mcl-pillar-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.mcl-pillar-list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-secondary); }
.mcl-pillar-list .mc-icon { color: var(--color-success); flex: 0 0 auto; margin-top: 2px; }

/* ---------- Bento mosaic ---------- */

.mcl-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* minmax, not a fixed 168px: a tile whose inner visual is taller than the
       track (the code snippet, the Venn) would otherwise be clipped by
       overflow:hidden with no scrollbar and no warning. */
    grid-auto-rows: minmax(168px, auto);
    gap: var(--space-5);
}

.mcl-bento-tile {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* Hairline edge-light in the tile's own accent. */
.mcl-bento-tile::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent,
                color-mix(in srgb, var(--tile-accent, var(--color-teal)) 90%, transparent), transparent);
    opacity: 0;
    transition: opacity var(--transition-base);
}

/* Cursor spotlight. --mx/--my are written by marketing-widgets.js from a
   single delegated, rAF-throttled pointermove on the grid. */
.mcl-bento-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
                color-mix(in srgb, var(--tile-accent, var(--color-teal)) 11%, transparent), transparent 68%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
    .mcl-bento-tile:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
    .mcl-bento-tile:hover::before,
    .mcl-bento-tile:hover::after { opacity: 1; }
}

.mcl-bento-tile h3 { font-size: var(--text-lg); }
.mcl-bento-tile p { font-size: var(--text-sm); color: var(--color-text-muted); }
.mcl-bento-visual { margin-top: auto; }

.mcl-bento-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tile-accent, var(--color-teal)) 14%, transparent);
    color: var(--tile-accent, var(--color-teal));
}

.mcl-span-3  { grid-column: span 3; }
.mcl-span-4  { grid-column: span 4; }
.mcl-span-6  { grid-column: span 6; }
.mcl-span-12 { grid-column: span 12; }
.mcl-row-2   { grid-row: span 2; }

/* Bento inner devices ------------------------------------------------------ */

/* A/B race: two bars, the winner crowned. */
.mcl-ab-bar { height: 8px; border-radius: var(--radius-full); background: var(--color-border); margin-bottom: var(--space-2); position: relative; overflow: hidden; }
.mcl-ab-bar span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: var(--radius-full); background: var(--color-border-strong); }
.mcl-ab-bar.is-winner span { background: var(--color-success); }

/* Segment Venn — three translucent circles with counts in the overlaps. */
.mcl-venn { position: relative; height: 56px; }
.mcl-venn i {
    position: absolute;
    width: 46px; height: 46px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--tile-accent, var(--color-teal)) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--tile-accent, var(--color-teal)) 45%, transparent);
}
.mcl-venn i:nth-child(1) { inset-inline-start: 0; }
.mcl-venn i:nth-child(2) { inset-inline-start: 28px; }
.mcl-venn i:nth-child(3) { inset-inline-start: 56px; }

/* Import step rail. */
.mcl-steps-rail { display: flex; align-items: center; gap: var(--space-2); }
.mcl-steps-rail i {
    width: 20px; height: 20px; border-radius: var(--radius-full);
    border: 2px solid var(--color-border-strong);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--color-text-muted); font-style: normal;
}
.mcl-steps-rail i.is-done { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.mcl-steps-rail hr { flex: 1; border: 0; border-top: 2px dashed var(--color-border); margin: 0; }

/* Code snippet + copy button. */
.mcl-code {
    position: relative;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.7;
    background: var(--color-active-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    overflow-x: auto;
    color: var(--color-text-secondary);
}
.mcl-code-copy {
    position: absolute; top: var(--space-2); inset-inline-end: var(--space-2);
    border: 1px solid var(--color-border); background: var(--color-card-bg);
    border-radius: var(--radius-xs); padding: 2px 6px; cursor: pointer;
    font-size: 11px; color: var(--color-text-muted); font-family: var(--font-family);
}

/* ---------- Deliverability band (inverted) ---------- */

.mcl-band-deliver { padding: var(--space-20) 0; }

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

.mcl-deliver-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.mcl-deliver-checks li {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card-bg);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
}
.mcl-deliver-checks .mc-icon { color: var(--color-text-disabled); transition: color 260ms ease; }
.mcl-deliver-checks li.is-on .mc-icon { color: var(--color-success); }
.mcl-deliver-checks li.is-on { border-color: color-mix(in srgb, var(--color-success) 40%, transparent); }

.mcl-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-8); }

/* ---------- Use cases / migration / security ---------- */

.mcl-migrate {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-6); flex-wrap: wrap;
    padding: var(--space-6) var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-teal-light);
}
.mcl-migrate-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.mcl-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.mcl-trust-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.mcl-trust-item .mc-icon { color: var(--color-teal); flex: 0 0 auto; }
.mcl-trust-item strong { display: block; font-size: var(--text-base); margin-bottom: 2px; }
.mcl-trust-item span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- FAQ two-column ---------- */

.mcl-faq-columns { columns: 2; column-gap: var(--space-6); }
.mcl-faq-columns > * { break-inside: avoid; }

/* ---------- Final CTA mesh ---------- */

.mcl-cta-band.is-mesh {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.mcl-cta-band.is-mesh::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 900px;
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    margin: -450px 0 0 -450px;
    background: conic-gradient(from 0deg,
        var(--icon-gradient-from), var(--icon-gradient-to),
        var(--icon-gradient-via), var(--icon-gradient-from));
    filter: blur(90px);
    opacity: .28;
    animation: mcl-drift 64s linear infinite;
}
@keyframes mcl-drift { to { transform: rotate(360deg); } }

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

@media (max-width: 1199px) {
    .mcl-bento { grid-template-columns: repeat(6, 1fr); }
    .mcl-span-6 { grid-column: span 6; }
    .mcl-span-4 { grid-column: span 3; }
    .mcl-span-3 { grid-column: span 3; }
    .mcl-span-12 { grid-column: span 6; }
}

/* .mcl-quote-columns responsive rules moved to marketing.css alongside the
   quote primitives themselves. */

@media (max-width: 1199px) {
    /* Back to an even split — below this the copy column is the one that
       starts wrapping badly, and it needs the width more than the mock. */
    .mc-page-home .mcl-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 991px) {
    .mcl-pillar-grid,
    .mcl-deliver-grid { grid-template-columns: 1fr; gap: var(--space-8); }
    .mcl-trust-grid { grid-template-columns: repeat(2, 1fr); }
    .mcl-faq-columns { columns: 1; }

    /* The hero has stacked, so the frame is centred and head-on. A tilt on a
       centred element reads as a rendering fault rather than as depth. */
    .mc-page-home .mcl-hero-inner { grid-template-columns: 1fr; }
    .mcl-dash,
    .mcl-hero-visual:hover .mcl-dash { transform: none; }
}

@media (max-width: 767px) {
    .mcl-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .mcl-bento-tile { grid-column: span 1 !important; grid-row: span 1 !important; min-height: 150px; }
    .mcl-stat-row { grid-template-columns: 1fr; gap: var(--space-4); }
    .mcl-trust-grid { grid-template-columns: 1fr; }
    .mcl-migrate { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 575px) {
    /* Under ~360px of panel the address pill and the third stat are the first
       things to become unreadable rather than merely small. */
    .mcl-dash-url,
    .mcl-dash-nav { display: none; }
    .mcl-dash-chrome::after { width: 0; }
    .mcl-dash-rail { flex-basis: 40px; }
    .mcl-dash-stats { grid-template-columns: repeat(2, 1fr); }
    .mcl-dash-stat:last-child { display: none; }
    .mcl-dash-stage { padding-inline: var(--space-3); }
    .mcl-dash-rowbar { display: none; }
    /* Hanging off the corner would push the page sideways at this width. */
    .mcl-dash-toast { right: var(--space-2); bottom: -14px; padding: 8px var(--space-3); }
}