/* ── Shared enine-* PNC chrome — bauhaus_enine's real values ──────
       Every PNC cell's section padding, self-title, self-tagline, child
       title, child tagline and grid gap now read from these six classes
       — the SAME six classes scaffold's shared markup carries — so an
       inherited cell (i/n/i, i/n/t, t/n/i, m/n/i) and this theme's own
       kept cell of the same shape (i/n/m, t/n/m, t/n/t) render
       identically instead of one using scaffold's generic py-5/h3/mb-1
       and the other this theme's real enine_site_heading_xl/py-section
       values. Values below are this theme's own pre-existing, deliberate
       choices (--enine_site_section_py, enine_site_heading_xl,
       enine_site_label, enine_site_card_title/body) — nothing new
       invented, just given ONE home instead of being repeated per PNC
       code or missing entirely from the inherited path. */
    .enine-section { padding-block: var(--enine_site_section_py); }
    .enine-section-title {
      font-size: 2rem; font-weight: var(--enine_site_heading_weight);
      letter-spacing: var(--enine_site_tracking_tight); line-height: 1.1;
      margin-bottom: 1rem;
    }
    .enine-section-tagline {
      font-size: 1rem; color: var(--enine_site_muted);
      margin-bottom: 0.5rem;
    }
    .enine-child-title {
      font-size: 1rem; font-weight: 600; letter-spacing: -0.02em;
      margin-bottom: 0.5rem;
    }
    .enine-child-tagline {
      font-size: 1rem; color: var(--enine_site_muted); line-height: 1.55;
      margin-bottom: 0;
    }
    .enine-grid { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }

    :root {
      --enine_site_heading_weight: var(--enine-heading-weight, 700);
      --bs-border-radius: var(--enine-radius, 0.375rem);
      --enine_site_shadow_1: var(--enine-shadow, 0 0.25rem 0.75rem rgba(30, 80, 160, 0.12));
      --enine_site_overlay_bg_soft: #08080808;
      --enine_site_overlay_bg_strong: #08080888;
      --enine_site_badge_weight: 400;
      --enine_site_hero_min_h: 420px;
      --enine_site_hero_section_min_h: 540px;
      --enine_site_tracking_tight: var(--enine-tracking-heading, -0.02em);
      --enine_site_tracking_loose: -0.02em;
      --enine_site_icon_badge_size: 48px;
      --enine_site_jumbotron_panel_padding: min(2.5rem, 40px);
      --enine_site_font: var(--enine-font-body, 'Plus Jakarta Sans'), system-ui, sans-serif;
      /* Headings shared --enine_site_font (the body-font override) below,
         so a configured font_heading distinct from font_body had nothing
         to attach to for any heading in this theme. */
      --enine_site_font_heading: var(--enine-font-heading, 'Plus Jakarta Sans'), system-ui, sans-serif;
      --enine_site_muted: rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.52);
      --enine_site_border: rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.12);
      --enine_site_border_hover: rgba(var(--bs-info-rgb, 13, 202, 240), 0.55);
      --enine_site_section_py: clamp(3rem, 4vw, 4.5rem);
    }
    body { font-family: var(--enine_site_font); }
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: var(--enine_site_heading_weight); font-family: var(--enine_site_font_heading); letter-spacing: var(--enine_site_tracking_tight); }
    h1, .h1 { font-size: 4.5rem; }
    h2, .h2 { font-size: 3rem; }
    h3, .h3 { font-size: 2rem; }
    h4, .h4 { font-size: 1.333rem; }
    .enine-icon-inline { font-size: 1.125em; }
    .enine-featured-title { font-size: clamp(1.125rem, 2vw, 1.5rem); }
    .row-gap-md-6 { row-gap: 5rem !important; }

    .py-section { padding-top: var(--enine_site_section_py); padding-bottom: var(--enine_site_section_py); }
    .enine_site_section_header { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
    .enine_site_heading_xl { font-size: 2rem; font-weight: var(--enine_site_heading_weight); letter-spacing: var(--enine_site_tracking_tight); line-height: 1.1; }
    /* Same size/weight/tracking as the homepage hero h1 (.enine_sites_jumbotron h1),
       for text outside the jumbotron that should carry the same visual weight. */
    .enine_site_heading_display {
      font-family: var(--enine_site_font_heading);
      font-weight: var(--enine_site_heading_weight);
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      letter-spacing: var(--enine_site_tracking_tight);
      line-height: 1.1;
    }
    .enine_site_label { font-size: 1rem; color: var(--enine_site_muted); }
    .enine_site_copy { font-size: 1rem; color: var(--enine_site_muted); line-height: 1.5; }
    .enine_site_copy p { margin-bottom: 0.875em; }
    .enine_site_copy p:last-child { margin-bottom: 0; }

    /* Small status/label chip (Notion's "Alpha"/"Beta" badge look): reads
       its color from --enine_site_tag_accent rather than a fixed hue, so a
       section that already sets its own accent (e.g. the hook's persona
       swap) gets a matching tag for free instead of needing a per-context
       override. */
    .enine_site_tag {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      line-height: 1;
      padding: 0.25rem 0.5rem;
      border-radius: 0.3125rem;
      background: color-mix(in srgb, var(--enine_site_tag_accent, var(--bs-info)) 15%, white);
      color: var(--enine_site_tag_accent, var(--bs-info));
      text-decoration: none;
    }
    .enine_site_tag:hover { color: var(--enine_site_tag_accent, var(--bs-info)); text-decoration: none; }

    .enine_site_fig_box {
      border-radius: var(--bs-border-radius);
      overflow: hidden;
      background: rgba(0, 0, 0, 0.02);
    }
    .enine_site_fig_box img,
    .enine_site_fig_box video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; display: block; }

    /* A border painted directly on `.row > div` (the raw Bootstrap column)
       sits at the column's own outer edge — flush against the neighbouring
       column's edge regardless of that column's own padding, since border
       is outside padding in the box model; overriding the column's own
       padding to a fixed value doesn't create a gap for the same reason.
       An explicit flex `gap` on the row was tried and rejected — these
       columns are sized by fixed percentage (`col-lg-3` etc.), and `gap`
       stacks on top of that instead of being subtracted from it, so 4
       columns + 3 gaps no longer fit a row and the 4th wraps.
       The fix that doesn't fight the grid math: border/background/padding
       go on the INNER `.clickable` wrapper instead of the column. The
       column keeps its own unmodified padding as real, reserved space;
       `.clickable` sits inside that space, so its border never touches
       the neighbouring column's border. */
    .enine_site_card,
    .pnc-tni .row > div > .clickable,
    .pnc-ini .row > div > .clickable,
    .pnc-mni .row > div > .clickable {
      border: 1px solid var(--enine_site_border);
      border-radius: var(--bs-border-radius);
      padding: 1.375rem;
      background: #ffffff;
      height: 100%;
      overflow: hidden;
      transition: border-color 0.2s, background-color 0.2s, color 0.2s;
    }
    .enine_site_card:hover,
    .pnc-tni .row > div > .clickable:hover,
    .pnc-ini .row > div > .clickable:hover,
    .pnc-mni .row > div > .clickable:hover { border-color: var(--enine_site_border_hover); }
    .enine_site_card--tall,
    .pnc-tni .row > div,
    .pnc-ini .row > div,
    .pnc-mni .row > div { display: flex; flex-direction: column; }
    .enine_site_card--icon-hover:hover {
      background-color: var(--bs-info);
      border-color: var(--bs-info);
      color: var(--bs-info-fg);
    }
    .enine_site_card--icon-hover:hover .enine_site_card_title,
    .enine_site_card--icon-hover:hover .enine_site_card_body { color: var(--bs-info-fg); }
    .enine_site_card--icon-hover:hover .enine_site_card_icon {
      background-color: #ffffff;
      border-color: #ffffff;
      color: var(--bs-body-color);
    }
    .enine_site_card_icon,
    .pnc-tni .row > div .enine_site_icon_badge,
    .pnc-ini .row > div .enine_site_icon_badge,
    .pnc-mni .row > div .enine_site_icon_badge {
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      border-radius: calc(var(--bs-border-radius) * 0.7);
      background-color: var(--bs-info); color: var(--bs-info-fg);
      font-size: 0.9375rem; margin-bottom: 1rem;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }
    /* Scaffold's own icon-badge markup carries an inline `.text-info` on
       the glyph itself (an !important Bootstrap utility) — without an
       equally-forceful override here the glyph stays info-blue on this
       badge's own info-blue background and disappears. */
    .pnc-tni .row > div .enine_site_icon_badge i,
    .pnc-ini .row > div .enine_site_icon_badge i,
    .pnc-mni .row > div .enine_site_icon_badge i {
      color: var(--bs-info-fg) !important;
    }
    /* Child title/tagline font and gutter for these three inherited codes
       now come from .enine-child-title/.enine-child-tagline/.enine-grid —
       scaffold's shared markup already carries those classes on this exact
       h4/.card-text/.row, so the three per-code selectors that used to
       repeat this here (and the separate gy-4-vs-gy-5 gutter override)
       are gone; .enine_site_card_title/.enine_site_card_body remain for
       this theme's own kept cells (i/n/m, t/n/m, t/n/t, m/n/t) until
       those are migrated to the same two classes. */
    .enine_site_card_title {
      font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; letter-spacing: -0.02em;
    }
    .enine_site_card_body {
      font-size: 1rem; color: var(--enine_site_muted); line-height: 1.55; margin-bottom: 0;
    }
    .enine_site_alt { background-color: var(--bs-secondary); }

    /* m/n/i (self=media, children=icon — "what"): self media used
       `.enine_site_fig_box` (subtle tinted panel, 16:9), not scaffold's
       `.ratio.ratio-21x9.rounded.shadow.bg-white` (wider ratio, shadow
       instead of a flat tint, explicit white fill). */
    .pnc-mni > .container > .ratio {
      border-radius: var(--bs-border-radius) !important;
      background: rgba(0, 0, 0, 0.02) !important;
      box-shadow: none !important; border: none !important;
    }
    .pnc-mni > .container > .ratio img { object-fit: contain !important; }

    .enine_site_process_card_media { aspect-ratio: 16 / 9; margin: -1.375rem -1.375rem 0; }
    .enine_site_process_card_media img,
    .enine_site_process_card_media video { width: 100%; height: 100%; object-fit: contain; display: block; }
    /* t/n/m has no Step-N badge to butt the image up against (that's
       i/n/m's "how" branch only) — give it back the breathing room the
       zero bottom-margin above removes. */
    .pnc-tnm .enine_site_process_card_media { margin-bottom: 1rem; }
    /* "Step N" is literal markup again in i/n/m.html's own "how" branch
       (that file is a kept override now, not scaffold-inherited) — no CSS
       counter needed here. */
    .enine_site_process_card_step {
      background: var(--bs-info); color: var(--bs-info-fg);
      font-weight: 700; font-size: 0.875rem; letter-spacing: -0.02em;
      margin: 0 -1.375rem 1rem; padding: 0.5rem 1.375rem;
    }

    /* t/n/i: icon sits left of a stacked title+body, rather than above it
       — CSS grid placement on scaffold's three flat siblings (icon badge,
       h4, p), no markup change needed. */
    .pnc-tni .row > div {
      display: grid; grid-template-columns: auto 1fr; column-gap: 0.875rem; align-items: start;
    }
    .pnc-tni .row > div .enine_site_icon_badge { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
    .pnc-tni .row > div h4 { grid-column: 2; grid-row: 1; }
    .pnc-tni .row > div .card-text { grid-column: 2; grid-row: 2; }

    /* t/n/m, i/n/m are kept-override templates now (their own
       `.enine_site_card`/`.enine_site_process_card_media` markup, not
       scaffold's split ratio+clickable siblings) — no card-padding or
       self-header overrides needed for those two codes here any more. */

    /* Self-level section header for the 3 still-reclassified cells
       (t/n/i, i/n/i, m/n/i) no longer needs a per-code override: scaffold's
       shared markup carries .enine-section/.enine-section-title/
       .enine-section-tagline directly (same classes this theme's own kept
       cells now use too), so the section padding + self heading/tagline
       styling above already applies here with no per-code selector at
       all. Content (effective_content) still has no shared class yet —
       kept scoped here until that gets one too. */
    .pnc-tni > .container > div.mt-2,
    .pnc-ini > .container > div.mt-2,
    .pnc-mni > .container > div.mt-2 {
      font-size: 1rem; color: var(--enine_site_muted); line-height: 1.5;
    }
    .pnc-tni > .container > div.mt-2 p,
    .pnc-ini > .container > div.mt-2 p,
    .pnc-mni > .container > div.mt-2 p { margin-bottom: 0.875em; }
    .pnc-tni > .container > div.mt-2 p:last-child,
    .pnc-ini > .container > div.mt-2 p:last-child,
    .pnc-mni > .container > div.mt-2 p:last-child { margin-bottom: 0; }

    /* bauhaus_enine's own icon-self n-count cells never showed a self icon
       badge above the section heading (only child cards did, and even
       that inconsistently — i/1/i and i/1/m never had one at all, only
       i/1/t did before its own icon block was removed too) — scaffold's
       shared markup always renders one for an icon-modality self. Get rid
       of it for the n-count self-icon codes. `i0` is excluded — its own
       original (`eninesites-copy`) DID render this icon unconditionally,
       so hiding it here was an overgeneralization from this same fix
       applied to int/ini/inm. */
    .pnc-int > .container > div.enine_site_icon_badge,
    .pnc-ini > .container > div.enine_site_icon_badge,
    .pnc-inm > .container > div.enine_site_icon_badge {
      display: none !important;
    }

    /* Icon-hover on i/n/i and m/n/i's cards: the modifier class this
       normally needs (`enine_site_card--icon-hover`, only added when
       `item.icon` is set) is always true here — every child in these two
       codes is icon-modality by definition — so the hover applies
       unconditionally instead of needing scaffold's markup to carry a
       class it doesn't have. */
    .pnc-ini .row > div > .clickable:hover, .pnc-mni .row > div > .clickable:hover {
      background-color: var(--bs-info);
      border-color: var(--bs-info);
      color: var(--bs-info-fg);
    }
    .pnc-ini .row > div > .clickable:hover h4, .pnc-ini .row > div > .clickable:hover .card-text,
    .pnc-mni .row > div > .clickable:hover h4, .pnc-mni .row > div > .clickable:hover .card-text {
      color: var(--bs-info-fg);
    }
    .pnc-ini .row > div > .clickable:hover .enine_site_icon_badge,
    .pnc-mni .row > div > .clickable:hover .enine_site_icon_badge {
      background-color: #ffffff; border-color: #ffffff; color: var(--bs-body-color);
    }
    /* Same `.text-info` !important trap as the base icon glyph color fix
       above — the glyph's own color needs re-forcing on hover too, or it
       stays white-on-white once the badge itself flips to a white bg.
       Stays accent blue (matching the badge's own resting color) rather
       than switching to body text color. */
    .pnc-ini .row > div > .clickable:hover .enine_site_icon_badge i,
    .pnc-mni .row > div > .clickable:hover .enine_site_icon_badge i {
      color: var(--bs-info) !important;
    }

    /* m/0's own deleted template guaranteed the hero a minimum height and
       let-boxed its image (`.media-hero`/`.media-hero-img`) instead of
       scaffold's plain cover-fit background image. */
    .pnc-m0 { min-height: var(--enine_site_hero_min_h); }
    .pnc-m0 img.enine_site_img_cover { object-fit: contain !important; }

    .shadow { box-shadow: var(--enine_site_shadow_1) !important; }

    /* Hide border on last card per row at each breakpoint */
    /* nth-child offset +1 accounts for the col-12 header div (child 1) in _representations.html */
    @media (max-width: 767.98px) {
      .sep-card > .border-end { border-right: 0 !important; }
    }
    @media (min-width: 768px) and (max-width: 991.98px) {
      .sep-card > .border-end:nth-child(2n+1) { border-right: 0 !important; }
    }
    @media (min-width: 992px) {
      .sep-card > .border-end:nth-child(4n+1) { border-right: 0 !important; }
    }

    /* Horizontal row separators — sep-card (1 → 2 → 4 cols) */
    /* @media (max-width: 767.98px) {
      .sep-card > *:nth-child(n+3) { border-top: 2px solid var(--bs-border-color); }
    }
    @media (min-width: 768px) and (max-width: 991.98px) {
      .sep-card > *:nth-child(n+4) { border-top: 2px solid var(--bs-border-color); }
    }
    @media (min-width: 992px) {
      .sep-card > *:nth-child(n+6) { border-top: 2px solid var(--bs-border-color); }
    } */

    /* Hide border on last icon per row — compact layout (1 → 3 → 6) */
    @media (max-width: 767.98px) {
      .sep-icon > .border-end { border-right: 0 !important; }
    }
    @media (min-width: 768px) and (max-width: 991.98px) {
      .sep-icon > .border-end:nth-child(3n+1) { border-right: 0 !important; }
    }
    @media (min-width: 992px) {
      .sep-icon > .border-end:nth-child(6n+1) { border-right: 0 !important; }
    }

    .icon-stack { font-size: 1.5em; }
    @media (min-width: 768px) { .icon-stack { font-size: 2em; } }

    /* Float section: clearfix on desktop, flex-column on mobile so float element drops below content */
    .float-section::after { content: ""; display: block; clear: both; }
    @media (max-width: 767px) {
      .float-section { display: flex; flex-direction: column; }
      .float-section > .float-block-start,
      .float-section > .float-block-end,
      .float-section > .float-block-start-sm,
      .float-section > .float-block-end-sm {
        order: 2;
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
      }
    }

    /* Responsive float blocks for /1 auto templates.
       Mobile: full-width block, no float, bottom margin only.
       md+: 50% wide, floated left or right, with gap toward the prose. */
    .float-block-start,
    .float-block-end {
      width: 100%;
      margin-bottom: calc(var(--bs-gutter-x) * 0.5);
    }
    @media (min-width: 768px) {
      .float-block-start {
        float: left;
        width: 50%;
        margin-right: var(--bs-gutter-x);
        margin-bottom: calc(var(--bs-gutter-x) * 0.5);
      }
      .float-block-end {
        float: right;
        width: 50%;
        margin-left: var(--bs-gutter-x);
        margin-bottom: calc(var(--bs-gutter-x) * 0.5);
      }
      .float-block-start-sm {
        float: left;
        width: 33.333%;
        margin-right: var(--bs-gutter-x);
        margin-bottom: calc(var(--bs-gutter-x) * 0.5);
      }
      .float-block-end-sm {
        float: right;
        width: 33.333%;
        margin-left: var(--bs-gutter-x);
        margin-bottom: calc(var(--bs-gutter-x) * 0.5);
      }
    }

    /* Media frame: 16:9 container for m/n/m item images, image fills height, aligned to edge */
    .media-frame {
      aspect-ratio: 16 / 9;
      display: flex;
      overflow: hidden;
    }
    .media-frame-start { justify-content: flex-start; }
    .media-frame-end { justify-content: flex-end; }
    .media-frame > img { height: 100%; width: auto; }
    @media (max-width: 767px) {
      .media-frame-start,
      .media-frame-end { justify-content: center; }
    }

    /* ratio ratio-16x9 handles the container; this just enforces contain */
    .media-contain-frame > img { object-fit: contain; }
    .enine_site_img_contain { object-fit: contain; }
    .enine_site_img_cover { object-fit: cover; }

    /* icon badge: 48×48 info-tinted square used in i/0, i/n/t, i/1/t */
    .enine_site_icon_badge {
      width: var(--enine_site_icon_badge_size);
      height: var(--enine_site_icon_badge_size);
      background: rgba(var(--bs-info-rgb), 0.15);
    }

    /* above-the-fold hero section min-height */
    .enine_site_hero_section { min-height: var(--enine_site_hero_section_min_h); }

    /* jumbotron text panel in split-hero layout */
    .enine_site_jumbotron_panel {
      padding-block: var(--enine_site_jumbotron_panel_padding);
    }

    /* ratio ratio-16x9 + bg-white rounded shadow-sm overflow-hidden handles the container */
    .media-logo-frame > img {
      inset: 24px;
      width: calc(100% - 48px);
      height: calc(100% - 48px);
      object-fit: contain;
    }

    /* Hero section for m/0 */
    .media-hero { min-height: var(--enine_site_hero_min_h); }
    .media-hero-img { object-fit: contain; }

    /* Homepage hero: solid full-bleed accent color (not a photo) behind
       centered title/subtitle/CTA text, with a hand-drawn product
       mockup underneath — see the enine_site_hero_mockup_* rules below. */
    .home-hero {
      padding-block: clamp(3rem, 8vw, 4.5rem) clamp(2.5rem, 6vw, 3.5rem);
      background: var(--bs-info);
      position: relative;
      overflow: hidden;
    }
    /* Below md: title/CTA, then the stack graphic, in plain document
       flow — there's no room beside bottom-left text on a phone-width
       screen for an overlay to avoid it. md+: title/CTA pinned
       bottom-left, the one corner the diagonal stack (see
       enine_site_hero_stack_wrap below) never crosses, since it runs
       from the hero's top-left toward its bottom-right instead. */
    .home-hero-inner { position: relative; z-index: 1; width: 100%; }
    .home-hero-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      color: var(--bs-info-fg);
      font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);
      max-width: 420px;
    }
    .home-hero-title { font-size: clamp(2.5rem, 5.5vw, 4rem); letter-spacing: var(--enine_site_tracking_tight); margin-bottom: 1rem; color: var(--bs-info-fg); text-wrap: balance; }
    .home-hero-subtitle { font-size: clamp(1.75rem, 6vw, 2.25rem); letter-spacing: var(--enine_site_tracking_loose); font-weight: 400; margin-bottom: 1rem; color: var(--bs-info-fg); opacity: 0.85; }
    .home-hero-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-start; }
    .home-hero-cta, .home-hero-cta-alt {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.5rem 1rem; border-radius: var(--bs-border-radius);
      text-decoration: none;
      font-weight: 600;
      /* Pinned, not inherited — .home-hero-text's own font-size is a
         fluid clamp up to 1.5rem, which was making button text grow
         with the viewport along with the headline. */
      font-size: 1rem;
    }
    /* :visited pinned explicitly to the same colors as the unvisited
       state — getComputedStyle() always reports the unvisited color by
       spec (history-sniffing protection), so this class of bug is
       invisible to automated checks; only a browser that's actually
       visited /create-site/ before shows it. Same failure mode this
       repo already fixed once across every theme's own default link
       styling — this button just didn't exist yet when that landed. */
    .home-hero-cta, .home-hero-cta:visited { background: var(--bs-info-fg); color: var(--bs-info); }
    .home-hero-cta-alt, .home-hero-cta-alt:visited { border: 1px solid var(--bs-info-fg); color: var(--bs-info-fg); }

    /* ── Hero frames — diagonal, overlapping, built-up-in-sequence ─────
       Three real design frames (from the "hero-frames" artifact's
       gallery: site, wireframe, tree, in that upload order). No
       rotateX/rotateZ — a flat image can never distort the way the
       earlier isometric version's mismatched box/image ratios
       repeatedly did, and it can't blur under a steep transform either.

       Z-order and animation sequence follow the BUILD story, which
       runs opposite to the gallery's own (upload) order: tree (the
       base) appears first and sits furthest back, wireframe appears
       next layered diagonally over it, site appears last and ends up
       frontmost — matching "content model, then layout, then the
       themed page" as a lived sequence, not just a static stack.

       Below md: a sized, position:relative box (not plain flow) so the
       three can overlap each other exactly like the md+ version, just
       more vertical than diagonal — the box itself still sits in
       normal document flow BEFORE the title/CTA text, so the two
       groups never overlap each other, only images within their own
       group. md+: promoted to a container-bounded absolute overlay. */
    .enine_site_hero_frames_wrap {
      position: relative;
      z-index: 0;
      pointer-events: none;
    }
    /* Sized to wrap the actual cascade (frame--1's own bottom edge),
       not a bigger round number — the previous clamp left ~80px of
       genuinely empty box below the last visible image, which is what
       was reading as "too much gap before the title" (there was no
       margin at all between this box and the text below it; the gap
       was dead space inside the box itself). */
    .enine_site_hero_frames {
      position: relative;
      height: clamp(200px, 56vw, 320px);
    }
    /* aspect-ratio (not an independently-set height) — the supplied
       frames are all ~1.85:1 (428-430 × 231-233px natively). object-fit
       is a backstop only; with the ratio matched there's nothing for it
       to crop or stretch. */
    .enine_site_hero_frame {
      display: block;
      position: absolute;
      width: 74%;
      aspect-ratio: 430 / 233;
      object-fit: contain;
      border-radius: calc(var(--bs-border-radius) * 1.25);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    }
    /* Build sequence: tree first (no delay, furthest back), wireframe
       next, site last (frontmost) — the reverse of the gallery's own
       upload order (site, wireframe, tree), which stays that way on
       purpose (see the top-level comment above). */
    .enine_site_hero_frame--3 { top: 0; left: 0; z-index: 1; }
    .enine_site_hero_frame--2 { top: 14%; left: 13%; z-index: 2; }
    .enine_site_hero_frame--1 { top: 28%; left: 26%; z-index: 3; }
    /* Explicit, not just "no rule sets it otherwise" — opacity:1 and no
       animation stated directly on the base (tree) frame so there is
       no cascade path, present or future, that can leave it hidden or
       fading. It is simply always there from first paint. */
    .enine_site_hero_frame--3 { opacity: 1; animation: none; }
    /* Only the two that "arrive" over the base (wireframe, then site)
       animate in — fully sequential, not overlapping-fade: each one's
       0.6s fade completes well within the 2s gap before the next one's
       delay starts, so it reads as distinct beats: base is there, 2s
       pause, wireframe arrives, 2s pause, site arrives. */
    @media (prefers-reduced-motion: no-preference) {
      .enine_site_hero_frame--2,
      .enine_site_hero_frame--1 {
        opacity: 0;
        animation: enine-hero-frame-in 0.6s ease-out forwards;
      }
      .enine_site_hero_frame--2 { animation-delay: 2s; }
      .enine_site_hero_frame--1 { animation-delay: 4s; }
    }
    @keyframes enine-hero-frame-in {
      from { opacity: 0; transform: translate(-10px, -10px); }
      to { opacity: 1; transform: translate(0, 0); }
    }
    @media (min-width: 768px) {
      .home-hero { min-height: clamp(560px, 92vh, 860px); padding-block: clamp(3.5rem, 6vw, 5rem) clamp(2.5rem, 4vw, 3.5rem); display: flex; align-items: flex-end; }
      .home-hero-inner { position: relative; z-index: 1; width: 100%; }
      /* .container (Bootstrap: max-width + margin-inline:auto per
         breakpoint) + position:absolute + inset:0 is the standard
         "centered, width-capped box" combination — keeps every frame
         inside the exact same column .home-hero-inner's own .container
         sits in, never bleeding to the true viewport edge. Every
         offset/size below is a % of THIS container's width/height, not
         vw (always viewport-relative) — one consistent frame of
         reference, learned the hard way from the previous version. */
      .enine_site_hero_frames_wrap { position: absolute; inset: 0; }
      .enine_site_hero_frames { position: absolute; inset: 0; height: auto; }
      .enine_site_hero_frame {
        width: 44%;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
      }
      /* Reverted to the smaller size/position (44% width, left 26/40/54)
         — the one change kept is `top`: shifted down (and the step
         between each recalculated, not just carried over) so that (a)
         the frontmost frame's (--1) bottom edge lines up with the CTA
         row's bottom edge, measured, and (b) the empty space above the
         backmost frame (--3) equals the empty space below the
         frontmost one — both ~7% of this box's height, measured at the
         1440px reference width, not just eyeballed as "close enough". */
      .enine_site_hero_frame--3 { top: 7%; left: 26%; }
      .enine_site_hero_frame--2 { top: 31%; left: 40%; }
      .enine_site_hero_frame--1 { top: 55%; left: 54%; }
    }

    /* CTA button layout */
    .enine_sites_jumbotron .d-flex.gap-3.flex-wrap { align-items: start; }
    @media (max-width: 575px) {
      .enine_sites_jumbotron .d-flex.gap-3.flex-wrap { flex-direction: column; }
      .enine_sites_jumbotron .d-flex.gap-3.flex-wrap .btn { width: 100%; }
    }

    /* m/n/m: media + text panel, alternating sides. Hand-written flex
       layout, no Bootstrap grid/utility classes — one class per element. */
    .pnc-mnm { padding-top: var(--enine_site_section_py); padding-bottom: var(--enine_site_section_py); position: relative; }
    .pnc-mnm > .container > h2 { margin-bottom: 1rem; }
    .pnc-mnm > .container > p { margin-bottom: 0.5rem; }
    .pnc-mnm > .container > div.enine_site_copy { margin-bottom: 3rem; }
    .mnm-heading-link { color: inherit; text-decoration: none; }

    .mnm-list { display: flex; flex-direction: column; gap: 3rem; padding-bottom: 1rem; }
    .mnm-row { display: flex; flex-direction: column; gap: 1.25rem; }
    .mnm-row-alt { flex-direction: column; }

    .mnm-media { border-radius: var(--bs-border-radius); overflow: hidden; background: rgba(0, 0, 0, 0.02); aspect-ratio: 16 / 9; }
    .mnm-image { width: 100%; height: 100%; object-fit: contain; display: block; }

    .mnm-panel { display: flex; flex-direction: column; }
    .mnm-title { font-weight: bold; font-size: clamp(1.125rem, 2vw, 1.5rem); margin: 0.75rem 0 0.5rem; }
    .mnm-title-link { color: inherit; text-decoration: none; }
    .mnm-text { margin: 0; color: var(--enine_site_muted); }
    .mnm-spacer { flex: 1 1 auto; min-height: 1rem; }
    .mnm-cta {
      align-self: flex-start;
      margin-top: 0.75rem;
      padding: 0.375rem 0.75rem;
      border: 1px solid var(--bs-info);
      border-radius: var(--bs-border-radius);
      color: var(--bs-info);
      text-decoration: none;
      font-size: 1rem;
    }
    .mnm-cta:hover { background: var(--bs-info); color: var(--bs-info-fg); }
    .mnm-sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }

    @media (min-width: 768px) {
      .mnm-row, .mnm-row-alt { flex-direction: row; align-items: stretch; gap: 2.5rem; }
      .mnm-row-alt { flex-direction: row-reverse; }
      .mnm-media, .mnm-panel { flex: 1 1 50%; min-width: 0; }
    }

    /* ── Page shells (contact/policy/blog/catalog/artifact/tag) ────────
       Hand-written, single class per element. bauhaus_enine owns none of
       these template files (all fall through to scaffold's shared
       markup) but CSS is never inherited cross-theme — every class the
       shared markup emits needs its own rule here too. */
    .page-hero {
      padding-top: var(--enine_site_section_py);
      padding-bottom: var(--enine_site_section_py);
      background: var(--bs-primary);
      color: var(--bs-primary-fg);
      min-height: var(--enine_site_hero_section_min_h);
      display: flex;
      align-items: center;
    }
    .page-hero-title { margin-bottom: 1rem; font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: var(--enine_site_tracking_tight); }
    .page-hero-tagline { margin: 0; font-size: 1.25rem; font-weight: 400; opacity: 0.75; }
    .page-hero-columns { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; }
    .page-hero-text { flex: 1 1 50%; }
    .page-hero-media {
      flex: 1 1 50%;
      aspect-ratio: 16 / 9;
      border-radius: var(--bs-border-radius);
      overflow: hidden;
      background: rgba(0, 0, 0, 0.02);
    }
    .page-hero-image { width: 100%; height: 100%; object-fit: contain; display: block; }

    .page-section { padding-top: var(--enine_site_section_py); padding-bottom: var(--enine_site_section_py); }
    .page-section-tagline { margin: 0 0 1.5rem; color: var(--enine_site_muted); }

    .page-columns { display: flex; flex-direction: column; gap: 2rem; }
    .page-column { flex: 1 1 50%; min-width: 0; }

    .page-policy-block { margin-bottom: 1.5rem; }
    .page-policy-heading { margin-bottom: 0.5rem; }
    .page-policy-list { margin: 0; }

    .blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
    .blog-card-solo { width: 100%; }
    .blog-card { display: flex; flex-direction: column; height: 100%; cursor: pointer; }
    .blog-card-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--bs-border-radius); margin-bottom: 1rem; }
    .blog-card-title { margin-bottom: 0.25rem; }
    .blog-card-text { margin: 0 0 1rem; color: var(--enine_site_muted); }
    .blog-card-link { margin: 0; text-decoration: underline; }

    @media (min-width: 992px) {
      .page-hero-columns { flex-direction: row; align-items: center; gap: 2.5rem; }
      .page-columns { flex-direction: row; gap: 3rem; }
      .blog-grid { grid-template-columns: repeat(3, 1fr); }
    }
      .enine-edit-name { font-size: inherit; font-weight: 600; color: inherit; }
      .enine-edit-name:hover, .enine-edit-name:focus { color: inherit; }

      .enine-icon-picker-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
        gap: 2px; max-height: 192px; overflow-y: auto;
      }
      .enine-icon-picker-btn {
        display: flex; align-items: center; justify-content: center;
        aspect-ratio: 1; border: none; background: transparent;
        border-radius: var(--bs-border-radius-sm); cursor: pointer; padding: 4px;
      }
      .enine-icon-picker-btn:hover { background: var(--bs-primary); color: #fff; }
      .enine-content-preview {
        display: -webkit-box; -webkit-line-clamp: 4;
        -webkit-box-orient: vertical; overflow: hidden;
      }
      .enine-checkered {
        background-color: #fff;
        background-image: linear-gradient(45deg, #ddd 25%, transparent 25%),
                          linear-gradient(-45deg, #ddd 25%, transparent 25%),
                          linear-gradient(45deg, transparent 75%, #ddd 75%),
                          linear-gradient(-45deg, transparent 75%, #ddd 75%);
        background-size: 8px 8px;
        background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
      }

/* ── Artifact image gallery — progressive-reveal grid ──────────
   artifact.html itself is scaffold's shared file here (bauhaus_enine owns
   no template override for it), but CSS never inherits cross-theme, so
   the same .artifact-gallery-* classes need their own rules in this
   stylesheet too. One grid holds every ArtifactImage; each breakpoint
   just raises how many are visible (3/6/9/12 at 3 columns, then 16 at
   4 columns) rather than reflowing what's already shown. */
.artifact-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.artifact-gallery-item {
  display: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bs-body-bg);
  border: 1px solid color-mix(in srgb, var(--bs-body-color), transparent 90%);
  border-radius: var(--bs-border-radius);
}
.artifact-gallery-item:nth-child(-n+3) { display: block; }
.artifact-gallery-img { display: block; width: 100%; height: 100%; object-fit: contain; }

@media (min-width: 576px) {
  .artifact-gallery-item:nth-child(-n+6) { display: block; }
}
@media (min-width: 768px) {
  .artifact-gallery-item:nth-child(-n+9) { display: block; }
}
@media (min-width: 992px) {
  .artifact-gallery-item:nth-child(-n+12) { display: block; }
}
@media (min-width: 1200px) {
  .artifact-gallery-grid { grid-template-columns: repeat(4, 1fr); }
  .artifact-gallery-item:nth-child(-n+16) { display: block; }
}

/* ── Gallery lightbox — full-viewport image viewer ────────────
   Same shared markup/classes as every theme (built once by
   common/js/site.js); this stylesheet owns bauhaus_enine's own skin. */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
}
.gallery-lightbox.is-open { display: flex; }
body.gallery-lightbox-locked { overflow: hidden; }

.gallery-lightbox-stage {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.gallery-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--bs-border-radius);
}

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: fixed;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}
.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover { background: var(--bs-primary); }

.gallery-lightbox-close { top: 1.5rem; right: 1.5rem; width: 2.75rem; height: 2.75rem; font-size: 1.25rem; }
.gallery-lightbox-prev,
.gallery-lightbox-next { top: 50%; transform: translateY(-50%); width: 3.5rem; height: 3.5rem; font-size: 1.5rem; }
.gallery-lightbox-prev { left: 1.5rem; }
.gallery-lightbox-next { right: 1.5rem; }

/* ── Terminal / code-block styling ──────────────────────────────
   Any fenced code block in artifact content renders through
   markdown_to_html as plain <pre><code> inside .enine_site_copy — no
   theme here styled it before. Background/text are color-mix()'d off
   the site's own body-text color rather than a fixed hex, so a
   repainted palette still reads as "dark terminal" instead of
   clashing (same approach this theme already uses for muted text and
   card borders). The three-dot header reuses the existing overlay
   tint tokens rather than inventing a new color. */
.enine_site_copy pre {
  background: color-mix(in srgb, var(--bs-body-color), black 70%);
  color: color-mix(in srgb, var(--bs-body-color), white 85%);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  border-radius: var(--bs-border-radius);
  padding: 2.25rem 1.25rem 1.25rem;
  margin-bottom: 0.875em;
  overflow-x: auto;
  position: relative;
}
.enine_site_copy pre::before {
  content: "";
  position: absolute;
  top: 0.875rem; left: 1.25rem;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--enine_site_overlay_bg_strong);
  box-shadow: 1.125rem 0 0 var(--enine_site_overlay_bg_strong),
              2.25rem 0 0 var(--enine_site_overlay_bg_strong);
}
.enine_site_copy pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}
.enine_site_copy code {
  background: var(--enine_site_border);
  border-radius: calc(var(--bs-border-radius) * 0.5);
  padding: 0.15em 0.4em;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.875em;
}

