/* ==========================================================================
   /plugins — Mono GetIllustrations redesign (2026-06-10)

   Built on top of mono-getillustrations.css (loaded first on this page):
   tokens (--mono-*) + components (.mono-btn, .mono-card, .mono-sep,
   .mono-faq2, .mono-reveal, section heads). Only page-specific composition
   lives in this file (.pl-* namespace).

   Section anatomy mirrors the homepage / free-illustrations / custom pages:
   centered section heads, hairline separators with a lime pill, bordered
   container boxes (never wide full-bleed color bands), pill geometry.
   Treatments are deliberately VARIED: dark Figma spotlight panel → white
   card grid → one divided panel → wide banner card → open numbered steps →
   dark feature band → two tinted library panels → faq → lime final CTA.
   ========================================================================== */

.pl { background: var(--mono-white); }

/* Centered section heads (homepage pattern) */
.pl .mono-section-head {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.pl .mono-section-head .mono-lead {
    margin: 14px auto 0;
    max-width: 64ch;
}

/* CTA anchors carry the `btn` class purely to escape the global
   a:not(.btn):hover { color:#454545 !important } rule in site.css.
   Visuals come from .mono-btn / .pl-* — neutralize Bootstrap .btn extras. */
.pl a.btn { text-decoration: none; text-align: inherit; white-space: normal; }
.pl a.btn:focus,
.pl a.btn.focus { box-shadow: none; outline: 2px solid var(--mono-ink); outline-offset: 2px; }

/* In-page anchors land clear of the sticky header */
.pl section[id] { scroll-margin-top: 96px; }

/* ==========================================================================
   TINTED PLATFORM CHIPS — one distinct soft tint per platform
   (rotation pattern from /custom-illustrations services panel)
   ========================================================================== */
.pl-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--mono-radius-md);
    font-family: var(--mono-font-display);
    font-weight: var(--mono-w-extrabold);
    font-size: 0.9375rem;
    flex-shrink: 0;
    transition: transform var(--mono-dur-slow) var(--mono-ease);
}
.pl-logo img { display: block; }
.pl-card:hover .pl-logo,
.pl-row:hover .pl-logo,
.pl-wide:hover .pl-logo { transform: scale(1.06); }

.pl-tint--figma   { background: var(--mono-gray-50);  color: var(--mono-ink); border: 1px solid var(--mono-border); }
.pl-tint--adobe   { background: #fff7ed; color: #ea580c; }  /* peach */
.pl-tint--framer  { background: #eef2ff; color: #4f46e5; }  /* indigo */
.pl-tint--webflow { background: #f0f9ff; color: #0284c7; }  /* sky */
.pl-tint--vscode  { background: #eff6ff; color: #2563eb; }  /* blue */
.pl-tint--mcp     { background: var(--mono-ink); color: var(--mono-lime); } /* the AI chip keeps its ink/lime identity */
.pl-tint--studio  { background: var(--mono-lime-pale); color: var(--mono-lime-ink); }
.pl-tint--lucid   { background: #fffbeb; color: #d97706; }  /* amber */

/* Status pills — lime = live (affirmation), neutral grey = coming soon */
.pl-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.625rem;
    font-weight: var(--mono-w-extrabold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--mono-radius-pill);
    vertical-align: 2px;
    white-space: nowrap;
}
.pl-status--live { background: var(--mono-lime); color: var(--mono-ink); }
.pl-status--soon { background: var(--mono-gray-100); color: var(--mono-gray-600); }

/* ==========================================================================
   HERO — light, centered: "your library inside your tools"
   ========================================================================== */
.pl-hero { padding: 72px 0 8px; text-align: center; }

.pl-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--mono-fs-sm);
    font-weight: var(--mono-w-medium);
    color: var(--mono-gray-700);
    background: var(--mono-surface);
    border: 1px solid var(--mono-border);
    padding: 7px 16px;
    border-radius: var(--mono-radius-pill);
    box-shadow: var(--mono-shadow-xs);
    margin-bottom: 28px;
}
.pl-hero__pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mono-lime);
    flex-shrink: 0;
}
.pl-hero__pill strong { font-weight: var(--mono-w-bold); color: var(--mono-ink); }

