/* ── Shared enine-* classes ──────────────────────────────────────
       Scaffold's markup (catalog, blog and policy pages, and any template
       this theme does not override) still carries these. This theme's own
       auto/ cells use the feature-section grammar instead (see "PNC auto/
       cells" below). */
    .enine-section { padding-block: var(--enine_site_section_py); }
    .enine-section-title { margin-bottom: 1rem; }
    .enine-section-tagline {
      font-size: 1rem; color: color-mix(in srgb, var(--bs-info) 55%, var(--enine_site_muted)); --link-c: color-mix(in srgb, var(--bs-info) 55%, 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); --link-c: 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_measure: 60ch;
      --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: color-mix(in srgb, currentColor, transparent 48%);
      --enine_site_border: color-mix(in srgb, currentColor, transparent 88%);
      --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; }


    #qux_content > section.py-5 > .container > p,
    .enine-section-tagline { max-width: var(--enine_site_measure); }

    /* 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%, var(--bs-body-bg));
      color: var(--enine_site_tag_accent, var(--bs-info)); --link-c: var(--enine_site_tag_accent, var(--bs-info));
      text-decoration: none;
    }
    .enine_site_tag:hover { color: var(--enine_site_tag_accent, var(--bs-info)); --link-c: var(--enine_site_tag_accent, var(--bs-info)); text-decoration: none; }

    .enine_site_fig_box {
      border: 1px solid var(--enine_site_border);
      border-radius: 0.75rem;
      overflow: hidden;
      background: var(--bs-body-bg); color: var(--bs-body-color); --link-c: var(--bs-body-color);
    }
    .enine_site_fig_box img,
    .enine_site_fig_box video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; display: block; }
    .enine_site_fig_box--wide img,
    .enine_site_fig_box--wide video { aspect-ratio: 21 / 9; }

    /* 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 {
      border: 1px solid var(--enine_site_border);
      border-radius: var(--bs-border-radius);
      padding: 1.375rem;
      background: var(--bs-body-bg);
      color: var(--bs-body-color); --link-c: var(--bs-body-color);
      height: 100%;
      overflow: hidden;
      transition: border-color 0.2s, background-color 0.2s, color 0.2s;
    }
    .enine_site_card:hover { border-color: var(--enine_site_border_hover); }
    .enine_site_card--tall { 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); --link-c: 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); --link-c: var(--bs-info-fg); }
    .enine_site_card--icon-hover:hover .enine_site_card_icon {
      background-color: var(--bs-body-bg);
      border-color: var(--bs-body-bg);
      color: var(--bs-body-color); --link-c: var(--bs-body-color);
    }
    .enine_site_card_icon {
      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); --link-c: var(--bs-info-fg);
      font-size: 0.9375rem; margin-bottom: 1rem;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }

    /* Card title/body inside .enine_site_card (components/_pnc_card.html). */
    .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); --link-c: var(--enine_site_muted); line-height: 1.55; margin-bottom: 0;
    }
    .enine_site_alt { background-color: var(--bs-secondary); color: var(--bs-secondary-fg); --link-c: var(--bs-secondary-fg); }

    .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; }

    .shadow { box-shadow: var(--enine_site_shadow_1) !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-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-end-sm {
        float: right;
        width: 33.333%;
        margin-left: var(--bs-gutter-x);
        margin-bottom: calc(var(--bs-gutter-x) * 0.5);
      }
    }

    .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);
    }

    /* 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); --link-c: 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); line-height: 1.1; margin-bottom: 1rem; color: var(--bs-info-fg); --link-c: 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); --link-c: 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;
    }
    .home-hero-cta, .home-hero-cta:hover { background: var(--bs-info-fg); color: var(--bs-info); --link-c: var(--bs-info); }
    .home-hero-cta-alt, .home-hero-cta-alt:hover { border: 1px solid var(--bs-info-fg); color: var(--bs-info-fg); --link-c: var(--bs-info-fg); }

    @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%; }

    }

    /* ── 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-info);
      color: var(--bs-info-fg); --link-c: var(--bs-info-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); line-height: 1.1; }
    .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; }
    /* Every hero is one height, with or without media or columns. */
    @media (min-width: 768px) {
      .page-hero-columns { flex-direction: row; align-items: center; gap: 2.5rem; }
    }

    .page-section { padding-top: var(--enine_site_section_py); padding-bottom: var(--enine_site_section_py); }

    /* The root artifact's own effective_content — scaffold's plain
       <section class="py-5">/<section class="page-section">, rendering
       markdown_to_html straight into .container with no wrapper of its
       own — reads as extra dead space below the section: the last
       paragraph's own Bootstrap default margin-bottom (1rem) stacks on
       top of the section's own padding-bottom. Zeroing only the last
       child fixes it without touching paragraph spacing anywhere else
       the content renders (cards, PNC auto sections, etc.). `.py-5` is
       Bootstrap's own generic utility used all over (including this
       theme's own artifact-gallery section, excluded here), so this is
       scoped to the exact direct-child shape this one content block
       renders as, not every `.py-5` on the page. */
    section.py-5:not(.artifact-gallery) > .container > :last-child,
    section.page-section > .container > :last-child {
      margin-bottom: 0;
    }

    .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-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); --link-c: var(--enine_site_muted); }
    .blog-card-link { margin: 0; text-decoration: underline; }

    @media (min-width: 992px) {
      .page-columns { flex-direction: row; gap: 3rem; }

    }