/* ── "How" section: connect the 4 steps into a pipeline ────────
   #how is bauhaus_enine's own artifact.name == "how" branch in
   components/auto/i/n/m.html — id-scoped so this never touches any
   other i/n/m instance. The 4 steps already sit in one row at lg+
   (col_layout_2col → col-6 col-lg-3), so this is CSS-only: a
   border-drawn chevron (not an icon-font glyph, so it isn't coupled
   to whichever icon set a given page happens to load) between
   adjacent cards, hidden below lg where the grid wraps to 2 columns. */
@media (min-width: 992px) {
  #how .row > div { position: relative; }
  #how .row > div:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%; right: calc(var(--bs-gutter-x) * -0.5 - 2px);
    width: 10px; height: 10px;
    transform: translateY(-50%) translateX(-50%) rotate(45deg);
    border-top: 2px solid var(--bs-info);
    border-right: 2px solid var(--bs-info);
    z-index: 1;
  }
}

/* ── "Just ask" MCP demo (components/_code_demo.html) ─────────────
   Measured against Notion's own shipped CSS for their "Build any tool
   for your agents" section (dev-platform-dos campaign), not eyeballed:
   section padding-block 2.5rem→5rem, header-to-grid gap 1.5rem, column
   gap 5rem at lg+, page max-width 78.25rem, heading max-width 24ch at
   font-size-800/line-height-800 (3.375rem/3.5rem) bold, subheading
   max-width 56ch, card border/dividers a translucent accent tint
   (their dev-platform-dos-alpha-lavender), section background a pale
   accent tint (their dev-platform-dos-gray, ~#f6f6fc). All of that
   keys off --bs-info (or a color-mix() of it) so it still tracks this
   site's own accent instead of Notion's literal hex, except the
   swatch's "after" color: that's illustrative content mirroring the
   literal hex the code sample sets, so it must match that string. */