.pl-hero__h1 {
    font-family: var(--mono-font-display);
    font-size: clamp(2.25rem, 5vw, 4.25rem);
    font-weight: var(--mono-w-extrabold);
    line-height: var(--mono-lh-display);
    letter-spacing: var(--mono-track-display);
    color: var(--mono-ink);
    margin: 0 auto;
    max-width: 18ch;
}
.pl-hero__sub {
    font-size: var(--mono-fs-lead);
    font-weight: var(--mono-w-normal);
    line-height: var(--mono-lh-body);
    letter-spacing: var(--mono-track-body);
    color: var(--mono-text-muted);
    margin: 20px auto 0;
    max-width: 62ch;
}
.pl-hero__row {
    margin-top: 36px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Platform strip — non-interactive chips with tinted monograms */
.pl-hero__platforms {
    margin-top: 36px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.pl-platform {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 6px;
    background: var(--mono-surface);
    border: 1px solid var(--mono-border);
    border-radius: var(--mono-radius-pill);
    font-size: 0.75rem;
    font-weight: var(--mono-w-medium);
    color: var(--mono-gray-700);
    white-space: nowrap;
    box-shadow: var(--mono-shadow-xs);
}
.pl-platform__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-family: var(--mono-font-display);
    font-weight: var(--mono-w-extrabold);
    font-size: 0.5625rem;
    flex-shrink: 0;
}
.pl-platform__mark img { display: block; }

/* ==========================================================================
   FIGMA SPOTLIGHT — dark ink statement panel (container box, never full-bleed)
   ========================================================================== */
.pl-spot {
    background: var(--mono-surface-dark);
    color: var(--mono-white);
    border-radius: var(--mono-radius-2xl);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 72px);
}
.pl-spot__eyebrow { color: var(--mono-lime); }
.pl-spot__title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.pl-spot__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--mono-radius-md);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}
.pl-spot__h2 {
    font-family: var(--mono-font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: var(--mono-w-extrabold);
    letter-spacing: var(--mono-track-heading);
    line-height: var(--mono-lh-heading);
    color: var(--mono-white);
    margin: 0;
}
.pl-spot__desc {
    font-size: var(--mono-fs-lead);
    line-height: var(--mono-lh-body);
    letter-spacing: var(--mono-track-body);
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 20px;
    max-width: 52ch;
}
.pl-spot__list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    gap: 10px 24px;
    flex-wrap: wrap;
}
.pl-spot__list li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--mono-fs-body);
    font-weight: var(--mono-w-medium);
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}
.pl-spot__list .mono-check { width: 18px; height: 18px; font-size: 11px; }
.pl-spot__media {
    border-radius: var(--mono-radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}
.pl-spot__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   PLUGIN CARDS — design-tools grid (white cards, neutral lift hover)
   Shared anatomy (.pl-card__*) reused by the divided panel + wide banner.
   ========================================================================== */
.pl-card {
    display: flex;
    flex-direction: column;
    padding: var(--mono-space-6);
    color: var(--mono-ink);
}
.pl-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--mono-space-4);
}
.pl-card__naming { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* h3 — reset site.css heading globals inside cards */
.pl-card__name {
    font-family: var(--mono-font-display);
    font-size: var(--mono-fs-h3);
    font-weight: var(--mono-w-bold);
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--mono-ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pl-card__platform {
    font-size: var(--mono-fs-sm);
    color: var(--mono-text-subtle);
}
.pl-card__desc {
    display: block;
    font-size: var(--mono-fs-body);
    line-height: var(--mono-lh-body);
    letter-spacing: var(--mono-track-body);
    color: var(--mono-text-muted);
    margin: 0 0 var(--mono-space-4);
    flex: 1;
}
.pl-card__tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: var(--mono-space-5);
}
.pl-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: var(--mono-w-medium);
    padding: 4px 11px;
    background: var(--mono-surface-subtle);
    border-radius: var(--mono-radius-pill);
    color: var(--mono-gray-500);
    white-space: nowrap;
}
.pl-card__cta { margin-top: auto; }
/* The whole card is the anchor — the inner CTA is a styled span */
.pl-card:hover .pl-card__cta .mono-link__arrow,
.pl-row:hover .pl-card__cta .mono-link__arrow,
.pl-wide:hover .pl-card__cta .mono-link__arrow { transform: translateX(3px); }

/* ==========================================================================
   DEVELOPER TOOLS — dark ink cards with grid gaps (2026-06-10 round 2:
   user wants dark boxes + the same spacing rhythm as Design Tools above).
   a.btn.pl-row specificity (0,2,1) beats the global lime .btn skin
   (site.css:1383) that was painting these cells lime.
   ========================================================================== */