/* ── Artifact image gallery — every image, no cap ──────────
   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, 3 columns,
   then 4 from 1200px. */
.artifact-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.artifact-gallery-item {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bs-body-bg); color: var(--bs-body-color); --link-c: var(--bs-body-color);
  border: 1px solid color-mix(in srgb, var(--bs-body-color), transparent 90%);
  border-radius: var(--bs-border-radius);
}
.artifact-gallery-img { display: block; width: 100%; height: 100%; object-fit: contain; }

@media (min-width: 1200px) {
  .artifact-gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── "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: var(--bs-body-bg); color: var(--bs-body-color); --link-c: var(--bs-body-color);
}
@media (min-width: 768px) { .enine_site_feature_section { padding-block: 5rem; } }

/* PNC auto/ cells. Every cell is an enine_site_feature_section carrying the
   shared frame (components/_section_frame.html with pnc=True); cells differ
   only in how the copy, the figure and the child cards are arranged
   (components/_pnc_*.html). */
.ft-body > :last-child { margin-bottom: 0; }
.enine_site_fig_box + .ft-body,
.enine_site_fig_box + .row,
.ft-body + .enine_site_fig_box { margin-top: 2rem; }
.enine_site_feature_row + .enine-grid { margin-top: 2.5rem; }
.enine_site_card > .enine_site_process_card_media { margin-bottom: 1rem; }
/* m/0 "Full-bleed banner": the photo covers the section under an accent veil. */
.pnc-banner { overflow: hidden; }
.pnc-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pnc-banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--bs-info) 72%, transparent); }
.pnc-banner > .container { z-index: 2; }
.pnc-banner .enine_site_feature_heading,
.pnc-banner .enine_site_feature_subheading,
.pnc-banner .ft-body { color: var(--bs-info-fg); --link-c: var(--bs-info-fg); }
.pnc-banner .enine_site_feature_badge--tool { background: var(--bs-info-fg); color: var(--bs-info); --link-c: var(--bs-info); }
/* Background alternation by real DOM position, not by the Django class
   baked into each section at render time. A page renders its sections
   from several independent {% for %} loops (root content, children,
   mapped), each restarting forloop.counter, so the per-template
   bg-secondary/enine_site_alt classes can put two same-coloured sections
   side by side. :nth-child(of S) counts only the participating sections
   (never the hero), whichever loop rendered them. One alternate colour
   for every kind of section: --bs-secondary. !important only to defeat
   Bootstrap's own !important .bg-secondary utility. */
@supports selector(:nth-child(1 of a)) {
  #qux_content :is(section.enine-section, section.enine_site_feature_section, section.py-5:not(.bg-primary), section.page-section, section.enine_site_page_intro, section.enine_site_related):nth-child(odd of section.enine-section, section.enine_site_feature_section, section.py-5:not(.bg-primary), section.page-section, section.enine_site_page_intro, section.enine_site_related) {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color); --link-c: var(--bs-body-color);
  }
  #qux_content :is(section.enine-section, section.enine_site_feature_section, section.py-5:not(.bg-primary), section.page-section, section.enine_site_page_intro, section.enine_site_related):nth-child(even of section.enine-section, section.enine_site_feature_section, section.py-5:not(.bg-primary), section.page-section, section.enine_site_page_intro, section.enine_site_related) {
    background: var(--bs-secondary) !important;
    color: var(--bs-secondary-fg); --link-c: var(--bs-secondary-fg);
  }
}

/* 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 { flex: 1 1 0; max-width: 56rem; }
.enine-section-title,
.enine_site_related_heading,
.enine_site_feature_heading {
  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); --link-c: var(--bs-info);
  text-wrap: balance;
}
.enine_site_feature_heading { margin: 0; }
.enine_site_feature_subheading {
  max-width: var(--enine_site_measure);
  margin: 1rem 0 0;
  font-weight: 400;
  color: color-mix(in srgb, var(--bs-info) 55%, var(--enine_site_muted)); --link-c: color-mix(in srgb, var(--bs-info) 55%, var(--enine_site_muted));
}
/* Markdown content (#212) arrives wrapped in its own <p>; keep the block's spacing as it was. */
.enine_site_feature_subheading > :last-child { margin-bottom: 0; }

.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); --link-c: var(--bs-info-fg); border-radius: 0.75rem; }
.enine_site_feature_badge--ai { background: color-mix(in srgb, var(--bs-info) 15%, var(--bs-body-bg)); color: var(--bs-info); --link-c: 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%, var(--bs-body-bg)); }

/* 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; }
/* S5/S8 sections suppress header_copy; without it the badges drift left
   and the connector line (anchored right) hangs under nothing. */
.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%, var(--bs-body-bg));
}

