/* Dreamtrue.ai — mobile & tablet responsive overrides */

.dt-nav-toggle,
.dt-nav-mobile-menu {
  display: none !important;
}

/* .dt-hero DS class uses 94px display tracking; inherited computed
   letter-spacing (~-1.88px) crushes sub/button text. Reset always. */
.dt-hero-sub,
.dt-hero-cta a {
  letter-spacing: normal !important;
  word-spacing: normal !important;
}

@media (max-width: 900px) {
  .dt-nav {
    height: 60px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    display: grid !important;
    grid-template-columns: 40px 1fr auto;
    grid-template-rows: auto auto;
    align-items: center !important;
    gap: 8px !important;
    z-index: 100 !important;
    position: sticky !important;
    top: 0 !important;
  }

  .dt-nav-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    grid-column: 1;
    justify-self: start;
    -webkit-tap-highlight-color: transparent;
  }

  .dt-nav-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: #141414;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .dt-nav-open .dt-nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .dt-nav-open .dt-nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .dt-nav-open .dt-nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .dt-nav-links {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .dt-logo {
    grid-column: 2;
    justify-self: center;
  }

  .dt-nav-actions {
    grid-column: 3;
    justify-self: end;
    flex: none !important;
  }

  .dt-nav .dt-logo svg {
    width: 120px !important;
    height: auto !important;
  }

  .dt-nav-actions a {
    padding: 10px 14px !important;
    font-size: 12px !important;
  }

  .dt-nav-mobile-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    grid-column: 1 / -1;
    background: #faf8f2;
    border-bottom: 1px solid #e0ddd8;
    padding: 4px 0 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    z-index: 100;
  }

  .dt-nav-open .dt-nav-mobile-menu {
    display: flex !important;
    flex-direction: column;
  }

  .dt-nav-mobile-menu a {
    font: 500 16px "PP Neue Montreal", -apple-system, sans-serif;
    color: #141414;
    text-decoration: none;
    padding: 14px 20px;
    border-top: 1px solid #e0ddd8;
  }

  .dt-nav-mobile-menu a:first-child {
    border-top: 0;
  }

  body.dt-nav-menu-open {
    overflow: hidden;
  }

  /* Stack multi-column grids (match both raw HTML and React-rendered inline styles) */
  .dt-grid-2,
  .dt-site div[style*="1.1fr 0.9fr"],
  .dt-site div[style*="1.15fr"],
  .dt-site div[style*="1.05fr 0.95fr"],
  .dt-site div[style*="0.95fr 1.05fr"],
  .dt-site div[style*="0.85fr"],
  .dt-site div[style*="grid-template-columns: 1fr 1fr"],
  .dt-site div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .dt-grid-3,
  .dt-site div[style*="repeat(3, 1fr)"],
  .dt-site div[style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .dt-grid-5,
  .dt-site div[style*="repeat(5, 1fr)"],
  .dt-site div[style*="repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Display typography (exclude hero — uses .dt-hero-line) */
  .dt-site [style*="500 76px"]:not(.dt-hero-line),
  .dt-site [style*="500 76px/"]:not(.dt-hero-line) {
    font-size: clamp(36px, 10vw, 76px) !important;
    line-height: 0.95 !important;
  }

  .dt-site [style*="500 62px"],
  .dt-site [style*="500 64px"] {
    font-size: clamp(34px, 9vw, 62px) !important;
    line-height: 1 !important;
  }

  .dt-site [style*="500 56px"] {
    font-size: clamp(30px, 8vw, 56px) !important;
    line-height: 1.02 !important;
  }

  .dt-site [style*="500 52px"],
  .dt-site [style*="500 50px"] {
    font-size: clamp(28px, 7vw, 52px) !important;
    line-height: 1.08 !important;
  }

  .dt-site [style*="500 46px"] {
    font-size: clamp(28px, 7vw, 46px) !important;
    line-height: 1.05 !important;
  }

  /* Section padding */
  .dt-section,
  .dt-site > div[style*="padding: 104px"],
  .dt-site > div[style*="padding:104px"],
  .dt-site > div[style*="padding: 96px"],
  .dt-site > div[style*="padding:96px"],
  .dt-site > div[style*="padding: 88px"],
  .dt-site > div[style*="padding:88px"],
  .dt-site > div[style*="padding: 84px"],
  .dt-site > div[style*="padding:84px"],
  .dt-site > div[style*="padding: 72px"],
  .dt-site > div[style*="padding:72px"],
  .dt-site > div[style*="padding: 24px 32px"],
  .dt-site > div[style*="padding:24px 32px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .dt-site > div[style*="padding: 88px 32px"],
  .dt-site > div[style*="padding:88px 32px"] {
    padding-top: 48px !important;
    padding-bottom: 32px !important;
  }

  .dt-site > div[style*="padding: 8px 32px"],
  .dt-site > div[style*="padding:8px 32px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 56px !important;
  }

  .dt-site > div[style*="padding: 84px 32px"],
  .dt-site > div[style*="padding:84px 32px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .dt-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Platform page: drop narrow max-width columns on small screens */
  .dt-site div[style*="max-width: 420px"],
  .dt-site div[style*="max-width:420px"],
  .dt-site div[style*="max-width: 380px"],
  .dt-site div[style*="max-width:380px"],
  .dt-site div[style*="max-width: 1100px"],
  .dt-site div[style*="max-width:1100px"] {
    max-width: none !important;
  }

  /* Platform page: stack side-by-side mockup cards */
  .dt-mockup-panel div[style*="gap: 16px"],
  .dt-mockup-panel div[style*="gap:16px"] {
    flex-direction: column !important;
  }

  .dt-mockup-panel div[style*="flex: 0 0 55%"],
  .dt-mockup-panel div[style*="flex:0 0 55%"] {
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  /* Platform page: wrap template category pills */
  .dt-site div[style*="gap: 7px"][style*="margin-bottom: 16px"],
  .dt-site div[style*="gap:7px"][style*="margin-bottom:16px"] {
    flex-wrap: wrap !important;
  }

  /* Tighter mockup card padding on small screens */
  .dt-mockup-panel div[style*="padding: 26px 28px"],
  .dt-mockup-panel div[style*="padding:26px 28px"],
  .dt-mockup-panel div[style*="padding: 22px 24px"],
  .dt-mockup-panel div[style*="padding:22px 24px"] {
    padding: 20px 16px !important;
  }

  .dt-mockup-panel[style*="padding: 44px"],
  .dt-mockup-panel[style*="padding:44px"] {
    padding: 24px 16px !important;
  }

  .dt-mockup-panel[style*="padding: 40px"],
  .dt-mockup-panel[style*="padding:40px"] {
    padding: 24px 16px 0 !important;
  }

  .dt-hero {
    display: grid !important;
    grid-template-rows: 1fr !important;
    min-height: max(620px, 88svh) !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .dt-hero > video,
  .dt-hero > .dt-hero-overlay {
    grid-row: 1;
    grid-column: 1;
  }

  .dt-hero-content {
    grid-row: 1;
    grid-column: 1;
    position: relative !important;
    align-self: end !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    padding: 48px 20px 36px !important;
    z-index: 2;
  }

  .dt-hero-line {
    font-size: clamp(32px, 8.5vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
  }

  .dt-hero-sub {
    max-width: none !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }

  .dt-hero-cta a {
    font-size: 14px !important;
    white-space: normal !important;
  }

  .dt-hero-cta {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .dt-hero-cta a {
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .dt-why-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .dt-why-grid > div:first-child {
    position: static !important;
  }

  .dt-feat-cards > div {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  /* Vault knowledge graph — hide connections panel, scale node positions */
  .dt-vault-mock {
    left: 12px !important;
    right: 12px !important;
    top: 12px !important;
    bottom: 12px !important;
  }

  .dt-vault-graph {
    flex: 1 1 auto !important;
    min-height: 240px !important;
  }

  .dt-vault-side {
    display: none !important;
  }

  .dt-vault-node {
    transform: translate(-50%, -50%) scale(0.92) !important;
    white-space: nowrap !important;
  }

  .dt-vault-node--center {
    left: 50% !important;
    top: 50% !important;
  }

  .dt-vault-node--pricing {
    left: 23% !important;
    top: 25% !important;
  }

  .dt-vault-node--nordic {
    left: 81% !important;
    top: 28% !important;
  }

  .dt-vault-node--competitor {
    left: 25% !important;
    top: 79% !important;
  }

  .dt-vault-node--cto {
    left: 79% !important;
    top: 76% !important;
  }

  .dt-firm {
    text-align: left !important;
  }

  .dt-firm-cards {
    display: block !important;
    position: relative !important;
    height: 280px !important;
    overflow: hidden !important;
  }

  .dt-firm-cards > div {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    flex: none !important;
    transition: opacity 0.28s ease !important;
  }

  .dt-firm-cards > div[data-firm-hidden="true"] {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .dt-footer-cta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    padding-bottom: 40px !important;
  }

  .dt-footer-cta-title {
    max-width: none !important;
  }

  .dt-footer-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .dt-book-demo {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .dt-book-demo-left {
    padding: 48px 20px 32px !important;
  }

  .dt-book-demo-right {
    padding: 40px 20px 56px !important;
  }

  .dt-book-demo-form {
    padding: 32px 24px !important;
  }

  .dt-mockup-wrap {
    padding: 32px 20px 0 !important;
  }

  .dt-mockup-inner {
    padding: 28px 20px 0 !important;
  }

  .dt-mockup-panel {
    height: auto !important;
    min-height: 280px !important;
  }

  .dt-footer-dark {
    padding: 64px 20px 32px !important;
  }
}

@media (max-width: 480px) {
  .dt-grid-5,
  .dt-site div[style*="repeat(5, 1fr)"],
  .dt-site div[style*="repeat(5,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  .dt-hero {
    min-height: max(580px, 90svh) !important;
  }

  .dt-hero-line {
    font-size: clamp(28px, 8vw, 38px) !important;
  }

  .dt-firm-cards {
    height: 240px !important;
  }
}