.pl-rows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mono-space-5);
}
a.btn.pl-row {
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    margin: 0;
    background: var(--mono-ink);
    border: 1px solid var(--mono-ink);
    border-radius: var(--mono-radius-xl);
    color: var(--mono-white);
    font-size: inherit;
    transition: transform var(--mono-dur-slow) var(--mono-ease), box-shadow var(--mono-dur-slow) var(--mono-ease), background var(--mono-dur-slow) var(--mono-ease);
}
a.btn.pl-row:hover {
    background: var(--mono-ink-raised);
    transform: translateY(-4px);
    box-shadow: var(--mono-shadow-lift);
    color: var(--mono-white);
}
.pl-row .pl-card__name { color: var(--mono-white); }
.pl-row .pl-card__platform { color: rgba(255, 255, 255, 0.6); }
.pl-row .pl-card__desc { color: rgba(255, 255, 255, 0.78); }
.pl-row .pl-tag {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.85);
}
.pl-row .pl-card__cta { color: var(--mono-lime); }
.pl-row .pl-card__tags { margin-bottom: var(--mono-space-4); }

/* ==========================================================================
   COLLABORATION — Lucid as a centered, constrained card (2026-06-10 round 2:
   the full-rail banner read as a stretched mess). Same card language as the
   Design Tools grid, one column, comfortable measure.
   ========================================================================== */
a.btn.pl-wide {
    display: flex;
    flex-direction: column;
    max-width: 560px;
    margin: 0 auto;
    padding: 32px 28px;
    background: var(--mono-white);
    border-radius: var(--mono-radius-xl);
    color: var(--mono-ink);
    font-size: inherit;
    text-align: left;
}
.pl-wide__head { margin-bottom: 14px; min-width: 0; }
.pl-wide__body { display: flex; flex-direction: column; min-width: 0; }
.pl-wide__body .pl-card__desc { flex: none; margin-bottom: 12px; max-width: none; }
.pl-wide__body .pl-card__tags { margin-bottom: var(--mono-space-4); }
.pl-wide__cta { white-space: nowrap; }

/* ==========================================================================
   HOW IT WORKS — 3 open numbered steps, connecting hairline (no boxes)
   ========================================================================== */
.pl-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
    padding-top: 8px;
}
.pl-steps::before {
    content: '';
    position: absolute;
    top: 25px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: var(--mono-border);
}
.pl-steps__item { position: relative; text-align: center; padding: 0 8px; }
.pl-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mono-lime);
    color: var(--mono-ink);
    font-weight: var(--mono-w-extrabold);
    font-size: 0.9375rem;
    margin: 0 auto 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 8px var(--mono-white);
}
.pl-steps__item h3 {
    font-family: var(--mono-font-display);
    font-size: 1.0625rem;
    font-weight: var(--mono-w-bold);
    letter-spacing: -0.015em;
    color: var(--mono-ink);
    margin: 0 0 8px;
}
.pl-steps__item p {
    font-size: var(--mono-fs-sm);
    line-height: 1.6;
    color: var(--mono-text-muted);
    margin: 0 auto;
    max-width: 36ch;
}

/* ==========================================================================
   BUILT FOR SPEED — dark statement band, hairline-divided feature grid
   ========================================================================== */
