/*
  algoQA — Home page styling.

  Scoped to the Home page only via a dedicated identifier: the hero div carries
  id="algoshack-home" (plus its class), and both exist only on this page (see
  home.mdx). We match either one, so if the editor strips the id the class still
  scopes it, and vice versa. This does NOT depend on any heading text, level, or
  slug, so it survives heading edits and the "&" reslug in "KEY CONCEPTS & GUIDES"
  (both of which silently break heading-id hooks). IMPORTANT: the home-only hides
  below (breadcrumbs, page header) must never be applied globally. Do not register
  the repo-root home-page.css in Site Config; it hides these on every page.

  To make it live: in the documentation.ai editor open Site Config → Custom CSS
  → Add Stylesheet → select styles/home.css → Publish.
*/
:root:has(#algoshack-home),
:root:has(.algoshack-hero) {

  /* ─── Hide breadcrumbs + the platform header we replace with our own hero ─── */
  .dai-page-header { display: none !important; }
  .dai-breadcrumbs{display:none !important}
  .dai-navbar-tabs{display:none !important}
  .page-title { display: none !important; }
  .page-description { display: none !important; }
  .dai-feedback { display: none !important; }
.dai-page-nav{display:none !important}
  /* ─── Hide heading anchor icons ─── */
  [data-component="Heading"] > div { display: none !important; }

  /* ─── Content column (wide layout, no sidebar) ─── */
  .dai-article,
  .dai-content-column {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ─── Hero banner (custom HTML in home.mdx, replaces the platform header) ─── */
  .algoshack-hero {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
    row-gap: 16px !important;
    padding: 12px 0 24px !important;
    /* Divider like Glean's .heroDivider: 1px line, theme border colour, generous space.
       Uses the platform --border token so it stays visible and adapts light/dark
       automatically (no separate .dark override needed). */
    border-bottom: 1px solid var(--border) !important;
    /* first value is the top margin — space above the hero */
    margin: 40px 0 24px !important;
  }

  /* Brand column shrinks so the tagline wraps inside it instead of pushing buttons down */
  .algoshack-hero__brand { flex: 1 1 340px !important; min-width: 0 !important; }

  .algoshack-hero__wordmark {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 29px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    color: #1A1524 !important;
  }
  &.dark .algoshack-hero__wordmark { color: #F5F3FA !important; }
  /* algoQA wordmark: the real logo SVG as a background-image, so it keeps its exact
     two-tone brand colours (algo = #5A5A5A grey, QA = #2F8BCC blue) and matches the
     navbar logo. A mask would flatten it to a single colour. */
  .algoshack-hero__logo {
    display: inline-block !important;
    height: 1.0em !important;
    aspect-ratio: 478 / 143 !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDc4IiBoZWlnaHQ9IjE0MyIgdmlld0JveD0iMCAwIDQ3OCAxNDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik00MDYuNjkzIDUuMjgzMDhDNDA4Ljc4OCA2LjY4MjU5IDQyNC40MTUgMTkuMjc4MSA0MzMuNzY3IDQ4LjEwNzlMNDQ1LjYyNiA4NC45MTQ5QzQ0OC45NzggOTUuNDExMSA0NTEuNDg5IDEwMy44MDggNDU0LjI4IDEwOC4wMDdDNDU0LjI4IDEwOC4wMDcgNDQ5LjY3NCAxMDkuNTQ2IDQ0Ni40NjQgMTA5LjU0NkM0MzMuMzQ4IDEwOS41NDYgNDMwLjEzOCA5OC4yMTAzIDQyNi42NDggODcuNzEzOEw0MjQuMjc2IDgwLjI5NjVIMzg5LjExMUwzODYuNzM4IDg3LjcxMzhDMzgzLjI0OCA5OC4yMTAzIDM4MC4wMzkgMTA5LjU0NiAzNjYuOTIyIDEwOS41NDZDMzYzLjcxMiAxMDkuNTQ2IDM1OS4xMDcgMTA4LjAwNyAzNTkuMTA3IDEwOC4wMDdDMzYxLjg5OCAxMDMuODA4IDM2NC40MTEgOTUuNDExMSAzNjcuNzYgODQuOTE0OUwzNzkuNjIzIDQ4LjEwNzlDMzg4Ljk3MSAxOS4yNzgxIDQwNC42MDIgNi42ODI1OSA0MDYuNjkzIDUuMjgzMDhaTTQwNi42OTMgMjguMDk1QzQwNC40NiAzMS41OTM4IDQwMC45NzQgMzkuOTkwNyAzOTcuNDgzIDUxLjc0NjdMMzkzLjE1OCA2Ni4zMDE2SDQyMC4yMjhMNDE1LjkwNCA1MS43NDY3QzQxMi40MTQgMzkuOTkwNyA0MDYuNjkzIDI4LjA5NSA0MDYuNjkzIDI4LjA5NVoiIGZpbGw9IiMyRjhCQ0MiLz4KPHBhdGggZD0iTTM1MC43OTMgMzkuOTk2MVY3Ny4wODI2QzM1MC43OTMgOTUuNTU2MyAzMzkuMDcyIDEwNy41OTIgMzE2LjMyNiAxMDkuODMxVjExMS45MzFDMzE2LjMyNiAxMjEuNTg3IDMyNi41MTIgMTI2LjA2NSAzMzYuMTQyIDEyNi4wNjVDMzQ2LjA0OSAxMjYuMDY1IDM1OC40NyAxMjUuMjI1IDM2MS42NzkgMTEzLjc1QzM2My4zNTIgMTE3LjI0OSAzNjQuMDUxIDEyMC4zMjggMzY0LjA1MSAxMjMuMTI3QzM2NC4wNTEgMTM0LjQ2MiAzNTIuMDQ5IDE0MC42MiAzMzYuMDAxIDE0MC42MkMzMTguMjc5IDE0MC42MiAzMDAuNDE3IDEzMS42NjMgMzAwLjQxNyAxMTQuMDNWMTA5LjY5MUMyNzcuNjcxIDEwNy40NTIgMjY2Ljc4NiA5NS41NTYzIDI2Ni43ODYgNzcuMDgyNlYzOS45OTYxQzI2Ni43ODYgMTkuMjgzMyAyODAuMDQzIDYuODI3NyAzMDguNzkgNi44Mjc3QzMzNy4zOTYgNi44Mjc3IDM1MC43OTMgMTkuMjgzMyAzNTAuNzkzIDM5Ljk5NjFaTTMzMi4wOTQgNzUuMjYzNFY0MS44MTUzQzMzMi4wOTQgMjguNTIgMzI4LjMyNyAyMC42ODI4IDMwOC42NSAyMC42ODI4QzI4OS4yNTIgMjAuNjgyOCAyODUuNDg2IDI4LjUyIDI4NS40ODYgNDEuODE1M1Y3NS4yNjM0QzI4NS40ODYgODguNTU4NyAyODkuMjUyIDk2LjM5NiAzMDguNjUgOTYuMzk2QzMyOC4zMjcgOTYuMzk2IDMzMi4wOTQgODguNTU4NyAzMzIuMDk0IDc1LjI2MzRaIiBmaWxsPSIjMkY4QkNDIi8+CjxwYXRoIGQ9Ik0yNTEuNDU4IDU5LjQ1MjRWODUuNjIzM0MyNTEuNDU4IDEwMS4wMTggMjQwLjcxMyAxMTAuMjU0IDIxNy44MjcgMTEwLjI1NEMxOTQuOTQyIDExMC4yNTQgMTg0LjE5NiAxMDEuMDE4IDE4NC4xOTYgODUuNjIzM1Y1OS40NTI0QzE4NC4xOTYgNDQuMDU3OCAxOTQuOTQyIDM0LjgyMTIgMjE3LjgyNyAzNC44MjEyQzI0MC43MTMgMzQuODIxMiAyNTEuNDU4IDQ0LjA1NzggMjUxLjQ1OCA1OS40NTI0Wk0yMzMuMzE4IDgzLjUyMzhWNjEuNTUxNUMyMzMuMzE4IDUzLjAxNDUgMjMwLjY2NiA0OC4xMTY2IDIxNy44MjcgNDguMTE2NkMyMDQuOTg4IDQ4LjExNjYgMjAyLjMzNyA1My4wMTQ1IDIwMi4zMzcgNjEuNTUxNVY4My41MjM4QzIwMi4zMzcgOTIuMDYwOCAyMDQuOTg4IDk2Ljk1OTEgMjE3LjgyNyA5Ni45NTkxQzIzMC42NjYgOTYuOTU5MSAyMzMuMzE4IDkyLjA2MDggMjMzLjMxOCA4My41MjM4WiIgZmlsbD0iIzVBNUE1QSIvPgo8cGF0aCBkPSJNMTA4LjMwNCA5NS40MTk3QzEwOC4zMDQgODkuODIxNiAxMTEuMzc0IDg1LjYyMzMgMTE1LjgzOSA4MC4zMDVDMTEyLjA3MiA3Ni42NjYyIDEwOS45NzggNjkuMzg4NyAxMDkuOTc4IDY0LjIxMDhWNTcuNjMzMUMxMDkuOTc4IDQwLjk3OSAxMjMuNzkzIDM0LjgyMTIgMTM3Ljg4OCAzNC44MjEyQzE0NS41NjMgMzQuODIxMiAxNTIuODE5IDM3Ljc1OTkgMTU5LjY1NyAzNy43NTk5QzE2Mi44NjcgMzcuNzU5OSAxNjYuNjM1IDM2LjkyMDIgMTcxLjUxOSAzNC45NjExVjY0LjIxMDhDMTcxLjUxOSA3OS43NDU0IDE2MC43NzQgODguOTgyIDE0MC44MTggODguOTgyQzEzMC4zNTIgODguOTgyIDEyMy4yMzUgODUuMDYzMiAxMjMuMjM1IDg1LjA2MzJDMTIyLjgxNyA4Ni40NjMgMTIyLjM5OCA4OC43MDIxIDEyMi4zOTggOTAuNTIxNEMxMjIuMzk4IDk2LjgxOTEgMTI4LjgxNyA5Ny43OTg4IDEzOC40NDYgOTcuNzk4OEgxNDMuMDUxQzE1Ny44NDMgOTcuNzk4OCAxNzQuMDMxIDk3LjY1ODggMTc0LjAzMSAxMTcuNjcyQzE3NC4wMzEgMTMyLjUwNyAxNjMuNTY0IDE0Mi40NDMgMTQwLjgxOCAxNDIuNDQzQzEyMS44NCAxNDIuNDQzIDExMC4yNTcgMTM2LjQyNiAxMTAuMjU3IDEyNy4xODlDMTEwLjI1NyAxMjMuNTUgMTExLjY1MyAxMTkuNzcxIDExNS4wMDIgMTE1LjQzM0MxMTYuMjU4IDEyNi40ODggMTI3Ljg0MSAxMjkuMTQ3IDEzOS41NjIgMTI5LjE0N0MxNTEuOTgzIDEyOS4xNDcgMTU2LjMwOCAxMjUuMDg5IDE1Ni4zMDggMTE4LjY1MUMxNTYuMzA4IDExMi4wNzQgMTUwLjcyNyAxMTEuMzc0IDE0Mi42MzMgMTExLjM3NEgxMzUuNzk0QzEyMS4xNDIgMTExLjM3NCAxMDguMzA0IDEwOS41NTUgMTA4LjMwNCA5NS40MTk3Wk0xMjcuOTggNjIuMTExN0MxMjcuOTggNzAuNzg4NSAxMzAuMzUyIDc1LjY4NjYgMTQwLjgxOCA3NS42ODY2QzE1MS4xNDUgNzUuNjg2NiAxNTMuNTE4IDcwLjc4ODUgMTUzLjUxOCA2Mi4xMTE3VjUwLjIxNTdDMTUzLjUxOCA1MC4yMTU3IDE0Ny4yMzggNDcuODM2NyAxNDEuMDk3IDQ3LjgzNjdDMTMxLjYwOCA0Ny44MzY3IDEyNy45OCA1MS4xOTUyIDEyNy45OCA1OS43MzIzVjYyLjExMTdaIiBmaWxsPSIjNUE1QTVBIi8+CjxwYXRoIGQ9Ik03Ni40Mjg1IDg3LjU3NDhWMS42NDUzOUM3Ny41NDQ5IDEuNjQ1MzkgOTQuNTY5NyAxLjc4NTM0IDk0LjU2OTcgMTAuNzQyMlY4My4wOTY2Qzk0LjU2OTcgOTAuNjUzOSA5NC43MDkyIDEwMy45NDkgMTA0LjQ3NyAxMDMuOTQ5QzEwMC43MSAxMDguOTg3IDk2LjM4MzcgMTA5LjU0NyA5Mi44OTUyIDEwOS41NDdDODEuNTkxNiAxMDkuNTQ3IDc2LjQyODUgOTkuMzMwOSA3Ni40Mjg1IDg3LjU3NDhaIiBmaWxsPSIjNUE1QTVBIi8+CjxwYXRoIGQ9Ik00My41MzkxIDk1VjcyLjE4OEM0MC4zMjkzIDc5LjYwNTQgMTguMDAxNyA3NS41NDY2IDE4LjAwMTcgODguMDAyNEMxOC4wMDE3IDk0LjMwMDIgMjIuNjA2NyA5Ny41MTg5IDMwLjU2MSA5Ny41MTg5QzM3Ljk1NzEgOTcuNTE4OSA0My41MzkxIDk1IDQzLjUzOTEgOTVaTTAgODguMjgyMkMwIDYyLjExMTMgMzcuMzk4OSA2OC45Njg5IDQzLjEyMDQgNTcuOTEzQzQzLjEyMDQgNTIuODc0NiA0MC4zMjkzIDQ4LjM5NjQgMjkuNTg0MiA0OC4zOTY0QzE3Ljg2MjEgNDguMzk2NCA3LjI1NjQ5IDUyLjQ1NDcgNy4yNTY0OSA2NC4yMTA4QzMuMjA5NjEgNTguNzUyNiAxLjk1MzY3IDU0LjQxNDMgMS45NTM2NyA1MC42MzU2QzEuOTUzNjcgMzguNDU5NiAxOC4yODA4IDM0LjgyMTIgMjkuNzIzNyAzNC44MjEyQzUwLjIzNzEgMzQuODIxMiA2MS4xMjIgNDMuNDk4IDYxLjEyMiA1OC43NTI2VjEwOS45NzVDNTcuNDkzNiAxMDguMTU1IDUzLjg2NTYgMTA3LjczNSA1MC4zNzY3IDEwNy43MzVDNDMuMzk5NSAxMDcuNzM1IDM2LjQyMjEgMTEwLjI1NCAyOC40Njc3IDExMC4yNTRDMTQuMDk0NCAxMTAuMjU0IDAgMTA0LjkzNiAwIDg4LjI4MjJaIiBmaWxsPSIjNUE1QTVBIi8+CjxwYXRoIGQ9Ik00NTcuNjE3IDBDNDY4LjgyOCAwIDQ3Ny45MTYgOS4xMTM1NiA0NzcuOTE2IDIwLjM1NjRDNDc3LjkxNiAzMS41OTkyIDQ2OC44MjggNDAuNzEzIDQ1Ny42MTcgNDAuNzEzQzQ0Ni40MDcgNDAuNzEzIDQzNy4zMjEgMzEuNTk5MiA0MzcuMzIxIDIwLjM1NjRDNDM3LjMyMSA5LjExMzU2IDQ0Ni40MDcgMCA0NTcuNjE3IDBaTTQ1Ny42MTcgNC4wNzEzQzQ1My4zMTMgNC4wNzEzIDQ0OS4xOCA1Ljc4NzAyIDQ0Ni4xMzcgOC44NDExQzQ0My4wOTIgMTEuODk1MSA0NDEuMzc5IDE2LjAzNzMgNDQxLjM3OSAyMC4zNTY0QzQ0MS4zNzkgMjQuNjc1NSA0NDMuMDkyIDI4LjgxNzcgNDQ2LjEzNyAzMS44NzE4QzQ0OS4xOCAzNC45MjU4IDQ1My4zMTMgMzYuNjQxNyA0NTcuNjE3IDM2LjY0MTdDNDYxLjkyNiAzNi42NDE3IDQ2Ni4wNTUgMzQuOTI1OCA0NjkuMTAyIDMxLjg3MThDNDcyLjE0NiAyOC44MTc3IDQ3My44NTYgMjQuNjc1NSA0NzMuODU2IDIwLjM1NjRDNDczLjg1NiAxNi4wMzczIDQ3Mi4xNDYgMTEuODk1MSA0NjkuMTAyIDguODQxMUM0NjYuMDU1IDUuNzg3MDIgNDYxLjkyNiA0LjA3MTMgNDU3LjYxNyA0LjA3MTNaTTQ1OC42MzQgMTAuMTc4MkM0NjAuMTgyIDEwLjE3NzkgNDYxLjY5MiAxMC42ODYgNDYyLjkyNiAxMS42MjVDNDY0LjE2MiAxMi41NjQgNDY1LjA1NyAxMy44ODI0IDQ2NS40NzYgMTUuMzc5MkM0NjUuODk2IDE2Ljg3NTkgNDY1LjgxNSAxOC40Njg5IDQ2NS4yNDMgMTkuOTE1MUM0NjQuNjc1IDIxLjM2MTMgNDYzLjY1MiAyMi41ODE1IDQ2Mi4zMjggMjMuMzg5Nkw0NjcuNSAzMC41MzQ3SDQ2Mi40ODNMNDU4LjA1NyAyNC40Mjc3SDQ1My41NlYzMC41MzQ3SDQ0OS40OThWMTAuMTc4Mkg0NTguNjM0Wk00NTguNjM0IDE0LjI0OTRINDUzLjU2VjIwLjM1NjRINDU4LjYzNEM0NTkuMzkyIDIwLjM1NjUgNDYwLjEyMSAyMC4wNzQgNDYwLjY3OSAxOS41NjRDNDYxLjI0IDE5LjA1NDEgNDYxLjU5MSAxOC4zNTM0IDQ2MS42NjUgMTcuNTk4Mkw0NjEuNjc5IDE3LjMwMjlDNDYxLjY3OSAxNi40OTMyIDQ2MS4zNTggMTUuNzE2NSA0NjAuNzg3IDE1LjE0MzlDNDYwLjIxNiAxNC41NzEyIDQ1OS40NDIgMTQuMjQ5NCA0NTguNjM0IDE0LjI0OTRaIiBmaWxsPSIjNUE1QTVBIi8+Cjwvc3ZnPgo=") no-repeat left center / contain !important;
  }
  .algoshack-hero__docs { font-weight: 500 !important; }

  .algoshack-hero__tagline {
    margin: 8px 0 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #4A4658 !important;
  }
  &.dark .algoshack-hero__tagline { color: #B9B4C7 !important; }

  .algoshack-hero__actions { display: flex !important; gap: 12px !important; flex: 0 0 auto !important; margin-left: auto !important; }

  .algoshack-btn {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    padding: 9px 20px !important;
    border-radius: 999px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
  }
  /* Arrow fades/slides in on hover — space is always reserved so nothing reflows */

  .algoshack-btn--primary { background: #2F8BCC !important; color: #fff !important; border: 1px solid #2F8BCC !important; }
  .algoshack-btn--primary:hover { background: #237BB9 !important; border-color: #237BB9 !important; }
  .algoshack-btn--ghost { background: transparent !important; color: #2F8BCC !important; border: 1.5px solid #2F8BCC !important; }
  .algoshack-btn--ghost:hover { background: rgba(47, 139, 204, 0.04) !important; border-color: #2F8BCC !important; color: #2F8BCC !important; }
  &.dark .algoshack-btn--primary { background: #5AA9E0 !important; color: #1A1524 !important; border-color: #5AA9E0 !important; }
  &.dark .algoshack-btn--ghost { color: #5AA9E0 !important; border-color: #5AA9E0 !important; }
  &.dark .algoshack-btn--ghost:hover { background: rgba(90, 169, 224, 0.12) !important; }

  /* ─── Section labels (### headings) — default heading color, not brand ─── */
  .dai-article h3 {
    color: #1A1524 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 0.06em !important;
    margin: 44px 0 16px !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  &.dark .dai-article h3 { color: #F5F3FA !important; }

  /* ─── Grid spacing under each section ─── */
  h3 + [data-component="Columns"] {
    margin: 0 0 8px !important;
    gap: 16px !important;
  }

  /* ─── Cards ─── */
  [data-component="Card"] {
    border-radius: 14px !important;
    border: 1px solid rgba(26, 21, 36, 0.10) !important;
    background: #ffffff !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
  }
  &.dark [data-component="Card"] {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
  }
  a:hover [data-component="Card"] {
    border-color: rgba(47, 139, 204, 0.35) !important;
    box-shadow: 0 1px 2px rgba(26, 21, 36, 0.04), 0 12px 26px -16px rgba(47, 139, 204, 0.30) !important;
  }
  &.dark a:hover [data-component="Card"] {
    border-color: rgba(90, 169, 224, 0.45) !important;
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.60) !important;
  }

  /* ─── Card icon ─── */
  [data-component="Card"] svg { color: #2F8BCC !important; }
  &.dark [data-component="Card"] svg { color: #5AA9E0 !important; }

  /* ─── Card title ─── */
  [data-component="Card"] .dai-card-title {
    color: #1A1524 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
  &.dark [data-component="Card"] .dai-card-title { color: #F5F3FA !important; }

  /* ─── Card description ─── */
  [data-component="Card"] .dai-card-description {
    color: #4A4658 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    margin-top: 4px !important;
  }
  &.dark [data-component="Card"] .dai-card-description { color: #B9B4C7 !important; }

  /* ─── Tablet ─── */
  @media (max-width: 1000px) {
    .dai-article,
    .dai-content-column {
      padding-left: 20px !important;
      padding-right: 20px !important;
    }
  }

  /* ─── Stack the hero before the one-row layout collides ─── */
  /* Buttons drop to a row below the text at their natural pill size, left-aligned */
  @media (max-width: 1024px) {
    .algoshack-hero { flex-direction: column !important; align-items: flex-start !important; flex-wrap: wrap !important; }
    /* The desktop rule gives __brand a 340px flex-basis to force the buttons to wrap.
       In column direction the main axis is vertical, so that basis would become a 340px
       MIN-HEIGHT and leave a large gap above the buttons. Reset it to natural height. */
    .algoshack-hero__brand { flex: 0 0 auto !important; width: 100% !important; }
    .algoshack-hero__actions { margin-left: 0 !important; width: auto !important; justify-content: flex-start !important; }
    .algoshack-hero__tagline { white-space: normal !important; }
  }

  /* ─── Mobile ─── */
  @media (max-width: 540px) {
    .dai-article,
    .dai-content-column {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
    .algoshack-hero__wordmark { font-size: 26px !important; }
    .algoshack-hero__actions { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
    .dai-article h3 { margin-top: 32px !important; }
  }
}

/*
  algoQA — Roadmap page: match the Home page's left/right spacing.

  Scoped to the Roadmap page only via :root:has(#delivery-board). The "Delivery
  board" heading gives an id of #delivery-board that exists only on this page, so
  these rules never touch any other page. Values are copied from the Home block
  above (max-width 1280px, centered, 24px side padding) so the left gutter matches.
*/
:root:has(#delivery-board) {
  .dai-article,
  .dai-content-column {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/*
  Breadcrumbs: force them visible on EVERY page except Home.

  The Home block above intentionally hides breadcrumbs (custom hero replaces the
  platform header). This rule guarantees they stay visible everywhere else, even
  if a stray unscoped ".dai-breadcrumbs { display: none }" is registered directly
  in the editor's Custom CSS. Higher specificity + !important beats a bare
  ".dai-breadcrumbs" hide. The :not() guards exclude Home so its hero is untouched.
*/
:root:not(:has(#algoshack-home)):not(:has(.algoshack-hero)) .dai-breadcrumbs {
  display: flex !important;
  visibility: visible !important;
}

/*
  Content images: square corners, on every page.

  The platform rounds screenshots by putting Tailwind's "rounded-xl" directly on
  the <img> the Image component emits, which resolves to calc(var(--radius) + 4px)
  = 14px here. There is no dai-* hook for images, so there is nothing cleaner to
  target: we anchor on the zoom wrapper the Image component always renders
  (data-rmiz), plus the modal it portals the zoomed copy into, so the corners stay
  square in both the inline and the zoomed view.

  Scoped deliberately: logos, avatars and Card images never sit inside a
  data-rmiz wrapper, so their own rounding is left alone.
*/
img {
  border-radius: 0 !important;
}