.enine_site_feature_section {
  padding-block: 2.5rem;
  background: #fff;
}
@media (min-width: 768px) { .enine_site_feature_section { padding-block: 5rem; } }
/* Two classes beats the plain `.enine_site_alt` utility (theme.css's
   own generic alternator) on specificity, so this reliably wins instead
   of depending on stylesheet order — real alternation between sections,
   not the same tint repeated on every one. */
.enine_site_feature_section.enine_site_alt { background: color-mix(in srgb, var(--bs-info) 3%, white); }

/* No width/padding/position of its own — width rides on Bootstrap's
   plain `.container` (applied alongside it in markup), the exact same
   class the navbar and footer already use, so below-the-fold content
   lines up with them. Deliberately NOT position:relative: the
   inter-section connector (below) needs every section to share ONE
   containing block (home.html's wrapping div), not one each. */
.enine_site_feature_wrap { }

.enine_site_feature_header_copy { max-width: 40rem; }
.enine_site_feature_heading {
  max-width: 24ch;
  margin: 0;
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 4vw, 3.375rem);
  line-height: 1.04;
  letter-spacing: var(--enine_site_tracking_tight);
  color: var(--bs-info);
  text-wrap: balance;
}
.enine_site_feature_subheading {
  max-width: 56ch;
  margin: 1rem 0 0;
  font-weight: 400;
  color: color-mix(in srgb, var(--bs-info) 55%, var(--enine_site_muted));
}