.pl-speed {
    background: var(--mono-surface-dark);
    color: var(--mono-white);
    border-radius: var(--mono-radius-2xl);
    padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 64px);
}
.pl-speed__head { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.pl-speed__eyebrow { color: var(--mono-lime); }
.pl-speed__h2 {
    font-family: var(--mono-font-display);
    font-size: var(--mono-fs-h2);
    font-weight: var(--mono-w-extrabold);
    line-height: var(--mono-lh-heading);
    letter-spacing: var(--mono-track-heading);
    color: var(--mono-white);
    margin: 0 0 12px;
}
.pl-speed__sub {
    font-size: var(--mono-fs-lead);
    color: rgba(255, 255, 255, 0.7);
    margin: 0 auto;
    max-width: 56ch;
    line-height: 1.55;
}
.pl-speed__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.pl-speed__item {
    padding: 28px 26px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pl-speed__icon {
    width: 40px;
    height: 40px;
    background: rgba(204, 234, 74, 0.14);
    color: var(--mono-lime);
    border-radius: var(--mono-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.pl-speed__item h3 {
    font-family: var(--mono-font-display);
    font-size: 0.9375rem;
    font-weight: var(--mono-w-bold);
    letter-spacing: -0.01em;
    color: var(--mono-white);
    margin: 0 0 6px;
}
.pl-speed__item p {
    font-size: var(--mono-fs-sm);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
}

/* ==========================================================================
   ASSET LIBRARY — two tinted panels (pale-lime + grey, varied texture)
   ========================================================================== */
.pl-lib {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mono-space-5);
}
.pl-lib__col {
    border: 1px solid var(--mono-border);
    border-radius: var(--mono-radius-xl);
    padding: var(--mono-space-8);
}
.pl-lib__col--icons { background: var(--mono-lime-pale); }
.pl-lib__col--illustrations { background: var(--mono-surface-subtle); }
.pl-lib__title {
    font-family: var(--mono-font-display);
    font-size: 1.375rem;
    font-weight: var(--mono-w-extrabold);
    letter-spacing: -0.02em;
    color: var(--mono-ink);
    margin: 0 0 8px;
}
.pl-lib__desc {
    font-size: var(--mono-fs-body);
    line-height: var(--mono-lh-body);
    color: var(--mono-text-muted);
    margin: 0 0 var(--mono-space-4);
    max-width: 52ch;
}
.pl-lib__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-lib__chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: var(--mono-w-medium);
    padding: 4px 11px;
    border: 1px solid var(--mono-border);
    border-radius: var(--mono-radius-pill);
    color: var(--mono-gray-700);
    background: var(--mono-white);
    white-space: nowrap;
}
.pl-lib__chip--more { color: var(--mono-text-subtle); }

/* ==========================================================================
   FAQ — big centered head over the shared .mono-faq2 grid
   ========================================================================== */
.pl-faq__head { text-align: center; margin-bottom: 40px; }
.pl-faq__h2 {
    font-family: var(--mono-font-display);
    font-size: var(--mono-fs-h2);
    font-weight: var(--mono-w-extrabold);
    letter-spacing: var(--mono-track-heading);
    line-height: var(--mono-lh-heading);
    color: var(--mono-ink);
    margin: 0 0 12px;
}
.pl-faq__sub {
    font-size: var(--mono-fs-lead);
    color: var(--mono-text-muted);
    max-width: 56ch;
    margin: 0 auto;
    line-height: 1.55;
}

/* ==========================================================================
   FINAL CTA — lime statement panel (bookends the dark spotlight)
   ========================================================================== */
.pl-final {
    background: var(--mono-lime);
    color: var(--mono-ink);
    border-radius: var(--mono-radius-2xl);
    padding: 72px 40px;
    text-align: center;
}
.pl-final__h2 {
    font-family: var(--mono-font-display);
    font-size: var(--mono-fs-h2-lg);
    font-weight: var(--mono-w-extrabold);
    letter-spacing: var(--mono-track-display);
    line-height: 1.04;
    color: var(--mono-ink);
    margin: 0 auto 16px;
    max-width: 24ch;
}
.pl-final__sub {
    font-size: var(--mono-fs-lead);
    color: rgba(17, 24, 39, 0.78);
    margin: 0 auto 32px;
    max-width: 52ch;
    line-height: 1.55;
}
.pl-final__row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
/* On the lime panel the primary's lime hover would vanish — go darker instead */
.pl-final .mono-btn--primary:hover {
    background: var(--mono-ink-raised);
    color: var(--mono-white);
    border-color: var(--mono-ink-raised);
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.25);
}
.pl-final .mono-btn--secondary:hover {
    background: var(--mono-ink);
    color: var(--mono-white);
    border-color: var(--mono-ink);
}

/* ==========================================================================
   RESPONSIVE — mono breakpoints: 1400 / 1100 / 980 / 720 / 560
   (.mono-grid--3 cascades automatically; only .pl extras live here)
   ========================================================================== */
@media (max-width: 1100px) {
    .pl-spot { grid-template-columns: 1fr; }
    .pl-spot__media { max-width: 622px; }
    .pl-wide {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .pl-wide__cta { justify-self: start; }
}
@media (max-width: 980px) {
    .pl-rows { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
    .pl-steps { grid-template-columns: 1fr; gap: 28px; max-width: 480px; margin: 0 auto; }
    .pl-steps::before { display: none; }
    .pl-speed__grid { grid-template-columns: 1fr 1fr; }
    .pl-lib { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 720px) {
    .pl-hero { padding: 48px 0 4px; }
    .pl-hero__row .mono-btn { width: 100%; max-width: 360px; }
    .pl-hero__platforms { gap: 6px; }
    .pl-spot, .pl-speed, .pl-final { border-radius: var(--mono-radius-xl); }
    .pl-final { padding: 52px 24px; }
    .pl-final__row { flex-direction: column; align-items: center; }
    .pl-final__row .mono-btn { width: 100%; max-width: 360px; }
    .pl-wide { padding: var(--mono-space-6); }
}
@media (max-width: 560px) {
    .pl-speed__grid { grid-template-columns: 1fr; }
    .pl-card { padding: var(--mono-space-5); }
    a.btn.pl-row { padding: 26px 22px; }
}