/* =================================================================
   DEVOTION MARKETING — Site Styles
   Dark grey · White · Bone beige · Nike-bold attitude
   ================================================================= */

:root {
  /* SURFACES — dark mode default */
  --dm-bg:        #0d0d0d;
  --dm-surface:   #141414;
  --dm-surface-2: #1c1c1c;
  --dm-surface-3: #242424;
  --dm-border:    #262626;
  --dm-border-2:  #1a1a1a;

  /* INK */
  --dm-ink:       #ffffff;
  --dm-ink-soft:  #d4d4d2;
  --dm-muted:     #8a8a87;
  --dm-muted-2:   #5a5a57;

  /* BONE — the only "color" */
  --dm-bone:        #FFF6E1;
  --dm-bone-soft:   #F1E9CC;
  --dm-bone-dim-08: rgba(255,246,225,0.08);
  --dm-bone-dim-12: rgba(255,246,225,0.12);
  --dm-bone-dim-20: rgba(255,246,225,0.20);
  --dm-bone-dim-65: rgba(255,246,225,0.65);

  /* Accent text — readable on whichever bg is active */
  --dm-accent: var(--dm-bone);

  /* Status (kept minimal, used sparingly) */
  --dm-green: #4ade80;
  --dm-red:   #f87171;

  /* TYPE — declared but swapped via Tweaks */
  --dm-font-display: 'Anton', 'Archivo Black', system-ui, sans-serif;
  --dm-font-subhead: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  --dm-font-body:    'Manrope', 'Geist', system-ui, sans-serif;
  --dm-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* SCALE — editorial, much bigger than dashboard */
  --dm-fs-mega:    clamp(80px, 14vw, 220px);
  --dm-fs-hero:    clamp(56px, 10vw, 156px);
  --dm-fs-display: clamp(40px, 7vw, 96px);
  --dm-fs-h1:      clamp(32px, 5vw, 64px);
  --dm-fs-h2:      clamp(24px, 3vw, 40px);
  --dm-fs-h3:      20px;
  --dm-fs-body:    16px;
  --dm-fs-sm:      14px;
  --dm-fs-eyebrow: 11px;
  --dm-fs-micro:   10px;

  --dm-tracking-eyebrow: 0.18em;
  --dm-tracking-display: -0.02em;
  --dm-tracking-mega:    -0.04em;

  /* RADII (Nike uses mostly 0/squares but allows pills) */
  --dm-r-0:   0;
  --dm-r-xs:  2px;
  --dm-r-sm:  4px;
  --dm-r-md:  8px;
  --dm-r-pill: 9999px;

  /* MOTION */
  --dm-t-fast: 0.16s;
  --dm-t-med:  0.28s;
  --dm-t-slow: 0.6s;
  --dm-ease:   cubic-bezier(0.2, 0.7, 0.2, 1);

  /* LAYOUT */
  --dm-page-pad-x: clamp(20px, 4vw, 56px);
  --dm-nav-h: 64px;
}

/* LIGHT MODE */
[data-theme="light"] {
  --dm-bg:        #f5f4ef;
  --dm-surface:   #fbfaf5;
  --dm-surface-2: #ecebe4;
  --dm-surface-3: #e2e0d6;
  --dm-border:    #d4d2c4;
  --dm-border-2:  #e5e3d6;
  --dm-ink:       #111111;
  --dm-ink-soft:  #2a2a2a;
  --dm-muted:     #6a6a65;
  --dm-muted-2:   #999895;
  --dm-bone:        #FFF6E1;
  --dm-bone-soft:   #2a2a28;
  --dm-bone-dim-08: rgba(20,20,20,0.05);
  --dm-bone-dim-12: rgba(20,20,20,0.08);
  --dm-bone-dim-20: rgba(20,20,20,0.12);
  --dm-bone-dim-65: rgba(20,20,20,0.5);
  /* Deep brown accent for readable highlight text on light surfaces */
  --dm-accent: #5a3a1c;
}