.enine_site_feature_badges { gap: 0.625rem; }
.enine_site_feature_badge {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.enine_site_feature_badge--tool { background: var(--bs-info); color: var(--bs-info-fg); border-radius: 0.75rem; }
.enine_site_feature_badge--ai { background: color-mix(in srgb, var(--bs-info) 15%, white); color: var(--bs-info); border-radius: 50%; }
.enine_site_feature_badge_link { width: 2rem; align-self: center; border-top: 1px dashed color-mix(in srgb, var(--bs-info) 22%, white); }

/* A connecting LINE from the badge cluster down into the content below
   — not a container, nothing gets boxed in. Sits under the right-hand
   badge and stops at the content's own top margin. */
.enine_site_feature_frame { position: relative; margin-bottom: 2.5rem; }
.enine_site_feature_connector_line {
  position: absolute;
  top: 100%;
  right: 1.375rem;
  width: 0;
  height: 2.5rem;
  border-left: 1px dashed color-mix(in srgb, var(--bs-info) 30%, white);
}

/* The actual INTER-section connector — the real mechanism, not an
   approximation: Notion's own connector lines are drawn with CSS anchor
   positioning (`anchor()` against a named `anchor-name`), routing a line
   to an arbitrary element anywhere in the document, sections apart, with
   no JS and no guessing at heights. Requires every section in the chain
   to share ONE containing block (home.html wraps the whole section loop
   in a single `position:relative` div for exactly this — anchor() only
   resolves when the anchor and the positioned element share a
   containing block; per-section positioning silently breaks it).
   Genuine progressive enhancement, not a guessed fallback: hidden by
   default, only shown when `@supports` confirms the browser can
   position it correctly (Safari/Firefox, as of this writing, cannot) —
   a wrong-position line would be worse than no line. */
#hook-wrap { anchor-name: --wrap-hook; }
#justask-wrap { anchor-name: --wrap-justask; }
#theming-wrap { anchor-name: --wrap-theming; }
#justask-badges { anchor-name: --badge-justask; }
#theming-badges { anchor-name: --badge-theming; }
#seoaeo-badges { anchor-name: --badge-seoaeo; }

.enine_site_feature_connector_tail {
  display: none;
  position: absolute;
  width: 0;
  border-left: 1px dashed color-mix(in srgb, var(--bs-info) 30%, white);
  pointer-events: none;
}
@supports (top: anchor(--x center)) {
  @media (min-width: 992px) {
    .enine_site_feature_connector_tail { display: block; }
    .enine_site_feature_connector_tail--to-justask { top: anchor(--wrap-hook bottom); left: anchor(--badge-justask center); bottom: anchor(--badge-justask top); }
    .enine_site_feature_connector_tail--to-theming { top: anchor(--wrap-justask bottom); left: anchor(--badge-theming center); bottom: anchor(--badge-theming top); }
    .enine_site_feature_connector_tail--to-seoaeo { top: anchor(--wrap-theming bottom); left: anchor(--badge-seoaeo center); bottom: anchor(--badge-seoaeo top); }
  }
}

.enine_site_feature_row { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem; }
@media (min-width: 992px) { .enine_site_feature_row { --bs-gutter-x: 5rem; } }

/* Numbered step sequence (components/_hook.html's left column) — this is
   a real 3-step order, so numbering is honest here, not decoration. The
   dashed line runs behind the number circles (z-index), the same
   "connector" language used for the badge-to-content lines elsewhere on
   this page, just turned vertical and put to work as a real sequence. */
.enine_site_step_item { position: relative; display: flex; align-items: flex-start; gap: 1rem; padding-bottom: 2rem; }
.enine_site_step_item:last-child { padding-bottom: 0; }
.enine_site_step_item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.125rem;
  top: 2.25rem;
  bottom: -0.5rem;
  width: 0;
  border-left: 1px dashed color-mix(in srgb, var(--bs-info) 30%, white);
}
.enine_site_step_num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9375rem;
  background: color-mix(in srgb, var(--bs-info) 12%, white);
  color: var(--bs-info);
}
.enine_site_step_label { font-weight: 600; font-size: 1rem; padding-top: 0.5rem; }

