/* ============================================================
   Digital Strategy Force — Responsive Custom Overrides
   Injected into all pages via inject_responsive.py
   Breakpoints: 1280px (laptop) | 1024px (tablet) | 768px (mobile) | 480px (sm mobile)
   ============================================================ */

/* ── 0. Global foundations ─────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

img, video, svg, iframe {
  max-width: 100%;
  height: auto;
}

/* Prevent horizontal overflow on any element */
body {
  overflow-x: hidden;
}

/* HUD status line must sit below the fixed nav (z-index: 10000) */
.hud-status-line {
  z-index: 1 !important;
}

/* ── Home page H1 — one line desktop, one word per line mobile ── */
.home h1.dsf-block-heading {
  font-size: clamp(18px, 6vw, 100px) !important;
  letter-spacing: clamp(0.5px, 0.3vw, 4.8px) !important;
}
@media (max-width: 599px) {
  .home .dsf-block-cover.dsf-full {
    padding-top: 15px !important;
  }
  .home .dsf-block-cover__inner-container > .dsf-block-spacer:first-child {
    height: 0px !important;
  }
  .home h1.dsf-block-heading {
    word-spacing: 100vw !important;
    white-space: normal !important;
    font-size: clamp(30px, 9vw, 64px) !important;
    margin-top: 0px !important;
    margin-bottom: -15px !important;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .home .dsf-block-cover.dsf-full {
    padding-top: 15px !important;
  }
  .home .dsf-block-cover__inner-container > .dsf-block-spacer:first-child {
    height: 0px !important;
  }
  .home h1.dsf-block-heading {
    word-spacing: 100vw !important;
    white-space: normal !important;
    font-size: clamp(36px, 8vw, 64px) !important;
    margin-top: 0px !important;
    margin-bottom: -15px !important;
  }
}
@media (min-width: 900px) {
  .home h1.dsf-block-heading {
    white-space: nowrap !important;
  }
}

/* ── 1. Container width ────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --gb-container-width: 100% !important;
  }
  .gbp-section__inner,
  .dsf-container {
    max-width: 100% !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

@media (max-width: 768px) {
  .gbp-section__inner,
  .dsf-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  /* Remove side padding from outermost site container so full-width blocks span viewport */
  .site.dsf-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .dsf-article-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Re-add padding to text-level content that isn't full-bleed */
  .dsf-content-head,
  .dsf-content-body > *:not(.dsf-full):not(.dsf-block-cover) {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  /* Full-width blocks: outer container edge-to-edge, inner content padded */
  .dsf-content-body > .dsf-full,
  .dsf-content-body > .dsf-block-cover {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .dsf-block-cover__inner-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  /* Post navigation links */
  .dsf-post-nav,
  .nav-links {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  /* Footer widgets */
  .dsf-footer-grid .dsf-footer-inner {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ── 2. Typography — fluid heading scale ───────────────────── */
@media (max-width: 1280px) {
  h1 { font-size: 38px !important; }
  h2 { font-size: 32px !important; }
  h3 { font-size: 27px !important; }
}

@media (max-width: 1024px) {
  h1 { font-size: 34px !important; }
  h2 { font-size: 28px !important; }
  h3 { font-size: 24px !important; }
  h4 { font-size: 21px !important; }
}

@media (max-width: 768px) {
  h1 { font-size: 28px !important; line-height: 1.2 !important; }
  h2 { font-size: 22px !important; line-height: 1.25 !important; }
  h3 { font-size: 19px !important; line-height: 1.3 !important; }
  h4 { font-size: 18px !important; }
  h5 { font-size: 17px !important; }
  body { font-size: 15px !important; }
  p { font-size: 15px; line-height: 1.65; }
  .gbp-section__text { font-size: 1rem !important; }
}

@media (max-width: 480px) {
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
}

/* ── 2b. Font-size presets — enforce hierarchy ──── */
@media (max-width: 1024px) {
  .dsf-text-lg { font-size: 26px !important; }
  .dsf-text-xl { font-size: 30px !important; }
}

@media (max-width: 768px) {
  .dsf-text-lg { font-size: 20px !important; }
  .dsf-text-xl { font-size: 24px !important; }
  .dsf-text-md { font-size: 16px !important; }
  p { font-size: 15px !important; line-height: 1.65 !important; }
}

@media (max-width: 480px) {
  .dsf-text-lg { font-size: 18px !important; }
  .dsf-text-xl { font-size: 20px !important; }
  .dsf-text-md { font-size: 15px !important; }
}

/* ── 3. Hero section fixed padding fix ─────────────────────── */
/* .gb-element-0c247165 is the main content wrapper with 120px/100px padding */
@media (max-width: 1280px) {
  .gb-element-0c247165 {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}

@media (max-width: 1024px) {
  .gb-element-0c247165 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 768px) {
  .gb-element-0c247165 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 480px) {
  .gb-element-0c247165 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ── 4. Section padding ────────────────────────────────────── */
@media (max-width: 768px) {
  .gbp-section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}

@media (max-width: 480px) {
  .gbp-section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

/* ── 5. Navigation ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Nav bar: title left, hamburger+Menu right, single line */
  .dsf-mobile-header-navigation .dsf-nav-inner,
  .dsf-nav-bar .dsf-nav-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
  }

  .dsf-menu-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 44px !important;
    min-height: 44px !important;
    margin-left: auto !important;
    white-space: nowrap !important;
    order: 2 !important;
    flex-shrink: 0 !important;
    padding-right: 0 !important;
  }

  .dsf-branding {
    order: 1 !important;
    flex: 1 1 auto !important;
  }

  /* Dropdown goes to new row below title + hamburger */
  .dsf-mobile-header-navigation .dsf-main-nav,
  .dsf-nav-bar .dsf-main-nav {
    order: 3 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    background-color: #000000 !important;
  }

  /* Submenu dropdowns also solid black */
  .dsf-mobile-header-navigation .dsf-main-nav ul,
  .dsf-mobile-header-navigation .dsf-main-nav ul ul,
  .dsf-nav-bar .dsf-main-nav ul,
  .dsf-nav-bar .dsf-main-nav ul ul {
    background-color: #000000 !important;
  }

  /* Reduce oversized 60px line-height on mobile menu items */
  .dsf-nav-bar .dsf-main-nav ul li a,
  .dsf-nav-bar .dsf-main-nav ul li,
  .dsf-mobile-header-navigation .dsf-main-nav ul li a {
    line-height: 44px !important;
  }

  /* Ensure mobile menu doesn't overflow viewport */
  .dsf-nav-bar .dsf-main-nav {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Mobile menu dropdown items */
  .dsf-nav-bar .dsf-main-nav ul ul {
    width: 100% !important;
    min-width: 0 !important;
    position: static !important;
    box-shadow: none !important;
  }
}

/* ── 6. Header & Site Title ────────────────────────────────── */
@media (max-width: 1024px) {
  .dsf-header-inner {
    padding: 16px 24px !important;
  }
}

@media (max-width: 768px) {
  .dsf-header-inner {
    padding: 12px 16px !important;
  }
  /* Site logo / title — shrink and prevent wrapping */
  .site-branding,
  .dsf-branding {
    max-width: 55vw;
  }
  .site-title a,
  .dsf-main-title a,
  .dsf-branding .dsf-main-title a {
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }
  .dsf-main-title,
  .site-title {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
}

@media (max-width: 480px) {
  .site-title a,
  .dsf-main-title a,
  .dsf-branding .dsf-main-title a {
    font-size: 12px !important;
  }
  .dsf-main-title,
  .site-title {
    font-size: 12px !important;
  }
}

/* ── 7. Footer ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dsf-credits-inner {
    padding: 16px 20px !important;
    text-align: center !important;
  }
  .footer-bar .dsf-credits-inner {
    flex-direction: column !important;
    gap: 8px !important;
  }
  /* Footer widgets stack on mobile */
  .dsf-footer-inner {
    flex-direction: column !important;
  }
  .dsf-footer-inner .widget {
    width: 100% !important;
    margin-bottom: 24px !important;
  }
}

/* ── 8. Site content area ──────────────────────────────────── */
@media (max-width: 768px) {
  .dsf-layout {
    padding: 0 !important;
  }
  .dsf-article-inner {
    padding: 10px 8px !important;
  }
  .dsf-content-body {
    padding: 0 !important;
  }
  .dsf-separated .inside-right-dsf-aside,
  .dsf-separated .inside-left-dsf-aside {
    padding: 10px 8px !important;
  }
}

/* ── 9. Back-to-top button ─────────────────────────────────── */
/* Fix vertical centering: SVG viewBox is taller than wide (330x512),
   so constrain it and center within the button */
.dsf-back-to-top {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: bottom 0.25s ease, background-color 0.3s ease, opacity 0.3s ease !important;
}
.dsf-back-to-top:hover,
a.dsf-back-to-top:hover,
a.dsf-back-to-top:focus {
  background-color: rgba(0, 236, 255, 0.35) !important;
  color: inherit !important;
}
.dsf-chat-widget {
  transition: bottom 0.25s ease !important;
}
.dsf-back-to-top .dsf-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.dsf-back-to-top svg {
  width: 18px !important;
  height: 18px !important;
}

@media (max-width: 768px) {
  .dsf-back-to-top {
    width: 48px !important;
    height: 48px !important;
    right: 12px !important;
    bottom: 90px !important; /* lift above DsfChat widget */
  }
}

/* ── 10. DsfChat floating chat widget ────────────────────────── */
@media (max-width: 1024px) {
  /* Slightly reduce on tablet */
  #dsf-chat-widget-0 .dsf-chat-channel-list .dsf-chat-channel,
  #dsf-chat-widget-0 .dsf-chat-trigger .dsf-chat-channel {
    width: 60px !important;
    height: 60px !important;
  }
  #dsf-chat-widget-0 .dsf-chat-svg,
  #dsf-chat-widget-0 .dsf-chat-icon {
    width: 60px !important;
    height: 60px !important;
  }
  #dsf-chat-widget-0 .dsf-chat-channel-list {
    width: 68px !important;
    height: 248px !important;
  }
  /* Tablet translateY offsets for 60px buttons (4 channels) */
  #dsf-chat-widget-0 .dsf-chat-open .dsf-chat-channel-list .dsf-chat-channel:nth-child(1) {
    transform: translateY(-204px) !important;
  }
  #dsf-chat-widget-0 .dsf-chat-open .dsf-chat-channel-list .dsf-chat-channel:nth-child(2) {
    transform: translateY(-136px) !important;
  }
  #dsf-chat-widget-0 .dsf-chat-open .dsf-chat-channel-list .dsf-chat-channel:nth-child(3) {
    transform: translateY(-68px) !important;
  }
  #dsf-chat-widget-0 .dsf-chat-open .dsf-chat-channel-list .dsf-chat-channel:nth-child(4) {
    transform: translateY(0px) !important;
  }
}