/* RESET */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--dm-bg);
  color: var(--dm-ink);
  font-family: var(--dm-font-body);
  font-size: var(--dm-fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* TYPE PRIMITIVES */
.dm-mega {
  font-family: var(--dm-font-display);
  font-size: var(--dm-fs-mega);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: var(--dm-tracking-mega);
  text-transform: uppercase;
}
.dm-hero {
  font-family: var(--dm-font-display);
  font-size: var(--dm-fs-hero);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: var(--dm-tracking-display);
  text-transform: uppercase;
}
.dm-display {
  font-family: var(--dm-font-display);
  font-size: var(--dm-fs-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: var(--dm-tracking-display);
  text-transform: uppercase;
}
.dm-h1 {
  font-family: var(--dm-font-subhead);
  font-size: var(--dm-fs-h1);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.dm-h2 {
  font-family: var(--dm-font-subhead);
  font-size: var(--dm-fs-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.dm-h3 {
  font-family: var(--dm-font-subhead);
  font-size: var(--dm-fs-h3);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.dm-body { font-family: var(--dm-font-body); font-size: var(--dm-fs-body); line-height: 1.6; }
.dm-body-lg { font-family: var(--dm-font-body); font-size: 18px; line-height: 1.55; }
.dm-body-sm { font-family: var(--dm-font-body); font-size: var(--dm-fs-sm); line-height: 1.55; color: var(--dm-muted); }
.dm-eyebrow {
  font-family: var(--dm-font-subhead);
  font-size: var(--dm-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--dm-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--dm-muted);
}
.dm-micro {
  font-family: var(--dm-font-subhead);
  font-size: var(--dm-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dm-muted);
}
.dm-bone-tint { color: var(--dm-bone); }

/* BUTTONS — Nike: hard pills, all-caps */
.dm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--dm-r-pill);
  font-family: var(--dm-font-subhead);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all var(--dm-t-fast) var(--dm-ease);
  white-space: nowrap;
  border: 1px solid transparent;
  user-select: none;
}
.dm-btn-primary {
  background: var(--dm-ink);
  color: var(--dm-bg);
}
.dm-btn-primary:hover { transform: translateY(-1px); opacity: 0.9; }
.dm-btn-bone {
  background: var(--dm-bone);
  color: #1a1a1a;
}
.dm-btn-bone:hover { transform: translateY(-1px); background: var(--dm-bone-soft); }
.dm-btn-ghost {
  background: transparent;
  border-color: var(--dm-border);
  color: var(--dm-ink);
}
.dm-btn-ghost:hover { border-color: var(--dm-ink); background: var(--dm-bone-dim-08); }
.dm-btn-lg { padding: 18px 30px; font-size: 15px; }
.dm-btn .arrow { display: inline-block; transition: transform var(--dm-t-fast) var(--dm-ease); }
.dm-btn:hover .arrow { transform: translateX(4px); }

/* PAGE PADDING */
.dm-pad { padding-left: var(--dm-page-pad-x); padding-right: var(--dm-page-pad-x); }
.dm-section { padding-top: clamp(60px, 9vw, 140px); padding-bottom: clamp(60px, 9vw, 140px); }

/* PLACEHOLDER IMAGERY — bone-tinted gradient with dotted frame */
.dm-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--dm-surface-2) 0%, var(--dm-surface) 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dm-muted);
}
.dm-placeholder .ph-lbl {
  font-family: var(--dm-font-subhead);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dm-muted-2);
  text-align: center;
  padding: 8px 14px;
  position: relative;
  z-index: 1;
}