/* Real Bootstrap accordion (data-bs-toggle="collapse") — Notion's left
   list is interactive, not a fixed 4-card grid. `--bs-accordion-*`
   variables reset to 0 so the item reads as our own divided list rather
   than Bootstrap's default bordered/rounded accordion card chrome. */
.enine_site_mcp_accordion { --bs-accordion-border-width: 0; --bs-accordion-btn-focus-box-shadow: none; }
.enine_site_mcp_list_item { border-bottom: 1px solid color-mix(in srgb, var(--bs-info) 22%, white); }
.enine_site_mcp_list_item:last-of-type { border-bottom: none; }
.enine_site_mcp_list_label.accordion-button {
  padding: 1rem 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--bs-body-color);
  background: transparent;
  box-shadow: none;
}
.enine_site_mcp_list_label.accordion-button:not(.collapsed) { color: var(--bs-info); background: transparent; }
.enine_site_mcp_accordion .accordion-body { padding: 0 0 1rem; }

.enine_site_mcp_terminal { margin-top: 0.875rem; border: 1px solid color-mix(in srgb, var(--bs-info) 22%, white); border-radius: 0.3125rem; overflow: hidden; background: #fff; }
.enine_site_mcp_terminal_bar {
  padding: 0.25rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--bs-info) 22%, white);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--bs-info);
}
.enine_site_mcp_terminal_code {
  margin: 0;
  padding: 0.75rem;
  color: var(--bs-body-color);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}