@media (max-width: 768px) {
  /* DsfChat sizing handled in section 25 — keep only forms/tooltip fixes here */
  /* Fix NaN and forms overflow */
  .dsf-chat-outer-forms {
    max-height: calc(100vh - 180px) !important;
    max-width: calc(100vw - 24px) !important;
  }
  [id*="dsf-chat-form"] .dsf-chat-wa-body,
  .dsf-chat-form-inputs {
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
  }
  .dsf-chat-tooltip {
    font-size: 11px !important;
    white-space: nowrap !important;
    max-width: 140px !important;
  }
}

/* ── 11. Block grid — stack on mobile ─────────────── */
@media (max-width: 768px) {
  /* Force grid columns to stack */
  .gb-grid-wrapper {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  .gb-grid-wrapper > .gb-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
  /* Allow inline-set percentage widths to be overridden */
  [style*="width: 24"],
  [style*="width: 23"],
  [style*="width: 25"],
  [style*="width: 33"],
  [style*="width: 50"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 1024px) {
  /* On tablet: 2-column max instead of 4 */
  .gb-grid-wrapper > .gb-container {
    min-width: 45% !important;
    flex: 1 1 45% !important;
  }
}

/* ── 12. Tables — horizontal scroll ───────────────────────── */
table {
  display: table;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border: 1px solid rgba(0,236,255,0.2);
  border-radius: 0;
  overflow: visible;
}

/* ── 13. Form inputs & textareas ───────────────────────────── */
@media (max-width: 768px) {
  input,
  textarea,
  select,
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="url"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* prevent iOS zoom on focus */
  }
  textarea {
    min-height: 120px;
  }
  /* Tool pages — prevent tool containers from overflowing */
  .gb-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* ── 14. Images ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dsf-featured-img,
  .attachment-post-thumbnail,
  figure img,
  .gb-media img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ── 15. Post / article content ────────────────────────────── */
@media (max-width: 768px) {
  .dsf-content-body {
    padding: 0 !important;
  }
  .dsf-content-body pre,
  .dsf-content-body code {
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13px;
  }
  /* Block alignment on mobile */
  .alignleft,
  .dsf-right {
    float: none !important;
    display: block !important;
    margin: 0 auto 20px auto !important;
    max-width: 100% !important;
  }
}

/* ── 16. Sidebar — full width on mobile ────────────────────── */
@media (max-width: 768px) {
  .dsf-widget-zone,
  .dsf-aside-primary,
  #dsf-aside {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-top: 32px !important;
  }
}

/* ── 17. Prevent any element from exceeding viewport ────────── */
@media (max-width: 768px) {
  .site,
  .dsf-layout,
  .dsf-main-col,
  main#dsf-content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* ── 18. Disrupt buttons — responsive sizing & centering ───── */
@media (max-width: 1024px) {
  .disrupt-btn {
    padding: 30px 50px !important;
    font-size: 1.4rem !important;
    gap: 18px !important;
    letter-spacing: 4px !important;
  }
}

@media (max-width: 768px) {
  .disrupt-btn {
    padding: 20px 30px !important;
    font-size: 1rem !important;
    gap: 12px !important;
    letter-spacing: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .disrupt-btn .signal-icon {
    width: 28px !important;
    height: 28px !important;
  }
}

@media (max-width: 480px) {
  .disrupt-btn {
    padding: 16px 20px !important;
    font-size: 0.9rem !important;
    letter-spacing: 2px !important;
    gap: 10px !important;
  }
  .disrupt-btn .signal-icon {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ── 19. Animated sections — scale inline font-sizes ─────── */
@media (max-width: 1280px) {
  [style*="font-size:100px"],
  [style*="font-size: 100px"] {
    font-size: clamp(36px, 3.5vw, 50px) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  [style*="font-size:110px"],
  [style*="font-size: 110px"] {
    font-size: clamp(38px, 4vw, 55px) !important;
  }
  [style*="font-size:70px"],
  [style*="font-size: 70px"] {
    font-size: clamp(28px, 3vw, 40px) !important;
  }
  [style*="font-size:48px"],
  [style*="font-size: 48px"] {
    font-size: clamp(22px, 2.2vw, 30px) !important;
  }
  [style*="font-size:45px"],
  [style*="font-size: 45px"] {
    font-size: clamp(20px, 2vw, 28px) !important;
  }
  /* Reduce letter-spacing on large headings to prevent overflow */
  [style*="letter-spacing: 7px"],
  [style*="letter-spacing:7px"] {
    letter-spacing: 2px !important;
  }
  [style*="letter-spacing: 10px"],
  [style*="letter-spacing:10px"] {
    letter-spacing: 3px !important;
  }
  [style*="letter-spacing: -4px"],
  [style*="letter-spacing:-4px"] {
    letter-spacing: -2px !important;
  }
  /* Navicomputer status text at laptop */
  #sw-status {
    font-size: 18px !important;
    letter-spacing: 5px !important;
    white-space: normal !important;
  }
  #sw-hex {
    font-size: 11px !important;
    letter-spacing: 2px !important;
  }
  #sw-percent {
    font-size: 20px !important;
  }
  /* Ensure all text wraps within containers */
  h1, h2, h3 {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

@media (max-width: 1024px) {
  [style*="font-size:100px"],
  [style*="font-size: 100px"] {
    font-size: 60px !important;
  }
  [style*="font-size:110px"],
  [style*="font-size: 110px"] {
    font-size: 65px !important;
  }
  [style*="font-size:70px"],
  [style*="font-size: 70px"] {
    font-size: 44px !important;
  }
  [style*="font-size:48px"],
  [style*="font-size: 48px"] {
    font-size: 34px !important;
  }
  [style*="font-size:45px"],
  [style*="font-size: 45px"] {
    font-size: 30px !important;
  }
  [style*="letter-spacing: 10px"],
  [style*="letter-spacing:10px"] {
    letter-spacing: 6px !important;
  }
}

@media (max-width: 768px) {
  /* Loading screen / Navicomputer large text */
  [style*="font-size:100px"],
  [style*="font-size: 100px"] {
    font-size: 48px !important;
    line-height: 1.1 !important;
  }
  [style*="font-size:110px"],
  [style*="font-size: 110px"] {
    font-size: 50px !important;
    line-height: 1 !important;
  }
  [style*="font-size:70px"],
  [style*="font-size: 70px"] {
    font-size: 36px !important;
    line-height: 1.2 !important;
  }
  [style*="font-size:48px"],
  [style*="font-size: 48px"] {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  [style*="font-size:45px"],
  [style*="font-size: 45px"] {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  /* Scale down large letter-spacing */
  [style*="letter-spacing: 10px"],
  [style*="letter-spacing:10px"] {
    letter-spacing: 5px !important;
  }
  [style*="letter-spacing: -4px"],
  [style*="letter-spacing:-4px"] {
    letter-spacing: -2px !important;
  }
}

@media (max-width: 480px) {
  [style*="font-size:100px"],
  [style*="font-size: 100px"] {
    font-size: 36px !important;
  }
  [style*="font-size:110px"],
  [style*="font-size: 110px"] {
    font-size: 38px !important;
  }
  [style*="font-size:70px"],
  [style*="font-size: 70px"] {
    font-size: 28px !important;
  }
  [style*="font-size:48px"],
  [style*="font-size: 48px"] {
    font-size: 22px !important;
  }
  [style*="font-size:45px"],
  [style*="font-size: 45px"] {
    font-size: 20px !important;
  }
  [style*="letter-spacing: 10px"],
  [style*="letter-spacing:10px"] {
    letter-spacing: 3px !important;
  }
}

/* ── 19b. "May the Force" Orbitron text — stay readable on small screens ── */
[style*="font-family:Orbitron"][style*="font-size:70px"] {
  font-size: clamp(24px, 5vw, 70px) !important;
  letter-spacing: clamp(1px, 0.2vw, 0.05em) !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* ── 20. Back-to-top — adjust for left-side DsfChat ────────── */
@media (max-width: 768px) {
  .dsf-back-to-top {
    right: 12px !important;
    bottom: 20px !important;
  }
}

/* ── 21. Heading & text overflow prevention ──────────────── */
@media (max-width: 768px) {
  h1, h2, h3, h4, h5, h6,
  .gb-headline,
  [class*="gb-headline"] {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
  }
}

/* ── 22. Core units / reactor grid — scale on mobile ─────── */
@media (max-width: 1024px) {
  .reactor-grid {
    max-width: 100% !important;
    overflow: hidden !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }
  .core-unit {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .unit-header {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .unit-footer {
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  .volt-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  .unit-name {
    font-size: 18px !important;
    letter-spacing: 0px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 70% !important;
  }
  .unit-id {
    font-size: 16px !important;
  }
  .volt-label {
    font-size: 16px !important;
    letter-spacing: 0px !important;
  }
  .percent-display {
    font-size: 36px !important;
  }
  .log-stream {
    font-size: 15px !important;
    letter-spacing: 0px !important;
  }
  .reactor-log {
    height: auto !important;
    min-height: 55px !important;
    padding: 15px !important;
    flex-wrap: wrap !important;
  }
  .dashboard-header-box {
    height: auto !important;
    min-height: 55px !important;
    padding: 15px !important;
    flex-wrap: wrap !important;
  }
  .dashboard-title {
    font-size: 15px !important;
    white-space: normal !important;
  }
}

@media (max-width: 768px) {
  .core-unit {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 10px !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .reactor-grid {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .core-unit .core-label,
  .core-unit .core-title {
    font-size: 11px !important;
    letter-spacing: 0px !important;
  }
  .core-unit .core-status {
    font-size: 10px !important;
    letter-spacing: 0px !important;
  }
  .core-unit .core-bar {
    max-width: 100% !important;
  }
  /* System status header in reactor section */
  .system-label {
    font-size: 14px !important;
    letter-spacing: 0px !important;
    white-space: normal !important;
  }
}

@media (max-width: 480px) {
  .core-unit {
    padding-left: 10px !important;
    font-size: 11px !important;
    letter-spacing: 0px !important;
  }
}

/* ── 23. Navicomputer / boot animation — scale on mobile ──── */
@media (max-width: 768px) {
  #sw-status {
    font-size: 16px !important;
    letter-spacing: 4px !important;
    white-space: nowrap !important;
  }
  #sw-hex {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    word-break: break-all !important;
    white-space: normal !important;
  }
  #sw-percent {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  #sw-status {
    font-size: 13px !important;
    letter-spacing: 3px !important;
  }
  #sw-hex {
    font-size: 9px !important;
    letter-spacing: 1px !important;
  }
  #sw-percent {
    font-size: 14px !important;
  }
}

/* ── 24. Core-unit names & labels — fit on mobile ──────────── */
@media (max-width: 768px) {
  .unit-name {
    font-size: 16px !important;
    letter-spacing: 0px !important;
    word-break: break-all !important;
  }
  .unit-id {
    font-size: 15px !important;
    letter-spacing: 0px !important;
  }
  .volt-label {
    font-size: 15px !important;
    letter-spacing: 0px !important;
    word-break: break-all !important;
  }
  .percent-display {
    font-size: 36px !important;
  }
  .unit-header {
    flex-wrap: wrap !important;
    gap: 2px !important;
  }
  .unit-footer {
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  .volt-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  .power-track {
    height: 35px !important;
  }
  .log-stream {
    font-size: 12px !important;
    letter-spacing: 0px !important;
  }
  .reactor-log {
    height: auto !important;
    min-height: 50px !important;
    padding: 12px !important;
    flex-wrap: wrap !important;
  }
  .dashboard-header-box {
    padding: 10px !important;
    height: auto !important;
    min-height: 50px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .dashboard-title {
    font-size: 11px !important;
    letter-spacing: 0px !important;
    white-space: normal !important;
    word-break: break-all !important;
    flex-wrap: wrap !important;
  }
  .status-indicator-isolated {
    font-size: 11px !important;
    letter-spacing: 0px !important;
  }
  .metadata-tag {
    font-size: 9px !important;
    letter-spacing: 0px !important;
    min-width: auto !important;
    text-align: left !important;
  }
  .rec-dot {
    width: 7px !important;
    height: 7px !important;
    margin-right: 6px !important;
  }
}

@media (max-width: 480px) {
  .unit-name {
    font-size: 15px !important;
  }
  .unit-id {
    font-size: 14px !important;
  }
  .volt-label {
    font-size: 14px !important;
  }
  .percent-display {
    font-size: 32px !important;
  }
}

/* ── 25. DsfChat widget — slightly larger on mobile, more spacing ── */
@media (max-width: 768px) {
  /* Channel icons — 48px with 10px gap */
  #dsf-chat-widget-0 .dsf-chat-channel-list .dsf-chat-channel,
  #dsf-chat-widget-0 .dsf-chat-trigger .dsf-chat-channel {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 10px !important;
  }
  #dsf-chat-widget-0 .dsf-chat-svg,
  #dsf-chat-widget-0 .dsf-chat-icon,
  #dsf-chat-widget-0 .dsf-chat-tooltip .dsf-chat-svg,
  #dsf-chat-widget-0 .dsf-chat-tooltip .dsf-chat-icon,
  #dsf-chat-widget-0 .dsf-chat-link .dsf-chat-svg,
  #dsf-chat-widget-0 .dsf-chat-link .dsf-chat-icon,
  #dsf-chat-widget-0 .dsf-chat-trigger .dsf-chat-svg,
  #dsf-chat-widget-0 .dsf-chat-trigger .dsf-chat-icon,
  #dsf-chat-widget-0 .dsf-chat-cta-main .dsf-chat-svg,
  #dsf-chat-widget-0 .dsf-chat-cta-main .dsf-chat-icon {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #dsf-chat-widget-0 .dsf-chat-svg svg,
  #dsf-chat-widget-0 .dsf-chat-svg img {
    width: 34px !important;
    height: 34px !important;
  }
  #dsf-chat-widget-0 .dsf-chat-channel-list {
    width: 56px !important;
    height: 242px !important; /* 4 × (48 + 10) + 2 padding */
  }
  /* Position: bottom-left */
  #dsf-chat-widget-0 .dsf-chat-widget {
    bottom: 10px !important;
    left: 8px !important;
    right: auto !important;
    z-index: 9999 !important;
  }
  /* TranslateY offsets for 48px channels + 10px gap */
  #dsf-chat-widget-0 .dsf-chat-open .dsf-chat-channel-list .dsf-chat-channel:nth-child(1) {
    transform: translateY(-174px) !important;
  }
  #dsf-chat-widget-0 .dsf-chat-open .dsf-chat-channel-list .dsf-chat-channel:nth-child(2) {
    transform: translateY(-116px) !important;
  }
  #dsf-chat-widget-0 .dsf-chat-open .dsf-chat-channel-list .dsf-chat-channel:nth-child(3) {
    transform: translateY(-58px) !important;
  }
  #dsf-chat-widget-0 .dsf-chat-open .dsf-chat-channel-list .dsf-chat-channel:nth-child(4) {
    transform: translateY(0px) !important;
  }
}

/* ── 26. Ticker / marquee — ensure no overflow ─────────────── */
@media (max-width: 900px) {
  .dsf-track-black {
    animation-duration: 6s !important;
  }
}
@media (max-width: 768px) {
  .dsf-ticker-black {
    padding: 12px 0 !important;
  }
}
@media (max-width: 480px) {
  .dsf-track-black {
    animation-duration: 4s !important;
  }
  .dsf-track-black span {
    font-size: 16px !important;
    letter-spacing: 1px !important;
    padding-right: 30px !important;
  }
  .sep-black {
    font-size: 16px !important;
    padding-right: 30px !important;
  }
}

/* ── 27. Journal Galaxy Map ─────────────── */
/* 5-node single orbit (rx=500) needs ~1100px unscaled width */
.sector-map-wrapper {
  overflow: hidden !important;
}

@media (max-width: 1280px) {
  .sector-map-wrapper {
    height: 700px !important;
  }
  .planet-system {
    transform: scale(0.72) !important;
    top: 48% !important;
  }
}

@media (max-width: 1024px) {
  .sector-map-outer-container {
    margin-top: -40px !important;
  }
  .sector-map-wrapper {
    height: 580px !important;
  }
  .planet-system {
    transform: scale(0.55) !important;
    top: 46% !important;
  }
}

@media (max-width: 768px) {
  .sector-map-outer-container {
    margin-top: 0 !important;
  }
  .sector-map-wrapper {
    height: auto !important;
    min-height: 500px !important;
    cursor: auto !important;
  }
  .planet-system,
  .starfield,
  .custom-crosshair,
  .article-panel {
    display: none !important;
  }
  .mobile-journal-nav {
    display: flex !important;
  }
}

/* ── 28. Services page — card grid responsive ────────────── */
/* The service card rows use inline grid-template-columns: repeat(4, 1fr) */
@media (max-width: 1024px) {
  .services-cards > div {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}
@media (max-width: 600px) {
  .services-cards > div {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  .service-card {
    width: 100% !important;
  }
}

/* ── 29. Journal articles — inline font-size overrides ───── */
@media (max-width: 768px) {
  .dsf-content-body ul[style*="font-size"],
  .dsf-content-body ol[style*="font-size"] {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    margin-left: 15px !important;
  }
  .dsf-content-body section[style*="padding"] {
    padding: 30px 10px !important;
  }
  .dsf-content-body div[style*="max-width"] {
    max-width: 100% !important;
  }
  /* Inline font-size on paragraphs and headings */
  .dsf-content-body p[style*="font-size"],
  .dsf-content-body span[style*="font-size"] {
    font-size: inherit !important;
  }
  /* Parent divs with inline font-size (e.g. font-size:1.7rem) that inflate child lists */
  .dsf-content-body div[style*="font-size"]:not([style*="font-family:Orbitron"]) {
    font-size: 1rem !important;
  }
  /* Divs with inline pixel width values causing overflow — cap at 100%, don't force to 100% */
  .dsf-content-body div[style*="width:"][style*="px"]:not(.diagram-arrow):not([style*="height:100%"]) {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Preserve narrow arrow/connector divs in diagrams */
  .dsf-content-body .diagram-arrow {
    width: 2px !important;
    max-width: 2px !important;
    align-self: center !important;
  }
  .dsf-content-body ul,
  .dsf-content-body ol {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
  /* Inline grid minmax(400px+) overflows mobile — force single column */
  .dsf-content-body div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Inline min-width on flex children causes overflow */
  .dsf-content-body div[style*="min-width"] {
    min-width: 0 !important;
  }
  /* Inline padding on divs — reduce on mobile to prevent overflow */
  .dsf-content-body div[style*="padding:"] {
    padding: 15px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  /* Large inline font-sizes on paragraphs */
  .dsf-content-body p[style*="font-size: 2rem"],
  .dsf-content-body p[style*="font-size:2rem"],
  .dsf-content-body p[style*="font-size: 1.6rem"],
  .dsf-content-body p[style*="font-size:1.6rem"],
  .dsf-content-body p[style*="font-size: 1.4rem"],
  .dsf-content-body p[style*="font-size:1.4rem"],
  .dsf-content-body p[style*="font-size: 1.5rem"],
  .dsf-content-body p[style*="font-size:1.5rem"] {
    font-size: 1.1rem !important;
  }
  /* Large inline font-sizes on divs (headings styled as divs) */
  .dsf-content-body div[style*="font-size: 1.4rem"],
  .dsf-content-body div[style*="font-size:1.4rem"],
  .dsf-content-body div[style*="font-size: 1.5rem"],
  .dsf-content-body div[style*="font-size:1.5rem"],
  .dsf-content-body div[style*="font-size: 2rem"],
  .dsf-content-body div[style*="font-size:2rem"] {
    font-size: 1.1rem !important;
  }
  /* Tables — make scrollable, prevent overflow */
  .dsf-content-body figure.dsf-block-table,
  .dsf-content-body .dsf-block-table {
    overflow-x: auto !important;
    max-width: 100% !important;
    display: block !important;
  }
  .dsf-content-body table:not([style*="border-collapse"]) {
    max-width: 100% !important;
    width: 100% !important;
    font-size: 0.85rem !important;
    table-layout: fixed !important;
  }
  /* Heat map / matrix tables (have border-collapse inline) — auto layout to fit all columns */
  .dsf-content-body table[style*="border-collapse"] {
    font-size: 0.8rem !important;
    table-layout: auto !important;
  }
  .dsf-content-body table:not([style*="border-collapse"]) td,
  .dsf-content-body table:not([style*="border-collapse"]) th {
    padding: 8px 6px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  /* Sections with inline max-width — constrain to viewport */
  .dsf-content-body section[style*="max-width"] {
    max-width: 100% !important;
  }
  /* ── Flex layouts: stack to column on mobile for readability ── */
  /* Exclude timeline rows (gap:24px), bar chart label rows (space-between), waterfall charts (align-items:flex-end), and already-column layouts */
  .dsf-content-body div[style*="display: flex"]:not([style*="gap:24px"]):not([style*="justify-content:space-between"]):not([style*="flex-direction:column"]):not([style*="align-items:flex-end"]),
  .dsf-content-body div[style*="display:flex"]:not([style*="gap:24px"]):not([style*="justify-content:space-between"]):not([style*="flex-direction:column"]):not([style*="align-items:flex-end"]) {
    flex-direction: column !important;
    gap: 20px !important;
  }
  /* Preserve intentional column layouts (these already stack vertically) */
  .dsf-content-body div[style*="flex-direction: column"],
  .dsf-content-body div[style*="flex-direction:column"] {
    flex-direction: column !important;
    gap: 15px !important;
  }
  /* Flex children should take full width when stacked — except small fixed-size elements, timeline connectors, and waterfall bars */
  .dsf-content-body div[style*="display: flex"]:not([style*="align-items:flex-end"]) > div:not(.diagram-arrow):not([style*="flex-shrink:0"]):not([style*="border-left:"]),
  .dsf-content-body div[style*="display:flex"]:not([style*="align-items:flex-end"]) > div:not(.diagram-arrow):not([style*="flex-shrink:0"]):not([style*="border-left:"]) {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
  /* Waterfall chart bars: fit all bars in one row on mobile */
  .dsf-content-body div[style*="align-items:flex-end"] > div[style*="min-width:100px"] {
    min-width: 45px !important;
    flex: 1 !important;
  }
  .dsf-content-body div[style*="align-items:flex-end"] > div[style*="min-width:100px"] div[style*="font-size:1rem"] {
    font-size: 0.7rem !important;
  }
  .dsf-content-body div[style*="align-items:flex-end"] > div[style*="min-width:100px"] div[style*="font-size:1.1rem"] {
    font-size: 0.75rem !important;
  }
  /* Reduce excessive letter-spacing on mobile */
  .dsf-content-body div[style*="letter-spacing"],
  .dsf-content-body p[style*="letter-spacing"],
  .dsf-content-body span[style*="letter-spacing"] {
    letter-spacing: 2px !important;
  }
  /* Reduce excessive gaps in grids */
  .dsf-content-body div[style*="gap: 40px"],
  .dsf-content-body div[style*="gap:40px"],
  .dsf-content-body div[style*="gap: 50px"],
  .dsf-content-body div[style*="gap:50px"],
  .dsf-content-body div[style*="gap: 60px"],
  .dsf-content-body div[style*="gap:60px"] {
    gap: 20px !important;
  }
  /* Reduce excessive margin-bottom on content sections */
  .dsf-content-body div[style*="margin-bottom: 60px"],
  .dsf-content-body div[style*="margin-bottom:60px"],
  .dsf-content-body div[style*="margin-bottom: 80px"],
  .dsf-content-body div[style*="margin-bottom:80px"] {
    margin-bottom: 30px !important;
  }
  /* Section padding — reduce vertical padding on mobile */
  .dsf-content-body section[style*="padding: 100px"],
  .dsf-content-body section[style*="padding:100px"],
  .dsf-content-body section[style*="padding: 80px"],
  .dsf-content-body section[style*="padding:80px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}
@media (max-width: 480px) {
  .dsf-content-body ul[style*="font-size"],
  .dsf-content-body ol[style*="font-size"] {
    font-size: 0.95rem !important;
    margin-left: 10px !important;
  }
  .dsf-content-body section[style*="padding"] {
    padding: 20px 8px !important;
  }
  .dsf-content-body div[style*="font-size"]:not([style*="font-family:Orbitron"]) {
    font-size: 0.95rem !important;
  }
}

/* ── 30. Tool pages — responsive layouts for all tools ────── */
@media (max-width: 768px) {
  /* Info grid (How to Use / Pro Tips) — 3-col → 1-col */
  .info-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  /* Pro tips grid */
  .pro-tips-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  /* Settings grid (image converter) */
  .settings-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  /* Preview grid (SERP simulator) */
  .preview-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  /* Tool layout (robots.txt builder) — side-by-side → stacked */
  .tool-layout {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  /* Tool interface */
  .tool-interface {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  /* Instruction grid (entity density) */
  .instruction-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  /* Tool containers — reduce padding and constrain width */
  .schema-generator-container,
  .aeo-analyzer-tool,
  .h-tag-tool-container,
  .image-converter-container,
  .aeo-tool-container,
  .robots-builder-container,
  .isolate-robots-builder {
    padding: 15px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Tool headings — reduce size */
  .schema-generator-container h2,
  .aeo-analyzer-tool h2,
  .h-tag-tool-container h2,
  .image-converter-container h2,
  .aeo-tool-container h2 {
    font-size: 1.6rem !important;
  }
  /* Tool labels — reduce font-size */
  .schema-generator-container label,
  .aeo-analyzer-tool label {
    font-size: 1.1rem !important;
  }
  /* Tool buttons — full width */
  .schema-btn,
  .aeo-analyzer-tool button,
  .h-tag-tool-container button,
  .converter-tool button {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 1rem 1.5rem !important;
  }
  /* AEO preview card — constrain */
  .aeo-preview-card {
    max-width: 100% !important;
    padding: 15px !important;
    box-sizing: border-box !important;
  }
  /* Goal container grid */
  .aeo-goal-container {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  /* Image converter — button row wrap + slider constrain */
  .button-action-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .button-action-row button {
    flex: 1 1 auto !important;
    min-width: 100px !important;
    width: auto !important;
  }
  /* Range sliders — constrain to container */
  input[type="range"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .quality-control,
  .input-group {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  /* Drop zone — constrain */
  .drop-zone,
  .upload-area,
  .image-drop-zone {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Comparison container */
  .comparison-container,
  .preview-container {
    max-width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
  }
  /* OG tag generator — preview card */
  .og-preview,
  .og-tag-preview {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
  }
  /* JSON-LD output containers */
  .json-output,
  .code-output,
  pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    font-size: 0.85rem !important;
  }
  /* Entity density — result tables/lists */
  .density-results,
  .analysis-results {
    max-width: 100% !important;
    overflow-x: auto !important;
  }
  /* Heading hierarchy — tree visualization */
  .heading-tree,
  .hierarchy-output {
    max-width: 100% !important;
    overflow-x: auto !important;
    font-size: 0.9rem !important;
  }
  /* SERP simulator */
  .serp-preview {
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 15px !important;
  }
}
@media (max-width: 480px) {
  .schema-generator-container,
  .aeo-analyzer-tool,
  .h-tag-tool-container,
  .image-converter-container,
  .aeo-tool-container,
  .robots-builder-container,
  .isolate-robots-builder {
    padding: 10px !important;
  }
  .schema-generator-container h2,
  .aeo-analyzer-tool h2,
  .h-tag-tool-container h2 {
    font-size: 1.3rem !important;
  }
}

/* ── 31. Global — hide scrollbar strip, ensure full bleed ── */
html {
  overflow-x: hidden;
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
}
.site.dsf-container {
  overflow-x: hidden;
}

/* ── 31b. Cyan scrollbar for responsive tables on article pages ── */
div[style*="overflow-x"] {
  scrollbar-width: thin;
  scrollbar-color: #00ecff rgba(0,236,255,0.1);
}
div[style*="overflow-x"]::-webkit-scrollbar {
  height: 6px;
}
div[style*="overflow-x"]::-webkit-scrollbar-track {
  background: rgba(0,236,255,0.1);
  border-radius: 3px;
}
div[style*="overflow-x"]::-webkit-scrollbar-thumb {
  background: #00ecff;
  border-radius: 3px;
}
div[style*="overflow-x"]::-webkit-scrollbar-thumb:hover {
  background: #33f0ff;
}

/* ── 32. Journal archive — magazine card grid ─────────────── */
.blog #dsf-content, .archive #dsf-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.blog article, .archive article {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.blog article:hover, .archive article:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.blog .dsf-article-inner, .archive .dsf-article-inner {
  display: flex;
  flex-direction: column;
  background: transparent !important;
  padding: 0 !important;
}
.blog .dsf-featured-img, .archive .dsf-featured-img {
  order: -1;
  margin-bottom: 0 !important;
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}
.blog .dsf-featured-img img, .archive .dsf-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.blog article:hover .dsf-featured-img img, .archive article:hover .dsf-featured-img img {
  transform: scale(1.05);
}

/* ── Single article page image hover — match archive card style ── */
.single .dsf-content-body .dsf-block-image {
  overflow: hidden;
  border-radius: 12px;
}
.single .dsf-content-body .dsf-block-image img {
  transition: transform 0.4s ease;
}
.single .dsf-content-body .dsf-block-image img:hover {
  animation: none !important;
  transform: scale(1.05);
}
/* Also apply to standalone content images not in .dsf-block-image */
.single .dsf-content-body img:hover {
  animation: none !important;
  transform: scale(1.05);
  transition: transform 0.4s ease;
}

.blog .dsf-content-head, .archive .dsf-content-head {
  padding: 20px 24px 0;
}
.blog .dsf-title, .archive .dsf-title {
  font-size: 1.25rem !important;
  line-height: 1.4;
  margin-bottom: 8px;
}
.blog .dsf-title a, .archive .dsf-title a {
  text-decoration: none;
}
.journal-category-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(37,99,235,0.85);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 6px;
  z-index: 2;
}
.journal-card-meta {
  padding: 4px 24px 8px;
  font-size: 0.8rem;
  color: #ffffff;
}
.blog .dsf-excerpt, .archive .dsf-excerpt {
  padding: 0 20px 32px;
  font-size: 1.05rem;
  color: #ffffff;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .blog #dsf-content, .archive #dsf-content {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 15px;
  }
}

/* ── 33. Journal article pages — tighter spacing & layout ─── */
.single .dsf-block-spacer[style*="height:100px"] {
  height: 40px !important;
}
.single .dsf-block-spacer[style*="height:50px"] {
  height: 20px !important;
}
.single .dsf-content-body section p[style*="font-size:1.7rem"],
.single .dsf-content-body section p[style*="font-size: 1.7rem"] {
  font-size: 1.8rem !important;
  line-height: 1.8 !important;
}
.single .dsf-content-body .dsf-block-image img {
  border-radius: 12px;
}
/* Article meta line — single line on mobile, reduce spacer below */
[class*="gb-text-ff89ae9f"] {
  white-space: nowrap;
  font-size: 0.85rem !important;
}
.single [class*="gb-text-ff89ae9f"] + .dsf-block-spacer {
  height: 5px !important;
}
/* Hide hero prev/next nav links and collapse their container */
.single .dsf-block-cover .dsf-nav-prev-link,
.single .dsf-block-cover .dsf-nav-next-link {
  display: none !important;
}
.single .dsf-block-cover .dsf-block-columns .dsf-block-columns {
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}
.journal-post-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
  margin: 40px auto;
  padding: 24px 30px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
}
.journal-post-nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}
.journal-post-nav a:hover {
  color: #fff;
}
.single .dsf-content-body .dsf-block-cover .dsf-nav-prev-link,
.single .dsf-content-body .dsf-block-cover .dsf-nav-next-link {
  display: none;
}
@media (max-width: 768px) {
  .journal-post-nav {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 20px;
  }
}

/* DsfChat widget visible on all pages — scroll-controlled via inline JS */

/* Hide star-field canvas overlays on all pages */
canvas[style*="z-index: 9999"],
canvas[style*="z-index:9999"] {
  display: none !important;
}

/* ─── Visual Element Styles for Journal Articles ─── */

/* Glow Table */
.glow-table th,
.glow-table td {
  border: 2px solid #0ff;
  padding: 10px;
  text-align: center;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 8px #0ff);
  font-size: 1.3rem;
}
.glow-table th {
  font-weight: bold;
  font-size: 1.5rem;
  filter: drop-shadow(0 0 12px #0ff);
}
.glow-table tr:hover td,
.glow-table tr:hover th {
  transform: scale(1.02);
  border-color: #fff;
  filter: drop-shadow(0 0 20px #fff);
  background-color: rgba(255,255,255,0.05);
}
.glow-table tr:hover {
  background: none;
}

/* AI Flow Cards */
.ai-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.ai-card {
  width: 100%;
  max-width: 650px;
  padding: 28px;
  border: 2px solid #0ff;
  border-radius: 12px;
  background: rgba(0,255,255,0.05);
  filter: drop-shadow(0 0 10px #0ff);
  transition: all 0.3s ease;
}
.ai-card h3 {
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.ai-card p {
  font-size: 1.4rem;
  line-height: 1.5;
}
.ai-card:hover {
  transform: scale(1.03);
  border-color: #fff;
  filter: drop-shadow(0 0 20px #fff);
  background: rgba(255,255,255,0.05);
}
.ai-arrow {
  font-size: 2.6rem;
  color: #0ff;
  transform: rotate(90deg);
  filter: drop-shadow(0 0 10px #0ff);
  transition: all 0.3s ease;
}
.ai-arrow:hover {
  color: #fff;
  filter: drop-shadow(0 0 18px #fff);
}

/* Signal Grid (Checklist) */
.signal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
.signal-card {
  padding: 20px 18px;
  border: 2px solid #0ff;
  border-radius: 12px;
  background: rgba(0,255,255,0.05);
  filter: drop-shadow(0 0 10px #0ff);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  position: relative;
  height: 100%;
}
.signal-card .checkmark {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 2rem;
  color: #0ff;
  filter: drop-shadow(0 0 8px #0ff);
}
.signal-card h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  margin-left: 35px;
}
.signal-card p {
  font-size: 1.35rem;
  line-height: 1.5;
  margin: 0;
  margin-left: 35px;
}
.signal-card:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: #fff;
  filter: drop-shadow(0 0 20px #fff);
  background: rgba(255,255,255,0.05);
}

/* Comparison Grid */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  text-align: left;
}
.comparison-card {
  background: rgba(0,255,255,0.05);
  padding: 30px;
  border: 2px solid #0ff;
  border-radius: 12px;
  filter: drop-shadow(0 0 12px #0ff);
  transition: all 0.3s ease;
  position: relative;
}
.comparison-card h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  text-align: center;
}
.comparison-card ul {
  font-size: 1.35rem;
  line-height: 1.6;
  padding-left: 20px;
}
.comparison-card li {
  margin-bottom: 10px;
}
.comparison-card:hover {
  transform: scale(1.03);
  border-color: #fff;
  background: rgba(255,255,255,0.05);
  filter: drop-shadow(0 0 20px #fff);
}

/* Responsive breakpoints for visual elements */
@media (max-width: 1100px) {
  .signal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  .comparison-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .signal-grid {
    grid-template-columns: 1fr;
  }
  .glow-table th,
  .glow-table td {
    font-size: 1.1rem;
    padding: 8px 5px;
  }
  .glow-table th {
    font-size: 1.2rem;
  }
  .ai-card {
    padding: 20px;
  }
  .ai-card h3 {
    font-size: 1.4rem;
  }
  .ai-card p {
    font-size: 1.2rem;
  }
}

/* ── 33. Back-to-home button hover ─────────────────────────── */
.back-to-home-btn:hover {
  background: rgba(0,236,255,0.15) !important;
  border-color: rgba(0,236,255,0.8) !important;
  box-shadow: 0 0 20px rgba(0,236,255,0.3);
  transform: translateY(-2px);
}

/* ── 34. Article quote/callout blocks — center and constrain ── */
.dsf-content-body div[style*="border-left:"] {
  max-width: 1000px !important;
  margin: 80px auto !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .dsf-content-body div[style*="border-left:"] {
    max-width: calc(100% - 90px) !important;
    margin-left: 80px !important;
    margin-right: 10px !important;
  }
}

/* ── 35. Article body text — normalize to consistent size ──── */
.dsf-content-body p[style*="font-size:1.7rem"] {
  font-size: 1.8rem !important;
}
.dsf-content-body p[style*="font-size: 1.7rem"] {
  font-size: 1.8rem !important;
}

/* ── 36. Article tables & visuals — center ─────────────────── */
.dsf-content-body table,
.dsf-content-body div[style*="overflow"],
.dsf-content-body figure {
  margin-left: auto !important;
  margin-right: auto !important;
}
.dsf-content-body div[style*="overflow-x"] {
  max-width: 1000px !important;
  margin: 80px auto !important;
}
.dsf-content-body table {
  font-size: 1.15rem !important;
  margin-bottom: 0 !important;
}
.dsf-content-body table th {
  font-size: 1.2rem !important;
  text-align: center !important;
}
.dsf-content-body table td,
.dsf-content-body table th {
  padding: 12px 16px !important;
}
.dsf-content-body div[style*="overflow-x"] h3 {
  text-align: center !important;
}
.dsf-content-body h4 {
  margin-top: 80px !important;
}

/* ── 37. Hyperspeed hero — reduced height (targets only covers with Hyperspeed video) ── */
body:not(.home) .dsf-block-cover.dsf-full:has(video[src*="Hyperspeed"]) {
  min-height: 250px !important;
}
body:not(.home) .dsf-block-cover.dsf-full:has(video[src*="Hyperspeed"]) h1 {
  margin-top: 50px !important;
}
@media (max-width: 1024px) {
  body:not(.home) .dsf-block-cover.dsf-full:has(video[src*="Hyperspeed"]) {
    min-height: 200px !important;
  }
  body:not(.home) .dsf-block-cover.dsf-full:has(video[src*="Hyperspeed"]) h1 {
    font-size: clamp(32px, 8vw, 60px) !important;
    line-height: 1.15 !important;
    margin-top: 30px !important;
  }
}
@media (max-width: 768px) {
  body:not(.home) .dsf-block-cover.dsf-full:has(video[src*="Hyperspeed"]) {
    min-height: 160px !important;
  }
  body:not(.home) .dsf-block-cover.dsf-full:has(video[src*="Hyperspeed"]) h1 {
    font-size: clamp(26px, 7vw, 44px) !important;
    margin-top: 30px !important;
  }
}

/* ── 38. Article TLDR / thesis lede — consistent sizing ──── */
.single .dsf-block-cover .gb-text-ad0f2711 {
  font-size: 1.25rem !important;
}