/* 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; }

.enine_site_feature_connector_tail {
  display: none;
  position: absolute;
  width: 0;
  border-left: 1px dashed color-mix(in srgb, var(--bs-info) 30%, var(--bs-body-bg));
  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_row { --bs-gutter-x: 1.5rem; --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%, var(--bs-body-bg));
}
.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%, var(--bs-body-bg));
  color: var(--bs-info); --link-c: var(--bs-info);
}
.enine_site_step_label { font-weight: 600; font-size: 1rem; padding-top: 0.5rem; }

.enine_site_mcp_chat {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid color-mix(in srgb, var(--bs-info) 22%, var(--bs-body-bg));
  border-radius: 0.3125rem;
  background: var(--bs-body-bg); color: var(--bs-body-color); --link-c: var(--bs-body-color);
  padding: 1.5rem;
}
@media (min-width: 992px) { .enine_site_mcp_chat { padding: 3.5rem; } }

/* 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%, var(--bs-body-bg));
  color: var(--bs-info); --link-c: 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); --link-c: 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%, var(--bs-body-bg));
}
.enine_site_mcp_chat_step { position: relative; font-size: 0.9375rem; font-weight: 400; color: var(--enine_site_muted); --link-c: 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 var(--bs-body-bg);
}
.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); --link-c: var(--bs-body-color);
}

/* 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". */
/* animation-timeline: view() is the only thing that ever turns this
   opacity:0 back to visible. A browser that honors
   prefers-reduced-motion:no-preference (nearly all of them) but doesn't
   support view-timelines (Firefox, older Safari) would apply the
   opacity:0 with no working animation to reverse it — permanently
   invisible content, not a graceful no-animation fallback. Gating the
   whole hidden-initial-state rule behind @supports as well as the media
   query means an unsupported browser never sees opacity:0 in the first
   place: sections just render at their default, fully visible, with no
   animation — which is what "no support" should mean here. */
@supports (animation-timeline: view()) {
  @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%;
    }

    .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, in every browser,
   no view() dependency), with a real per-message delay standing in for
   the "scrolled into view" cascade that isn't possible here without a
   script — no @supports needed, nothing here relies on view-timelines. */
@media (prefers-reduced-motion: no-preference) {
  .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); }
}

/* 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; }

/* 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); --link-c: var(--enine_site_muted); }

/* ── 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);
  --link-c: var(--bs-info-fg);
}
footer a {
  color: var(--bs-info-fg); --link-c: var(--bs-info-fg);
  opacity: 0.8;
}
footer a:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   Features / Use-cases / Compare pages (bauhaus_enine/artifact.html
   dispatches these three by name). enine_site_feature_*, enine_site_
   mcp_chat*, enine_site_mcp_swatch* and enine_site_diagram_box* are
   already defined above (the homepage's own sections) and reused as-is
   here — only the classes new to these three pages are added below.
   ══════════════════════════════════════════════════════════════════ */

/* Two-column row shared by every feature reuses the real
   `row enine_site_feature_row` + `col-12 col-lg-6` grid home.html's own
   sections use (see theme.css's .enine_site_feature_row rule above) —
   only the body-copy/panel/caption typography below is new.
   Every .ft-body usage sitewide (stacked full-width, or the first thing
   in a row's left column) sits directly under a section's tagline,
   itself directly under .enine_site_feature_frame — whose own margin-
   bottom is a fixed 2.5rem (reserved for the badge-to-content connector
   line, see .enine_site_feature_connector_line below). Stacked with
   .ft-body's own margin-top, that left every tagline-to-content gap
   sitewide far past a normal paragraph break. -34px is not a rem-clean
   number, but it's the measured value that lands this on 1rem/16px, a
   plain paragraph-break gap — pulling it all the way to 0 reads as no
   break at all here, since
   tagline and content are close enough in color/weight that a gap that
   tight makes them blend into one paragraph. */
.ft-body { font-size: 1rem; line-height: 1.6; margin: -34px 0 0; max-width: var(--enine_site_measure); }
/* A .ft-body inside a real two-column split (col-lg-5/6/7, ft-pixel/
   use-cases-style) sits one Bootstrap grid level deeper than a plain
   col-12 row or a direct-after-frame --stacked paragraph, and the
   collapsing math lands on a different net baseline there — measured
   separately against the same 1rem/16px target rather than assumed
   equal, since it isn't the same box model. */
.col-lg-5 .ft-body, .col-lg-6 .ft-body, .col-lg-7 .ft-body { margin-top: -24px; }

/* Layout variety for _features.html/_usecases.html, mirroring home.html's
   own mix of shapes instead of repeating one two-column row per section. */
.ft-body--stacked { max-width: var(--enine_site_measure); margin-bottom: 1.75rem; }

/* S8 — CTA band: accent background, one line, one button. */
.shell-s8 { background: var(--bs-info); color: var(--bs-info-fg); --link-c: var(--bs-info-fg); border-radius: 0.75rem; padding: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.shell-s8-text { font-size: 1.25rem; font-weight: 700; margin: 0; }
.shell-s8-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--bs-body-bg); color: var(--bs-info); --link-c: var(--bs-info); font-weight: 700; padding: 0.625rem 1.5rem; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.shell-s8-btn:hover { color: var(--bs-info); --link-c: var(--bs-info); }
.shell-s8-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.shell-s8-btn--alt,
.shell-s8-btn--alt:hover { background: transparent; color: var(--bs-info-fg); --link-c: var(--bs-info-fg); box-shadow: inset 0 0 0 1px var(--bs-info-fg); }

/* al-grid auto-loop (multi-group curated sequence): 5 hand-picked combos
   spanning real variety, not all 21 — t-0 -> m-0 -> t-1-t -> i-n-i ->
   m-n-m, fifths of a shared 20s cycle. Each of the 3 groups' own default
   (already the base :checked attrs above) is what shows before any real
   click; the loop overrides those visually via animation without
   touching the underlying :checked state, so a click at any point falls
   straight back to a fully-working manual widget. */