.enine_site_mcp_terminal_log {
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--bs-info);
  color: var(--bs-info-fg);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.enine_site_mcp_chat {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid color-mix(in srgb, var(--bs-info) 22%, white);
  border-radius: 0.3125rem;
  background: #fff;
  padding: 1.5rem;
}
@media (min-width: 992px) { .enine_site_mcp_chat { padding: 3.5rem; } }
.enine_site_mcp_chat_bubble--user {
  align-self: flex-end;
  max-width: 85%;
  font-size: 0.9375rem;
  background: color-mix(in srgb, var(--bs-info) 10%, white);
  color: var(--bs-info);
  border-radius: var(--bs-border-radius);
  padding: 0.625rem 1rem;
}

/* One "turn" = an avatar + its content, same shape Notion uses per
   message rather than a bare bulleted list. Rounded-square avatar
   (not a circle) to match the reference. */
.enine_site_mcp_chat_turn { display: flex; align-items: flex-start; gap: 0.75rem; }
.enine_site_mcp_avatar {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bs-info) 15%, white);
  color: var(--bs-info);
  font-size: 0.8125rem;
}
.enine_site_mcp_chat_thought { flex: 1; min-width: 0; }
.enine_site_mcp_chat_thought_label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--enine_site_muted);
  margin-bottom: 0.625rem;
}
.enine_site_mcp_chat_thought_label i { font-size: 0.75em; }
/* Dots joined by a line, with a visible gap at each dot: the line runs
   continuously behind the steps (::before on the wrapper) and each dot
   punches a "gap" in it via a box-shadow ring matching the card's own
   background, rather than the line touching the dot directly. */
.enine_site_mcp_chat_steps { position: relative; padding-left: 1.125rem; display: flex; flex-direction: column; gap: 0.625rem; }
.enine_site_mcp_chat_steps::before {
  content: "";
  position: absolute;
  left: 0.1875rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: color-mix(in srgb, var(--bs-info) 30%, white);
}
.enine_site_mcp_chat_step { position: relative; font-size: 0.9375rem; font-weight: 400; color: var(--enine_site_muted); }
.enine_site_mcp_chat_step::before {
  content: "";
  position: absolute;
  left: -1.125rem;
  top: 0.4em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--bs-info);
  box-shadow: 0 0 0 4px #fff;
}
.enine_site_mcp_chat_step strong {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--bs-info) 40%, transparent);
  text-underline-offset: 0.15em;
  color: var(--bs-body-color);
}
/* Strong accent, not the muted thought-step tone — Notion's own reply
   text reads as the "answer", distinctly stronger than the thinking
   trail above it, not the same weight/color. */