/* Animated placeholder for cinematic hero */
.dm-placeholder.cinematic {
  background:
    radial-gradient(1200px 600px at 70% 30%, var(--dm-bone-dim-08), transparent 60%),
    radial-gradient(900px 500px at 20% 70%, rgba(255,246,225,0.04), transparent 60%),
    linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
}
.dm-placeholder.cinematic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  pointer-events: none;
}
[data-theme="light"] .dm-placeholder.cinematic {
  background:
    radial-gradient(1200px 600px at 70% 30%, rgba(20,20,20,0.06), transparent 60%),
    radial-gradient(900px 500px at 20% 70%, rgba(20,20,20,0.04), transparent 60%),
    linear-gradient(135deg, #e8e6db 0%, #d6d4c4 100%);
}

/* Drift animation for hero placeholder */
.dm-drift {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at var(--x, 50%) var(--y, 50%), var(--dm-bone-dim-12), transparent 60%);
  animation: dm-drift 12s ease-in-out infinite alternate;
}
@keyframes dm-drift {
  0%   { --x: 30%; --y: 40%; transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { --x: 70%; --y: 65%; transform: scale(1); }
}

/* MARQUEE */
.dm-marquee {
  display: flex;
  overflow: hidden;
  border-top: 1px solid var(--dm-border);
  border-bottom: 1px solid var(--dm-border);
  background: var(--dm-bg);
}
.dm-marquee-track {
  display: flex;
  gap: 60px;
  padding: 22px 30px;
  flex-shrink: 0;
  animation: dm-scroll 40s linear infinite;
  white-space: nowrap;
}
@keyframes dm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.dm-marquee:hover .dm-marquee-track { animation-play-state: paused; }
.dm-marquee-item {
  font-family: var(--dm-font-display);
  font-size: clamp(36px, 5vw, 64px);
  text-transform: uppercase;
  color: var(--dm-ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.dm-marquee-item.bone { color: var(--dm-bone); }
.dm-marquee-item.outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--dm-ink);
}
.dm-marquee-star {
  font-family: var(--dm-font-display);
  font-size: clamp(36px, 5vw, 64px);
  color: var(--dm-bone);
  display: inline-flex;
  align-items: center;
}

/* DIVIDERS */
.dm-rule { height: 1px; background: var(--dm-border); width: 100%; }

/* FORMS */
.dm-input,
.dm-textarea,
.dm-select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--dm-border);
  color: var(--dm-ink);
  padding: 16px 0;
  font-family: var(--dm-font-body);
  font-size: 16px;
  outline: none;
  transition: border-color var(--dm-t-fast) var(--dm-ease);
}
.dm-input:focus,
.dm-textarea:focus,
.dm-select:focus { border-bottom-color: var(--dm-ink); }
.dm-input::placeholder,
.dm-textarea::placeholder { color: var(--dm-muted-2); }
.dm-field-label {
  font-family: var(--dm-font-subhead);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--dm-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--dm-muted);
  display: block;
  margin-bottom: 4px;
}

/* PAGE TRANSITION */
.dm-page-enter { animation: dm-fade-in 0.4s var(--dm-ease) both; }
@keyframes dm-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* COMPARISON ROW DETAIL REVEAL */
.dm-row-detail { animation: dm-row-reveal 0.32s var(--dm-ease) both; }
@keyframes dm-row-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* SELECTION */
::selection { background: var(--dm-bone); color: #0a0a0a; }

/* SCROLLBAR */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--dm-bg); }
::-webkit-scrollbar-thumb { background: var(--dm-surface-2); border-radius: 6px; border: 3px solid var(--dm-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--dm-surface-3); }

/* =================================================================
   RESPONSIVE / MOBILE
   Helper classes collapse inline-style grids on small screens.
   Apply .dm-stack to any grid that should become a single column,
   .dm-stack-2 to drop to two columns.
   ================================================================= */

/* Default: desktop nav shown, mobile chrome hidden */
.dm-nav-desktop { display: flex; }
.dm-mobile-toggle { display: none; }
.dm-mobile-menu { display: none; }