@keyframes al-grid-p-t { 0%, 20% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } 20.01%, 40% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } 40.01%, 60% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } 60.01%, 100% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } }
@keyframes al-grid-p-i { 0%, 60% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } 60.01%, 80% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } 80.01%, 100% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } }
@keyframes al-grid-p-m { 0%, 20% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } 20.01%, 40% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } 40.01%, 80% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } 80.01%, 100% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } }
@keyframes al-grid-c-0 { 0%, 40% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } 40.01%, 100% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } }
@keyframes al-grid-c-1 { 0%, 40% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } 40.01%, 60% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } 60.01%, 100% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } }
@keyframes al-grid-c-n { 0%, 60% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } 60.01%, 100% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } }
@keyframes al-grid-h-t { 0%, 40% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } 40.01%, 60% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } 60.01%, 100% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } }
@keyframes al-grid-h-i { 0%, 60% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } 60.01%, 80% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } 80.01%, 100% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } }
@keyframes al-grid-h-m { 0%, 80% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } 80.01%, 100% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } }
@keyframes al-grid-children-dim { 0%, 40% { opacity: 0.35; pointer-events: none; } 40.01%, 100% { opacity: 1; pointer-events: auto; } }
/* All 21 outputs share one grid cell. The 6 the loop can show stay laid
   out (visibility, not display), so the stage is a constant height sized to
   the tallest of them; a taller picked layout only grows it when chosen.
   During the loop these 5 curated combos are made visible over the t/n/i
   default and opacity does the reveal/hide. */
@keyframes al-grid-out-t0    { 0%, 20%     { opacity: 1; } 20.01%, 100% { opacity: 0; } }
@keyframes al-grid-out-m0    { 0%, 20%     { opacity: 0; } 20.01%, 40% { opacity: 1; } 40.01%, 100% { opacity: 0; } }
@keyframes al-grid-out-t1t   { 0%, 40%     { opacity: 0; } 40.01%, 60% { opacity: 1; } 60.01%, 100% { opacity: 0; } }
@keyframes al-grid-out-ini   { 0%, 60%     { opacity: 0; } 60.01%, 80% { opacity: 1; } 80.01%, 100% { opacity: 0; } }
@keyframes al-grid-out-mnm   { 0%, 80%     { opacity: 0; } 80.01%, 100% { opacity: 1; } }

/* al-override auto-loop (multi-group curated sequence): 4 combos —
   card/card -> icon/card -> list/icon -> card/list — quarters of a
   shared 20s cycle. Each pane's own base CSS is already its "card" view
   (see .al-catalog-preview--solo / .al-catalog-preview above), so the
   card phases need no override; only the icon/list phases do. */
@keyframes al-override-solo-grid { 0%, 25% { grid-template-columns: 1fr; max-width: 12rem; } 25.01%, 50% { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; max-width: none; } 50.01%, 100% { grid-template-columns: 1fr; max-width: 12rem; } }
@keyframes al-override-listing-grid { 0%, 50% { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } 50.01%, 75% { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } 75.01%, 100% { grid-template-columns: 1fr; gap: 0.75rem; } }
@keyframes al-override-solo-media { 0%, 25% { aspect-ratio: 4/3; border-radius: 0.25rem; width: auto; margin: 0 0 0.5rem; } 25.01%, 50% { aspect-ratio: 1/1; border-radius: 50%; width: 2rem; margin: 0 auto 0.375rem; } 50.01%, 75% { aspect-ratio: 1/1; border-radius: 0.25rem; width: 2.5rem; margin: 0; } 75.01%, 100% { aspect-ratio: 4/3; border-radius: 0.25rem; width: auto; margin: 0 0 0.5rem; } }
@keyframes al-override-listing-media { 0%, 50% { aspect-ratio: 4/3; border-radius: 0.25rem; width: auto; margin: 0 0 0.5rem; } 50.01%, 75% { aspect-ratio: 1/1; border-radius: 50%; width: 2rem; margin: 0 auto 0.375rem; } 75.01%, 100% { aspect-ratio: 1/1; border-radius: 0.25rem; width: 2.5rem; margin: 0; } }
@keyframes al-override-solo-item { 0%, 25% { flex-direction: column; text-align: center; padding: 0.75rem; gap: 0; align-items: normal; } 25.01%, 50% { flex-direction: column; text-align: center; padding: 0.5rem; gap: 0; align-items: normal; } 50.01%, 75% { flex-direction: row; text-align: left; padding: 0.5rem 0.75rem; gap: 0.625rem; align-items: center; } 75.01%, 100% { flex-direction: column; text-align: center; padding: 0.75rem; gap: 0; align-items: normal; } }
@keyframes al-override-listing-item { 0%, 50% { flex-direction: column; text-align: center; padding: 0.75rem; gap: 0; align-items: normal; } 50.01%, 75% { flex-direction: column; text-align: center; padding: 0.5rem; gap: 0; align-items: normal; } 75.01%, 100% { flex-direction: row; text-align: left; padding: 0.5rem 0.75rem; gap: 0.625rem; align-items: center; } }
@keyframes al-override-sv-card { 0%, 25% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } 25.01%, 75% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } 75.01%, 100% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } }
@keyframes al-override-sv-icon { 0%, 25% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } 25.01%, 50% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } 50.01%, 100% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } }
@keyframes al-override-sv-list { 0%, 50% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } 50.01%, 75% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } 75.01%, 100% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } }
@keyframes al-override-cv-card { 0%, 50% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } 50.01%, 100% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } }
@keyframes al-override-cv-icon { 0%, 50% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } 50.01%, 75% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } 75.01%, 100% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } }
@keyframes al-override-cv-list { 0%, 75% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } 75.01%, 100% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } }

/* ft-xref auto-loop: hub -> pricing -> case -> team -> blog, fifths of a
   shared 15s cycle. Node labels share one keyframe (nth-child delayed);
   edges get their own keyframe each, lit whenever either endpoint node
   is the active phase (an edge can span two non-adjacent phases). */
@keyframes web-node-cycle {
  0%   { border-color: var(--bs-info); background: color-mix(in srgb, var(--bs-info) 8%, var(--bs-body-bg)); color: var(--bs-info); font-weight: 600; }
  20%, 100% { border-color: var(--enine_site_border); background: var(--bs-body-bg); color: var(--bs-body-color); font-weight: 500; }
}

@keyframes web-edge-hub-pricing { 0% { stroke: var(--bs-info); stroke-width: 1.5; } 20% { stroke: var(--bs-info); stroke-width: 1.5; } 40% { stroke: color-mix(in srgb, var(--bs-info) 16%, var(--bs-body-bg)); stroke-width: 1; } 60% { stroke: color-mix(in srgb, var(--bs-info) 16%, var(--bs-body-bg)); stroke-width: 1; } 80% { stroke: color-mix(in srgb, var(--bs-info) 16%, var(--bs-body-bg)); stroke-width: 1; } 100% { stroke: var(--bs-info); stroke-width: 1.5; } }

@keyframes web-edge-hub-case { 0% { stroke: var(--bs-info); stroke-width: 1.5; } 20% { stroke: color-mix(in srgb, var(--bs-info) 16%, var(--bs-body-bg)); stroke-width: 1; } 40% { stroke: var(--bs-info); stroke-width: 1.5; } 60% { stroke: color-mix(in srgb, var(--bs-info) 16%, var(--bs-body-bg)); stroke-width: 1; } 80% { stroke: color-mix(in srgb, var(--bs-info) 16%, var(--bs-body-bg)); stroke-width: 1; } 100% { stroke: var(--bs-info); stroke-width: 1.5; } }

@keyframes web-edge-hub-team { 0% { stroke: var(--bs-info); stroke-width: 1.5; } 20% { stroke: color-mix(in srgb, var(--bs-info) 16%, var(--bs-body-bg)); stroke-width: 1; } 40% { stroke: color-mix(in srgb, var(--bs-info) 16%, var(--bs-body-bg)); stroke-width: 1; } 60% { stroke: var(--bs-info); stroke-width: 1.5; } 80% { stroke: color-mix(in srgb, var(--bs-info) 16%, var(--bs-body-bg)); stroke-width: 1; } 100% { stroke: var(--bs-info); stroke-width: 1.5; } }

@keyframes web-edge-hub-blog { 0% { stroke: var(--bs-info); stroke-width: 1.5; } 20% { stroke: color-mix(in srgb, var(--bs-info) 16%, var(--bs-body-bg)); stroke-width: 1; } 40% { stroke: color-mix(in srgb, var(--bs-info) 16%, var(--bs-body-bg)); stroke-width: 1; } 60% { stroke: color-mix(in srgb, var(--bs-info) 16%, var(--bs-body-bg)); stroke-width: 1; } 80% { stroke: var(--bs-info); stroke-width: 1.5; } 100% { stroke: var(--bs-info); stroke-width: 1.5; } }

@keyframes web-edge-pricing-case { 0% { stroke: color-mix(in srgb, var(--bs-info) 16%, var(--bs-body-bg)); stroke-width: 1; } 20% { stroke: var(--bs-info); stroke-width: 1.5; } 40% { stroke: var(--bs-info); stroke-width: 1.5; } 60% { stroke: color-mix(in srgb, var(--bs-info) 16%, var(--bs-body-bg)); stroke-width: 1; } 80% { stroke: color-mix(in srgb, var(--bs-info) 16%, var(--bs-body-bg)); stroke-width: 1; } 100% { stroke: color-mix(in srgb, var(--bs-info) 16%, var(--bs-body-bg)); stroke-width: 1; } }

/* ft-tags auto-loop: all -> investors -> clients -> press, quarters of
   one shared 12s cycle (nth-child-delayed, one keyframe for the tab
   label, one keyframe per row's own tag membership since which rows
   stay visible differs row to row). */
@keyframes tagf-tab-cycle {
  0%   { color: var(--bs-info); border-bottom-color: var(--bs-info); }
  25%, 100% { color: var(--enine_site_muted); border-bottom-color: transparent; }
}

/* slots: all / investors / clients / press; one keyframe per row. Rows collapse
   (max-height/padding/border/opacity) rather than toggling display, which
   does not animate reliably across browsers. */
@keyframes tagf-row-1 { 0% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } 25% { max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; } 50% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } 75% { max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; } 100% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } }

@keyframes tagf-row-2 { 0% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } 25% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } 50% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } 75% { max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; } 100% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } }

@keyframes tagf-row-3 { 0% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } 25% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } 50% { max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; } 75% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } 100% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } }

@keyframes tagf-row-4 { 0% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } 25% { max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; } 50% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } 75% { max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; } 100% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } }

@keyframes tagf-row-5 { 0% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } 25% { max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; } 50% { max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; } 75% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } 100% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } }

@keyframes tagf-row-6 { 0% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } 25% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } 50% { max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; } 75% { max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; } 100% { max-height: 3rem; padding-block: 0.75rem; border-bottom-width: 1px; opacity: 1; } }