.enine_site_mcp_chat_reply { flex: 1; font-size: 0.9375rem; font-weight: 400; color: var(--bs-info); }

/* The result is its own bordered block, separated from the transcript
   above it — Notion's own result card ("Created PitchDeck.pptx") is a
   visually distinct element, not folded into the chat flow. */
.enine_site_mcp_result { margin-top: auto; padding-top: 1rem; border-top: 1px dashed color-mix(in srgb, var(--bs-info) 22%, white); }
.enine_site_mcp_result_label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--enine_site_muted); }

/* Scroll-triggered reveal — sections render as the visitor actually
   scrolls to them, not on a page-load clock. `animation-timeline:
   view()` (real CSS, not JS — the Scroll-Driven Animations spec) ties
   the animation to each element's OWN entry into the viewport, so a
   card below the fold is still invisible until it's actually scrolled
   into view, however long that takes. Longhand properties on purpose:
   the old `animation: enine-mcp-reveal 1 linear both` shorthand parsed
   "1" as the (unitless) iteration-count, leaving duration at its 0s
   initial value — the reveal was popping in instantly instead of
   easing, which read as "nothing happens when I reach a section". */
@media (prefers-reduced-motion: no-preference) {
  .enine_site_scroll_reveal,
  .enine_site_mcp_chat:not([data-mcp-chat]) > * {
    opacity: 0;
    animation-name: enine-mcp-reveal;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }
  /* Stagger siblings that reveal as a group. Still scroll-driven, not a
     wall-clock delay: each later sibling's own entry range is pushed
     further along the scroll distance, so a row of columns (or a
     vertical list of steps) cascades in rather than popping as one
     block — most visible for the seo-aeo columns, which sit side by
     side and would otherwise cross their entry point at the same time. */
  /* Diagram columns sit at nth-child 1/3/5 — the arrow <span> between
     each one takes the even slots. */
  .enine_site_diagram_col.enine_site_scroll_reveal:nth-child(3) { animation-range: entry 10% entry 55%; }
  .enine_site_diagram_col.enine_site_scroll_reveal:nth-child(5) { animation-range: entry 20% entry 65%; }
  .enine_site_step_item.enine_site_scroll_reveal:nth-child(2) { animation-range: entry 10% entry 55%; }
  .enine_site_step_item.enine_site_scroll_reveal:nth-child(3) { animation-range: entry 20% entry 65%; }

  /* The accordion-swapped chat variants (Just Ask) toggle via
     display:none -> flex through :has(), not by scrolling — a view()
     timeline is computed from scroll position and doesn't recompute on
     a display change, so it stayed invisible after switching accordion
     items. These use the ordinary document timeline instead (which DOES
     replay whenever a hidden element becomes visible), with a real
     per-message delay standing in for the "scrolled into view" cascade
     that isn't possible here without a script. */
  .enine_site_mcp_chat[data-mcp-chat] > * {
    opacity: 0;
    animation-name: enine-mcp-reveal;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
  }
  .enine_site_mcp_chat[data-mcp-chat] > *:nth-child(1) { animation-delay: 0s; }
  .enine_site_mcp_chat[data-mcp-chat] > *:nth-child(2) { animation-delay: 0.15s; }
  .enine_site_mcp_chat[data-mcp-chat] > *:nth-child(3) { animation-delay: 0.3s; }
  .enine_site_mcp_chat[data-mcp-chat] > *:nth-child(4) { animation-delay: 0.45s; }
}
@keyframes enine-mcp-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.enine_site_mcp_swatch { display: flex; align-items: center; gap: 1rem; }
.enine_site_mcp_swatch_pane { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; }
.enine_site_mcp_swatch_label { font-size: 0.75rem; color: var(--enine_site_muted); text-transform: uppercase; letter-spacing: 0.04em; }
.enine_site_mcp_swatch_btn { display: inline-block; padding: 0.375rem 0.875rem; border-radius: var(--bs-border-radius); font-size: 0.8125rem; font-weight: 600; color: #fff; }
.enine_site_mcp_swatch_btn--before { background: var(--bs-info); }
.enine_site_mcp_swatch_btn--after { background: #1e40af; }
.enine_site_mcp_swatch_arrow { color: var(--enine_site_muted); }

/* Which chat variant shows is decided here, not in a script: only one
   accordion pane can carry .show at a time (Bootstrap's own
   data-bs-parent grouping), so :has() reading that state is enough to
   keep the right-hand chat in sync with the left-hand accordion. */
.enine_site_mcp_chat[data-mcp-chat] { display: none; }
.enine_site_feature_row:has(#enine-mcp-1.show) [data-mcp-chat="1"],
.enine_site_feature_row:has(#enine-mcp-2.show) [data-mcp-chat="2"],
.enine_site_feature_row:has(#enine-mcp-3.show) [data-mcp-chat="3"] { display: flex; }

/* Logo before/after (Generate a logo from your name) */
.enine_site_mcp_logo_placeholder {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--bs-info) 40%, white);
}
.enine_site_mcp_logo_mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-info);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Navbar before/after (Publish a new page with real copy) */
.enine_site_mcp_navset { display: flex; flex-wrap: wrap; gap: 0.25rem; max-width: 11rem; }
.enine_site_mcp_navpill {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.3125rem;
  background: color-mix(in srgb, var(--bs-info) 8%, white);
  color: var(--bs-body-color);
}
.enine_site_mcp_navpill--new { background: var(--bs-info); color: #fff; font-weight: 600; }

/* Small uppercase eyebrow label, generic (used by the SEO/AEO checklist
   header) — not the mcp-scoped result label, which stays local to that
   component. */
.enine_site_eyebrow_label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--enine_site_muted); }

/* ── Custom theming (components/_theming.html) ─────────────────────
   A live demo: an editor mock (mirroring the real editor's actual
   field layout — themes/_editor/auto/_edit_title_block.html's two-row
   media-picker+title / icon-picker+short_title, and the same
   square-trigger picker styling) next to a preview that resolves to
   the SAME two real auto-layout templates it's demonstrating
   (auto/t/1/i.html's floated icon-row-in-text, auto/t/n/m.html's
   image-card grid) — not invented layouts. Two radio inputs drive
   which state shows, CSS only, no script. */
.enine_site_editor_demo_radio { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

/* Editor mock */
.enine_site_editor_mock {
  border: 1px solid color-mix(in srgb, var(--bs-info) 22%, white);
  border-radius: 0.3125rem;
  background: #fff;
  padding: 1.25rem;
}
.enine_site_editor_mock_pills { display: inline-flex; gap: 0.25rem; margin-bottom: 1rem; padding: 0.1875rem; border-radius: 999px; background: color-mix(in srgb, var(--bs-info) 5%, white); }
.enine_site_editor_mock_pill { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: 999px; color: var(--enine_site_muted); }
.enine_site_editor_mock_pill--active { background: #fff; color: var(--bs-info); box-shadow: 0 1px 2px rgba(19, 19, 186, 0.12); }
.enine_site_editor_mock_field_row { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.5rem; }
.enine_site_editor_mock_picker {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed color-mix(in srgb, var(--bs-info) 35%, white);
  border-radius: 0.3125rem;
  color: color-mix(in srgb, var(--bs-info) 55%, var(--enine_site_muted));
  font-size: 0.9375rem;
}
.enine_site_editor_mock_picker--sm { width: 1.875rem; height: 1.875rem; font-size: 0.8125rem; }
.enine_site_editor_mock_picker--media { color: var(--bs-info); border-style: solid; background: color-mix(in srgb, var(--bs-info) 6%, white); }
.enine_site_editor_mock_input { font-size: 0.9375rem; color: var(--bs-body-color); border-bottom: 1px solid color-mix(in srgb, var(--bs-info) 18%, white); padding-bottom: 0.5rem; flex: 1; }
.enine_site_editor_mock_input--title { font-weight: 700; font-size: 1.0625rem; }
.enine_site_editor_mock_input--muted { color: var(--enine_site_muted); }
.enine_site_editor_mock_input--sm { font-size: 0.8125rem; font-weight: 600; padding-bottom: 0.375rem; }
.enine_site_editor_mock_textarea {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--bs-info) 18%, white);
  border-radius: 0.3125rem;
  font-size: 0.8125rem;
  color: var(--enine_site_muted);
  line-height: 1.6;
}
.enine_site_editor_mock_children_label { margin: 1rem 0 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--enine_site_muted); }