@media (max-width: 880px) {
  /* --- NAV: swap mega-menu bar for hamburger --- */
  .dm-nav-desktop { display: none !important; }
  .dm-mobile-toggle { display: inline-flex !important; }
  .dm-mega { display: none !important; }

  /* --- Collapse structural grids --- */
  .dm-stack { grid-template-columns: 1fr !important; }
  .dm-stack-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .dm-grid2-keep { grid-template-columns: repeat(2, 1fr) !important; }
  .dm-stack .dm-sticky,
  .dm-stack [style*="position: sticky"],
  .dm-stack [style*="position:sticky"] { position: static !important; top: auto !important; }

  /* Home bento → single column, children full width */
  .dm-bento { grid-template-columns: 1fr !important; }
  .dm-bento > * { grid-column: auto !important; aspect-ratio: auto !important; min-height: 360px; }
}

@media (max-width: 560px) {
  :root {
    --dm-page-pad-x: 18px;
    --dm-nav-h: 56px;
  }
  /* Tighten the editorial type scale on phones */
  :root {
    --dm-fs-mega:    clamp(60px, 17vw, 110px);
    --dm-fs-hero:    clamp(44px, 15vw, 80px);
    --dm-fs-display: clamp(34px, 11vw, 60px);
    --dm-fs-h1:      clamp(28px, 8vw, 44px);
    --dm-fs-h2:      clamp(22px, 6vw, 32px);
  }
  .dm-section { padding-top: clamp(48px, 12vw, 80px); padding-bottom: clamp(48px, 12vw, 80px); }

  /* Phone: drop two-col stat/card grids to one column too */
  .dm-stack-2 { grid-template-columns: 1fr !important; }
  .dm-stack-phone { grid-template-columns: 1fr !important; }

  /* Make primary buttons full-width and easy to tap */
  .dm-btn-block-phone { width: 100%; justify-content: center; }

  /* Tables that scroll horizontally on phones */
  .dm-scroll-x { overflow-x: auto !important; overflow-y: visible; -webkit-overflow-scrolling: touch; }
  .dm-scroll-x > * { min-width: 540px; }

  /* Comparison table → stacked, no side-scroll: feature name on its own
     line, the three tier values in a row beneath it */
  .dm-compare-row { grid-template-columns: 1fr 1fr 1fr !important; }
  .dm-compare-row > :first-child {
    grid-column: 1 / -1 !important;
    border-left: 0 !important;
    text-align: left !important;
  }
  .dm-compare-row > div { padding: 12px 10px !important; }
  .dm-compare-price { font-size: 17px !important; }
}

/* =================================================================
   MOBILE MENU OVERLAY
   ================================================================= */
@media (max-width: 880px) {
  .dm-mobile-menu {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--dm-bg);
    padding: calc(var(--dm-nav-h) + 24px) var(--dm-page-pad-x) 40px;
    transition: transform 0.4s var(--dm-ease), opacity 0.3s var(--dm-ease);
    overflow-y: auto;
  }
}
.dm-mobile-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--dm-border);
  font-family: var(--dm-font-display);
  font-size: clamp(34px, 11vw, 54px);
  text-transform: uppercase;
  letter-spacing: var(--dm-tracking-display);
  color: var(--dm-ink);
  line-height: 1;
  transition: color var(--dm-t-fast) var(--dm-ease), padding-left var(--dm-t-fast) var(--dm-ease);
}
.dm-mobile-link:hover,
.dm-mobile-link:active { color: var(--dm-bone); padding-left: 8px; }
.dm-mobile-link .tag {
  font-family: var(--dm-font-subhead);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--dm-muted);
  white-space: nowrap;
}

/* Hamburger icon lines */
.dm-burger {
  width: 24px;
  height: 16px;
  position: relative;
  flex-shrink: 0;
}
.dm-burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--dm-ease), opacity 0.2s var(--dm-ease), top 0.3s var(--dm-ease);
}
.dm-burger span:nth-child(1) { top: 0; }
.dm-burger span:nth-child(2) { top: 7px; }
.dm-burger span:nth-child(3) { top: 14px; }
.dm-burger.open span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.dm-burger.open span:nth-child(2) { opacity: 0; }
.dm-burger.open span:nth-child(3) { top: 7px; transform: rotate(-45deg); }