/* ft-brand (S3, multi-group per plan §5.1): 5 accent swatches, 2 font
   pairs, corner radius (0/6/16). --accent-loop is a REGISTERED custom
   property (@property, syntax:<color>) so it's directly keyframe-
   animatable; the dark pane is never separately authored, light or
   loop — it's always color-mix() off the exact same value, so "the
   dark pane derives automatically" holds during the auto-loop too, not
   only after a click. Contrast badges are real, computed WCAG ratios
   against white text (see the 5 swatch colors below), not guessed. */
@property --accent-loop { syntax: '<color>'; inherits: true; initial-value: #1313BA; }

/* auto-loop: 4 curated combos — Indigo/Sans/Square -> Plum/Serif/Round
   -> Teal/Sans/Soft -> Amber/Serif/Square, quarters of a shared 20s
   cycle. --accent-loop being a registered <color> property means one
   animation drives both panes (the dark pane's color-mix() reads it
   live) instead of needing a second, parallel dark-mode keyframe. */
@keyframes brand-accent-loop {
  0%, 25%     { --accent-loop: #1313BA; }
  25.01%, 50% { --accent-loop: #6D28D9; }
  50.01%, 75% { --accent-loop: #0F766E; }
  75.01%, 100% { --accent-loop: #B45309; }
}
@keyframes brand-font-loop {
  0%, 25%     { font-family: var(--bs-body-font-family, inherit); }
  25.01%, 50% { font-family: Georgia, 'Times New Roman', serif; }
  50.01%, 75% { font-family: var(--bs-body-font-family, inherit); }
  75.01%, 100% { font-family: Georgia, 'Times New Roman', serif; }
}
@keyframes brand-radius-loop {
  0%, 25%     { border-radius: 0; }
  25.01%, 50% { border-radius: 1rem; }
  50.01%, 75% { border-radius: 0.375rem; }
  75.01%, 100% { border-radius: 0; }
}
@keyframes brand-swatch-hl { 0%, 24% { border-color: var(--enine_site_border); box-shadow: 0 0 0 3px var(--bs-info); } 25%, 100% { border-color: transparent; box-shadow: 0 0 0 1px var(--enine_site_border) inset; } }
@keyframes brand-tab-hl { 0%, 24% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } 25%, 100% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } }

label[for="font-1"] { animation: brand-tab-hl 20s infinite; animation-delay: 10s; }
label[for="font-2"] { animation: brand-tab-hl 20s infinite; animation-delay: 5s; }
label[for="radius-0"] { animation: brand-tab-hl 20s infinite; }
label[for="radius-6"] { animation: brand-tab-hl 20s infinite; animation-delay: 10s; }
label[for="radius-16"] { animation: brand-tab-hl 20s infinite; animation-delay: 5s; }

@media (prefers-reduced-motion: reduce) {

  label[for="font-1"], label[for="font-2"],
  label[for="radius-0"], label[for="radius-6"], label[for="radius-16"] { animation: none; }
}

@keyframes enine-loop-hint-pop {
  0%, 76%  { opacity: 0; transform: translateY(4px) scale(0.96); }
  82%, 95% { opacity: 1; transform: translateY(0) scale(1); }
  100%     { opacity: 0; transform: translateY(4px) scale(0.96); }
}

@keyframes device-tab-highlight-laptop {
  0%, 22%   { color: var(--bs-info); border-bottom-color: var(--bs-info); }
  23%, 99%  { color: var(--enine_site_muted); border-bottom-color: transparent; }
  100%      { color: var(--bs-info); border-bottom-color: var(--bs-info); }
}
@keyframes device-tab-highlight-tablet {
  0%, 27%   { color: var(--enine_site_muted); border-bottom-color: transparent; }
  28%, 46%  { color: var(--bs-info); border-bottom-color: var(--bs-info); }
  47%, 100% { color: var(--enine_site_muted); border-bottom-color: transparent; }
}
@keyframes device-tab-highlight-phone {
  0%, 51%   { color: var(--enine_site_muted); border-bottom-color: transparent; }
  52%, 96%  { color: var(--bs-info); border-bottom-color: var(--bs-info); }
  97%, 100% { color: var(--enine_site_muted); border-bottom-color: transparent; }
}

@keyframes device-autocycle {
  0%, 22%  { width: 100%; }
  28%, 46% { width: 25rem; }
  52%, 96% { width: 10.55rem; }
  100%     { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {

  @keyframes pnc-axes-wireframe { 0%, 73% { opacity: 1; } 75%, 100% { opacity: 0; } }
  @keyframes pnc-axes-final { 0%, 73% { opacity: 0; } 75%, 99% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes pnc-axes-hl-tint {
    0%, 24% { box-shadow: 0 0 0 3px var(--bs-info); background: color-mix(in srgb, var(--bs-info) 15%, var(--bs-body-bg)); }
    25%, 100% { box-shadow: none; background: color-mix(in srgb, var(--bs-info) 8%, var(--bs-body-bg)); }
  }
  @keyframes pnc-axes-hl-ring {
    0%, 24% { box-shadow: 0 0 0 3px var(--bs-info); }
    25%, 100% { box-shadow: none; }
  }
  @keyframes pnc-axes-hl-child {
    0%, 24% { box-shadow: 0 0 0 3px var(--bs-info); background: color-mix(in srgb, var(--bs-info) 15%, var(--bs-body-bg)); }
    25%, 100% { box-shadow: none; background: color-mix(in srgb, var(--bs-info) 6%, var(--bs-body-bg)); }
  }
  @keyframes pnc-axes-step {
    0%, 24% { background: color-mix(in srgb, var(--bs-info) 6%, var(--bs-body-bg)); }
    25%, 100% { background: transparent; }
  }
  @keyframes pnc-axes-step-num {
    0%, 24% { background: var(--bs-info); color: var(--bs-info-fg); }
    25%, 100% { background: color-mix(in srgb, var(--bs-info) 8%, var(--bs-body-bg)); color: var(--bs-info); }
  }

  @keyframes pnc-axes-caption { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
}

/* auto-loop: unticked -> ticked, halves of a shared 8s cycle. */
@keyframes pnc-priority-box-cycle { 0%, 49% { background: transparent; border-color: var(--enine_site_border); } 50%, 100% { background: var(--bs-info); border-color: var(--bs-info); } }
@keyframes pnc-priority-media-cycle { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes pnc-priority-icon-cycle { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pnc-priority-title-cycle { 0%, 49% { color: var(--enine_site_muted); text-shadow: none; } 50%, 100% { color: var(--bs-info-fg); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } }
@keyframes pnc-priority-check-cycle { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  @keyframes pnc-ex-tagline-reveal  { 0%, 24.99% { opacity: 0.15; } 25%, 100% { opacity: 1; } }
  @keyframes pnc-ex-content-reveal  { 0%, 49.99% { opacity: 0.15; } 50%, 100% { opacity: 1; } }
  @keyframes pnc-ex-children-reveal { 0%, 74.99% { opacity: 0.15; } 75%, 100% { opacity: 1; } }
  @keyframes pnc-ex-tagline-show  { 0%, 24.99% { visibility: hidden; } 25%, 100% { visibility: visible; } }
  @keyframes pnc-ex-content-show  { 0%, 49.99% { visibility: hidden; } 50%, 100% { visibility: visible; } }
  @keyframes pnc-ex-children-show { 0%, 74.99% { visibility: hidden; } 75%, 100% { visibility: visible; } }
  @keyframes pnc-ex-card1-hl   { 0%, 74.99% { box-shadow: none; } 75%, 99.99% { box-shadow: 0 0 0 3px var(--bs-info); } 100% { box-shadow: none; } }
  @keyframes pnc-ex-settle     { 0%, 74.99% { transform: scale(1); } 75%, 99.99% { transform: scale(1.015); } 100% { transform: scale(1); } }
  @keyframes pnc-ex-dot-hl     { 0%, 24% { background: var(--bs-info); transform: scale(1.3); } 25%, 100% { background: color-mix(in srgb, var(--bs-info) 20%, var(--bs-body-bg)); transform: scale(1); } }

}

/* theme-gallery auto-loop: 6 tabs, sixths of a shared 18s cycle. */
@keyframes theme-tab-cycle { 0%, 16% { color: var(--bs-info); border-bottom-color: var(--bs-info); } 16.34%, 100% { color: var(--enine_site_muted); border-bottom-color: transparent; } }
/* opacity, not display: a display:none element never gets its own CSS
   animation registered by the browser at all (confirmed empirically —
   see al-grid's identical comment), so panels 2-6 are force-rendered and
   absolutely stacked over panel 1 (bauhaus, the real default, shown
   normally via its own :checked rule) instead, while nothing is
   interacted with yet. */
@keyframes theme-panel-cycle { 0%, 16% { opacity: 1; } 16.34%, 100% { opacity: 0; } }

/* seo-struct auto-loop: outer step cycle only (schema -> sitemap -> open
   -> rss), reusing pnc-axes's own shared .pnc-steps .pnc-step keyframe
   (same 16s/4-delay scheme, already global). The nested 8-way role
   picker inside the schema panel is a secondary, smaller control and
   stays manual-only — it isn't one of the 12 widgets this pass covers;
   flagged in the rollout report rather than silently expanded. */
/* opacity, not display — see al-grid's/theme-gallery's identical fix;
   a display:none element never gets its own animation registered by the
   browser at all. Panels 2-4 are force-rendered and absolutely stacked
   over panel 1 (schema, the real default) while nothing's picked yet. */
@keyframes seo-panel-cycle { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }

@keyframes seo-read-rows-cycle { 0%, 49% { grid-template-rows: 1fr 0fr; } 50%, 100% { grid-template-rows: 0fr 1fr; } }

/* seo-read auto-loop: human -> machine, halves of a shared 8s cycle. Both
   panes need their own keyframe — only animating .seo-read-machine left
   .seo-read-human permanently visible the whole time (base display isn't
   none), so the tab label would highlight but the pane never actually
   swapped; caught by real-click testing, not the checked=true shortcut. */
@keyframes seo-read-pane-cycle-human { 0%, 49% { visibility: visible; } 50%, 100% { visibility: hidden; } }
@keyframes seo-read-pane-cycle-machine { 0%, 49% { visibility: hidden; } 50%, 100% { visibility: visible; } }

@keyframes seo-read-tab-cycle { 0%, 49% { background: var(--bs-body-bg); color: var(--bs-info); box-shadow: 0 1px 2px color-mix(in srgb, var(--bs-info) 12%, transparent); } 50%, 100% { background: transparent; color: var(--enine_site_muted); box-shadow: none; } }

#qux_content > section.py-5:not(.artifact-gallery) > .container { font-size: 1.0625rem; line-height: 1.65; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes clarity-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } }

}

@media (prefers-reduced-motion: no-preference) {
  @keyframes imp-found-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

}

/* Related strip */
.enine_site_related { padding-block: 3.5rem; }
.enine_site_related:not(:has(li, details)) { display: none; }
.enine_site_related_heading { margin: 0 0 1.5rem; }
.enine_site_related_groups { display: grid; gap: 2rem; }
.enine_site_related_zone { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem; }
.enine_site_related_zone:not(:has(li)) { display: none; }

.enine_site_related_group:not(:has(li, details)) { display: none; }
.enine_site_related_label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--enine_site_muted); --link-c: var(--enine_site_muted); margin: 0 0 0.75rem; }
.enine_site_related_links { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.enine_site_related_link { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: 0.625rem; border: 1px solid var(--enine_site_border); background: var(--bs-body-bg); color: var(--bs-body-color); --link-c: var(--bs-body-color); text-decoration: none; transition: border-color .2s; }
.enine_site_related_link:hover { border-color: color-mix(in srgb, var(--bs-info) 45%, var(--bs-body-bg)); }
.enine_site_related_icon { display: inline-flex; flex-shrink: 0; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 0.5rem; background: color-mix(in srgb, var(--bs-info) 8%, var(--bs-body-bg)); color: var(--bs-info); --link-c: var(--bs-info); font-size: 0.875rem; }
.enine_site_related_title { display: block; font-weight: 700; font-size: 0.9375rem; color: var(--bs-info); --link-c: var(--bs-info); }
.enine_site_related_tagline { display: block; font-size: 0.8125rem; line-height: 1.45; color: var(--enine_site_muted); --link-c: var(--enine_site_muted); margin-top: 0.125rem; }

.enine_site_blog_lead { margin-bottom: 2.5rem; }
.enine_site_blog_lead_title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: var(--enine_site_tracking_tight); margin-bottom: 0.75rem; text-wrap: balance; }
.enine_site_blog_lead .enine_site_fig_box { transition: border-color 0.2s; }
.enine_site_blog_lead:hover .enine_site_fig_box { border-color: var(--enine_site_border_hover); }
.blog-post-cover { border-radius: 0.75rem; border: 1px solid var(--enine_site_border); }

/* t0: the self intro sits in a col-lg-8 measure, the same width in every stock theme. */
.pnc-t0 .enine_site_feature_header_copy,
.pnc-t0 .ft-body { max-width: none; }
@media (min-width: 992px) {
  .pnc-t0 .enine_site_feature_header_copy,
  .pnc-t0 .ft-body { max-width: 66.6667%; }
}

/* Timelines: the card view is a horizontal track, the list view a vertical rail. */
.enine-timeline {
  --tl-line: var(--bs-border-color);
  --tl-line-w: 2px;
  --tl-dot: 0.875rem;
  --tl-dot-bg: var(--bs-info);
  --tl-dot-fg: var(--bs-info-fg, var(--bs-body-bg));
  --tl-dot-radius: 50%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.enine-timeline-dot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tl-dot);
  height: var(--tl-dot);
  border-radius: var(--tl-dot-radius);
  background: var(--tl-dot-bg);
  color: var(--tl-dot-fg);
  font-size: 0.875rem;
  position: relative;
  z-index: 1;
}
.enine-timeline-dot--icon { --tl-dot: 2.25rem; }
.enine-timeline-gap { font-size: 0.75rem; white-space: nowrap; padding-inline: 0.5rem; opacity: 0.7; }
.enine-timeline-date { margin-bottom: 0.25rem; }
.enine-timeline-title { margin-bottom: 0.5rem; }
.enine-timeline-body > :last-child { margin-bottom: 0; }

.enine-timeline--h { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; }
.enine-timeline--h .enine-timeline-item { flex: 0 0 min(18rem, 80%); scroll-snap-align: start; }
.enine-timeline--h .enine-timeline-marker { display: flex; align-items: center; min-height: 2.25rem; margin-bottom: 1rem; }
.enine-timeline--h .enine-timeline-line { flex: 1 1 auto; border-top: var(--tl-line-w) solid var(--tl-line); }
.enine-timeline--h .enine-timeline-line--end { flex: 0 0 1rem; }
.enine-timeline--h .enine-timeline-content { padding-right: 1.5rem; }

.enine-timeline--v { --tl-when: 0rem; }
.enine-timeline--v .enine-timeline-item { position: relative; padding: 0 0 2.5rem calc(var(--tl-when) + 3rem); }
.enine-timeline--v .enine-timeline-item:last-child { padding-bottom: 0; }
.enine-timeline--v .enine-timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--tl-when) + 1.125rem - var(--tl-line-w) / 2);
  top: 0.25rem;
  bottom: -0.25rem;
  border-left: var(--tl-line-w) solid var(--tl-line);
}
.enine-timeline--v .enine-timeline-dot { position: absolute; top: 0.25rem; left: calc(var(--tl-when) + 1.125rem - var(--tl-dot) / 2); }
.enine-timeline--v .enine-timeline-when { margin-bottom: 0.5rem; }
.enine-timeline--v .enine-timeline-when .enine-timeline-gap { padding-inline: 0; }
@media (min-width: 768px) {
  .enine-timeline--v { --tl-when: 9rem; }
  .enine-timeline--v .enine-timeline-when { position: absolute; top: 0; left: 0; width: calc(var(--tl-when) - 0.5rem); text-align: end; margin-bottom: 0; }
}

.enine-timeline .enine-timeline-date { margin: 0 0 0.25rem; }
.enine-timeline--h .enine-timeline-item { flex-basis: min(20rem, 80%); }