/* Children list — replicates the real children-management rows (a
   number+reorder badge, icon picker, media picker, title, breadcrumb,
   two action buttons) measured from an authenticated screenshot of
   /sites/<domain>/artifact/<slug>/?mode=edit, not approximated. The
   last row is the real "add new" row shape: placeholder title, plus
   button instead of the go-to-page arrow. */
.enine_site_editor_row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-block: 0.625rem;
  border-top: 1px solid color-mix(in srgb, var(--bs-info) 15%, white);
  text-decoration: none;
  color: inherit;
}
label.enine_site_editor_row { cursor: pointer; }
.enine_site_editor_row.enine_site_editor_demo_state2 { display: none; }
.enine_site_editor_row_badge {
  flex-shrink: 0;
  width: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  font-size: 0.625rem;
  color: var(--enine_site_muted);
}
.enine_site_editor_row_num {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--bs-info) 30%, white);
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bs-info);
}
.enine_site_editor_row_picker {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--bs-info) 22%, white);
  border-radius: 0.3125rem;
  color: var(--bs-info);
  font-size: 0.875rem;
}
.enine_site_editor_row_picker--filled { background: color-mix(in srgb, var(--bs-info) 6%, white); }
.enine_site_editor_row_picker--empty { color: color-mix(in srgb, var(--bs-info) 40%, var(--enine_site_muted)); border-style: dashed; }
/* Once the demo adds the other two children (state2), all three share
   a media picker — "Fast setup" only lacked one while it was the lone
   icon-only child (t/1/i); a mixed set wouldn't resolve to the t/n/m
   grid the preview on the right is showing. */
#pnc-demo-2:checked ~ .row .enine_site_editor_row1_media {
  background: color-mix(in srgb, var(--bs-info) 6%, white);
  color: var(--bs-info);
  border-style: solid;
}
.enine_site_editor_row_title_wrap { flex: 1; min-width: 0; }
.enine_site_editor_row_title { display: block; font-weight: 700; font-size: 1rem; color: var(--bs-info); }
.enine_site_editor_row_title--placeholder { font-weight: 400; color: var(--enine_site_muted); }
.enine_site_editor_row_breadcrumb { display: block; font-size: 0.75rem; color: var(--enine_site_muted); }
.enine_site_editor_row_actions { flex-shrink: 0; display: flex; gap: 0.375rem; }
.enine_site_editor_row_btn {
  width: 1.875rem;
  height: 1.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3125rem;
  background: var(--bs-info);
  color: var(--bs-info-fg);
  font-size: 0.75rem;
}
.enine_site_editor_row--add .enine_site_editor_row_btn:not(.enine_site_editor_row_btn--accent) { opacity: 0.35; }

/* Toggle logic — state1 (one icon child) is the default; checking the
   second radio swaps in the two extra rows/cards and hides state1. */
#pnc-demo-2:checked ~ .enine_site_editor_demo_row .enine_site_editor_demo_state1 { display: none; }
#pnc-demo-2:checked ~ .enine_site_editor_demo_row .enine_site_editor_row.enine_site_editor_demo_state2 { display: flex; }

/* Live preview — the real auto-layout shapes */
.enine_site_layout_preview { border: 1px solid color-mix(in srgb, var(--bs-info) 22%, white); border-radius: 0.3125rem; background: #fff; padding: 1.5rem; height: 100%; }
.enine_site_layout_preview_title { font-weight: 700; font-size: 1.0625rem; margin-bottom: 0.75rem; }
.enine_site_layout_preview_body { font-size: 0.9375rem; color: var(--bs-body-color); line-height: 1.6; }
.enine_site_layout_preview_child {
  float: right;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 9.5rem;
  margin: 0 0 0.75rem 1rem;
  padding: 0.625rem;
  border: 1px solid color-mix(in srgb, var(--bs-info) 22%, white);
  border-radius: 0.3125rem;
}
.enine_site_layout_preview_child_text strong { font-size: 0.8125rem; }
.enine_site_layout_preview_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.enine_site_layout_preview_card { border: 1px solid color-mix(in srgb, var(--bs-info) 22%, white); border-radius: 0.3125rem; overflow: hidden; }
.enine_site_layout_preview_media { display: block; aspect-ratio: 4 / 3; background: linear-gradient(135deg, color-mix(in srgb, var(--bs-info) 25%, white), color-mix(in srgb, var(--bs-info) 8%, white)); }
.enine_site_layout_preview_card_title { padding: 0.625rem; font-size: 0.8125rem; font-weight: 600; }

/* Toggle logic — default is state1, switching to state2 when the
   second radio is checked. (The row-level state1/state2 rule lives
   above, next to .enine_site_editor_row.) */
.enine_site_layout_preview_grid.enine_site_editor_demo_state2,
.enine_site_layout_preview_body.enine_site_editor_demo_state2 { display: none; }
#pnc-demo-2:checked ~ .enine_site_editor_demo_row .enine_site_layout_preview_grid.enine_site_editor_demo_state2 { display: grid; }
#pnc-demo-2:checked ~ .enine_site_editor_demo_row .enine_site_layout_preview_body.enine_site_editor_demo_state2 { display: block; }

@media (max-width: 767.98px) {
  .enine_site_layout_preview_grid { grid-template-columns: 1fr; }
  .enine_site_layout_preview_child { float: none; max-width: none; margin: 0 0 0.75rem; }
}

/* ── SEO/AEO auditing (components/_seo_aeo.html) ────────────────────
   A real pipeline diagram — content -> checks -> who reads it — in the
   monospace box-and-arrow language, not a checklist card. Full width,
   three columns, so nothing sits blank beside it. */
/* No overflow-x here on purpose: setting it to anything but `visible`
   makes this element its own scroll container, which hijacks the
   `animation-timeline: view()` reveal on its children below — they'd
   measure visibility against this tiny box instead of the real page
   viewport and report "fully entered" immediately. The 3-column row
   only has comfortable room at lg+ (992px container == 960px, versus
   ~716px worst-case content width); below that it stacks to a column
   instead of needing to scroll. */
.enine_site_diagram {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.enine_site_diagram_col { display: flex; flex-direction: column; gap: 0.75rem; flex: 1 1 0; min-width: 12rem; }
.enine_site_diagram_col--center { flex: 1.15 1 0; }
.enine_site_diagram_col_label { font-size: 0.8125rem; color: var(--enine_site_muted); margin: 0; }
.enine_site_diagram_arrow { flex-shrink: 0; color: color-mix(in srgb, var(--bs-info) 45%, white); font-size: 1.125rem; align-self: center; margin-top: 1.5rem; }
.enine_site_diagram_box {
  border: 1px solid color-mix(in srgb, var(--bs-info) 22%, white);
  border-radius: 0.3125rem;
  background: #fff;
  padding: 1rem;
}
.enine_site_diagram_box_title { font-size: 0.875rem; font-weight: 600; color: var(--bs-body-color); }
.enine_site_diagram_box_sub { font-size: 0.8125rem; color: var(--enine_site_muted); }
.enine_site_diagram_dash_frame {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  border: 1px dashed color-mix(in srgb, var(--bs-info) 35%, white);
  border-radius: 0.3125rem;
  padding: 0.75rem;
}
.enine_site_diagram_box--solid {
  border: none;
  background: var(--bs-info);
  color: var(--bs-info-fg);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.75rem 1rem;
}
@media (max-width: 991.98px) {
  .enine_site_diagram { flex-direction: column; align-items: stretch; }
  .enine_site_diagram_arrow { align-self: flex-start; margin: 0 0 0 1.5rem; transform: rotate(90deg); }
}

/* ── Footer ──────────────────────────────────────────────────────
   footer/common.html is shared scaffold markup (not owned by this
   theme), but CSS never inherits cross-theme, so styling the bare
   element here only affects bauhaus_enine sites. Deepened slightly
   past the raw accent color (still derived from it, not a new fixed
   hue) so it reads as its own surface rather than a giant button. */
footer {
  background: color-mix(in srgb, var(--bs-info), black 12%);
  color: var(--bs-info-fg);
}
footer a {
  color: var(--bs-info-fg);
  opacity: 0.8;
}
footer a:hover { opacity: 1; }