/* Dream Steps — global.css
 * Shared by every page on the site. Generated from per-page inline CSS
 * across 86 pages on 2026-05-28.
 * Contains 132 rules that appear identically on every page.
 */

*, *::before, *::after {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%
}
img, svg {
  display: block; max-width: 100%
}
a {
  color: inherit; text-decoration: none
}
button {
  font: inherit; cursor: pointer; border: 0; background: none; color: inherit
}
h1, h2, h3, h4, h5, p {
  margin: 0
}
::selection {
  background: var(--orange); color: #fff
}
.container {
  max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); width: 100%
}
.eyebrow {
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 10px
}
.eyebrow::before {
  content: ''; width: 24px; height: 1px; background: currentColor; opacity: .6
}
.eyebrow.on-ink {
  color: rgba(255,255,255,.7)
}
.eyebrow.on-ink::before {
  background: var(--orange); opacity: 1
}
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--rad-pill); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); will-change: transform
}
.btn:hover {
  transform: translateY(-1px)
}
.btn:active {
  transform: translateY(0)
}
.btn-primary {
  background: var(--orange); color: #fff; box-shadow: 0 8px 30px -10px rgba(232,67,10,.55)
}
.btn-primary:hover {
  background: var(--orange-deep); box-shadow: 0 14px 40px -12px rgba(232,67,10,.7)
}
.btn-ghost {
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(11,11,14,.16)
}
.btn-ghost:hover {
  box-shadow: inset 0 0 0 1px var(--ink)
}
.btn-ghost.on-ink {
  color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22)
}
.btn-ghost.on-ink:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); background: rgba(255,255,255,.04)
}
.btn .icon {
  width: 18px; height: 18px; stroke-width: 2; transition: transform .25s var(--ease)
}
.btn:hover .icon-arrow {
  transform: translateX(4px)
}
section {
  position: relative
}
.section-pad-sm {
  padding: clamp(56px, 7vw, 96px) 0
}
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 0; background: rgba(11,11,14,0); transition: background .3s var(--ease), backdrop-filter .3s var(--ease)
}
.nav.on-dark {
  color: #fff
}
.nav.scrolled {
  background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); border-bottom: 1px solid rgba(11,11,14,.07); color: var(--ink)
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; padding: 0 var(--gutter); max-width: var(--container); margin: 0 auto
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; flex-shrink: 0; z-index: 10
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px; background: var(--orange); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 14px; box-shadow: 0 8px 24px -8px rgba(232,67,10,.6); flex-shrink: 0
}
.brand-name span {
  color: var(--orange)
}
.nav-items {
  display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0
}
.nav-item {
  position: relative
}
.nav-item > a, .nav-item > button {
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; font-size: 14px; font-weight: 500; border-radius: 8px; color: inherit; opacity: .85; transition: opacity .2s, background .2s, color .2s; white-space: nowrap
}
.nav-item > a:hover, .nav-item > button:hover {
  opacity: 1; background: rgba(255,255,255,.08)
}
.nav.scrolled .nav-item > a:hover,
    .nav.scrolled .nav-item > button:hover {
  background: rgba(11,11,14,.05); color: var(--orange)
}
.nav-item > button .chevron {
  width: 14px; height: 14px; stroke-width: 2.5; transition: transform .25s var(--ease)
}
.nav-item.open > button .chevron {
  transform: rotate(180deg)
}
.dropdown {
  position: absolute; top: calc(100% + 10px); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); z-index: 300
}
.nav-item.open .dropdown {
  opacity: 1; pointer-events: auto
}
.nav-item.open .dropdown-simple {
  transform: translateX(-50%) translateY(0)
}
.dropdown-simple a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink); transition: background .15s, color .15s; white-space: nowrap
}
.dropdown-simple a:hover {
  background: var(--warm); color: var(--orange)
}
.dropdown-simple a .ds-icon {
  width: 28px; height: 28px; border-radius: 6px; background: var(--warm); display: grid; place-items: center; flex-shrink: 0; color: var(--ink-mute); transition: background .15s, color .15s
}
.dropdown-simple a:hover .ds-icon {
  background: var(--orange-tint); color: var(--orange)
}
.dropdown-simple a .ds-icon svg {
  width: 13px; height: 13px; stroke-width: 1.75
}
.dropdown-sep {
  height: 1px; background: var(--warm-line); margin: 5px 6px
}
.dropdown-simple .dd-label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); padding: 8px 10px 4px
}
.dropdown-mega {
  left: -20px; transform: translateY(-6px); width: min(820px, 88vw); background: #fff; border-radius: 16px; box-shadow: 0 20px 60px -12px rgba(11,11,14,.2), 0 0 0 1px rgba(11,11,14,.06); overflow: hidden
}
.nav-item.open .dropdown-mega {
  transform: translateY(0)
}
.mega-header {
  padding: 16px 20px; border-bottom: 1px solid var(--warm-line); display: flex; align-items: center; justify-content: space-between; gap: 16px
}
.mega-header p {
  font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; max-width: 42ch; margin: 0
}
.mega-header p strong {
  color: var(--ink)
}
.mega-header a {
  font-size: 12.5px; font-weight: 600; color: var(--orange); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0
}
.mega-header a:hover {
  text-decoration: underline
}
.mega-cols {
  display: grid; grid-template-columns: repeat(4, 1fr); padding: 16px 12px 12px; gap: 0
}
.mega-col {
  padding: 0 8px; border-right: 1px solid var(--warm-line)
}
.mega-col:last-child {
  border-right: none
}
.mega-col-title {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); padding: 0 4px 8px; margin-bottom: 2px; display: flex; align-items: center; gap: 5px
}
.mega-col-title svg {
  width: 11px; height: 11px; flex-shrink: 0
}
.mega-col ul {
  list-style: none; padding: 0; margin: 0
}
.mega-col ul li a {
  display: flex; align-items: center; gap: 7px; padding: 6px 4px; font-size: 13px; font-weight: 500; color: var(--ink); border-radius: 6px; transition: background .15s, color .15s, padding-left .15s; white-space: nowrap
}
.mega-col ul li a svg {
  flex-shrink: 0; opacity: .4; transition: opacity .15s
}
.mega-col ul li a:hover {
  background: var(--warm); color: var(--orange); padding-left: 8px
}
.mega-col ul li a:hover svg {
  opacity: .8
}
.mega-col ul li a .new-badge {
  font-size: 8.5px; font-weight: 700; letter-spacing: .05em; background: var(--orange); color: #fff; padding: 2px 5px; border-radius: 20px; text-transform: uppercase; margin-left: auto; flex-shrink: 0
}
.mega-footer {
  background: var(--warm); padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--warm-line); gap: 16px; flex-wrap: wrap
}
.mega-footer-cta {
  display: flex; align-items: center; gap: 8px
}
.mega-footer-cta .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); flex-shrink: 0; animation: pulse-green 2.5s infinite
}
@keyframes pulse-green {
  0%,100% {
    box-shadow:0 0 0 3px rgba(34,197,94,.18)
  }
  50% {
    box-shadow:0 0 0 6px rgba(34,197,94,.06)
  }
}
.mega-footer-cta p {
  font-size: 12.5px; color: var(--ink-mute); margin: 0
}
.mega-footer-cta p strong {
  color: var(--ink)
}
.mega-footer a.btn-sm {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--rad-pill); background: var(--orange); color: #fff; font-size: 12.5px; font-weight: 600; box-shadow: 0 4px 16px -4px rgba(232,67,10,.45); transition: background .2s, transform .2s; white-space: nowrap
}
.mega-footer a.btn-sm:hover {
  background: var(--orange-deep); transform: translateY(-1px)
}
.mega-footer a.btn-sm svg {
  width: 12px; height: 12px; flex-shrink: 0
}
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--rad-pill); background: var(--orange); color: #fff !important; font-size: 13.5px; font-weight: 600; box-shadow: 0 8px 24px -10px rgba(232,67,10,.6); transition: transform .25s var(--ease), background .25s var(--ease); white-space: nowrap; flex-shrink: 0
}
.nav-cta:hover {
  transform: translateY(-1px); background: var(--orange-deep)
}
.nav-toggle {
  display: none; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; flex-shrink: 0
}
@media (max-width: 960px) {
  .nav-items {
    display: none
  }
  .nav-toggle {
    display: inline-flex
  }
  .nav.open .nav-items {
    display: flex; flex-direction: column; align-items: stretch; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: #fff; color: var(--ink); padding: 16px var(--gutter) 40px; gap: 2px; overflow-y: auto; border-top: 1px solid rgba(11,11,14,.06)
  }
  .nav.open .nav-item > a,
      .nav.open .nav-item > button {
    color: var(--ink); font-size: 16px; padding: 12px 14px; width: 100%; justify-content: space-between
  }
  .dropdown {
    position: static; transform: none; opacity: 1; pointer-events: auto
  }
  .dropdown-mega {
    width: 100%; border-radius: var(--rad-md); box-shadow: none; border: 1px solid var(--warm-line)
  }
  .mega-cols {
    grid-template-columns: 1fr 1fr
  }
  .dropdown-simple {
    box-shadow: none; border: 1px solid var(--warm-line); min-width: auto
  }
  .nav-item:not(.open) .dropdown {
    display: none
  }
}
.section-head .eyebrow {
  justify-content: center
}
.footer {
  background: var(--ink); color: rgba(255,255,255,.7); padding: 80px 0 32px; border-top: 1px solid rgba(255,255,255,.07)
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px
}
@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr
  }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr
  }
}
.footer .brand-name {
  color: #fff
}
.footer-about {
  max-width: 32ch; font-size: 14.5px; color: rgba(255,255,255,.65); margin-top: 18px; line-height: 1.6
}
.footer-col h4 {
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); font-weight: 600; margin-bottom: 18px
}
.footer-col ul {
  list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px
}
.footer-col a {
  font-size: 14.5px; color: rgba(255,255,255,.78)
}
.footer-col a:hover {
  color: #fff
}
.footer-bottom {
  margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 13px; color: rgba(255,255,255,.55)
}
.socials {
  display: flex; gap: 10px
}
.socials a {
  width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.06); display: grid; place-items: center; color: rgba(255,255,255,.7); transition: background .25s var(--ease), color .25s var(--ease)
}
.socials a:hover {
  background: var(--orange); color: #fff
}
.reveal {
  opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out)
}
.reveal.in {
  opacity: 1; transform: translateY(0)
}
.reveal-delay-1 {
  transition-delay: .08s
}
.reveal-delay-2 {
  transition-delay: .16s
}
.reveal-delay-3 {
  transition-delay: .24s
}
.reveal-delay-4 {
  transition-delay: .32s
}
.wna-comparison:has(.wna-grid) {
  display: block; margin-bottom: 64px
}
.wna-head {
  max-width: 760px; margin: 0 auto 40px; text-align: center
}
.wna-head .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange, #E8430A); margin-bottom: 18px
}
.wna-head h2 {
  font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -0.022em; line-height: 1.12; color: #FFFFFF; margin: 0 0 14px; text-wrap: balance
}
.wna-head h2 em {
  font-style: normal !important; color: rgba(255, 255, 255, 0.7); font-weight: 700
}
.wna-sub {
  font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); margin: 0
}
.wna-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 22px); margin-top: 8px
}
@media (max-width: 920px) {
  .wna-grid {
    grid-template-columns: 1fr
  }
}
.wna-tile {
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--rad-lg, 14px); padding: 28px 26px; display: flex; flex-direction: column; gap: 18px; position: relative; transition: border-color .2s ease, transform .2s ease
}
.wna-tile:hover {
  border-color: rgba(255, 255, 255, 0.18)
}
.wna-tile-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08)
}
.wna-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); line-height: 1.4
}
.wna-tile.wna-ours {
  background: linear-gradient(160deg, rgba(232, 67, 10, 0.14) 0%, rgba(232, 67, 10, 0.04) 100%); border: 1px solid rgba(232, 67, 10, 0.42); box-shadow: 0 28px 60px -28px rgba(232, 67, 10, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06)
}
.wna-tile.wna-ours .wna-tile-head {
  border-bottom-color: rgba(232, 67, 10, 0.28)
}
.wna-tile.wna-ours .wna-label {
  color: var(--orange, #E8430A)
}
.wna-list {
  list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px
}
.wna-list li {
  font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.74); padding-left: 22px; position: relative
}
.wna-list li::before {
  content: ""; position: absolute; left: 2px; top: 9px; width: 12px; height: 1.5px; background: rgba(255, 255, 255, 0.32)
}
.wna-tile.wna-ours .wna-list li {
  color: rgba(255, 255, 255, 0.92)
}
.wna-tile.wna-ours .wna-list li::before {
  background: var(--orange, #E8430A); height: 2px
}
.eyebrow-dot {
  display: none
}
.real-cost-lede {
  margin-top: 18px; font-size: var(--t-lead, 17px); line-height: 1.65; color: var(--ink-mute, #5B5B66); max-width: 60ch; margin-left: auto; margin-right: auto
}
.in-action-sub {
  max-width: 60ch; margin-left: auto; margin-right: auto
}
.pc-meta .industry {
  display: inline-block
}
.cta-strip-text {
  display: flex; flex-direction: column; gap: 4px; min-width: 0
}
.how-step-body {
  display: block
}
.how-step-line {
  display: none
}
.wd-related {
  max-width: 62ch; margin: 48px auto 0; text-align: center; font-size: 15px; line-height: 1.7; color: var(--ink-mute, #5B5B66)
}
.cta-orange .container .left,
    .final-cta .container .left {
  display: flex; flex-direction: column
}
.post-date {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-mute, #5B5B66)
}
.post-dot {
  display: inline-block; margin: 0 6px; color: rgba(91, 91, 102, 0.5); font-size: 12px
}